diff --git a/frontend/sass/index.scss b/frontend/sass/index.scss
index 6f3eab2..b6179d5 100644
--- a/frontend/sass/index.scss
+++ b/frontend/sass/index.scss
@@ -1,128 +1,132 @@
+:root {
+	--nav-width: 48px;
+}
+
 body {
-    display: flex;
-    flex-direction: row;
+	display: flex;
+	flex-direction: row;
 }
 
 #navigation {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 48px;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: var(--nav-width);
 }
 
 #navigation > :not(#service-buttons) {
-    flex-shrink: 0;
+	flex-shrink: 0;
 }
 
 #service-buttons {
-    flex-grow: 1;
+	flex-grow: 1;
 
-    overflow: hidden auto;
+	overflow: hidden auto;
 }
 
 #service-selector {
-    display: block;
-    margin: 0;
-    padding: 0;
+	display: block;
+	margin: 0;
+	padding: 0;
 
-    list-style: none;
+	list-style: none;
 }
 
 #service-selector::-webkit-scrollbar {
-    width: 6px;
+	width: 6px;
 }
 
 #service-selector [draggable] {
-    user-select: none;
-    background-color: rgb(43, 43, 43);
+	user-select: none;
+	background-color: rgb(43, 43, 43);
 }
 
 #service-selector [draggable] img {
-    -webkit-user-drag: none;
-    user-drag: none;
+	-webkit-user-drag: none;
+	user-drag: none;
 }
 
 #service-selector .drag-target button::after,
 #service-last-drag-position.drag-target {
-    content: "";
-    height: 4px;
-    transform: translateY(-50%);
-    border: 0;
-    box-sizing: border-box;
-    background: #fff9;
+	content: "";
+	height: 4px;
+	transform: translateY(-50%);
+	border: 0;
+	box-sizing: border-box;
+	background: #fff9;
 }
 
 #service-selector .drag-target-self button::after {
-    height: 48px;
-    border: 1px dashed #fff;
-    transform: none;
+	height: var(--nav-width);
+	border: 1px dashed #fff;
+	transform: none;
 }
 
 #service-selector .drag-target button::after {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
 }
 
 #service-selector .drag-target::after {
-    top: 75% !important;
+	top: 75% !important;
 }
 
 *:focus {
-    outline-color: rgb(118, 93, 176);
+	outline-color: rgb(118, 93, 176);
 }
 
 #navigation button {
-    position: relative;
-    display: block;
-    width: 48px;
-    height: 48px;
-    margin: 0;
-    padding: 0;
+	position: relative;
+	display: block;
+	width: var(--nav-width);
+	height: var(--nav-width);
+	margin: 0;
+	padding: 0;
 
-    color: #fff;
-    border: 0;
-    background: transparent;
+	color: #fff;
+	border: 0;
+	background: transparent;
 
-    cursor: pointer;
+	cursor: pointer;
 }
 
 #navigation button:focus {
-    outline: none;
-    background: #fff3 !important;
+	outline: none;
+	background: #fff3 !important;
 }
 
 #navigation button img {
-    width: 24px;
+	width: calc(var(--nav-width) / 2);
 }
 
 #navigation button i {
-    font-size: 24px;
+	font-size: calc(var(--nav-width) / 2);
 }
 
 #service-selector li {
-    position: relative;
+	position: relative;
 }
 
 #service-selector li button,
 #navigation > button {
-    border-radius: 0;
+	border-radius: 0;
 }
 
 #service-selector li.active button {
-    background-color: #fff2;
+	background-color: #fff2;
 }
 
 #service-selector li.loaded button::before {
-    content: "";
-    display: block;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    height: 75%;
-    border-right: 4px solid #ffffff3e;
+	content: "";
+	display: block;
+	position: absolute;
+	right: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	height: 75%;
+	border-right: 4px solid #ffffff3e;
 }
 
 /*#service-selector li.loaded::after {*/
@@ -139,206 +143,206 @@ body {
 /*}*/
 
 #navigation button:hover {
-    background-color: #fff3;
+	background-color: #fff3;
 }
 
 #history {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 2px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 2px;
 }
 
 #history button,
 #history .status {
-    display: inline;
-    width: 24px;
-    height: 24px;
-    margin: 2px;
-    padding: initial;
-    font-size: 12px;
+	display: inline;
+	width: calc(var(--nav-width) / 2);
+	height: calc(var(--nav-width) / 2);
+	margin: 2px;
+	padding: initial;
+	font-size: calc(var(--nav-width) / 4);
 
-    background: #fff1;
+	background: #fff1;
 
-    color: #fff;
-    cursor: pointer;
+	color: #fff;
+	cursor: pointer;
 
-    border-radius: 3px;
+	border-radius: 3px;
 }
 
 #history button i {
