diff --git a/src/ipc/types.ts b/src/ipc/types.ts
index fb031073..e41574ec 100644
--- a/src/ipc/types.ts
+++ b/src/ipc/types.ts
@@ -25,6 +25,7 @@ export interface Config {
   stashScroll: boolean
   subdomain: string
   widgets: Widget[]
+  fontSize: number
 }
 
 interface Widget {
@@ -81,6 +82,7 @@ export const defaultConfig: Config = {
   searchStatRange: 10,
   stashScroll: true,
   subdomain: 'us',
+  fontSize: 16,
   widgets: [
     // --- REQUIRED ---
     {
diff --git a/src/main/SettingsWindow.ts b/src/main/SettingsWindow.ts
index 650af922..467843c8 100644
--- a/src/main/SettingsWindow.ts
+++ b/src/main/SettingsWindow.ts
@@ -2,6 +2,7 @@ import path from 'path'
 import { BrowserWindow, dialog } from 'electron'
 import { PoeWindow } from './PoeWindow'
 import { isInteractable } from './overlay-window'
+import { config } from './config'
 
 let settingsWindow: BrowserWindow | undefined
 
@@ -29,14 +30,15 @@ export function createWindow () {
   }
 
   settingsWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
+    width: 50 * config.get('fontSize'),
+    height: 37.5 * config.get('fontSize'),
     icon: path.join(__static, 'icon.png'),
     fullscreenable: false,
     frame: false,
     backgroundColor: '#2d3748', // gray-800
     webPreferences: {
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION as any
+      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION as any,
+      defaultFontSize: config.get('fontSize')
     }
   })
 
diff --git a/src/main/builtin-browser.ts b/src/main/builtin-browser.ts
index 1f248658..98abe370 100644
--- a/src/main/builtin-browser.ts
+++ b/src/main/builtin-browser.ts
@@ -3,8 +3,9 @@ import * as ipc from '@/ipc/ipc-event'
 import { DPR, overlayWindow, handleExtraCommands } from './overlay-window'
 import { PoeWindow } from './PoeWindow'
 import { logger } from './logger'
+import { config } from './config'
 
-const WIDTH_96DPI = 460
+const WIDTH_96DPI = 460 / 16
 
 let browserViewExternal: BrowserView | undefined
 
@@ -12,7 +13,7 @@ export function setupBuiltinBrowser () {
   ipcMain.on(ipc.SHOW_BROWSER, (e, opts: ipc.IpcShowBrowser) => {
     logger.debug('Show', { source: 'builtin-browser', opts })
     if (!browserViewExternal) {
-      browserViewExternal = new BrowserView()
+      browserViewExternal = new BrowserView({ webPreferences: { zoomFactor: config.get('fontSize') / 16 } })
       // hopefully someday this will enable subpixel AA
       // browserViewExternal.setBackgroundColor('#2d3748') // gray-800
       browserViewExternal.webContents.on('before-input-event', handleExtraCommands)
@@ -22,7 +23,7 @@ export function setupBuiltinBrowser () {
     let browserBounds = {
       x: 0,
       y: 0,
-      width: PoeWindow.bounds!.width - Math.floor(WIDTH_96DPI * DPR),
+      width: PoeWindow.bounds!.width - Math.floor(WIDTH_96DPI * DPR * config.get('fontSize')),
       height: PoeWindow.bounds!.height
     }
     if (process.platform === 'win32') {
diff --git a/src/main/config.ts b/src/main/config.ts
index bba02a4a..0985b547 100644
--- a/src/main/config.ts
+++ b/src/main/config.ts
@@ -42,6 +42,10 @@ export const config = (() => {
     }
   }
 
+  if (typeof config.get('fontSize') !== 'number') {
+    config.set('fontSize', defaultConfig.fontSize)
+  }
+
   return config
 })()
 
diff --git a/src/main/overlay-window.ts b/src/main/overlay-window.ts
index 61c213d8..3e99262f 100644
--- a/src/main/overlay-window.ts
+++ b/src/main/overlay-window.ts
@@ -31,7 +31,8 @@ export async function createOverlayWindow () {
     // backgroundColor: '#00000008',
     webPreferences: {
       nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION as any,
-      webSecurity: false
+      webSecurity: false,
+      defaultFontSize: config.get('fontSize')
     }
   })
 
diff --git a/src/main/price-check.ts b/src/main/price-check.ts
index d300f67e..3073662e 100644
--- a/src/main/price-check.ts
+++ b/src/main/price-check.ts
@@ -7,8 +7,8 @@ import { config } from './config'
 import { logger } from './logger'
 import { overlayWindow, isInteractable, assertOverlayActive, assertPoEActive, DPR } from './overlay-window'
 
-const WIDTH_96DPI = 460
-const CLOSE_THRESHOLD_96DPI = 40
+const WIDTH_96DPI = 460 / 16
+const CLOSE_THRESHOLD_96DPI = 40 / 16
 
 let isPriceCheckShown = false
 let isClickedAfterLock = false
@@ -30,7 +30,7 @@ export function showWidget (opts: {
   activeAreaRect = {
     x: getOffsetX(checkPressPosition!, poeBounds),
     y: poeBounds.y,
-    width: Math.floor(WIDTH_96DPI * DPR),
+    width: Math.floor(WIDTH_96DPI * DPR * config.get('fontSize')),
     height: poeBounds.height
   }
 
@@ -64,7 +64,7 @@ export function setupShowHide () {
     if (!isPollingClipboard && !isInteractable && modifier !== config.get('priceCheckKeyHold')) {
       const distance = Math.hypot(e.x - checkPressPosition!.x, e.y - checkPressPosition!.y)
 
-      if (distance > (CLOSE_THRESHOLD_96DPI * DPR)) {
+      if (distance > (CLOSE_THRESHOLD_96DPI * DPR * config.get('fontSize'))) {
         logger.debug('Closing', { source: 'price-check', reason: 'Auto-hide on mouse move', distance, threshold: CLOSE_THRESHOLD_96DPI })
         overlayWindow!.webContents.send(ipc.PRICE_CHECK_CANCELED)
         isPriceCheckShown = false
@@ -124,7 +124,7 @@ function isPointInsideRect (point: Point, rect: Rectangle) {
 function getOffsetX (mousePos: Point, poePos: Rectangle): number {
   if (mousePos.x > (poePos.x + poePos.width / 2)) {
     // inventory
-    return (poePos.x + poePos.width) - PoeWindow.uiSidebarWidth - Math.floor(WIDTH_96DPI * DPR)
+    return (poePos.x + poePos.width) - PoeWindow.uiSidebarWidth - Math.floor(WIDTH_96DPI * DPR * config.get('fontSize'))
   } else {
     // stash or chat
     return poePos.x + PoeWindow.uiSidebarWidth
diff --git a/src/web/App.vue b/src/web/App.vue
index 305b54f6..7dc65ba0 100644
--- a/src/web/App.vue
+++ b/src/web/App.vue
@@ -35,15 +35,21 @@
 }
 
 ::-webkit-scrollbar {
-  width: 14px;
+  width: 0.875rem;
 }
 
 ::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  -webkit-box-shadow: inset 0 0 0.375rem rgba(0,0,0,0.3);
 }
 
 ::-webkit-scrollbar-thumb {
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+  -webkit-box-shadow: inset 0 0 0.375rem rgba(0,0,0,0.5);
+}
+
+.popper {
+  font-size: 0.875rem !important;
+  border-radius: 0.25rem !important;
+  padding: 0.125rem !important;
 }
 
 .btn {
diff --git a/src/web/map-check/WidgetMapCheck.vue b/src/web/map-check/WidgetMapCheck.vue
index 9666a407..c585b285 100644
--- a/src/web/map-check/WidgetMapCheck.vue
+++ b/src/web/map-check/WidgetMapCheck.vue
@@ -1,6 +1,6 @@
 <template>
   <widget :config="{ ...config, anchor }" move-handles="none" readonly :removable="false">
-    <div class="bg-gray-800 text-gray-200" style="min-width: 320px;" :style="{ 'max-width': `${wm.width - wm.poeUiWidth}px` }">
+    <div class="bg-gray-800 text-gray-200" style="min-width: 20rem;" :style="{ 'max-width': `${wm.width - wm.poeUiWidth}px` }">
       <div class="bg-gray-900 py-1 px-4 text-center">{{ mapName }}</div>
       <div v-if="!item" class="px-8 py-2">
         Item under cursor is not a map.
diff --git a/src/web/overlay/Widget.vue b/src/web/overlay/Widget.vue
index c7c42308..f9aecac1 100644
--- a/src/web/overlay/Widget.vue
+++ b/src/web/overlay/Widget.vue
@@ -17,15 +17,15 @@
         </div>
       </div>
       <div v-if="isMoving">
-        <div v-if="isHandleShown('tl')" :class="$style.mover" @mousedown="startMove('tl', $event)" style="left: -8px; top: -8px;"></div>
-        <div v-if="isHandleShown('tc')" :class="$style.mover" @mousedown="startMove('tc', $event)" style="left: calc(50%  - 8px); top: -8px;"></div>
-        <div v-if="isHandleShown('tr')" :class="$style.mover" @mousedown="startMove('tr', $event)" style="left: calc(100% - 8px); top: -8px;"></div>
-        <div v-if="isHandleShown('cr')" :class="$style.mover" @mousedown="startMove('cr', $event)" style="left: calc(100% - 8px); top: calc(50% - 8px);"></div>
-        <div v-if="isHandleShown('br')" :class="$style.mover" @mousedown="startMove('br', $event)" style="left: calc(100% - 8px); top: calc(100% - 8px);"></div>
-        <div v-if="isHandleShown('bc')" :class="$style.mover" @mousedown="startMove('bc', $event)" style="left: calc(50%  - 8px); top: calc(100% - 8px);"></div>
-        <div v-if="isHandleShown('bl')" :class="$style.mover" @mousedown="startMove('bl', $event)" style="left: -8px; top: calc(100% - 8px);"></div>
-        <div v-if="isHandleShown('cl')" :class="$style.mover" @mousedown="startMove('cl', $event)" style="left: -8px; top: calc(50%  - 8px);"></div>
-        <div v-if="isHandleShown('cc')" :class="$style.mover" @mousedown="startMove('cc', $event)" style="left: calc(50%  - 8px); top: calc(50%  - 8px);"></div>
+        <div v-if="isHandleShown('tl')" :class="$style.mover" @mousedown="startMove('tl', $event)" style="left: -0.5rem; top: -0.5rem;"></div>
+        <div v-if="isHandleShown('tc')" :class="$style.mover" @mousedown="startMove('tc', $event)" style="left: calc(50%  - 0.5rem); top: -0.5rem;"></div>
+        <div v-if="isHandleShown('tr')" :class="$style.mover" @mousedown="startMove('tr', $event)" style="left: calc(100% - 0.5rem); top: -0.5rem;"></div>
+        <div v-if="isHandleShown('cr')" :class="$style.mover" @mousedown="startMove('cr', $event)" style="left: calc(100% - 0.5rem); top: calc(50% - 0.5rem);"></div>
+        <div v-if="isHandleShown('br')" :class="$style.mover" @mousedown="startMove('br', $event)" style="left: calc(100% - 0.5rem); top: calc(100% - 0.5rem);"></div>
+        <div v-if="isHandleShown('bc')" :class="$style.mover" @mousedown="startMove('bc', $event)" style="left: calc(50%  - 0.5rem); top: calc(100% - 0.5rem);"></div>
+        <div v-if="isHandleShown('bl')" :class="$style.mover" @mousedown="startMove('bl', $event)" style="left: -0.5rem; top: calc(100% - 0.5rem);"></div>
+        <div v-if="isHandleShown('cl')" :class="$style.mover" @mousedown="startMove('cl', $event)" style="left: -0.5rem; top: calc(50%  - 0.5rem);"></div>
+        <div v-if="isHandleShown('cc')" :class="$style.mover" @mousedown="startMove('cc', $event)" style="left: calc(50%  - 0.5rem); top: calc(50%  - 0.5rem);"></div>
       </div>
     </div>
     <div v-if="isMoving" :class="[$style.mover, $style.active]" :style="moverPosition" @mousedown="startMove(anchor.pos, $event)"></div>
@@ -70,8 +70,8 @@ export default {
     },
     moverPosition () {
       return {
-        'top': `max(0%, min(calc(${this.anchor.y}% - (16px/2)), calc(100% - 16px)))`,
-        'left': `max(0%, min(calc(${this.anchor.x}% - (16px/2)), calc(100% - 16px)))`,
+        'top': `max(0%, min(calc(${this.anchor.y}% - (1rem/2)), calc(100% - 1rem)))`,
+        'left': `max(0%, min(calc(${this.anchor.x}% - (1rem/2)), calc(100% - 1rem)))`,
         'z-index': this.config.wmZorder
       }
     },
@@ -209,7 +209,7 @@ export default {
 }
 
 .actionsPanel {
-  padding: 0.25rem 0;
+  @apply py-1;
   color: #fff;
   background: rgba(0,0,0, 0.25);
   display: flex;
@@ -218,7 +218,7 @@ export default {
 }
 
 .action {
-  padding: 0 4px;
+  @apply px-1;
   text-align: left;
 
   &:hover {
@@ -244,11 +244,11 @@ export default {
 
 .mover {
   position: absolute;
-  /* top: max(0%, min(calc(y% - (16px/2)), calc(100% - 16px))); */
-  /* left: max(0%, min(calc(x% - (16px/2)), calc(100% - 16px))); */
-  width: 16px;
-  height: 16px;
-  border: 4px solid rgba(0, 0, 0, 0.5);
+  /* top: max(0%, min(calc(y% - (1rem/2)), calc(100% - 1rem))); */
+  /* left: max(0%, min(calc(x% - (1rem/2)), calc(100% - 1rem))); */
+  width: 1rem;
+  height: 1rem;
+  border: 0.25rem solid rgba(0, 0, 0, 0.5);
   cursor: move;
   user-select: none;
 
diff --git a/src/web/price-check/CheckPositionCircle.vue b/src/web/price-check/CheckPositionCircle.vue
index 2c39529e..659a7dcf 100644
--- a/src/web/price-check/CheckPositionCircle.vue
+++ b/src/web/price-check/CheckPositionCircle.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="absolute rounded-full" :style="{
-      top: `${position.y - 40}px`,
-      left: `${position.x - 40}px`,
-      width: '80px',
-      height: '80px',
+      top: `calc(${position.y}px - 2.5rem)`,
+      left: `calc(${position.x}px - 2.5rem)`,
+      width: '5rem',
+      height: '5rem',
       background: 'rgba(255,255,255,0.35)'
     }" style="box-shadow: 0 1px 3px 0 rgb(0, 0, 0), 0 1px 2px 0 rgb(0, 0, 0);">
     <div class="relative rounded-full" :style="{
-      top: `30px`,
-      left: `30px`,
-      width: '20px',
-      height: '20px',
+      top: `1.875rem`,
+      left: `1.875rem`,
+      width: '1.25rem',
+      height: '1.25rem',
       background: 'rgba(255,255,255,0.5)'
     }"></div>
   </div>
diff --git a/src/web/price-check/PriceCheckWindow.vue b/src/web/price-check/PriceCheckWindow.vue
index 0cb76a85..48822dc8 100644
--- a/src/web/price-check/PriceCheckWindow.vue
+++ b/src/web/price-check/PriceCheckWindow.vue
@@ -8,7 +8,7 @@
     <div v-if="!isBrowserShown" class="layout-column flex-shrink-0"
       :style="{ width: `${wm.poeUiWidth}px` }">
     </div>
-    <div id="price-window" class="layout-column flex-shrink-0 text-gray-200" style="width: 460px;">
+    <div id="price-window" class="layout-column flex-shrink-0 text-gray-200" style="width: 28.75rem;">
       <app-titlebar @close="closePriceCheck" :title="title">
         <div class="flex">
           <ui-popper v-if="exaltedCost" trigger="clickToToggle" boundaries-selector="#price-window">
diff --git a/src/web/price-check/filters/FilterModifier.vue b/src/web/price-check/filters/FilterModifier.vue
index e52c9393..4d00be30 100644
--- a/src/web/price-check/filters/FilterModifier.vue
+++ b/src/web/price-check/filters/FilterModifier.vue
@@ -31,7 +31,7 @@
             </span>
           </template>
           <div class="popper">
-            <div style="max-width: 300px;">{{ filter.hidden }}</div>
+            <div style="max-width: 18.75rem;">{{ filter.hidden }}</div>
           </div>
         </ui-popper>
       </div>
@@ -42,9 +42,9 @@
           class="text-xs leading-none px-1 rounded mod-type-variant">variant</span>
       </div>
       <div class="flex-1 mr-4">
-        <div style="width: 200px;">
+        <div style="width: 12.5rem;">
           <ui-slider v-if="filter.boundMin !== undefined"
-            class="search-slider-rail" style="padding: 0;" :dotSize="[0, 20]" :height="20"
+            class="search-slider-rail" style="padding: 0;" :dotSize="[0, 1.25*fontSize]" :height="1.25*fontSize"
             :railStyle="{ background: 'transparent' }" :processStyle="{ background: '#cbd5e0', borderRadius: 0 }"
             drag-on-click lazy adsorb :enable-cross="false"
 
@@ -69,14 +69,15 @@
         </div>
       </div>
       <div v-if="showQ20Notice"
-        class="bg-gray-700 text-gray-500 text-center rounded-b" style="width: 97px">Q {{ Math.max(20, item.quality || 0) }}%</div>
-      <div v-else style="width: 97px"></div>
+        class="bg-gray-700 text-gray-500 text-center rounded-b" style="width: calc(2*3rem + 1px)">Q {{ Math.max(20, item.quality || 0) }}%</div>
+      <div v-else style="width: calc(2*3rem + 1px)"></div>
     </div>
   </div>
 </template>
 
 <script>
 import ItemModifierText from '../../ui/ItemModifierText'
+import { Config } from '@/web/Config'
 
 export default {
   components: { ItemModifierText },
@@ -136,6 +137,9 @@ export default {
         }
         this.filter.disabled = false
       }
+    },
+    fontSize () {
+      return Config.store.fontSize
     }
   },
   methods: {
@@ -196,7 +200,7 @@ export default {
 
   &::placeholder {
     @apply text-gray-700;
-    font-size: 13px;
+    font-size: 0.8125rem;
   }
 
   /* &:not(:placeholder-shown) { @apply border-gray-600; } */
@@ -238,10 +242,20 @@ export default {
 
 .search-slider-rail { @apply rounded bg-gray-700; }
 .vue-slider-marks { display: flex; }
+.vue-slider-dot-tooltip-inner {
+  font-size: 0.875rem;
+  padding: 0.125rem 0.3125rem;
+  min-width: 1.25rem;
+  border-radius: 0.25rem;
+
+  &::after {
+    border-width: 0.3125rem;
+  }
+}
 .custom-mark {
   text-align: right;
   white-space: nowrap;
-  padding: 0 4px;
+  @apply px-1;
   @apply text-gray-500;
 
   &.active {
@@ -257,8 +271,8 @@ export default {
       content: ' ';
       display: block;
       position: absolute;
-      height: 4px;
-      width: 2px;
+      height: 0.25rem;
+      width: 0.125rem;
       @apply bg-gray-900;
     }
 
diff --git a/src/web/price-check/price-prediction/PricePrediction.vue b/src/web/price-check/price-prediction/PricePrediction.vue
index a18dac08..489c77f9 100644
--- a/src/web/price-check/price-prediction/PricePrediction.vue
+++ b/src/web/price-check/price-prediction/PricePrediction.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="{ 'min-height': !showContrib ? '70px' : undefined }">
+  <div :style="{ 'min-height': !showContrib ? '4.375rem' : undefined }">
     <div v-if="loading" class="py-2 flex justify-center pr-4">
       <div>
         <i class="fas fa-dna fa-spin text-gray-600"></i>
diff --git a/src/web/price-check/related-items/RelatedItems.vue b/src/web/price-check/related-items/RelatedItems.vue
index f2eab5a2..15dcfc93 100644
--- a/src/web/price-check/related-items/RelatedItems.vue
+++ b/src/web/price-check/related-items/RelatedItems.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="result" class="flex max-w-full bg-gray-800 text-gray-400 mt-6 border border-gray-900" style="border-width: 4px;">
+  <div v-if="result" class="flex max-w-full bg-gray-800 text-gray-400 mt-6 border border-gray-900" style="border-width: 0.25rem;">
     <div class="flex-1 p-2 w-1/2">
       <div v-for="item in result.related" :key="item.detailsId"
         :class="{ 'bg-gray-700 -mx-1 px-1': item.detailsId === detailsId }" class="rounded">
diff --git a/src/web/price-check/trade/RateLimiterState.vue b/src/web/price-check/trade/RateLimiterState.vue
index e74ac191..1decd626 100644
--- a/src/web/price-check/trade/RateLimiterState.vue
+++ b/src/web/price-check/trade/RateLimiterState.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="show"
-    class="font-sans p-4 bg-gray-800 text-gray-400 mt-6 border border-gray-900" style="border-width: 4px;">
+    class="font-sans p-4 bg-gray-800 text-gray-400 mt-6 border border-gray-900" style="border-width: 0.25rem;">
     <div v-for="limit in limits" :key="limit.policy">
       <div :class="{ 'text-red-400': limit.hasQueue }">Policy: {{ limit.policy }}</div>
       <div>
diff --git a/src/web/price-check/trade/TradeBulk.vue b/src/web/price-check/trade/TradeBulk.vue
index 3218be38..63d8977b 100644
--- a/src/web/price-check/trade/TradeBulk.vue
+++ b/src/web/price-check/trade/TradeBulk.vue
@@ -1,6 +1,7 @@
 <template>
   <div v-if="!error" class="layout-column flex-grow min-h-0">
-    <div class="mb-2 flex pl-2 justify-between items-baseline" style="min-height: 22px;">
+    <!-- @TODO: fix "Matched" text jumping (min-height: 22px) -->
+    <div class="mb-2 flex pl-2 justify-between items-baseline" style="min-height: 1.375rem;">
       <div class="flex items-center text-gray-500">
         <span class="mr-1">Matched:</span>
         <span v-if="!result" class="text-gray-600">...</span>
@@ -31,7 +32,7 @@
               <div class="px-2">Price</div>
             </th>
             <th class="trade-table-heading">
-              <div class="pl-1 pr-2 flex text-xs" style="line-height: 21px;"><span class="w-8 inline-block text-right -ml-px mr-px">{{ selectedCurr }}</span><span>{{ '\u2009' }}/{{ '\u2009' }}</span><span class="w-8 inline-block">bulk</span></div>
+              <div class="pl-1 pr-2 flex text-xs" style="line-height: 1.3125rem;"><span class="w-8 inline-block text-right -ml-px mr-px">{{ selectedCurr }}</span><span>{{ '\u2009' }}/{{ '\u2009' }}</span><span class="w-8 inline-block">bulk</span></div>
             </th>
             <th class="trade-table-heading">
               <div class="px-1">Stock</div>
@@ -166,10 +167,10 @@ export default {
 
 <style lang="postcss">
 .trade-bulk-currency-icon {
-  width: 28px;
-  height: 28px;
-  margin: -7px;
-  margin-right: 2px;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin: -0.4375rem;
+  margin-right: 0.125rem;
   filter: grayscale(1);
 }
 </style>
diff --git a/src/web/settings/SettingsWindow.vue b/src/web/settings/SettingsWindow.vue
index a7c09a36..4929def3 100644
--- a/src/web/settings/SettingsWindow.vue
+++ b/src/web/settings/SettingsWindow.vue
@@ -7,7 +7,7 @@
         <router-link :to="{ name: 'settings.general' }" class="menu-item">General</router-link>
         <router-link :to="{ name: 'settings.maps' }" class="menu-item">Maps</router-link>
         <router-link :to="{ name: 'settings.debug' }" class="menu-item">Debug</router-link>
-        <div style="min-width: 150px;"></div>
+        <div style="min-width: 9.5rem;"></div>
       </div>
       <div class="text-gray-100 flex-grow layout-column">
         <div class="flex-grow overflow-y-auto">
@@ -44,11 +44,11 @@ export default {
 <style lang="postcss">
 .menu-item {
   text-align: left;
-  padding: 8px;
+  @apply p-2;
   line-height: 1;
   @apply text-gray-600;
   @apply rounded;
-  margin-bottom: 2px;
+  margin-bottom: 0.125rem;
 
   &:hover {
     @apply text-gray-100;
diff --git a/src/web/settings/general.vue b/src/web/settings/general.vue
index 4bfdc786..1dec1340 100644
--- a/src/web/settings/general.vue
+++ b/src/web/settings/general.vue
@@ -22,6 +22,13 @@
         <ui-radio v-model="config.searchStatRange" :value="0">Exact roll</ui-radio>
       </div>
     </div>
+    <div class="mb-2">
+      <div class="flex-1 mb-1">Font size <span class="bg-gray-200 text-gray-900 rounded px-1">Restart required</span></div>
+      <div class="mb-4 flex">
+        <input v-model.number="config.fontSize" class="rounded bg-gray-900 px-1 block w-16 mb-1 font-fontin-regular text-center" />
+        <span class="ml-1">px</span>
+      </div>
+    </div>
     <!--div class="mb-2">
       <div class="flex-1 mb-1">Trade API Subdomain</div>
       <div class="mb-4 flex">
diff --git a/src/web/ui/UiToggle.vue b/src/web/ui/UiToggle.vue
index 787e6ee1..1b8e7f10 100644
--- a/src/web/ui/UiToggle.vue
+++ b/src/web/ui/UiToggle.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    @click="updateInput" class="flex items-center" style="height: 22px;">
+    @click="updateInput" class="flex items-center" style="height: 1.375rem;">
     <i v-if="value" class="fas fa-toggle-on pr-1 text-gray-300"></i>
     <i v-else class="fas fa-toggle-off pr-1 text-gray-600"></i>
     <slot />