diff --git a/src/public/javascripts/dialogs/options.js b/src/public/javascripts/dialogs/options.js
index 8394d5344..8940dce6c 100644
--- a/src/public/javascripts/dialogs/options.js
+++ b/src/public/javascripts/dialogs/options.js
@@ -44,7 +44,10 @@ addTabHandler((function() {
     const $zoomFactorSelect = $("#zoom-factor-select");
     const $leftPaneMinWidth = $("#left-pane-min-width");
     const $leftPaneWidthPercent = $("#left-pane-width-percent");
-    const $html = $("html");
+    const $mainFontSize = $("#main-font-size");
+    const $treeFontSize = $("#tree-font-size");
+    const $detailFontSize = $("#detail-font-size");
+    const $body = $("body");
     const $container = $("#container");
 
     function optionsLoaded(options) {
@@ -59,21 +62,27 @@ addTabHandler((function() {
 
         $leftPaneMinWidth.val(options.leftPaneMinWidth);
         $leftPaneWidthPercent.val(options.leftPaneWidthPercent);
+
+        $mainFontSize.val(options.mainFontSize);
+        $treeFontSize.val(options.treeFontSize);
+        $detailFontSize.val(options.detailFontSize);
     }
 
     $themeSelect.change(function() {
         const newTheme = $(this).val();
 
-        $html.attr("class", "theme-" + newTheme);
+        for (const clazz of $body[0].classList) {
+            if (clazz.startsWith("theme-")) {
+                $body.removeClass(clazz);
+            }
+        }
+
+        $body.addClass("theme-" + newTheme);
 
         server.put('options/theme/' + newTheme);
     });
 
-    $zoomFactorSelect.change(function() {
-        const newZoomFactor = $(this).val();
-
-        zoomService.setZoomFactorAndSave(newZoomFactor);
-    });
+    $zoomFactorSelect.change(function() { zoomService.setZoomFactorAndSave($(this).val()); });
 
     function resizeLeftPanel() {
         const leftPanePercent = parseInt($leftPaneWidthPercent.val());
@@ -83,20 +92,42 @@ addTabHandler((function() {
         $container.css("grid-template-columns", `minmax(${leftPaneMinWidth}px, ${leftPanePercent}fr) ${rightPanePercent}fr`);
     }
 
-    $leftPaneMinWidth.change(function() {
-        const newMinWidth = $(this).val();
+    $leftPaneMinWidth.change(async function() {
+        await server.put('options/leftPaneMinWidth/' + $(this).val());
 
         resizeLeftPanel();
-
-        server.put('options/leftPaneMinWidth/' + newMinWidth);
     });
 
-    $leftPaneWidthPercent.change(function() {
-        const newWidthPercent = $(this).val();
+    $leftPaneWidthPercent.change(async function() {
+        await server.put('options/leftPaneWidthPercent/' + $(this).val());
 
         resizeLeftPanel();
+    });
 
-        server.put('options/leftPaneWidthPercent/' + newWidthPercent);
+    function applyFontSizes() {
+        console.log($mainFontSize.val() + "% !important");
+
+        $body.get(0).style.setProperty("--main-font-size", $mainFontSize.val() + "%");
+        $body.get(0).style.setProperty("--tree-font-size", $treeFontSize.val() + "%");
+        $body.get(0).style.setProperty("--detail-font-size", $detailFontSize.val() + "%");
+    }
+
+    $mainFontSize.change(async function() {
+        await server.put('options/mainFontSize/' + $(this).val());
+
+        applyFontSizes();
+    });
+
+    $treeFontSize.change(async function() {
+        await server.put('options/treeFontSize/' + $(this).val());
+
+        applyFontSizes();
+    });
+
+    $detailFontSize.change(async function() {
+        await server.put('options/detailFontSize/' + $(this).val());
+
+        applyFontSizes();
     });
 
     return {
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 91d92692d..b51651b2d 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -70,7 +70,8 @@ input, select {
 }
 
 .input-group-text {
-    background-color: inherit !important;
+    background-color: var(--accented-background-color) !important;
+    color: var(--muted-text-color) !important;
 }
 
 button.close {
@@ -808,4 +809,8 @@ div[data-notify="container"] {
 .ck-content .image > figcaption {
     color: var(--main-text-color);
     background-color: var(--accented-background-color);
+}
+
+#options-dialog input[type=number] {
+    text-align: right;
 }
\ No newline at end of file
diff --git a/src/routes/api/options.js b/src/routes/api/options.js
index 1f9a8c9aa..fd630ec18 100644
--- a/src/routes/api/options.js
+++ b/src/routes/api/options.js
@@ -6,7 +6,7 @@ const log = require('../../services/log');
 
 // options allowed to be updated directly in options dialog
 const ALLOWED_OPTIONS = ['protectedSessionTimeout', 'noteRevisionSnapshotTimeInterval',
-    'zoomFactor', 'theme', 'syncServerHost', 'syncServerTimeout', 'syncProxy', 'leftPaneMinWidth', 'leftPaneWidthPercent', 'hoistedNoteId'];
+    'zoomFactor', 'theme', 'syncServerHost', 'syncServerTimeout', 'syncProxy', 'leftPaneMinWidth', 'leftPaneWidthPercent', 'hoistedNoteId', 'mainFontSize', 'treeFontSize', 'detailFontSize'];
 
 async function getOptions() {
     return await optionService.getOptionsMap(ALLOWED_OPTIONS);
diff --git a/src/views/dialogs/options.ejs b/src/views/dialogs/options.ejs
index 94892c7a8..b280a5133 100644
--- a/src/views/dialogs/options.ejs
+++ b/src/views/dialogs/options.ejs
@@ -55,6 +55,46 @@
 
                                 <p>Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.</p>
 
+                                <h3>Font sizes</h3>
+
+
+                                <div class="form-group row">
+                                    <div class="col-4">
+                                        <label for="main-font-size">Main font size</label>
+
+                                        <div class="input-group">
+                                            <input type="number" class="form-control" id="main-font-size" min="50" max="200" step="10"/>
+                                            <div class="input-group-append">
+                                                <span class="input-group-text">%</span>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="col-4">
+                                        <label for="tree-font-size">Note tree font size</label>
+
+                                        <div class="input-group">
+                                            <input type="number" class="form-control" id="tree-font-size" min="50" max="200" step="10"/>
+                                            <div class="input-group-append">
+                                                <span class="input-group-text">%</span>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="col-4">
+                                        <label for="detail-font-size">Note detail font size</label>
+
+                                        <div class="input-group">
+                                            <input type="number" class="form-control" id="detail-font-size" min="50" max="200" step="10"/>
+                                            <div class="input-group-append">
+                                                <span class="input-group-text">%</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <p>Note that tree and detail font sizing is relative to the main font size setting.</p>
+
                                 <h3>Left pane sizing</h3>
 
                                 <div class="form-group">