-    font-size: inherit;
+	font-size: inherit;
 }
 
 #history button.disabled {
-    color: #888;
-    border: transparent;
-    background: transparent;
-    cursor: initial;
+	color: #888;
+	border: transparent;
+	background: transparent;
+	cursor: initial;
 }
 
 #history button:focus,
 #history button:hover {
-    outline: none;
-    border-color: #fff9;
+	outline: none;
+	border-color: #fff9;
 }
 
 #history button:hover:not(.disabled) {
-    outline: none;
-    background-color: #fff2;
+	outline: none;
+	background-color: #fff2;
 }
 
 #history button:active:not(.disabled) {
-    background-color: #fff4;
+	background-color: #fff4;
 }
 
 #history #status {
-    background: transparent;
+	background: transparent;
 }
 
 #history #status .unknown,
 #history #status .file {
-    color: #888;
+	color: #888;
 }
 
 #history #status .https {
-    color: #009800;
+	color: #009800;
 }
 
 #history #status .http {
-    color: #e20000;
+	color: #e20000;
 }
 
 #history #status > :not(.active) {
-    display: none;
+	display: none;
 }
 
 #history #status > * .tip {
-    position: absolute;
-    z-index: 1;
-    left: 100%;
-    top: 50%;
-    transform: translateY(-50%);
-    display: none;
-    margin-left: 8px;
+	position: absolute;
+	z-index: 1;
+	left: 100%;
+	top: 50%;
+	transform: translateY(-50%);
+	display: none;
+	margin-left: 8px;
 
-    background-color: #000;
-    padding: 8px;
-    border-radius: 4px;
-    white-space: nowrap;
-    color: #fff;
-    text-transform: none;
-    font-family: sans-serif;
-    font-size: 16px;
-    font-weight: 100;
+	background-color: #000;
+	padding: 8px;
+	border-radius: 4px;
+	white-space: nowrap;
+	color: #fff;
+	text-transform: none;
+	font-family: sans-serif;
+	font-size: 16px;
+	font-weight: 100;
 }
 
 #history #status > * .tip::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translate(-100%, -50%);
-    display: inline-block;
-    width: 0;
-    height: 0;
-    border: 0 solid transparent;
-    border-top-width: 4px;
-    border-bottom-width: 4px;
-    border-right: 7px solid black;
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translate(-100%, -50%);
+	display: inline-block;
+	width: 0;
+	height: 0;
+	border: 0 solid transparent;
+	border-top-width: 4px;
+	border-bottom-width: 4px;
+	border-right: 7px solid black;
 }
 
 #history #status:focus > * .tip {
-    display: block;
+	display: block;
 }
 
 #navigation #add-button:not(:hover) {
-    opacity: 0.75;
+	opacity: 0.75;
 }
 
 #services {
-    position: relative;
-    flex-grow: 1;
+	position: relative;
+	flex-grow: 1;
 }
 
 #services > *:not(.loader):not(#url-preview) {
-    height: 100%;
+	height: 100%;
 }
 
 #services > :not(.active):not(.loader):not(#url-preview):not(webview) {
-    display: none;
+	display: none;
 }
 
 #services > webview {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 10;
-    background-color: rgb(43, 43, 43);
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	z-index: 10;
+	background-color: rgb(43, 43, 43);
 }
 
 #services > webview.active {
-    z-index: 20;
+	z-index: 20;
 }
 
 #services > .loader {
-    width: 64px;
-    height: 64px;
+	width: 64px;
+	height: 64px;
 
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: -1;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	z-index: -1;
 }
 
 #url-preview {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    display: block;
-    padding: 2px 5px 1px 5px;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	display: block;
+	padding: 2px 5px 1px 5px;
 
-    max-width: 48%;
-    overflow: hidden;
-    text-overflow: ellipsis;
+	max-width: 48%;
+	overflow: hidden;
+	text-overflow: ellipsis;
 
-    font-family: monospace;
+	font-family: monospace;
 
-    border-width: 1px 1px 0 0;
-    border-color: #232323;
-    border-style: solid;
-    border-radius: 0 5px 0 0;
+	border-width: 1px 1px 0 0;
+	border-color: #232323;
+	border-style: solid;
+	border-radius: 0 5px 0 0;
 
-    background: #2b2b2b;
+	background: #2b2b2b;
 
-    opacity: 1;
-    transition: 100ms ease opacity;
-    transition-delay: 200ms;
+	opacity: 1;
+	transition: 100ms ease opacity;
+	transition-delay: 200ms;
 }
 
 #url-preview.right {
-    left: auto;
-    right: 0;
+	left: auto;
+	right: 0;
 
-    border-width: 1px 0 0 1px;
-    border-radius: 5px 0 0 0;
+	border-width: 1px 0 0 1px;
+	border-radius: 5px 0 0 0;
 }
 
 #url-preview.hidden {
-    opacity: 0;
+	opacity: 0;
 }
 
 #services > #empty-message {
-    display: flex !important;
-    position: absolute;
-    z-index: -1;
-    bottom: 0;
-    width: 100%;
-    justify-content: center;
-    align-items: center;
+	display: flex !important;
+	position: absolute;
+	z-index: -1;
+	bottom: 0;
+	width: 100%;
+	justify-content: center;
+	align-items: center;
 }
 
 #services > .loader:not(.hidden) ~ #empty-message {
-    display: none !important;
+	display: none !important;
 }
\ No newline at end of file
diff --git a/frontend/settings.html b/frontend/settings.html
index 540ed32..1190c7b 100644
--- a/frontend/settings.html
+++ b/frontend/settings.html
@@ -35,6 +35,12 @@
             <label class="form-group"><input type="checkbox" name="start-minimized" id="start-minimized"> Start minimized in system tray</label>
         </section>
 
+        <section>
+            <h2 class="form-header">Appearance</h2>
+
+            <label class="form-group"><input type="checkbox" name="big-nav-bar" id="big-nav-bar"> Increase the size of the navigation bar</label>
+        </section>
+
         <section>
             <h2 class="form-header">History navigation buttons</h2>
 
diff --git a/frontend/ts/index.ts b/frontend/ts/index.ts
index f0eb02b..3164032 100644
--- a/frontend/ts/index.ts
+++ b/frontend/ts/index.ts
@@ -207,6 +207,9 @@ ipcRenderer.on('data', (event, appData, iconSets, actualSelectedService, emptyUr
 
     // Other elements
     serviceSelector = document.getElementById('service-selector');
+
+    // Navbar size
+    document.documentElement.style.setProperty('--nav-width', config.bigNavBar ? '64px' : '48px');
 });
 
 function removeServiceFeatures(id: number): HTMLElement | null {
diff --git a/frontend/ts/settings.ts b/frontend/ts/settings.ts
index 29a1d1e..f70cca0 100644
--- a/frontend/ts/settings.ts
+++ b/frontend/ts/settings.ts
@@ -8,6 +8,8 @@ let config: any;
 
 let startMinimizedField: HTMLInputElement | null;
 
+let bigNavBarField: HTMLInputElement | null;
+
 let securityButtonField: HTMLInputElement | null,
     homeButtonField: HTMLInputElement | null,
     backButtonField: HTMLInputElement | null,
@@ -22,6 +24,8 @@ ipcRenderer.on('config', (e, c) => {
     config = c;
     if (startMinimizedField) startMinimizedField.checked = config.startMinimized;
 
+    if (bigNavBarField) bigNavBarField.checked = config.bigNavBar;
+
     if (securityButtonField) securityButtonField.checked = config.securityButton;
     if (homeButtonField) homeButtonField.checked = config.homeButton;
     if (backButtonField) backButtonField.checked = config.backButton;
@@ -47,6 +51,8 @@ function save() {
 
     config.startMinimized = formData.get('start-minimized') === 'on';
 
+    config.bigNavBar = formData.get('big-nav-bar') === 'on';
+
     config.securityButton = formData.get('security-button') === 'on';
     config.homeButton = formData.get('home-button') === 'on';
     config.backButton = formData.get('back-button') === 'on';
@@ -55,7 +61,7 @@ function save() {
 
     ipcRenderer.send('save-config', config);
     remote.getCurrentWindow().close();
-};
+}
 
 document.addEventListener('DOMContentLoaded', () => {
     currentVersion = document.getElementById('current-version');
@@ -68,6 +74,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
     startMinimizedField = <HTMLInputElement>document.getElementById('start-minimized');
 
+    bigNavBarField = <HTMLInputElement>document.getElementById('big-nav-bar');
+
     securityButtonField = <HTMLInputElement>document.getElementById('security-button');
     homeButtonField = <HTMLInputElement>document.getElementById('home-button');
     backButtonField = <HTMLInputElement>document.getElementById('back-button');
diff --git a/src/Config.ts b/src/Config.ts
index 2262b77..b776cc3 100644
--- a/src/Config.ts
+++ b/src/Config.ts
@@ -15,6 +15,8 @@ export default class Config {
 
     public startMinimized: boolean = false;
 
+    public bigNavBar: boolean = false;
+
     public securityButton: boolean = true;
     public homeButton: boolean = false;
     public backButton: boolean = true;
@@ -50,6 +52,8 @@ export default class Config {
         
         this.defineProperty('startMinimized', data);
 
+        this.defineProperty('bigNavBar', data);
+
         this.defineProperty('securityButton', data);
         this.defineProperty('homeButton', data);
         this.defineProperty('backButton', data);