diff --git a/app.go b/app.go
index aab85c61..b52fd7c4 100644
--- a/app.go
+++ b/app.go
@@ -19,6 +19,7 @@ import (
 	"solo/internal/configuration"
 	"solo/internal/environment"
 	"solo/internal/exporter"
+	"solo/internal/fonts"
 	"solo/internal/git"
 	"solo/internal/host"
 	"solo/internal/importer"
@@ -375,6 +376,32 @@ func (a *App) GetThemeByName(themeName string) (*theme.Theme, error) {
 	return a.configManager.GetThemeByName(themeName)
 }
 
+// Font Management Methods
+
+// SetDefaultFontFamily sets the default font family and persists the change.
+func (a *App) SetDefaultFontFamily(fontFamily string) error {
+	if a.configManager == nil {
+		return fmt.Errorf("configuration manager not initialized")
+	}
+	return a.configManager.SetDefaultFontFamily(fontFamily)
+}
+
+// SetMonoFontFamily sets the monospace font family and persists the change.
+func (a *App) SetMonoFontFamily(fontFamily string) error {
+	if a.configManager == nil {
+		return fmt.Errorf("configuration manager not initialized")
+	}
+	return a.configManager.SetMonoFontFamily(fontFamily)
+}
+
+// SetZoomLevel updates and persists the UI zoom level.
+func (a *App) SetZoomLevel(level float64) error {
+	if a.configManager == nil {
+		return fmt.Errorf("configuration manager not initialized")
+	}
+	return a.configManager.SetZoomLevel(level)
+}
+
 // Host Management Methods
 
 // GetAllHosts returns a list of all configured hosts.
@@ -814,6 +841,11 @@ func (a *App) GetDefaultConfiguration() (configuration.Configuration, error) {
 	return a.configManager.GetDefaultConfiguration(), nil
 }
 
+// ListSystemFonts returns installed system font families with monospace metadata.
+func (a *App) ListSystemFonts(refresh bool) ([]fonts.SystemFont, error) {
+	return fonts.ListFamilies(refresh)
+}
+
 // Request Management Methods
 
 // GetRequests returns all requests within a specific collection.
diff --git a/docs/releases/next.md b/docs/releases/next.md
index fd5a76e3..e1512b1e 100644
--- a/docs/releases/next.md
+++ b/docs/releases/next.md
@@ -3,10 +3,18 @@
 ## Highlights
 
 ## ✨ New Features
+
 - Add stop button to cancel an ongoing HTTP request before the timeout expires ([#146](https://github.com/raml-dev/solo/issues/146)).
 - Add stop button to the parallel runner to cancel an in-progress run ([#152](https://github.com/raml-dev/solo/issues/152)).
 - Enhanced OpenAPI, Bruno, and Postman importers with full support for query parameters, form bodies, and recursive reference resolution. Introduced smart placeholders for missing examples and standardized binary file handling across all formats ([#148](https://github.com/raml-dev/solo/pull/148)).
+- Added UI to change fonts ([#150](https://github.com/raml-dev/solo/pull/150))
 
 ## 🐞 Bug fixes
 
 - Fix failing tests on particular conditions by adding a helper to create temp testing folders ([#145](https://github.com/raml-dev/solo/pull/145))
+
+## ⬆️ Dependency updates
+
+- Updated Svelte to `5.55.7` ([#155](https://github.com/raml-dev/solo/pull/155))
+- Updated go to `1.26.3` ([#150](https://github.com/raml-dev/solo/pull/150))
+- Added [golang.org/x/image v0.39.0](https://pkg.go.dev/golang.org/x/image) ([#150](https://github.com/raml-dev/solo/pull/150))
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d3a63165..4cda780e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1561,9 +1561,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.5.tgz",
-      "integrity": "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.6.tgz",
+      "integrity": "sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
index 786221da..f298e037 100755
--- a/frontend/package.json.md5
+++ b/frontend/package.json.md5
@@ -1 +1 @@
-5cb7e31dc24be576a4d6e677d2b522a4
\ No newline at end of file
+a0d58cdeee5fe9a475016d1d05aad5c9
\ No newline at end of file
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 5d5aaff6..53432756 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -13,20 +13,28 @@
   import HTTPRequestBuilder from "$src/lib/components/RequestBuilder/HTTPRequestBuilder.svelte";
   import RequestTabBar from "$src/lib/components/RequestBuilder/RequestTabBar.svelte";
   import { collectionStore } from "$src/lib/stores/collectionStore.svelte";
-  import { configurationStore } from "$src/lib/stores/configurationStore.svelte";
+  import {
+    configurationStore,
+    configurationStoreState
+  } from "$src/lib/stores/configurationStore.svelte";
   import { environmentStore, environmentStoreState } from "$src/lib/stores/environmentStore.svelte";
+  import { fontListsStore } from "$src/lib/stores/fontListsStore.svelte";
   import { historyStore } from "$src/lib/stores/historyStore.svelte";
   import { hasOpenModals, modalStack } from "$src/lib/stores/modalStackStore.svelte";
   import { notifications } from "$src/lib/stores/notificationStore";
   import { getActiveTab, tabStore } from "$src/lib/stores/tabStore.svelte";
   import { updateStore } from "$src/lib/stores/updateStore.svelte";
   import { initWindowDimensions } from "$src/lib/stores/windowDimensionsStore.svelte";
-  import { initZoom } from "$src/lib/stores/zoomStore.svelte";
+  import { initZoom, registerZoomShortcuts } from "$src/lib/stores/zoomStore.svelte";
   import { flowbiteTheme } from "$src/lib/theme/flowbiteCustomTheme";
+  import {
+    APP_HISTORY_PANE_MAX_HEIGHT,
+    APP_HISTORY_PANE_MIN_HEIGHT
+  } from "$src/lib/utils/constants";
   import { EventsOn } from "$wails/runtime/runtime";
+  import ClockArrowOutline from "flowbite-svelte-icons/ClockArrowOutline.svelte";
   import EditOutline from "flowbite-svelte-icons/EditOutline.svelte";
   import GlobeOutline from "flowbite-svelte-icons/GlobeOutline.svelte";
-  import ClockArrowOutline from "flowbite-svelte-icons/ClockArrowOutline.svelte";
   import Badge from "flowbite-svelte/Badge.svelte";
   import Button from "flowbite-svelte/Button.svelte";
   import ThemeProvider from "flowbite-svelte/ThemeProvider.svelte";
@@ -40,15 +48,15 @@
   const environmentManagerModal = modalStack.createModal("app-environments");
 
   let historyOpen = $state(false);
-  let consoleHeight = $state(260);
-  const MIN_HEIGHT = 120;
-  const MAX_HEIGHT = 700;
+  let historyPaneHeight = $state(260);
   let isResizing = $state(false);
   let resizeStartY = 0;
   let resizeStartH = 0;
 
   async function initializeApp() {
     await configurationStore.init();
+    initZoom(configurationStoreState.config.general.zoomLevel);
+    void fontListsStore.init();
     await Promise.all([
       updateStore.init(),
       collectionStore.loadCollections(),
@@ -73,7 +81,7 @@
   function startResize(e: MouseEvent) {
     isResizing = true;
     resizeStartY = e.clientY;
-    resizeStartH = consoleHeight;
+    resizeStartH = historyPaneHeight;
     window.addEventListener("mousemove", onMouseMove);
     window.addEventListener("mouseup", stopResize);
   }
@@ -81,7 +89,10 @@
   function onMouseMove(e: MouseEvent) {
     const delta = resizeStartY - e.clientY;
 
-    consoleHeight = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, resizeStartH + delta));
+    historyPaneHeight = Math.min(
+      APP_HISTORY_PANE_MAX_HEIGHT,
+      Math.max(APP_HISTORY_PANE_MIN_HEIGHT, resizeStartH + delta)
+    );
   }
 
   function stopResize() {
@@ -187,7 +198,7 @@
       });
     });
 
-    const zoomCleanup = initZoom();
+    const zoomCleanup = registerZoomShortcuts();
     const windowDimensionsCleanup = initWindowDimensions();
 
     return () => {
@@ -260,14 +271,14 @@
       {#if historyOpen}
         <div
           class="flex flex-col overflow-hidden border-t border-neutral-200 dark:border-neutral-700"
-          style="height: {consoleHeight}px"
+          style="height: {historyPaneHeight}px"
         >
           <button
             type="button"
             class="h-1 shrink-0 cursor-row-resize bg-neutral-200 p-0 transition-colors hover:bg-primary-400 dark:bg-neutral-700"
             class:bg-primary-500={isResizing}
             onmousedown={startResize}
-            aria-label="Resize console"
+            aria-label="Resize history"
           ></button>
           <div class="min-h-0 flex-1 overflow-hidden">
             <History />
diff --git a/frontend/src/app.css b/frontend/src/app.css
index a987c654..db5ede7a 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -80,12 +80,15 @@
   --color-neutral-900: #18181b;
 
   /* typography */
-  --font-sans:
+  --font-sans-default:
     "Inter", "Nunito", "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
-  --font-mono:
+  --font-mono-default:
     "JetBrains Mono", "Fira Code", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono",
     "Courier New", monospace;
 
+  --font-sans: var(--font-sans-default);
+  --font-mono: var(--font-mono-default);
+
   /* app shell sizing */
   --spacing-sidebar: 280px;
   --spacing-toolbar: 48px;
@@ -162,7 +165,7 @@
 
   body {
     @apply bg-neutral-50 font-sans text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100;
-    font-size: 0.875rem; /* 14px global base text */
+    font-size: 1rem;
     margin: 0;
     overflow: hidden;
   }
diff --git a/frontend/src/assets/styles/codemirror-theme.css b/frontend/src/assets/styles/codemirror-theme.css
index 31cef2ab..16b898bf 100644
--- a/frontend/src/assets/styles/codemirror-theme.css
+++ b/frontend/src/assets/styles/codemirror-theme.css
@@ -11,15 +11,9 @@
   font-family: var(--font-mono);
 }
 
-.cm-scroller,
-.cm-content {
-  font-family: inherit;
-}
-
 .cm-scroller {
   line-height: inherit;
   overflow-x: auto;
-  overflow-y: auto;
 }
 
 .cm-content,
diff --git a/frontend/src/lib/actions/envAutocomplete.ts b/frontend/src/lib/actions/envAutocomplete.ts
index 37fd1637..444fe6cc 100644
--- a/frontend/src/lib/actions/envAutocomplete.ts
+++ b/frontend/src/lib/actions/envAutocomplete.ts
@@ -3,6 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import {
+  ENV_AUTOCOMPLETE_DEFAULT_INSERT_MODE,
+  ENV_AUTOCOMPLETE_DEFAULT_MAX_ITEMS,
+  ENV_AUTOCOMPLETE_DEFAULT_TRIGGER
+} from "$src/lib/utils/constants";
+
 export interface EnvAutocompleteEntry {
   key: string;
   value: string;
@@ -39,10 +45,6 @@ interface MatchContext {
   query: string;
 }
 
-const DEFAULT_TRIGGER = "{{";
-const DEFAULT_MAX_ITEMS = 8;
-const DEFAULT_INSERT_MODE = "value";
-
 function getCaretCoordinates(
   node: TextFieldElement,
   caretIndex: number
@@ -131,7 +133,7 @@ export function envAutocomplete(node: TextFieldElement, options: EnvAutocomplete
     const caret = node.selectionStart;
     if (caret === null) return null;
 
-    const trigger = currentOptions.trigger ?? DEFAULT_TRIGGER;
+    const trigger = currentOptions.trigger ?? ENV_AUTOCOMPLETE_DEFAULT_TRIGGER;
     const beforeCaret = node.value.slice(0, caret);
     const openIndex = beforeCaret.lastIndexOf(trigger);
 
@@ -157,7 +159,7 @@ export function envAutocomplete(node: TextFieldElement, options: EnvAutocomplete
     filtered = entries
       .filter((entry) => !query || entry.key.toLowerCase().includes(query))
       .sort((a, b) => a.key.localeCompare(b.key))
-      .slice(0, currentOptions.maxItems ?? DEFAULT_MAX_ITEMS);
+      .slice(0, currentOptions.maxItems ?? ENV_AUTOCOMPLETE_DEFAULT_MAX_ITEMS);
   }
 
   function setMenuPosition() {
@@ -185,7 +187,7 @@ export function envAutocomplete(node: TextFieldElement, options: EnvAutocomplete
   function applySelection(entry: EnvAutocompleteEntry) {
     if (!matchContext) return;
 
-    const insertMode = currentOptions.insertMode ?? DEFAULT_INSERT_MODE;
+    const insertMode = currentOptions.insertMode ?? ENV_AUTOCOMPLETE_DEFAULT_INSERT_MODE;
     const replacement = insertMode === "token" ? `{{${entry.key}}}` : entry.value;
 
     node.setRangeText(replacement, matchContext.start, matchContext.end, "end");
diff --git a/frontend/src/lib/components/Collections/CollectionRow.svelte b/frontend/src/lib/components/Collections/CollectionRow.svelte
index 86f88cea..95b397c8 100644
--- a/frontend/src/lib/components/Collections/CollectionRow.svelte
+++ b/frontend/src/lib/components/Collections/CollectionRow.svelte
@@ -13,6 +13,7 @@
     collectionTreeUIState
   } from "$src/lib/features/collections/collectionTreeUI.svelte";
   import { collectionStore } from "$src/lib/stores/collectionStore.svelte";
+  import { COLLECTION_OUTLINE_BUTTON_CLASSES } from "$src/lib/utils/constants";
   import { clampNumberToMax, getTotalRequestCount } from "$src/lib/utils/helpers";
   import { collection } from "$wails/go/models";
   import AdjustmentsVerticalOutline from "flowbite-svelte-icons/AdjustmentsVerticalOutline.svelte";
@@ -23,9 +24,6 @@
   import { tick } from "svelte";
   import { SvelteSet } from "svelte/reactivity";
 
-  const OUTLINE_BUTTON_CLASSES =
-    "text-neutral-800/70 hover:text-neutral-800 dark:text-neutral-100/70 dark:hover:text-neutral-100";
-
   interface Props {
     collection: collection.Collection;
     expanded: boolean;
@@ -291,9 +289,9 @@
       aria-label="Toggle collection"
     >
       {#if expanded}
-        <AngleDownOutline class={`h-3 w-3 ${OUTLINE_BUTTON_CLASSES}`} />
+        <AngleDownOutline class={`h-3 w-3 ${COLLECTION_OUTLINE_BUTTON_CLASSES}`} />
       {:else}
-        <AngleRightOutline class={`h-3 w-3 ${OUTLINE_BUTTON_CLASSES}`} />
+        <AngleRightOutline class={`h-3 w-3 ${COLLECTION_OUTLINE_BUTTON_CLASSES}`} />
       {/if}
     </button>
 
@@ -331,7 +329,7 @@
         type="button"
         class="h-6 shrink-0 {hasCollectionVariables
           ? 'text-warning-500 hover:text-warning-600 dark:text-warning-400 dark:hover:text-warning-300'
-          : OUTLINE_BUTTON_CLASSES}"
+          : COLLECTION_OUTLINE_BUTTON_CLASSES}"
         title="Collection variables"
         aria-label={`Open variables for ${currentCollection.name}`}
         onclick={(event: MouseEvent) => {
@@ -343,7 +341,7 @@
       </button>
       <button
         data-no-drag="true"
-        class="{OUTLINE_BUTTON_CLASSES} h-6"
+        class="{COLLECTION_OUTLINE_BUTTON_CLASSES} h-6"
         onclick={(event: MouseEvent) => {
           event.stopPropagation();
           onAddRequest(currentCollection.name);
@@ -356,7 +354,7 @@
       <button
         data-no-drag="true"
         id={getMenuTriggerId()}
-        class="{OUTLINE_BUTTON_CLASSES} ml-1 h-6"
+        class="{COLLECTION_OUTLINE_BUTTON_CLASSES} ml-1 h-6"
         title="More actions"
         aria-label="More actions"
         onclick={(event: MouseEvent) => {
diff --git a/frontend/src/lib/components/Collections/CollectionSidebarHeader.svelte b/frontend/src/lib/components/Collections/CollectionSidebarHeader.svelte
index 26022c83..2c8f3e34 100644
--- a/frontend/src/lib/components/Collections/CollectionSidebarHeader.svelte
+++ b/frontend/src/lib/components/Collections/CollectionSidebarHeader.svelte
@@ -6,6 +6,7 @@
 <script lang="ts">
   import ContextMenu from "$src/lib/components/common/ContextMenu.svelte";
   import ContextMenuItem from "$src/lib/components/common/ContextMenuItem.svelte";
+  import { COLLECTION_OUTLINE_BUTTON_CLASSES } from "$src/lib/utils/constants";
   import AngleDownOutline from "flowbite-svelte-icons/AngleDownOutline.svelte";
   import CloseSidebarSolid from "flowbite-svelte-icons/CloseSidebarSolid.svelte";
   import OpenSidebarSolid from "flowbite-svelte-icons/OpenSidebarSolid.svelte";
@@ -14,9 +15,6 @@
   import ButtonGroup from "flowbite-svelte/ButtonGroup.svelte";
   import Input from "flowbite-svelte/Input.svelte";
 
-  const OUTLINE_BUTTON_CLASSES =
-    "text-neutral-800/70 hover:text-neutral-800 dark:text-neutral-100/70 dark:hover:text-neutral-100";
-
   interface CollectionSidebarHeaderProps {
     collapsed: boolean;
     searchQuery: string;
@@ -49,9 +47,9 @@
         aria-label="Toggle collection list sidebar"
       >
         {#if collapsed}
-          <OpenSidebarSolid class={`h-6 w-6 ${OUTLINE_BUTTON_CLASSES}`} />
+          <OpenSidebarSolid class={`h-6 w-6 ${COLLECTION_OUTLINE_BUTTON_CLASSES}`} />
         {:else}
-          <CloseSidebarSolid class={`h-6 w-6 ${OUTLINE_BUTTON_CLASSES}`} />
+          <CloseSidebarSolid class={`h-6 w-6 ${COLLECTION_OUTLINE_BUTTON_CLASSES}`} />
         {/if}
       </button>
       {#if !collapsed}
diff --git a/frontend/src/lib/components/Collections/FolderRow.svelte b/frontend/src/lib/components/Collections/FolderRow.svelte
index c332d57c..100da388 100644
--- a/frontend/src/lib/components/Collections/FolderRow.svelte
+++ b/frontend/src/lib/components/Collections/FolderRow.svelte
@@ -13,6 +13,7 @@
     collectionTreeUIState
   } from "$src/lib/features/collections/collectionTreeUI.svelte";
   import { collectionStore } from "$src/lib/stores/collectionStore.svelte";
+  import { COLLECTION_OUTLINE_BUTTON_CLASSES } from "$src/lib/utils/constants";
   import { clampNumberToMax, getTotalRequestCount } from "$src/lib/utils/helpers";
   import { collection } from "$wails/go/models";
   import AngleDownOutline from "flowbite-svelte-icons/AngleDownOutline.svelte";
@@ -25,9 +26,6 @@
   import { tick } from "svelte";
   import { SvelteSet } from "svelte/reactivity";
 
-  const OUTLINE_BUTTON_CLASSES =
-    "text-neutral-800/70 hover:text-neutral-800 dark:text-neutral-100/70 dark:hover:text-neutral-100";
-
   interface Props {
     folder: collection.Folder;
     collectionName: string;
@@ -348,16 +346,16 @@
       aria-label="Toggle folder"
     >
       {#if isExpanded()}
-        <AngleDownOutline class={`h-3 w-3 ${OUTLINE_BUTTON_CLASSES}`} />
+        <AngleDownOutline class={`h-3 w-3 ${COLLECTION_OUTLINE_BUTTON_CLASSES}`} />
       {:else}
-        <AngleRightOutline class={`h-3 w-3 ${OUTLINE_BUTTON_CLASSES}`} />
+        <AngleRightOutline class={`h-3 w-3 ${COLLECTION_OUTLINE_BUTTON_CLASSES}`} />
       {/if}
     </button>
 
     {#if isExpanded()}
-      <FolderOpenOutline class={`h-4 w-4 shrink-0 ${OUTLINE_BUTTON_CLASSES}`} />
+      <FolderOpenOutline class={`h-4 w-4 shrink-0 ${COLLECTION_OUTLINE_BUTTON_CLASSES}`} />
     {:else}
-      <FolderOutline class={`h-4 w-4 shrink-0 ${OUTLINE_BUTTON_CLASSES}`} />
+      <FolderOutline class={`h-4 w-4 shrink-0 ${COLLECTION_OUTLINE_BUTTON_CLASSES}`} />
     {/if}
 
     <span
@@ -402,7 +400,7 @@
 
     <button
       data-no-drag="true"
-      class="invisible h-6 group-hover:visible {OUTLINE_BUTTON_CLASSES}"
+      class="invisible h-6 group-hover:visible {COLLECTION_OUTLINE_BUTTON_CLASSES}"
       onclick={(event: MouseEvent) => {
         event.stopPropagation();
         onAddRequestToFolder(collectionName, folder.id);
@@ -415,7 +413,7 @@
     <button
       data-no-drag="true"
       id={getMenuTriggerId()}
-      class="invisible h-6 group-hover:visible {OUTLINE_BUTTON_CLASSES}"
+      class="invisible h-6 group-hover:visible {COLLECTION_OUTLINE_BUTTON_CLASSES}"
       title="Folder actions"
       aria-label="Folder actions"
       onclick={(event: MouseEvent) => {
diff --git a/frontend/src/lib/components/Collections/RequestRow.svelte b/frontend/src/lib/components/Collections/RequestRow.svelte
index f5dddee7..62aef75d 100644
--- a/frontend/src/lib/components/Collections/RequestRow.svelte
+++ b/frontend/src/lib/components/Collections/RequestRow.svelte
@@ -13,15 +13,13 @@
   import { collectionStore } from "$src/lib/stores/collectionStore.svelte";
   import { notifications } from "$src/lib/stores/notificationStore";
   import { tabStore } from "$src/lib/stores/tabStore.svelte";
+  import { COLLECTION_OUTLINE_BUTTON_CLASSES } from "$src/lib/utils/constants";
   import { getMethodBadgeClass } from "$src/lib/utils/http";
   import { collection } from "$wails/go/models";
   import DotsHorizontalOutline from "flowbite-svelte-icons/DotsHorizontalOutline.svelte";
   import Input from "flowbite-svelte/Input.svelte";
   import { tick } from "svelte";
 
-  const OUTLINE_BUTTON_CLASSES =
-    "text-neutral-800/70 hover:text-neutral-800 dark:text-neutral-100/70 dark:hover:text-neutral-100";
-
   interface Props {
     request: collection.Request;
     collectionName: string;
@@ -458,7 +456,7 @@
       title="Request actions"
       aria-label="Request actions"
     >
-      <DotsHorizontalOutline class={`h-3 w-3 ${OUTLINE_BUTTON_CLASSES}`} />
+      <DotsHorizontalOutline class={`h-3 w-3 ${COLLECTION_OUTLINE_BUTTON_CLASSES}`} />
     </button>
     {@render actionsDropdown(`#${getMenuTriggerId()}`, undefined, closeContextMenu)}
   </div>
diff --git a/frontend/src/lib/components/Environment/EnvironmentItem.svelte b/frontend/src/lib/components/Environment/EnvironmentItem.svelte
index 97c8bdc3..e3290709 100644
--- a/frontend/src/lib/components/Environment/EnvironmentItem.svelte
+++ b/frontend/src/lib/components/Environment/EnvironmentItem.svelte
@@ -5,14 +5,12 @@
 
 <script lang="ts">
   import { environmentStore, environmentStoreState } from "$src/lib/stores/environmentStore.svelte";
+  import { COLLECTION_OUTLINE_BUTTON_CLASSES } from "$src/lib/utils/constants";
   import type { environment } from "$wails/go/models";
   import DotsHorizontalOutline from "flowbite-svelte-icons/DotsHorizontalOutline.svelte";
   import Input from "flowbite-svelte/Input.svelte";
   import { tick } from "svelte";
 
-  const OUTLINE_BUTTON_CLASSES =
-    "text-neutral-800/70 hover:text-neutral-800 dark:text-neutral-100/70 dark:hover:text-neutral-100";
-
   interface Props {
     env: environment.Environment;
     isActive?: boolean;
@@ -181,7 +179,7 @@
 
     <button
       type="button"
-      class="visible ml-1 h-6 {OUTLINE_BUTTON_CLASSES}"
+      class="visible ml-1 h-6 {COLLECTION_OUTLINE_BUTTON_CLASSES}"
       onclick={openMenu}
       title="More actions"
       aria-label="More actions"
diff --git a/frontend/src/lib/components/Environment/EnvironmentManager.svelte b/frontend/src/lib/components/Environment/EnvironmentManager.svelte
index d475a457..4ae9fcb2 100644
--- a/frontend/src/lib/components/Environment/EnvironmentManager.svelte
+++ b/frontend/src/lib/components/Environment/EnvironmentManager.svelte
@@ -16,13 +16,10 @@
   import ImportModal from "$src/lib/components/imports/ImportModal.svelte";
   import type { LocalImportFormatOption } from "$src/lib/components/imports/importTypes";
   import LocalImportPane from "$src/lib/components/imports/LocalImportPane.svelte";
-  import {
-    DEFAULT_ENV_NAME,
-    environmentStore,
-    environmentStoreState
-  } from "$src/lib/stores/environmentStore.svelte";
+  import { environmentStore, environmentStoreState } from "$src/lib/stores/environmentStore.svelte";
   import { modalStack, topModalId } from "$src/lib/stores/modalStackStore.svelte";
   import { notifications } from "$src/lib/stores/notificationStore";
+  import { DEFAULT_ENV_NAME } from "$src/lib/utils/constants";
   import {
     ExportEnvironment,
     GetGitEnvironmentStatus,
diff --git a/frontend/src/lib/components/MainConfiguration.svelte b/frontend/src/lib/components/MainConfiguration.svelte
index 4702af94..bc824fb2 100644
--- a/frontend/src/lib/components/MainConfiguration.svelte
+++ b/frontend/src/lib/components/MainConfiguration.svelte
@@ -7,15 +7,17 @@
   import ToastContainer from "$src/lib/components/base/ToastContainer.svelte";
   import FeedbackEmptyState from "$src/lib/components/common/FeedbackEmptyState.svelte";
   import About from "$src/lib/components/Settings/About.svelte";
-  import ThemePreview from "$src/lib/components/Settings/ThemePreview.svelte";
+  import AppearancePane from "$src/lib/components/Settings/AppearancePane.svelte";
   import {
     configurationStore,
     configurationStoreState,
     saveConfig
   } from "$src/lib/stores/configurationStore.svelte";
+  import { fontListsStore, fontListsStoreState } from "$src/lib/stores/fontListsStore.svelte";
   import { modalStack, topModalId } from "$src/lib/stores/modalStackStore.svelte";
   import { notifications } from "$src/lib/stores/notificationStore";
   import { updateStore } from "$src/lib/stores/updateStore.svelte";
+  import { resetZoom, setZoomLevel, zoomState } from "$src/lib/stores/zoomStore.svelte";
   import type { ThemeMode } from "$src/lib/theme/themeModel";
   import { createStableId, mapRecordToRowsWithStableIds } from "$src/lib/utils/stableKeyValueRows";
   import {
@@ -36,7 +38,6 @@
   import Input from "flowbite-svelte/Input.svelte";
   import Label from "flowbite-svelte/Label.svelte";
   import Modal from "flowbite-svelte/Modal.svelte";
-  import Radio from "flowbite-svelte/Radio.svelte";
   import Table from "flowbite-svelte/Table.svelte";
   import TableBody from "flowbite-svelte/TableBody.svelte";
   import TableBodyCell from "flowbite-svelte/TableBodyCell.svelte";
@@ -61,7 +62,6 @@
     { id: "troubleshooting", label: "Troubleshooting" },
     { id: "about", label: "About" }
   ];
-
   const deleteHostModal = modalStack.createModal("settings-delete-host");
 
   // 3) $state vars
@@ -81,19 +81,27 @@
   // 4) $derived vars
   const themesState = $derived(configurationStoreState.allThemes);
   const configSaveStatus = $derived(configurationStoreState.saveStatus);
+  const fontLists = $derived(fontListsStoreState.lists);
+  const fontsLoading = $derived(fontListsStoreState.loading);
+  const fontsReady = $derived(fontListsStoreState.ready);
+  const fontsError = $derived(fontListsStoreState.error);
+  const zoomLevel = $derived(zoomState.level);
 
   // 5) helper functions
   function findTheme(id: string) {
     return (themesState || []).find((t) => t.id === id) || null;
   }
 
-  function formatThemeName(label: string): string {
-    return label || "Untitled Theme";
+  function ensureTypographyDefaults(settings?: configuration.GeneralSettings | null) {
+    if (!settings) return;
+    settings.defaultFontFamily ??= "";
+    settings.monoFontFamily ??= "";
   }
 
   function createEmptyConfig() {
     const cfg = new configuration.Configuration();
     cfg.general = new configuration.GeneralSettings({ debugMode: true });
+    ensureTypographyDefaults(cfg.general);
     cfg.request = new configuration.RequestSettings();
     cfg.customThemes = [] as theme.Theme[];
     return cfg;
@@ -121,11 +129,48 @@
     void updateStore.syncWithConfiguration();
   }
 
-  function handleThemeModeChange() {
-    configurationStore.applyThemeMode(
-      (configurationStoreState.config.general.themeMode as ThemeMode) || "system"
-    );
-    saveConfig();
+  function handleThemeModeChange(mode: ThemeMode) {
+    configurationStore.changeTheme(mode);
+  }
+
+  async function handleZoomLevelChange(level: number) {
+    await setZoomLevel(level);
+  }
+
+  async function handleSansFontChange(fontFamily: string) {
+    try {
+      await configurationStore.changeDefaultFontFamily(fontFamily);
+    } catch {
+      /* shown by store */
+    }
+  }
+
+  async function handleMonoFontChange(fontFamily: string) {
+    try {
+      await configurationStore.changeMonoFontFamily(fontFamily);
+    } catch {
+      /* shown by store */
+    }
+  }
+
+  async function handleRefreshFonts() {
+    try {
+      await fontListsStore.refresh();
+    } catch {
+      /* shown by store */
+    }
+  }
+
+  async function handleSansFontReset() {
+    await handleSansFontChange("");
+  }
+
+  async function handleMonoFontReset() {
+    await handleMonoFontChange("");
+  }
+
+  async function handleZoomLevelReset() {
+    await resetZoom();
   }
 
   async function handleLogsExport() {
@@ -286,6 +331,7 @@
         if (disposed) return;
         defaultConfig = new configuration.Configuration(loaded);
         if (!defaultConfig.general) defaultConfig.general = new configuration.GeneralSettings();
+        ensureTypographyDefaults(defaultConfig.general);
         if (!defaultConfig.request) defaultConfig.request = new configuration.RequestSettings();
       } catch (err) {
         if (disposed) return;
@@ -298,14 +344,11 @@
       modalStack.destroyModal(deleteHostModal.id);
     };
   });
-
-  // 7) $effects
-  // none
 </script>
 
 <div class="flex h-full gap-6">
   <!-- Sidebar nav -->
-  <nav class="flex w-36 shrink-0 flex-col gap-1">
+  <nav class="flex shrink-0 flex-col gap-1">
     {#each NAV_ITEMS as item (item.id)}
       <Button
         color={activeSection === item.id ? "primary" : "light"}
@@ -318,54 +361,29 @@
   </nav>
 
   <!-- Content -->
-  <div class="min-w-0 flex-1 overflow-y-auto">
+  <div class="min-w-0 flex-1 overflow-y-auto pr-3 pl-1">
     {#if activeSection === "appearance"}
-      <div class="flex flex-col gap-4">
-        <div>
-          <h2 class="text-base font-semibold text-neutral-900 dark:text-neutral-100">Themes</h2>
-          <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
-            Personalize your experience with themes that match your style.
-          </p>
-        </div>
-
-        <!-- Display mode selector -->
-        <div class="flex flex-col gap-2">
-          <p class="text-sm font-medium text-neutral-700 dark:text-neutral-300">Display mode</p>
-          <div class="flex gap-4">
-            {#each [{ value: "light", label: "Light" }, { value: "dark", label: "Dark" }, { value: "system", label: "System" }] as mode (mode.value)}
-              <Radio
-                name="themeMode"
-                bind:group={configurationStoreState.config.general.themeMode}
-                value={mode.value}
-                onchange={handleThemeModeChange}>{mode.label}</Radio
-              >
-            {/each}
-          </div>
-        </div>
-
-        <div class="grid grid-cols-3 gap-3">
-          {#each themesState || [] as t (t.id)}
-            <Button
-              color="light"
-              class="flex w-full cursor-pointer flex-col items-center rounded-lg border p-3 text-left transition-all hover:border-primary-400 {configurationStoreState
-                .config.general.activeTheme === t.id
-                ? 'border-primary-500 ring-2 ring-primary-500'
-                : 'border-neutral-200 dark:border-neutral-700'}"
-              onclick={() => handleThemeSelect(t.id)}
-            >
-              <div class="mb-2 w-full overflow-hidden rounded">
-                <ThemePreview seeds={t.config?.seeds} />
-              </div>
-              <p class="text-sm font-medium text-neutral-700 dark:text-neutral-200">
-                {formatThemeName(t.label)}
-              </p>
-              {#if configurationStoreState.config.general.activeTheme === t.id}
-                <Badge color="primary" class="mt-1">Active</Badge>
-              {/if}
-            </Button>
-          {/each}
-        </div>
-      </div>
+      <AppearancePane
+        themeMode={(configurationStoreState.config.general.themeMode as ThemeMode) || "system"}
+        activeTheme={configurationStoreState.config.general.activeTheme}
+        defaultFontFamily={configurationStoreState.config.general.defaultFontFamily}
+        monoFontFamily={configurationStoreState.config.general.monoFontFamily}
+        themes={themesState || []}
+        {fontLists}
+        {fontsLoading}
+        {fontsReady}
+        {fontsError}
+        {zoomLevel}
+        onThemeModeChange={handleThemeModeChange}
+        onThemeSelect={(themeId) => void handleThemeSelect(themeId)}
+        onSansFontChange={(fontFamily) => void handleSansFontChange(fontFamily)}
+        onMonoFontChange={(fontFamily) => void handleMonoFontChange(fontFamily)}
+        onZoomLevelChange={(level) => void handleZoomLevelChange(level)}
+        onRefreshFonts={() => void handleRefreshFonts()}
+        onResetSansFont={() => void handleSansFontReset()}
+        onResetMonoFont={() => void handleMonoFontReset()}
+        onResetZoomLevel={() => void handleZoomLevelReset()}
+      />
     {:else if activeSection === "general"}
       <div class="flex flex-col gap-5">
         <div>
diff --git a/frontend/src/lib/components/RequestBuilder/EnvAutocompletePopover.svelte b/frontend/src/lib/components/RequestBuilder/EnvAutocompletePopover.svelte
index 9c7926b9..c18494f9 100644
--- a/frontend/src/lib/components/RequestBuilder/EnvAutocompletePopover.svelte
+++ b/frontend/src/lib/components/RequestBuilder/EnvAutocompletePopover.svelte
@@ -161,7 +161,7 @@
                 </span>
               </span>
               {#if entry.hasConflicts}
-                <span class="flex gap-1 truncate text-[11px] opacity-80"
+                <span class="flex gap-1 truncate text-xs opacity-80"
                   ><ExclamationCircleSolid class="h-4 w-4 shrink-0 fill-warning-500" /><span
                     >{getConflictMessage(entry)}</span
                   ></span
diff --git a/frontend/src/lib/components/Settings/AppearancePane.svelte b/frontend/src/lib/components/Settings/AppearancePane.svelte
new file mode 100644
index 00000000..dd913e14
--- /dev/null
+++ b/frontend/src/lib/components/Settings/AppearancePane.svelte
@@ -0,0 +1,217 @@
+<!--
+ Copyright 2026-present raml-dev
+ SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<script lang="ts">
+  import ColorSchemeSelect from "$src/lib/components/Settings/ColorSchemeSelect.svelte";
+  import FontFamilySelect from "$src/lib/components/Settings/FontFamilySelect.svelte";
+  import ThemeModeSelect from "$src/lib/components/Settings/ThemeModeSelect.svelte";
+  import ZoomLevelSelect from "$src/lib/components/Settings/ZoomLevelSelect.svelte";
+  import type { FontLists } from "$src/lib/fonts";
+  import { getZoomPercent } from "$src/lib/stores/zoomStore.svelte";
+  import type { ThemeMode } from "$src/lib/theme/themeModel";
+  import { DEFAULT_ZOOM_LEVEL, ZOOM_LEVEL_OPTIONS } from "$src/lib/utils/constants";
+  import type { theme } from "$wails/go/models";
+  import RefreshOutline from "flowbite-svelte-icons/RefreshOutline.svelte";
+  import UndoOutline from "flowbite-svelte-icons/UndoOutline.svelte";
+  import Button from "flowbite-svelte/Button.svelte";
+  import ButtonGroup from "flowbite-svelte/ButtonGroup.svelte";
+  import Helper from "flowbite-svelte/Helper.svelte";
+  import Label from "flowbite-svelte/Label.svelte";
+
+  interface Props {
+    themeMode: ThemeMode;
+    activeTheme: string;
+    defaultFontFamily: string;
+    monoFontFamily: string;
+    themes: theme.Theme[];
+    fontLists: FontLists;
+    fontsLoading: boolean;
+    fontsReady: boolean;
+    fontsError: string | null;
+    zoomLevel: number;
+    onThemeModeChange: (mode: ThemeMode) => void;
+    onThemeSelect: (themeId: string) => void;
+    onSansFontChange: (fontFamily: string) => void;
+    onMonoFontChange: (fontFamily: string) => void;
+    onZoomLevelChange: (level: number) => void | Promise<void>;
+    onRefreshFonts: () => void | Promise<void>;
+    onResetSansFont: () => void | Promise<void>;
+    onResetMonoFont: () => void | Promise<void>;
+    onResetZoomLevel: () => void | Promise<void>;
+  }
+
+  let {
+    themeMode,
+    activeTheme,
+    defaultFontFamily,
+    monoFontFamily,
+    themes,
+    fontLists,
+    fontsLoading,
+    fontsReady,
+    fontsError,
+    zoomLevel,
+    onThemeModeChange,
+    onThemeSelect,
+    onSansFontChange,
+    onMonoFontChange,
+    onZoomLevelChange,
+    onRefreshFonts,
+    onResetSansFont,
+    onResetMonoFont,
+    onResetZoomLevel
+  }: Props = $props();
+
+  const selectTriggerClass = "h-9 w-full justify-between px-3 py-2 text-left";
+  const iconButtonClass = "h-9 shrink-0 rounded-s-none w-9";
+</script>
+
+<div class="flex flex-col gap-4">
+  <div>
+    <h2 class="text-base font-semibold text-neutral-900 dark:text-neutral-100">Appearance</h2>
+    <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+      Personalize your experience to match your style.
+    </p>
+  </div>
+
+  <div class="flex flex-col gap-4 rounded-lg border border-neutral-200 p-4 dark:border-neutral-700">
+    <div>
+      <h3 class="text-sm font-semibold text-neutral-700 dark:text-neutral-300">Themes</h3>
+      <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+        Pick how Solo looks and which color scheme it uses.
+      </p>
+    </div>
+
+    <div class="grid gap-3 md:grid-cols-2">
+      <div class="flex min-w-0 flex-col gap-1">
+        <Label for="theme-mode-select">Display mode</Label>
+        <ThemeModeSelect
+          id="theme-mode-select"
+          triggerClass={selectTriggerClass}
+          value={themeMode}
+          onchange={onThemeModeChange}
+        />
+      </div>
+
+      <div class="flex min-w-0 flex-col gap-1">
+        <Label for="color-scheme-select">Color scheme</Label>
+        <ColorSchemeSelect
+          triggerClass={selectTriggerClass}
+          id="color-scheme-select"
+          value={activeTheme}
+          {themes}
+          onchange={onThemeSelect}
+        />
+      </div>
+    </div>
+  </div>
+
+  <div class="flex flex-col gap-4 rounded-lg border border-neutral-200 p-4 dark:border-neutral-700">
+    <div>
+      <h3 class="text-sm font-semibold text-neutral-700 dark:text-neutral-300">Interface</h3>
+      <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+        Adjust the interface zoom and choose custom fonts.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <div class="flex flex-col gap-1">
+        <Label for="sans-font-family">Interface font</Label>
+        <ButtonGroup class="w-full">
+          <FontFamilySelect
+            id="sans-font-family"
+            class="min-w-0 flex-1"
+            triggerClass="{selectTriggerClass} rounded-e-none border-r-0"
+            value={defaultFontFamily}
+            families={fontLists.allDefault}
+            placeholder="Default interface font"
+            searchPlaceholder="Search interface fonts"
+            previewKind="sans"
+            disabled={!fontsReady}
+            onchange={(fontFamily) => onSansFontChange(fontFamily)}
+          />
+          <Button
+            color="light"
+            size="xs"
+            class={iconButtonClass}
+            onclick={onResetSansFont}
+            title="Reset interface font"
+            aria-label="Reset interface font"
+            disabled={!defaultFontFamily}
+          >
+            <UndoOutline class="m-1 h-4 w-4 shrink-0" />
+          </Button>
+        </ButtonGroup>
+      </div>
+
+      <div class="flex flex-col gap-1">
+        <Label for="mono-font-family">Monospace font</Label>
+        <ButtonGroup class="w-full">
+          <FontFamilySelect
+            id="mono-font-family"
+            class="min-w-0 flex-1"
+            triggerClass="{selectTriggerClass} rounded-e-none border-r-0"
+            value={monoFontFamily}
+            families={fontLists.allMono}
+            placeholder="Default monospace font"
+            searchPlaceholder="Search monospace fonts"
+            previewKind="mono"
+            disabled={!fontsReady}
+            onchange={(fontFamily) => onMonoFontChange(fontFamily)}
+          />
+          <Button
+            color="light"
+            size="xs"
+            class={iconButtonClass}
+            onclick={onResetMonoFont}
+            title="Reset monospace font"
+            aria-label="Reset monospace font"
+            disabled={!monoFontFamily}
+          >
+            <UndoOutline class="m-1 h-4 w-4 shrink-0" />
+          </Button>
+        </ButtonGroup>
+      </div>
+    </div>
+
+    <div class="flex max-w-xs flex-col gap-1">
+      <Label for="zoom-level-select">Zoom level</Label>
+      <ButtonGroup class="w-full">
+        <ZoomLevelSelect
+          id="zoom-level-select"
+          class="min-w-0 flex-1"
+          triggerClass="{selectTriggerClass} rounded-e-none border-r-0"
+          value={zoomLevel}
+          options={ZOOM_LEVEL_OPTIONS}
+          onchange={onZoomLevelChange}
+        />
+        <Button
+          color="light"
+          size="xs"
+          class={iconButtonClass}
+          onclick={onResetZoomLevel}
+          title={`Reset zoom level to ${getZoomPercent(DEFAULT_ZOOM_LEVEL)}%`}
+          aria-label={`Reset zoom level to ${getZoomPercent(DEFAULT_ZOOM_LEVEL)}%`}
+          disabled={zoomLevel === DEFAULT_ZOOM_LEVEL}
+        >
+          <UndoOutline class="m-1 h-4 w-4 shrink-0" />
+        </Button>
+      </ButtonGroup>
+    </div>
+
+    {#if fontsLoading}
+      <Helper color="gray">Loading system fonts...</Helper>
+    {:else if fontsError}
+      <Helper color="red">Could not load system fonts.</Helper>
+    {/if}
+
+    <div class="flex justify-end">
+      <Button color="light" onclick={onRefreshFonts} disabled={fontsLoading}>
+        <RefreshOutline class="me-2 h-4 w-4 shrink-0" />
+        <span>Reload system fonts</span>
+      </Button>
+    </div>
+  </div>
+</div>
diff --git a/frontend/src/lib/components/Settings/ColorSchemeSelect.svelte b/frontend/src/lib/components/Settings/ColorSchemeSelect.svelte
new file mode 100644
index 00000000..1be6982b
--- /dev/null
+++ b/frontend/src/lib/components/Settings/ColorSchemeSelect.svelte
@@ -0,0 +1,92 @@
+<!--
+ Copyright 2026-present raml-dev
+ SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<script lang="ts">
+  import AnchoredDropdownButton from "$src/lib/components/base/AnchoredDropdownButton.svelte";
+  import ThemePreview from "$src/lib/components/Settings/ThemePreview.svelte";
+  import type { theme } from "$wails/go/models";
+  import CheckOutline from "flowbite-svelte-icons/CheckOutline.svelte";
+  import { tick } from "svelte";
+
+  interface Props {
+    id: string;
+    value: string;
+    themes: theme.Theme[];
+    triggerClass?: string;
+    onchange?: (themeId: string) => void;
+  }
+
+  let {
+    id,
+    value,
+    themes,
+    triggerClass = "w-full justify-between px-3 py-2 text-left",
+    onchange = () => {}
+  }: Props = $props();
+
+  let isOpen = $state(false);
+  let themeButtonElements: Array<HTMLButtonElement | undefined> = $state([]);
+
+  const selectedLabel = $derived.by(() => {
+    const selectedTheme = themes.find((item) => item.id === value);
+    return selectedTheme?.label || "Untitled Theme";
+  });
+
+  function formatThemeName(label: string): string {
+    return label || "Untitled Theme";
+  }
+
+  function handleSelect(themeId: string) {
+    isOpen = false;
+    onchange(themeId);
+  }
+
+  async function handleOpen() {
+    await tick();
+    const selectedIndex = themes.findIndex((currentTheme) => currentTheme.id === value);
+    if (selectedIndex < 0) return;
+    themeButtonElements[selectedIndex]?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }
+</script>
+
+<AnchoredDropdownButton
+  {id}
+  bind:open={isOpen}
+  {triggerClass}
+  triggerText={formatThemeName(selectedLabel)}
+  ariaHaspopup="grid"
+  matchTriggerWidth={true}
+  panelClass="p-3 max-h-96 overflow-auto"
+  onopen={handleOpen}
+>
+  <div class="grid w-full grid-cols-3 gap-2" role="grid" aria-label="Color schemes">
+    {#each themes as currentTheme, index (currentTheme.id)}
+      <button
+        bind:this={themeButtonElements[index]}
+        type="button"
+        class={`flex flex-col gap-1 rounded-lg border p-2 text-left transition-colors hover:border-primary-400 hover:bg-neutral-50 dark:hover:bg-neutral-800 ${
+          value === currentTheme.id
+            ? "border-primary-500 bg-primary-50 dark:bg-primary-900/20"
+            : "border-neutral-200 dark:border-neutral-700"
+        }`}
+        onclick={() => handleSelect(currentTheme.id)}
+      >
+        <div class="overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-700">
+          <div class="w-full">
+            <ThemePreview seeds={currentTheme.config?.seeds} />
+          </div>
+        </div>
+        <div class="flex items-center justify-between gap-1">
+          <span class="truncate text-xs font-medium text-neutral-700 dark:text-neutral-200">
+            {formatThemeName(currentTheme.label)}
+          </span>
+          {#if value === currentTheme.id}
+            <CheckOutline class="h-3.5 w-3.5 shrink-0 text-primary-600 dark:text-primary-300" />
+          {/if}
+        </div>
+      </button>
+    {/each}
+  </div>
+</AnchoredDropdownButton>
diff --git a/frontend/src/lib/components/Settings/FontFamilySelect.svelte b/frontend/src/lib/components/Settings/FontFamilySelect.svelte
new file mode 100644
index 00000000..03e14513
--- /dev/null
+++ b/frontend/src/lib/components/Settings/FontFamilySelect.svelte
@@ -0,0 +1,290 @@
+<!--
+ Copyright 2026-present raml-dev
+ SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<script lang="ts">
+  import AnchoredDropdownButton from "$src/lib/components/base/AnchoredDropdownButton.svelte";
+  import {
+    FONT_FAMILY_SELECT_LIST_OVERSCAN,
+    FONT_FAMILY_SELECT_LIST_ROW_HEIGHT
+  } from "$src/lib/utils/constants";
+  import CheckOutline from "flowbite-svelte-icons/CheckOutline.svelte";
+  import Input from "flowbite-svelte/Input.svelte";
+  import { tick } from "svelte";
+
+  type FontOption = {
+    id: string;
+    value: string;
+    label: string;
+    isDefault?: boolean;
+  };
+
+  interface Props {
+    id: string;
+    value?: string;
+    families: string[];
+    placeholder: string;
+    searchPlaceholder: string;
+    previewKind: "sans" | "mono";
+    disabled?: boolean;
+    class?: string;
+    triggerClass?: string;
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    id,
+    value = "",
+    families,
+    placeholder,
+    searchPlaceholder,
+    previewKind,
+    disabled = false,
+    class: className = "",
+    triggerClass = "w-full justify-between px-3 py-2 text-left",
+    onchange = () => {}
+  }: Props = $props();
+
+  let isOpen = $state(false);
+  let filter = $state("");
+  let activeIndex = $state(0);
+  let listScrollTop = $state(0);
+  let listViewportHeight = $state(0);
+  let filterInput: HTMLInputElement | undefined = $state();
+  let listElement: HTMLDivElement | undefined = $state();
+
+  const allOptions = $derived<FontOption[]>([
+    {
+      id: "__default__",
+      value: "",
+      label: placeholder,
+      isDefault: true
+    },
+    ...families.map((family) => ({
+      id: family,
+      value: family,
+      label: family
+    }))
+  ]);
+
+  const visibleOptions = $derived.by(() => {
+    const query = filter.trim().toLowerCase();
+    if (!query) return allOptions;
+    return allOptions.filter((option) => option.label.toLowerCase().includes(query));
+  });
+
+  const selectedLabel = $derived(value || "Default");
+  const visibleRowCount = $derived(
+    Math.max(
+      1,
+      Math.ceil(
+        Math.max(listViewportHeight, FONT_FAMILY_SELECT_LIST_ROW_HEIGHT) /
+          FONT_FAMILY_SELECT_LIST_ROW_HEIGHT
+      )
+    )
+  );
+  const visibleStartIndex = $derived(
+    Math.floor(listScrollTop / FONT_FAMILY_SELECT_LIST_ROW_HEIGHT)
+  );
+  const renderStartIndex = $derived(
+    Math.max(0, visibleStartIndex - FONT_FAMILY_SELECT_LIST_OVERSCAN)
+  );
+  const renderEndIndex = $derived(
+    Math.min(
+      visibleOptions.length,
+      visibleStartIndex + visibleRowCount + FONT_FAMILY_SELECT_LIST_OVERSCAN
+    )
+  );
+  const renderedOptions = $derived(visibleOptions.slice(renderStartIndex, renderEndIndex));
+  const topSpacerPx = $derived(renderStartIndex * FONT_FAMILY_SELECT_LIST_ROW_HEIGHT);
+  const bottomSpacerPx = $derived(
+    (visibleOptions.length - renderEndIndex) * FONT_FAMILY_SELECT_LIST_ROW_HEIGHT
+  );
+
+  function quoteCssFontFamily(family: string) {
+    return `"${family.replaceAll("\\", "\\\\").replaceAll('"', '\\"')}"`;
+  }
+
+  function getFontPreviewStyle(option: FontOption) {
+    const fallback =
+      previewKind === "sans" ? "var(--font-sans-default)" : "var(--font-mono-default)";
+
+    if (option.isDefault || !option.value) return fallback;
+    return `${quoteCssFontFamily(option.value)}, ${fallback}`;
+  }
+
+  function getOptionClass(isActive: boolean) {
+    return [
+      "flex h-9 w-full items-center justify-between gap-3 px-3 text-left text-sm hover:bg-neutral-100 dark:hover:bg-neutral-800",
+      isActive ? "bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-200" : ""
+    ].join(" ");
+  }
+
+  function getSelectedIndex() {
+    return visibleOptions.findIndex((option) => option.value === value);
+  }
+
+  function resetSearch() {
+    filter = "";
+    activeIndex = getSelectedIndex();
+    listScrollTop = 0;
+    if (listElement) {
+      listElement.scrollTop = 0;
+    }
+  }
+
+  async function scrollActiveOptionIntoView() {
+    await tick();
+    if (!listElement || activeIndex < 0) {
+      if (listElement && activeIndex < 0) {
+        listElement.scrollTop = 0;
+        listScrollTop = 0;
+      }
+      return;
+    }
+
+    const optionTop = activeIndex * FONT_FAMILY_SELECT_LIST_ROW_HEIGHT;
+    const optionBottom = optionTop + FONT_FAMILY_SELECT_LIST_ROW_HEIGHT;
+    const viewportTop = listElement.scrollTop;
+    const viewportBottom = viewportTop + listViewportHeight;
+
+    if (optionTop < viewportTop) {
+      listElement.scrollTop = optionTop;
+      listScrollTop = optionTop;
+      return;
+    }
+
+    if (optionBottom > viewportBottom) {
+      const nextScrollTop = optionBottom - listViewportHeight;
+      listElement.scrollTop = nextScrollTop;
+      listScrollTop = nextScrollTop;
+    }
+  }
+
+  async function focusFilter() {
+    await tick();
+    filterInput?.focus();
+    filterInput?.select();
+    await scrollActiveOptionIntoView();
+  }
+
+  async function handleOpen() {
+    activeIndex = getSelectedIndex();
+    await focusFilter();
+  }
+
+  function handleClose() {
+    resetSearch();
+  }
+
+  async function setActiveIndex(nextIndex: number) {
+    activeIndex = Math.max(0, Math.min(visibleOptions.length - 1, nextIndex));
+    await scrollActiveOptionIntoView();
+  }
+
+  function commitSelection(nextValue: string) {
+    onchange(nextValue);
+    isOpen = false;
+  }
+
+  async function handleFilterInput() {
+    activeIndex = getSelectedIndex();
+    listScrollTop = 0;
+    if (listElement) {
+      listElement.scrollTop = 0;
+    }
+    await scrollActiveOptionIntoView();
+  }
+
+  async function handleKeydown(event: KeyboardEvent) {
+    if (!isOpen) return;
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        await setActiveIndex(activeIndex + 1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        await setActiveIndex(activeIndex - 1);
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (activeIndex < 0 || activeIndex >= visibleOptions.length) return;
+        commitSelection(visibleOptions[activeIndex]?.value || "");
+        break;
+      default:
+        break;
+    }
+  }
+
+  function handleListScroll(event: Event) {
+    const currentTarget = event.currentTarget;
+    if (!(currentTarget instanceof HTMLDivElement)) return;
+    listScrollTop = currentTarget.scrollTop;
+  }
+</script>
+
+<AnchoredDropdownButton
+  {id}
+  bind:open={isOpen}
+  {disabled}
+  triggerText={selectedLabel}
+  {triggerClass}
+  panelClass="max-h-65 p-3"
+  onopen={handleOpen}
+  onclose={handleClose}
+  class={className}
+>
+  <div class="flex min-h-0 flex-1 flex-col gap-3">
+    <Input
+      bind:elementRef={filterInput}
+      bind:value={filter}
+      size="sm"
+      clearable
+      placeholder={searchPlaceholder}
+      oninput={() => void handleFilterInput()}
+      onkeydown={(event) => void handleKeydown(event)}
+    />
+
+    <div
+      id={`${id}-listbox`}
+      bind:this={listElement}
+      bind:clientHeight={listViewportHeight}
+      class="min-h-0 flex-1 overflow-y-auto rounded-lg border border-neutral-200 dark:border-neutral-700"
+      role="listbox"
+      aria-label={placeholder}
+      onscroll={handleListScroll}
+    >
+      {#if visibleOptions.length === 0}
+        <p class="px-3 py-2 text-sm text-neutral-500 dark:text-neutral-400">
+          No fonts match your search.
+        </p>
+      {:else}
+        <div style={`height: ${topSpacerPx}px;`}></div>
+
+        {#each renderedOptions as option, localIndex (option.id)}
+          {@const actualIndex = renderStartIndex + localIndex}
+          <button
+            id={`${id}-option-${actualIndex}`}
+            type="button"
+            class={getOptionClass(activeIndex === actualIndex)}
+            role="option"
+            aria-selected={value === option.value}
+            style:font-family={getFontPreviewStyle(option)}
+            onclick={() => commitSelection(option.value)}
+            onpointerenter={() => (activeIndex = actualIndex)}
+          >
+            <span class="truncate">{option.label}</span>
+            {#if value === option.value}
+              <CheckOutline class="h-4 w-4 shrink-0" />
+            {/if}
+          </button>
+        {/each}
+
+        <div style={`height: ${bottomSpacerPx}px;`}></div>
+      {/if}
+    </div>
+  </div>
+</AnchoredDropdownButton>
diff --git a/frontend/src/lib/components/Settings/ThemeModeSelect.svelte b/frontend/src/lib/components/Settings/ThemeModeSelect.svelte
new file mode 100644
index 00000000..273ea3cd
--- /dev/null
+++ b/frontend/src/lib/components/Settings/ThemeModeSelect.svelte
@@ -0,0 +1,67 @@
+<!--
+ Copyright 2026-present raml-dev
+ SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<script lang="ts">
+  import AnchoredDropdownButton from "$src/lib/components/base/AnchoredDropdownButton.svelte";
+  import type { ThemeMode } from "$src/lib/theme/themeModel";
+  import CheckOutline from "flowbite-svelte-icons/CheckOutline.svelte";
+
+  interface Props {
+    id: string;
+    value: ThemeMode;
+    triggerClass?: string;
+    onchange?: (value: ThemeMode) => void;
+  }
+
+  const OPTIONS: { value: ThemeMode; label: string }[] = [
+    { value: "light", label: "Light" },
+    { value: "dark", label: "Dark" },
+    { value: "system", label: "System" }
+  ];
+
+  let {
+    id,
+    value,
+    triggerClass = "w-full justify-between px-3 py-2 text-left",
+    onchange = () => {}
+  }: Props = $props();
+
+  let isOpen = $state(false);
+
+  const selectedLabel = $derived(
+    OPTIONS.find((option) => option.value === value)?.label || "System"
+  );
+
+  function getOptionClass(isSelected: boolean): string {
+    return [
+      "flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800",
+      isSelected
+        ? "bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-200"
+        : ""
+    ].join(" ");
+  }
+
+  function handleSelect(nextValue: ThemeMode) {
+    isOpen = false;
+    onchange(nextValue);
+  }
+</script>
+
+<AnchoredDropdownButton {id} bind:open={isOpen} {triggerClass} triggerText={selectedLabel}>
+  <div class="flex w-full min-w-48 flex-col gap-1">
+    {#each OPTIONS as option (option.value)}
+      <button
+        type="button"
+        class={getOptionClass(value === option.value)}
+        onclick={() => handleSelect(option.value)}
+      >
+        <span>{option.label}</span>
+        {#if value === option.value}
+          <CheckOutline class="h-4 w-4 shrink-0" />
+        {/if}
+      </button>
+    {/each}
+  </div>
+</AnchoredDropdownButton>
diff --git a/frontend/src/lib/components/Settings/ZoomLevelSelect.svelte b/frontend/src/lib/components/Settings/ZoomLevelSelect.svelte
new file mode 100644
index 00000000..7d56090f
--- /dev/null
+++ b/frontend/src/lib/components/Settings/ZoomLevelSelect.svelte
@@ -0,0 +1,82 @@
+<!--
+ Copyright 2026-present raml-dev
+ SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<script lang="ts">
+  import AnchoredDropdownButton from "$src/lib/components/base/AnchoredDropdownButton.svelte";
+  import { getZoomPercent } from "$src/lib/stores/zoomStore.svelte";
+  import CheckOutline from "flowbite-svelte-icons/CheckOutline.svelte";
+  import { tick } from "svelte";
+
+  interface Props {
+    id: string;
+    value: number;
+    options: number[];
+    class?: string;
+    triggerClass?: string;
+    onchange?: (value: number) => void | Promise<void>;
+  }
+
+  let {
+    id,
+    value,
+    options,
+    class: className = "",
+    triggerClass = "w-full justify-between px-3 py-2 text-left",
+    onchange = async () => {}
+  }: Props = $props();
+
+  let isOpen = $state(false);
+  let optionElements: Array<HTMLButtonElement | undefined> = $state([]);
+
+  const selectedValue = $derived(value.toFixed(2));
+  const selectedLabel = $derived(`${getZoomPercent(value)}%`);
+
+  function getOptionClass(isSelected: boolean): string {
+    return [
+      "flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800",
+      isSelected
+        ? "bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-200"
+        : ""
+    ].join(" ");
+  }
+
+  async function handleSelect(nextValue: number) {
+    isOpen = false;
+    await onchange(nextValue);
+  }
+
+  async function handleOpen() {
+    await tick();
+    const selectedIndex = options.findIndex((option) => option.toFixed(2) === selectedValue);
+    if (selectedIndex < 0) return;
+    optionElements[selectedIndex]?.scrollIntoView({ block: "nearest" });
+  }
+</script>
+
+<AnchoredDropdownButton
+  {id}
+  bind:open={isOpen}
+  class={className}
+  triggerText={selectedLabel}
+  {triggerClass}
+  panelClass="h-40 overflow-y-auto"
+  onopen={handleOpen}
+>
+  <div class="flex w-full min-w-40 flex-col gap-1">
+    {#each options as option, index (option)}
+      <button
+        bind:this={optionElements[index]}
+        type="button"
+        class={getOptionClass(selectedValue === option.toFixed(2))}
+        onclick={() => void handleSelect(option)}
+      >
+        <span>{getZoomPercent(option)}%</span>
+        {#if selectedValue === option.toFixed(2)}
+          <CheckOutline class="h-4 w-4 shrink-0" />
+        {/if}
+      </button>
+    {/each}
+  </div>
+</AnchoredDropdownButton>
diff --git a/frontend/src/lib/components/UpdateBanner.svelte b/frontend/src/lib/components/UpdateBanner.svelte
index a7f87732..215835e9 100644
--- a/frontend/src/lib/components/UpdateBanner.svelte
+++ b/frontend/src/lib/components/UpdateBanner.svelte
@@ -135,7 +135,10 @@
     {#if $topModalId === releaseNotesModal.id}
       <ToastContainer />
     {/if}
-    <article class="release-notes max-h-[65vh] overflow-y-auto" aria-label="Release notes content">
+    <article
+      class="release-notes m-2 max-h-[65vh] overflow-y-auto"
+      aria-label="Release notes content"
+    >
       <!-- eslint-disable-next-line svelte/no-at-html-tags -->
       {@html releaseNotesHtml}
     </article>
@@ -160,43 +163,46 @@
 <style>
   .release-notes :global(h1) {
     margin: 0 0 0.75rem;
-    font-size: 1.25rem;
+    font-size: var(--text-2xl);
     font-weight: 700;
     line-height: 1.4;
   }
 
   .release-notes :global(h2) {
     margin: 1rem 0 0.5rem;
-    font-size: 1.05rem;
+    font-size: var(--text-xl);
     font-weight: 650;
     line-height: 1.4;
   }
 
   .release-notes :global(h3) {
     margin: 0.875rem 0 0.5rem;
-    font-size: 0.95rem;
+    font-size: var(--text-md);
     font-weight: 650;
   }
 
   .release-notes :global(p) {
     margin: 0.5rem 0;
     line-height: 1.55;
+    font-size: var(--text-base);
   }
 
   .release-notes :global(ul),
   .release-notes :global(ol) {
     margin: 0.5rem 0 0.75rem 1.25rem;
+    font-size: var(--text-base);
   }
 
   .release-notes :global(li) {
     margin: 0.25rem 0;
+    list-style-type: disc;
   }
 
   .release-notes :global(code) {
     border-radius: 0.25rem;
     background: rgba(115, 115, 115, 0.12);
     padding: 0.05rem 0.3rem;
-    font-size: 0.85em;
+    font-size: var(--text-base);
   }
 
   .release-notes :global(pre) {
diff --git a/frontend/src/lib/components/base/AnchoredDropdownButton.svelte b/frontend/src/lib/components/base/AnchoredDropdownButton.svelte
new file mode 100644
index 00000000..83634a7e
--- /dev/null
+++ b/frontend/src/lib/components/base/AnchoredDropdownButton.svelte
@@ -0,0 +1,223 @@
+<!--
+ Copyright 2026-present raml-dev
+ SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<script lang="ts">
+  import ChevronDownOutline from "flowbite-svelte-icons/ChevronDownOutline.svelte";
+  import Button from "flowbite-svelte/Button.svelte";
+  import type { Snippet } from "svelte";
+  import { tick } from "svelte";
+
+  type AriaHaspopup = "dialog" | "menu" | "grid" | "listbox" | "tree" | true | false;
+
+  interface Props {
+    id: string;
+    open?: boolean;
+    disabled?: boolean;
+    class?: string;
+    triggerText?: string;
+    triggerTextClass?: string;
+    triggerClass?: string;
+    panelClass?: string;
+    ariaHaspopup?: AriaHaspopup;
+    matchTriggerWidth?: boolean;
+    children: Snippet;
+    trigger?: Snippet;
+    onopen?: () => void | Promise<void>;
+    onclose?: () => void;
+  }
+
+  let {
+    id,
+    open = $bindable(false),
+    disabled = false,
+    class: className = "",
+    triggerText = "",
+    triggerTextClass = "truncate text-sm",
+    triggerClass = "w-full justify-between px-3 py-2 text-left",
+    panelClass = "p-1",
+    ariaHaspopup = "listbox",
+    matchTriggerWidth = true,
+    children,
+    trigger,
+    onopen = async () => {},
+    onclose = () => {}
+  }: Props = $props();
+
+  const PANEL_GAP = 8;
+
+  let triggerWidth = $state(0);
+  let viewportHeight = $state(0);
+  let boundaryTop = $state(0);
+  let boundaryBottom = $state(0);
+  let rootTop = $state(0);
+  let rootBottom = $state(0);
+  let panelRenderedHeight = $state(0);
+  let rootElement: HTMLDivElement | undefined = $state();
+  let panelElement: HTMLDivElement | undefined = $state();
+
+  const availableSpaceAbove = $derived(Math.max(0, rootTop - boundaryTop - PANEL_GAP));
+  const availableSpaceBelow = $derived(Math.max(0, boundaryBottom - rootBottom - PANEL_GAP));
+  const preferredPanelHeight = $derived(Math.max(panelRenderedHeight, 1));
+  const opensUpward = $derived(
+    availableSpaceBelow < preferredPanelHeight && availableSpaceAbove > availableSpaceBelow
+  );
+  const availablePanelSpace = $derived(opensUpward ? availableSpaceAbove : availableSpaceBelow);
+  const shouldConstrainPanelHeight = $derived(
+    availablePanelSpace > 0 && availablePanelSpace < preferredPanelHeight
+  );
+  const panelStyle = $derived.by(() => {
+    const styles: string[] = [];
+
+    if (shouldConstrainPanelHeight) {
+      styles.push(`max-height: ${availablePanelSpace}px;`);
+    }
+
+    if (matchTriggerWidth) {
+      styles.push(`width: ${Math.max(triggerWidth, 1)}px;`);
+    }
+
+    return styles.join(" ");
+  });
+
+  function findBoundaryElement(element: HTMLElement | undefined): HTMLElement | null {
+    let current = element?.parentElement;
+
+    while (current) {
+      const style = getComputedStyle(current);
+      const overflowY = style.overflowY;
+      const isScrollable = ["auto", "scroll", "overlay", "hidden", "clip"].includes(overflowY);
+
+      if (isScrollable && current !== document.body && current !== document.documentElement) {
+        return current;
+      }
+
+      current = current.parentElement;
+    }
+
+    return null;
+  }
+
+  function measureAnchor() {
+    if (!rootElement) return;
+
+    const boundaryElement = findBoundaryElement(rootElement);
+    const rect = rootElement.getBoundingClientRect();
+
+    rootTop = rect.top;
+    rootBottom = rect.bottom;
+
+    if (boundaryElement) {
+      const boundaryRect = boundaryElement.getBoundingClientRect();
+      boundaryTop = boundaryRect.top;
+      boundaryBottom = boundaryRect.bottom;
+      return;
+    }
+
+    boundaryTop = 0;
+    boundaryBottom = viewportHeight;
+  }
+
+  function measurePanel() {
+    if (!panelElement) return;
+    panelRenderedHeight = panelElement.getBoundingClientRect().height;
+  }
+
+  async function setOpen(nextOpen: boolean) {
+    if (open === nextOpen) return;
+
+    open = nextOpen;
+    if (!open) {
+      onclose();
+      return;
+    }
+
+    measureAnchor();
+    await tick();
+    measurePanel();
+    await onopen();
+    await tick();
+    measurePanel();
+    measureAnchor();
+  }
+
+  async function toggleOpen() {
+    await setOpen(!open);
+  }
+
+  function closeDropdown() {
+    void setOpen(false);
+  }
+
+  function handleDocumentMouseDown(event: MouseEvent) {
+    if (!open) return;
+    const target = event.target;
+    if (!(target instanceof Node)) return;
+    if (rootElement?.contains(target)) return;
+    closeDropdown();
+  }
+
+  function handleWindowKeydown(event: KeyboardEvent) {
+    if (!open || event.key !== "Escape") return;
+    closeDropdown();
+  }
+
+  function handleDocumentScroll() {
+    if (!open) return;
+    measureAnchor();
+    measurePanel();
+  }
+
+  function handleTriggerKeydown(event: KeyboardEvent) {
+    if (["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
+      event.preventDefault();
+      void setOpen(true);
+    }
+  }
+</script>
+
+<svelte:document
+  onmousedown={handleDocumentMouseDown}
+  onkeydown={handleWindowKeydown}
+  onscroll={handleDocumentScroll}
+/>
+<svelte:window
+  bind:innerHeight={viewportHeight}
+  onresize={() => {
+    measureAnchor();
+    measurePanel();
+  }}
+/>
+
+<div class={["relative w-full", className]} bind:this={rootElement} bind:offsetWidth={triggerWidth}>
+  <Button
+    {id}
+    color="light"
+    class={triggerClass}
+    {disabled}
+    aria-haspopup={ariaHaspopup}
+    aria-expanded={open}
+    aria-controls={`${id}-panel`}
+    onclick={() => void toggleOpen()}
+    onkeydown={handleTriggerKeydown}
+  >
+    {#if trigger}
+      {@render trigger()}
+    {:else}
+      <span class={triggerTextClass}>{triggerText}</span>
+      <ChevronDownOutline class="ms-2 h-4 w-4 shrink-0" />
+    {/if}
+  </Button>
+
+  {#if open}
+    <div
+      id={`${id}-panel`}
+      bind:this={panelElement}
+      class={`absolute left-0 z-30 flex rounded-lg border border-neutral-200 bg-white shadow-lg dark:border-neutral-700 dark:bg-neutral-900 ${panelClass} ${opensUpward ? "bottom-full mb-1" : "top-full mt-1"}`}
+      style={panelStyle}
+    >
+      {@render children()}
+    </div>
+  {/if}
+</div>
diff --git a/frontend/src/lib/components/common/ContextMenu.svelte b/frontend/src/lib/components/common/ContextMenu.svelte
index a3188a48..ac93d21c 100644
--- a/frontend/src/lib/components/common/ContextMenu.svelte
+++ b/frontend/src/lib/components/common/ContextMenu.svelte
@@ -4,11 +4,10 @@
 -->
 
 <script lang="ts">
+  import { CONTEXT_MENU_OPEN_EVENT } from "$src/lib/utils/constants";
   import Dropdown from "flowbite-svelte/Dropdown.svelte";
   import { onMount } from "svelte";
 
-  const CONTEXT_MENU_OPEN_EVENT = "solo:context-menu-open";
-
   interface Props {
     triggeredBy: string;
     isOpen?: boolean;
diff --git a/frontend/src/lib/fonts.ts b/frontend/src/lib/fonts.ts
new file mode 100644
index 00000000..8dde57e1
--- /dev/null
+++ b/frontend/src/lib/fonts.ts
@@ -0,0 +1,39 @@
+/**
+ * Copyright 2026-present raml-dev
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { fonts } from "$wails/go/models";
+
+export interface FontLists {
+  allDefault: string[];
+  allMono: string[];
+}
+
+function sortFamilies(families: Set<string>) {
+  return [...families].sort((a, b) => a.localeCompare(b));
+}
+
+export function splitSystemFonts(systemFonts: fonts.SystemFont[]): FontLists {
+  const allDefault = new Set<string>();
+  const allMono = new Set<string>();
+
+  for (const font of systemFonts) {
+    const family = font.family?.trim();
+    if (!family) continue;
+
+    const allTarget = font.isMonospace ? allMono : allDefault;
+
+    allTarget.add(family);
+  }
+
+  return {
+    // use all available fonts for the default font selector
+    allDefault: sortFamilies(new Set([...allDefault, ...allMono])),
+    allMono: sortFamilies(allMono)
+  };
+}
+
+export function sanitizeFontFamily(family: string | undefined) {
+  return (family ?? "").replaceAll('"', "").replaceAll("'", "").trim();
+}
diff --git a/frontend/src/lib/stores/configurationStore.svelte.ts b/frontend/src/lib/stores/configurationStore.svelte.ts
index 581f795b..ed4a8f97 100644
--- a/frontend/src/lib/stores/configurationStore.svelte.ts
+++ b/frontend/src/lib/stores/configurationStore.svelte.ts
@@ -3,28 +3,53 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { sanitizeFontFamily } from "$src/lib/fonts";
 import { notifications } from "$src/lib/stores/notificationStore";
 import type { ThemeMode } from "$src/lib/theme/themeModel";
 import {
   applyTheme,
   applyThemeMode as applyThemeModeRuntime,
+  applyTypography,
   ensureSystemThemeModeListener,
   setActiveThemeMode
 } from "$src/lib/theme/themeRuntime";
+import {
+  DEFAULT_ZOOM_LEVEL,
+  MAX_ZOOM_LEVEL,
+  MIN_ZOOM_LEVEL,
+  SAVE_DEBOUNCE_MS,
+  SAVED_STATUS_TIMEOUT_MS
+} from "$src/lib/utils/constants";
 import { debounce } from "$src/lib/utils/debounce";
 import {
   GetAllThemes,
   GetConfiguration,
   SetActiveTheme,
+  SetDefaultFontFamily,
+  SetMonoFontFamily,
   UpdateConfiguration
 } from "$wails/go/main/App";
 import { configuration, theme } from "$wails/go/models";
 
-const SAVE_DEBOUNCE_MS = 800;
-const SAVED_STATUS_TIMEOUT_MS = 1500;
+type TypographySettingsSnapshot = {
+  defaultFontFamily: string;
+  monoFontFamily: string;
+};
+
+function normalizeZoomLevel(level: number | null | undefined): number {
+  if (!Number.isFinite(level)) {
+    return DEFAULT_ZOOM_LEVEL;
+  }
+
+  return Math.min(MAX_ZOOM_LEVEL, Math.max(MIN_ZOOM_LEVEL, Number(level)));
+}
 
 function createEmptyConfig(): configuration.Configuration {
   const general = { ...new configuration.GeneralSettings() };
+  general.defaultFontFamily ??= "";
+  general.monoFontFamily ??= "";
+  general.zoomLevel = normalizeZoomLevel(general.zoomLevel);
+
   const request = { ...new configuration.RequestSettings() };
 
   return {
@@ -46,7 +71,10 @@ function normalizeConfig(raw?: configuration.Configuration | null): configuratio
   return {
     general: {
       ...base.general,
-      ...(source.general || {})
+      ...(source.general || {}),
+      defaultFontFamily: sanitizeFontFamily(source.general?.defaultFontFamily),
+      monoFontFamily: sanitizeFontFamily(source.general?.monoFontFamily),
+      zoomLevel: normalizeZoomLevel(source.general?.zoomLevel)
     },
     request: {
       ...base.request,
@@ -66,7 +94,8 @@ function getPersistenceSignature(cfg: configuration.Configuration): string {
       debugMode: cfg.general?.debugMode ?? false,
       dayTheme: cfg.general?.dayTheme ?? "",
       nightTheme: cfg.general?.nightTheme ?? "",
-      selectedEnvironment: cfg.general?.selectedEnvironment ?? ""
+      selectedEnvironment: cfg.general?.selectedEnvironment ?? "",
+      zoomLevel: normalizeZoomLevel(cfg.general?.zoomLevel)
     },
     request: {
       timeoutSeconds: cfg.request?.timeoutSeconds ?? 30,
@@ -80,6 +109,19 @@ function getPersistenceSignature(cfg: configuration.Configuration): string {
   });
 }
 
+function getTypographySnapshot(
+  cfg: configuration.Configuration = configurationStoreState.config
+): TypographySettingsSnapshot {
+  return {
+    defaultFontFamily: sanitizeFontFamily(cfg.general?.defaultFontFamily),
+    monoFontFamily: sanitizeFontFamily(cfg.general?.monoFontFamily)
+  };
+}
+
+function getTypographySignature(snapshot: TypographySettingsSnapshot): string {
+  return JSON.stringify(snapshot);
+}
+
 export interface ConfigurationStoreState {
   config: configuration.Configuration;
   allThemes: theme.Theme[];
@@ -106,6 +148,9 @@ export const configurationStoreState: ConfigurationStoreState = $state({
 
 let isHydratingConfig = false;
 let lastPersistedSignature: string | null = null;
+let lastPersistedDefaultFontFamily: string | null = null;
+let lastPersistedMonoFontFamily: string | null = null;
+let typographyPersistenceChain: Promise<void> = Promise.resolve();
 
 export function getConfigSnapshot(): configuration.Configuration {
   return cloneConfig(configurationStoreState.config);
@@ -126,16 +171,22 @@ function applyActiveTheme() {
   }
 }
 
+function getConfigSnapshotForPersistence(): configuration.Configuration {
+  const snapshot = getConfigSnapshot();
+  snapshot.general.defaultFontFamily = lastPersistedDefaultFontFamily ?? "";
+  snapshot.general.monoFontFamily = lastPersistedMonoFontFamily ?? "";
+  return snapshot;
+}
+
 async function persistConfig() {
   if (!configurationStoreState.initialized || isHydratingConfig) return;
 
-  const snapshot = getConfigSnapshot();
-  const signature = getPersistenceSignature(snapshot);
+  const signature = getPersistenceSignature(configurationStoreState.config);
   if (signature === lastPersistedSignature) return;
 
   configurationStoreState.saveStatus = "saving";
   try {
-    await UpdateConfiguration(snapshot);
+    await UpdateConfiguration(getConfigSnapshotForPersistence());
     lastPersistedSignature = signature;
     configurationStoreState.saveStatus = "saved";
     setTimeout(() => {
@@ -153,14 +204,109 @@ const debouncedPersistConfig = debounce(() => {
   void persistConfig();
 }, SAVE_DEBOUNCE_MS);
 
+function enqueueTypographyPersistence(task: () => Promise<void>) {
+  const run = typographyPersistenceChain.then(task, task);
+  typographyPersistenceChain = run.catch(() => undefined);
+  return run;
+}
+
+function applyTypographySnapshot(snapshot: TypographySettingsSnapshot) {
+  configurationStoreState.config.general.defaultFontFamily = snapshot.defaultFontFamily;
+  configurationStoreState.config.general.monoFontFamily = snapshot.monoFontFamily;
+  applyTypography(configurationStoreState.config.general);
+}
+
+async function persistDefaultFontFamily(fontFamily: string, previousFontFamily: string) {
+  if (!configurationStoreState.initialized || isHydratingConfig) return;
+  if (fontFamily === lastPersistedDefaultFontFamily) return;
+
+  await enqueueTypographyPersistence(async () => {
+    if (fontFamily === lastPersistedDefaultFontFamily) return;
+
+    try {
+      await SetDefaultFontFamily(fontFamily);
+      lastPersistedDefaultFontFamily = fontFamily;
+    } catch (error) {
+      if (
+        sanitizeFontFamily(configurationStoreState.config.general.defaultFontFamily) === fontFamily
+      ) {
+        applyTypographySnapshot({
+          ...getTypographySnapshot(),
+          defaultFontFamily: previousFontFamily
+        });
+      }
+      notifications.error("Failed to set default font family", String(error));
+      throw error;
+    }
+  });
+}
+
+async function persistMonoFontFamily(fontFamily: string, previousFontFamily: string) {
+  if (!configurationStoreState.initialized || isHydratingConfig) return;
+  if (fontFamily === lastPersistedMonoFontFamily) return;
+
+  await enqueueTypographyPersistence(async () => {
+    if (fontFamily === lastPersistedMonoFontFamily) return;
+
+    try {
+      await SetMonoFontFamily(fontFamily);
+      lastPersistedMonoFontFamily = fontFamily;
+    } catch (error) {
+      if (
+        sanitizeFontFamily(configurationStoreState.config.general.monoFontFamily) === fontFamily
+      ) {
+        applyTypographySnapshot({
+          ...getTypographySnapshot(),
+          monoFontFamily: previousFontFamily
+        });
+      }
+      notifications.error("Failed to set monospace font family", String(error));
+      throw error;
+    }
+  });
+}
+
+async function persistTypographyReset(
+  nextSnapshot: TypographySettingsSnapshot,
+  previousSnapshot: TypographySettingsSnapshot
+) {
+  if (!configurationStoreState.initialized || isHydratingConfig) return;
+
+  const nextSignature = getTypographySignature(nextSnapshot);
+  const previousSignature = getTypographySignature(previousSnapshot);
+  if (nextSignature === previousSignature) return;
+
+  await enqueueTypographyPersistence(async () => {
+    try {
+      await Promise.all([
+        SetDefaultFontFamily(nextSnapshot.defaultFontFamily),
+        SetMonoFontFamily(nextSnapshot.monoFontFamily)
+      ]);
+      lastPersistedDefaultFontFamily = nextSnapshot.defaultFontFamily;
+      lastPersistedMonoFontFamily = nextSnapshot.monoFontFamily;
+    } catch (error) {
+      if (getTypographySignature(getTypographySnapshot()) === nextSignature) {
+        applyTypographySnapshot(previousSnapshot);
+      }
+      notifications.error("Failed to reset typography", String(error));
+      throw error;
+    }
+  });
+}
+
 function resolveAppliedMode(themeMode: ThemeMode) {
   if (themeMode === "system") return systemIsDark ? "dark" : "light";
   return themeMode;
 }
+
 export function saveConfig() {
   debouncedPersistConfig();
 }
 
+export function setConfigZoomLevel(level: number) {
+  configurationStoreState.config.general.zoomLevel = normalizeZoomLevel(level);
+}
+
 export const configurationStore = {
   async init() {
     isHydratingConfig = true;
@@ -168,6 +314,7 @@ export const configurationStore = {
       const [cfg, themes] = await Promise.all([GetConfiguration(), GetAllThemes()]);
       const normalizedConfig = normalizeConfig(cfg);
       const normalizedThemes = (themes || []).map((t) => new theme.Theme(t));
+      const typographySnapshot = getTypographySnapshot(normalizedConfig);
 
       configurationStoreState.config = normalizedConfig;
       configurationStoreState.allThemes = normalizedThemes;
@@ -177,6 +324,8 @@ export const configurationStore = {
       );
       configurationStoreState.saveStatus = "idle";
       lastPersistedSignature = getPersistenceSignature(normalizedConfig);
+      lastPersistedDefaultFontFamily = typographySnapshot.defaultFontFamily;
+      lastPersistedMonoFontFamily = typographySnapshot.monoFontFamily;
 
       const mode = normalizedConfig.general?.themeMode as ThemeMode;
       if (mode) {
@@ -184,6 +333,7 @@ export const configurationStore = {
         applyThemeModeRuntime(mode);
       }
       applyActiveTheme();
+      applyTypography(normalizedConfig.general);
     } catch (error) {
       notifications.error("Failed to initialize configuration", String(error), true);
     } finally {
@@ -206,7 +356,44 @@ export const configurationStore = {
   applyThemeMode(mode: ThemeMode) {
     setActiveThemeMode(mode);
     applyThemeModeRuntime(mode);
+    configurationStoreState.config.general.themeMode = mode;
     configurationStoreState.appliedThemeMode = resolveAppliedMode(mode);
+  },
+
+  async changeDefaultFontFamily(family: string) {
+    const previousSnapshot = getTypographySnapshot();
+    const nextSnapshot = {
+      ...previousSnapshot,
+      defaultFontFamily: sanitizeFontFamily(family)
+    };
+
+    applyTypographySnapshot(nextSnapshot);
+    await persistDefaultFontFamily(
+      nextSnapshot.defaultFontFamily,
+      previousSnapshot.defaultFontFamily
+    );
+  },
+
+  async changeMonoFontFamily(family: string) {
+    const previousSnapshot = getTypographySnapshot();
+    const nextSnapshot = {
+      ...previousSnapshot,
+      monoFontFamily: sanitizeFontFamily(family)
+    };
+
+    applyTypographySnapshot(nextSnapshot);
+    await persistMonoFontFamily(nextSnapshot.monoFontFamily, previousSnapshot.monoFontFamily);
+  },
+
+  async resetTypography() {
+    const previousSnapshot = getTypographySnapshot();
+    const nextSnapshot: TypographySettingsSnapshot = {
+      defaultFontFamily: "",
+      monoFontFamily: ""
+    };
+
+    applyTypographySnapshot(nextSnapshot);
+    await persistTypographyReset(nextSnapshot, previousSnapshot);
   }
 };
 
diff --git a/frontend/src/lib/stores/environmentStore.svelte.ts b/frontend/src/lib/stores/environmentStore.svelte.ts
index 7481de75..c454dc1c 100644
--- a/frontend/src/lib/stores/environmentStore.svelte.ts
+++ b/frontend/src/lib/stores/environmentStore.svelte.ts
@@ -4,6 +4,7 @@
  */
 
 import { notifications } from "$src/lib/stores/notificationStore";
+import { DEFAULT_ENV_NAME } from "$src/lib/utils/constants";
 import {
   CreateEnvironment,
   DeleteEnvironment,
@@ -34,8 +35,6 @@ const initialState: EnvironmentState = {
   renameEnvironmentName: null
 };
 
-export const DEFAULT_ENV_NAME = "default";
-
 export const environmentStoreState = $state<EnvironmentState>({ ...initialState });
 
 function hasEnvironmentName(name: string): boolean {
diff --git a/frontend/src/lib/stores/fontListsStore.svelte.ts b/frontend/src/lib/stores/fontListsStore.svelte.ts
new file mode 100644
index 00000000..9d757747
--- /dev/null
+++ b/frontend/src/lib/stores/fontListsStore.svelte.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright 2026-present raml-dev
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { splitSystemFonts, type FontLists } from "$src/lib/fonts";
+import { notifications } from "$src/lib/stores/notificationStore";
+import { ListSystemFonts } from "$wails/go/main/App";
+import type { fonts } from "$wails/go/models";
+
+export interface FontListsStoreState {
+  lists: FontLists;
+  loading: boolean;
+  ready: boolean;
+  error: string | null;
+}
+
+export const fontListsStoreState: FontListsStoreState = $state({
+  lists: { allDefault: [], allMono: [] },
+  loading: false,
+  ready: false,
+  error: null
+});
+
+async function loadFontLists(refresh: boolean) {
+  const systemFonts = (await ListSystemFonts(refresh)) || ([] as fonts.SystemFont[]);
+  return splitSystemFonts(systemFonts);
+}
+
+async function load(refresh: boolean) {
+  if (fontListsStoreState.loading) return;
+
+  fontListsStoreState.loading = true;
+  fontListsStoreState.error = null;
+
+  try {
+    fontListsStoreState.lists = await loadFontLists(refresh);
+    fontListsStoreState.ready = true;
+  } catch (error) {
+    fontListsStoreState.error = String(error);
+    notifications.error("Could not load system fonts", String(error));
+  } finally {
+    fontListsStoreState.loading = false;
+  }
+}
+
+export const fontListsStore = {
+  async init() {
+    if (fontListsStoreState.ready || fontListsStoreState.loading) return;
+    await load(false);
+  },
+
+  async refresh() {
+    await load(true);
+  }
+};
diff --git a/frontend/src/lib/stores/historyStore.svelte.ts b/frontend/src/lib/stores/historyStore.svelte.ts
index 1ade1775..d136a19f 100644
--- a/frontend/src/lib/stores/historyStore.svelte.ts
+++ b/frontend/src/lib/stores/historyStore.svelte.ts
@@ -5,6 +5,7 @@
 
 import { appInfoState } from "$src/lib/stores/appInfo.svelte";
 import { notifications } from "$src/lib/stores/notificationStore";
+import { HISTORY_MAX_ENTRIES } from "$src/lib/utils/constants";
 import { SaveHarFile } from "$wails/go/main/App";
 import { writable } from "svelte/store";
 
@@ -32,8 +33,6 @@ export interface HistoryEntry {
   error: string | null;
 }
 
-const MAX_ENTRIES = 500;
-
 const version = $derived(appInfoState.info?.productVersion ?? "");
 
 interface HistoryStoreState {
@@ -119,7 +118,7 @@ function createHistoryStore() {
       };
       update((list) => {
         const next = [newEntry, ...list];
-        return next.length > MAX_ENTRIES ? next.slice(0, MAX_ENTRIES) : next;
+        return next.length > HISTORY_MAX_ENTRIES ? next.slice(0, HISTORY_MAX_ENTRIES) : next;
       });
     },
 
diff --git a/frontend/src/lib/stores/tabStore.svelte.ts b/frontend/src/lib/stores/tabStore.svelte.ts
index 1d08dadf..2e6c28f6 100644
--- a/frontend/src/lib/stores/tabStore.svelte.ts
+++ b/frontend/src/lib/stores/tabStore.svelte.ts
@@ -7,6 +7,12 @@ import type { InputFormat } from "$src/lib/components/RequestBuilder/types";
 import { collectionStore, collectionStoreState } from "$src/lib/stores/collectionStore.svelte";
 import { notifications } from "$src/lib/stores/notificationStore";
 import { sessionVarsStore } from "$src/lib/stores/sessionVarsStore";
+import {
+  EMPTY_TAB_LABEL,
+  MAX_OPEN_TABS,
+  REQUEST_RUNNER_MAX_VISIBLE_RESULTS,
+  TAB_STORAGE_KEY
+} from "$src/lib/utils/constants";
 import { filterInPlace } from "$src/lib/utils/helpers";
 import { detectResponseFormat, getHttpStatusString, prettyPrint } from "$src/lib/utils/http";
 import { CancelExecute, CancelRunner, Execute, RunParallel } from "$wails/go/main/App";
@@ -76,15 +82,10 @@ interface TabStoreState {
   activeTabIndex: number; // -1 when no active tab
 }
 
-const EMPTY_TAB_LABEL = "New Request";
-const MAX_OPEN_TABS = 15;
-const STORAGE_KEY = "tabs";
-const MAX_VISIBLE_RESULTS = 50;
-
 export const tabStoreState: TabStoreState = $state(initState());
 
 function initState() {
-  const localStorageData = localStorage.getItem(STORAGE_KEY);
+  const localStorageData = localStorage.getItem(TAB_STORAGE_KEY);
   if (localStorageData) {
     const state = JSON.parse(localStorageData) as TabStoreState;
     // Ensure loading is always false on startup
@@ -484,7 +485,7 @@ export function storeTabsInLocalStorage() {
       return tabCopy;
     })
   };
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(stateToSave));
+  localStorage.setItem(TAB_STORAGE_KEY, JSON.stringify(stateToSave));
 }
 
 /**
@@ -597,7 +598,7 @@ export async function startRunnerActiveTab() {
     EventsOn("runner:result", (res: runner.RunnerResult) => {
       tab.runnerState.lastResults = [res, ...tab.runnerState.lastResults].slice(
         0,
-        MAX_VISIBLE_RESULTS
+        REQUEST_RUNNER_MAX_VISIBLE_RESULTS
       );
       tab.runnerState.progress = Math.min(
         100,
diff --git a/frontend/src/lib/stores/windowDimensionsStore.svelte.ts b/frontend/src/lib/stores/windowDimensionsStore.svelte.ts
index a8712170..1be53cd0 100644
--- a/frontend/src/lib/stores/windowDimensionsStore.svelte.ts
+++ b/frontend/src/lib/stores/windowDimensionsStore.svelte.ts
@@ -3,6 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import {
+  WINDOW_DEFAULT_HEIGHT,
+  WINDOW_DEFAULT_WIDTH,
+  WINDOW_STATE_STORAGE_KEY
+} from "$src/lib/utils/constants";
 import {
   WindowFullscreen,
   WindowGetSize,
@@ -19,10 +24,6 @@ interface WindowState {
   fullscreen: boolean;
 }
 
-const WINDOW_STATE_KEY = "windowState";
-const DEFAULT_WIDTH = 1024;
-const DEFAULT_HEIGHT = 768;
-
 /**
  *  windowState holds the window status:
  * - dimensions (when not maximized/fullscreen, used to restore to those when unmaximizing/toggling fullscreen)
@@ -56,21 +57,21 @@ async function trackWindowState(): Promise<void> {
 
 function loadWindowState(): WindowState {
   try {
-    const saved = localStorage.getItem(WINDOW_STATE_KEY);
+    const saved = localStorage.getItem(WINDOW_STATE_STORAGE_KEY);
     if (saved) return JSON.parse(saved) as WindowState;
   } catch {
     // ignore malformed data
   }
   return {
-    width: DEFAULT_WIDTH,
-    height: DEFAULT_HEIGHT,
+    width: WINDOW_DEFAULT_WIDTH,
+    height: WINDOW_DEFAULT_HEIGHT,
     maximised: false,
     fullscreen: false
   };
 }
 
 export function saveWindowState() {
-  localStorage.setItem(WINDOW_STATE_KEY, JSON.stringify(windowState));
+  localStorage.setItem(WINDOW_STATE_STORAGE_KEY, JSON.stringify(windowState));
 }
 
 export function initWindowDimensions() {
diff --git a/frontend/src/lib/stores/zoomStore.svelte.ts b/frontend/src/lib/stores/zoomStore.svelte.ts
index 41e3355b..63611328 100644
--- a/frontend/src/lib/stores/zoomStore.svelte.ts
+++ b/frontend/src/lib/stores/zoomStore.svelte.ts
@@ -3,65 +3,136 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { setConfigZoomLevel } from "$src/lib/stores/configurationStore.svelte";
 import { notifications } from "$src/lib/stores/notificationStore";
+import {
+  DEFAULT_ZOOM_LEVEL,
+  MAX_ZOOM_LEVEL,
+  MIN_ZOOM_LEVEL,
+  ZOOM_STEP
+} from "$src/lib/utils/constants";
+import { SetZoomLevel } from "$wails/go/main/App";
 
-const STEP = 0.1;
-const MIN = 0.5;
-const MAX = 2.0;
-const STORAGE_KEY = "ui-zoom";
+export const zoomState = $state({
+  level: DEFAULT_ZOOM_LEVEL,
+  initialized: false
+});
 
-const zoomState = $state({ level: parseFloat(localStorage.getItem(STORAGE_KEY) ?? "1") });
 let notificationId = $state("");
 let hideTimer: ReturnType<typeof setTimeout> | null = null;
 
-function apply(notify: boolean = true) {
-  document.documentElement.style.zoom = String(zoomState.level);
-  localStorage.setItem(STORAGE_KEY, String(zoomState.level));
-  if (notify) {
-    if (notificationId) {
-      notifications.updateNotificationById(
-        notificationId,
-        "Zoom:",
-        Math.floor(zoomState.level * 100) + "%"
-      );
-    } else {
-      notificationId = notifications.notify(
-        "info",
-        "Zoom:",
-        Math.floor(zoomState.level * 100) + "%",
-        true
-      );
-    }
-    if (hideTimer) clearTimeout(hideTimer);
-    hideTimer = setTimeout(() => {
-      notifications.dismiss(notificationId);
-      notificationId = "";
-    }, 2000);
+function clampZoomLevel(level: number | null | undefined): number {
+  const numericLevel = Number(level);
+  if (!Number.isFinite(numericLevel)) {
+    return DEFAULT_ZOOM_LEVEL;
   }
+
+  return Math.min(MAX_ZOOM_LEVEL, Math.max(MIN_ZOOM_LEVEL, Number(numericLevel.toFixed(2))));
+}
+
+function applyZoomLevel(level: number, notify: boolean = false) {
+  const nextLevel = clampZoomLevel(level);
+  zoomState.level = nextLevel;
+  document.documentElement.style.zoom = String(nextLevel);
+
+  if (!notify) {
+    return;
+  }
+
+  const message = `${getZoomPercent(nextLevel)}%`;
+  if (notificationId) {
+    notifications.updateNotificationById(notificationId, "Zoom:", message);
+  } else {
+    notificationId = notifications.notify("info", "Zoom:", message, true);
+  }
+
+  if (hideTimer) {
+    clearTimeout(hideTimer);
+  }
+
+  hideTimer = setTimeout(() => {
+    notifications.dismiss(notificationId);
+    notificationId = "";
+  }, 2000);
+}
+
+async function persistAndSyncZoom(nextLevel: number, previousLevel: number) {
+  try {
+    await SetZoomLevel(nextLevel);
+    setConfigZoomLevel(nextLevel);
+  } catch (error) {
+    applyZoomLevel(previousLevel, false);
+    setConfigZoomLevel(previousLevel);
+    notifications.error("Failed to set zoom level", String(error));
+    throw error;
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  const hasModifier = event.metaKey || event.ctrlKey;
+  if (!hasModifier) {
+    return;
+  }
+
+  if (event.key === "=" || event.key === "+") {
+    event.preventDefault();
+    void increaseZoom(true);
+    return;
+  }
+
+  if (event.key === "-") {
+    event.preventDefault();
+    void decreaseZoom(true);
+    return;
+  }
+
+  if (event.key === "0") {
+    event.preventDefault();
+    void resetZoom(true);
+  }
+}
+
+export function getZoomPercent(level: number): number {
+  return Math.round(clampZoomLevel(level) * 100);
 }
 
-function handleKeydown(e: KeyboardEvent) {
-  const mod = e.metaKey || e.ctrlKey;
-  if (!mod) return;
-  if (e.key === "=" || e.key === "+") {
-    e.preventDefault();
-    zoomState.level = Math.min(MAX, parseFloat((zoomState.level + STEP).toFixed(2)));
-    apply();
-  } else if (e.key === "-") {
-    e.preventDefault();
-    zoomState.level = Math.max(MIN, parseFloat((zoomState.level - STEP).toFixed(2)));
-    apply();
-  } else if (e.key === "0") {
-    e.preventDefault();
-    zoomState.level = 1;
-    apply();
+export function initZoom(level: number = DEFAULT_ZOOM_LEVEL) {
+  applyZoomLevel(level, false);
+  setConfigZoomLevel(level);
+  zoomState.initialized = true;
+}
+
+export async function setZoomLevel(level: number, notify: boolean = false) {
+  const previousLevel = zoomState.level;
+  const nextLevel = clampZoomLevel(level);
+
+  if (zoomState.initialized && nextLevel === previousLevel) {
+    return;
   }
+
+  applyZoomLevel(nextLevel, notify);
+
+  if (!zoomState.initialized) {
+    zoomState.initialized = true;
+    return;
+  }
+
+  await persistAndSyncZoom(nextLevel, previousLevel);
 }
 
-export function initZoom() {
-  apply(false); // restore persisted zoom on startup
+export async function increaseZoom(notify: boolean = false) {
+  await setZoomLevel(zoomState.level + ZOOM_STEP, notify);
+}
+
+export async function decreaseZoom(notify: boolean = false) {
+  await setZoomLevel(zoomState.level - ZOOM_STEP, notify);
+}
+
+export async function resetZoom(notify: boolean = false) {
+  await setZoomLevel(DEFAULT_ZOOM_LEVEL, notify);
+}
+
+export function registerZoomShortcuts() {
   window.addEventListener("keydown", handleKeydown);
   return () => window.removeEventListener("keydown", handleKeydown);
 }
-
-export { zoomState };
diff --git a/frontend/src/lib/theme/themeRuntime.ts b/frontend/src/lib/theme/themeRuntime.ts
index 759c7bf0..372cfa7d 100644
--- a/frontend/src/lib/theme/themeRuntime.ts
+++ b/frontend/src/lib/theme/themeRuntime.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { sanitizeFontFamily } from "$src/lib/fonts";
 import { THEME_PRESETS, type ThemeMode, type ThemeSeeds } from "$src/lib/theme/themeModel";
 import type { theme } from "$wails/go/models";
 
@@ -105,6 +106,25 @@ export function applyTheme(themeDef: theme.Theme) {
   }
 }
 
+export function applyTypography(opts: { defaultFontFamily?: string; monoFontFamily?: string }) {
+  const root = document.documentElement.style;
+
+  const defaultFontFamily = sanitizeFontFamily(opts.defaultFontFamily);
+  const monoFontFamily = sanitizeFontFamily(opts.monoFontFamily);
+
+  if (defaultFontFamily) {
+    root.setProperty("--font-sans", `"${defaultFontFamily}", sans-serif`);
+  } else {
+    root.removeProperty("--font-sans");
+  }
+
+  if (monoFontFamily) {
+    root.setProperty("--font-mono", `"${monoFontFamily}", monospace`);
+  } else {
+    root.removeProperty("--font-mono");
+  }
+}
+
 export function applyThemeMode(mode: ThemeMode) {
   const root = document.documentElement;
 
diff --git a/frontend/src/lib/utils/constants.ts b/frontend/src/lib/utils/constants.ts
new file mode 100644
index 00000000..b0064c34
--- /dev/null
+++ b/frontend/src/lib/utils/constants.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2026-present raml-dev
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+// wails events
+export const CONTEXT_MENU_OPEN_EVENT = "solo:context-menu-open";
+
+export const DEFAULT_ENV_NAME = "default";
+export const EMPTY_TAB_LABEL = "New Request";
+
+// window management
+export const WINDOW_DEFAULT_WIDTH = 1024;
+export const WINDOW_DEFAULT_HEIGHT = 768;
+export const WINDOW_STATE_STORAGE_KEY = "windowState";
+export const TAB_STORAGE_KEY = "tabs";
+
+export const ENV_AUTOCOMPLETE_DEFAULT_TRIGGER = "{{";
+export const ENV_AUTOCOMPLETE_DEFAULT_MAX_ITEMS = 8;
+export const ENV_AUTOCOMPLETE_DEFAULT_INSERT_MODE = "value";
+
+export const DEFAULT_ZOOM_LEVEL = 1;
+export const MIN_ZOOM_LEVEL = 0.5;
+export const MAX_ZOOM_LEVEL = 2.0;
+export const ZOOM_STEP = 0.1;
+export const ZOOM_LEVEL_OPTIONS = Array.from(
+  { length: Math.round((MAX_ZOOM_LEVEL - MIN_ZOOM_LEVEL) / ZOOM_STEP) + 1 },
+  (_, index) => Number((MIN_ZOOM_LEVEL + index * ZOOM_STEP).toFixed(2))
+);
+
+export const SAVE_DEBOUNCE_MS = 800;
+export const SAVED_STATUS_TIMEOUT_MS = 1500;
+
+export const ENV_TOKEN_REGEX = /\{\{([^{}\r\n]+?)\}\}/g;
+
+export const XML_INDENT = "  ";
+
+export const APP_HISTORY_PANE_MIN_HEIGHT = 120;
+export const APP_HISTORY_PANE_MAX_HEIGHT = 700;
+export const HISTORY_MAX_ENTRIES = 500;
+
+export const MAX_OPEN_TABS = 15;
+export const MAX_REQUESTS_BEFORE_TRIM = 99;
+export const REQUEST_RUNNER_MAX_VISIBLE_RESULTS = 50;
+
+export const COLLECTION_OUTLINE_BUTTON_CLASSES =
+  "text-neutral-800/70 hover:text-neutral-800 dark:text-neutral-100/70 dark:hover:text-neutral-100";
+
+export const FONT_FAMILY_SELECT_LIST_ROW_HEIGHT = 36;
+export const FONT_FAMILY_SELECT_LIST_OVERSCAN = 5;
+export const FONT_FAMILY_SELECT_PANEL_GAP = 8;
+export const FONT_FAMILY_SELECT_PREFERRED_PANEL_HEIGHT = 360;
diff --git a/frontend/src/lib/utils/helpers.ts b/frontend/src/lib/utils/helpers.ts
index 4cc90d5b..93f4424c 100644
--- a/frontend/src/lib/utils/helpers.ts
+++ b/frontend/src/lib/utils/helpers.ts
@@ -3,10 +3,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { MAX_REQUESTS_BEFORE_TRIM } from "$src/lib/utils/constants";
 import type { collection } from "$wails/go/models";
 
-const MAX_REQUESTS_BEFORE_TRIM = 99;
-
 /**
  * Filters the array _in place_ to only retain elements matching the given predicate.
  *
diff --git a/frontend/src/lib/utils/tokens.ts b/frontend/src/lib/utils/tokens.ts
index c8205910..e061352b 100644
--- a/frontend/src/lib/utils/tokens.ts
+++ b/frontend/src/lib/utils/tokens.ts
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { ENV_TOKEN_REGEX } from "$src/lib/utils/constants";
 import { Decoration, EditorView, ViewPlugin, type DecorationSet } from "@codemirror/view";
 
 export interface TextSegment {
@@ -77,8 +78,6 @@ interface TokenizedEditorThemeOptions {
   singleLine?: boolean;
 }
 
-const ENV_TOKEN_REGEX = /\{\{([^{}\r\n]+?)\}\}/g;
-
 export function createEnvTokenSnippet(key: string): string {
   return `{{${key}}}`;
 }
@@ -172,7 +171,11 @@ export function createTokenizedEditorTheme(options: TokenizedEditorThemeOptions
   // src/assets/styles/codemirror-theme.css.
   return EditorView.theme({
     ".cm-scroller": {
+      fontFamily: "var(--font-mono)",
       overflowY: singleLine ? "hidden" : "auto"
+    },
+    ".cm-content": {
+      fontFamily: "inherit"
     }
   });
 }
diff --git a/go.mod b/go.mod
index 81f3e658..78eeab66 100644
--- a/go.mod
+++ b/go.mod
@@ -3,7 +3,7 @@
 
 module solo
 
-go 1.26.1
+go 1.26.3
 
 require (
 	github.com/google/uuid v1.6.0
@@ -13,44 +13,47 @@ require (
 
 require (
 	github.com/google/go-github/v76 v76.0.0
+	golang.org/x/image v0.40.0
 	gopkg.in/yaml.v3 v3.0.1
 )
 
 require (
 	git.sr.ht/~jackmordaunt/go-toast/v2 v2.0.3 // indirect
-	github.com/google/go-querystring v1.1.0 // indirect
-	github.com/tidwall/match v1.1.1 // indirect
-	github.com/tidwall/pretty v1.2.0 // indirect
+	github.com/google/go-querystring v1.2.0 // indirect
+	github.com/tidwall/match v1.2.0 // indirect
+	github.com/tidwall/pretty v1.2.1 // indirect
 )
 
 require (
 	github.com/bep/debounce v1.2.1 // indirect
 	github.com/denisbrodbeck/machineid v1.0.1
 	github.com/go-ole/go-ole v1.3.0 // indirect
-	github.com/godbus/dbus/v5 v5.1.0 // indirect
+	github.com/godbus/dbus/v5 v5.2.2 // indirect
 	github.com/gorilla/websocket v1.5.3 // indirect
-	github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e // indirect
-	github.com/labstack/echo/v4 v4.13.3 // indirect
-	github.com/labstack/gommon v0.4.2 // indirect
+	github.com/jchv/go-winloader v0.0.0-20250406163304-c1995be93bd1 // indirect
+	github.com/labstack/echo/v4 v4.15.2 // indirect
+	github.com/labstack/gommon v0.5.0 // indirect
 	github.com/leaanthony/go-ansi-parser v1.6.1 // indirect
 	github.com/leaanthony/gosod v1.0.4 // indirect
 	github.com/leaanthony/slicer v1.6.0 // indirect
 	github.com/leaanthony/u v1.1.1 // indirect
-	github.com/mattn/go-colorable v0.1.13 // indirect
-	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/mattn/go-colorable v0.1.14 // indirect
+	github.com/mattn/go-isatty v0.0.22 // indirect
 	github.com/pkg/browser v0.0.0-20240102092130-5ac0b6a4141c // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/rivo/uniseg v0.4.7 // indirect
-	github.com/samber/lo v1.49.1 // indirect
-	github.com/tidwall/gjson v1.18.0
+	github.com/samber/lo v1.53.0 // indirect
+	github.com/tidwall/gjson v1.19.0
 	github.com/tkrajina/go-reflector v0.5.8 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasttemplate v1.2.2 // indirect
-	github.com/wailsapp/go-webview2 v1.0.22 // indirect
+	github.com/wailsapp/go-webview2 v1.0.23 // indirect
 	github.com/wailsapp/mimetype v1.4.1 // indirect
-	github.com/yuin/gopher-lua v1.1.1
-	golang.org/x/crypto v0.45.0 // indirect
-	golang.org/x/net v0.47.0 // indirect
-	golang.org/x/sys v0.38.0 // indirect
-	golang.org/x/text v0.31.0 // indirect
+	github.com/yuin/gopher-lua v1.1.2
+	golang.org/x/crypto v0.51.0 // indirect
+	golang.org/x/net v0.54.0 // indirect
+	golang.org/x/sys v0.44.0 // indirect
+	golang.org/x/text v0.37.0 // indirect
 )
+
+replace golang.org/x/image => github.com/matstech/image v0.0.0-20260519125732-ad443cf087e0
diff --git a/go.sum b/go.sum
index ac8a1de5..98a04e44 100644
--- a/go.sum
+++ b/go.sum
@@ -8,36 +8,23 @@ github.com/denisbrodbeck/machineid v1.0.1 h1:geKr9qtkB876mXguW2X6TU4ZynleN6ezuMS
 github.com/denisbrodbeck/machineid v1.0.1/go.mod h1:dJUwb7PTidGDeYyUBmXZ2GphQBbjJCrnectwCyxcUSI=
 github.com/go-ole/go-ole v1.3.0 h1:Dt6ye7+vXGIKZ7Xtk4s6/xVdGDQynvom7xCFEdWr6uE=
 github.com/go-ole/go-ole v1.3.0/go.mod h1:5LS6F96DhAwUc7C+1HLexzMXY1xGRSryjyPPKW6zv78=
-github.com/godbus/dbus/v5 v5.1.0 h1:4KLkAxT3aOY8Li4FRJe/KvhoNFFxo0m6fNuFUO8QJUk=
-github.com/godbus/dbus/v5 v5.1.0/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
 github.com/godbus/dbus/v5 v5.2.2 h1:TUR3TgtSVDmjiXOgAAyaZbYmIeP3DPkld3jgKGV8mXQ=
 github.com/godbus/dbus/v5 v5.2.2/go.mod h1:3AAv2+hPq5rdnr5txxxRwiGjPXamgoIHgz9FPBfOp3c=
-github.com/google/go-cmp v0.5.2/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
 github.com/google/go-cmp v0.6.0/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
 github.com/google/go-github/v76 v76.0.0 h1:MCa9VQn+VG5GG7Y7BAkBvSRUN3o+QpaEOuZwFPJmdFA=
 github.com/google/go-github/v76 v76.0.0/go.mod h1:38+d/8pYDO4fBLYfBhXF5EKO0wA3UkXBjfmQapFsNCQ=
-github.com/google/go-querystring v1.1.0 h1:AnCroh3fv4ZBgVIf1Iwtovgjaw/GiKJo8M8yD/fhyJ8=
-github.com/google/go-querystring v1.1.0/go.mod h1:Kcdr2DB4koayq7X8pmAG4sNG59So17icRSOU623lUBU=
 github.com/google/go-querystring v1.2.0 h1:yhqkPbu2/OH+V9BfpCVPZkNmUXhb2gBxJArfhIxNtP0=
 github.com/google/go-querystring v1.2.0/go.mod h1:8IFJqpSRITyJ8QhQ13bmbeMBDfmeEJZD5A0egEOmkqU=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
 github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
-github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e h1:Q3+PugElBCf4PFpxhErSzU3/PY5sFL5Z6rfv4AbGAck=
-github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e/go.mod h1:alcuEEnZsY1WQsagKhZDsoPCRoOijYqhZvPwLG0kzVs=
 github.com/jchv/go-winloader v0.0.0-20250406163304-c1995be93bd1 h1:njuLRcjAuMKr7kI3D85AXWkw6/+v9PwtV6M6o11sWHQ=
 github.com/jchv/go-winloader v0.0.0-20250406163304-c1995be93bd1/go.mod h1:alcuEEnZsY1WQsagKhZDsoPCRoOijYqhZvPwLG0kzVs=
-github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
-github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
-github.com/labstack/echo/v4 v4.13.3 h1:pwhpCPrTl5qry5HRdM5FwdXnhXSLSY+WE+YQSeCaafY=
-github.com/labstack/echo/v4 v4.13.3/go.mod h1:o90YNEeQWjDozo584l7AwhJMHN0bOC4tAfg+Xox9q5g=
 github.com/labstack/echo/v4 v4.15.2 h1:nnh2sCzGCVYnU+wCisMPiYapEg/QVo/gcI9ePKg5/T4=
 github.com/labstack/echo/v4 v4.15.2/go.mod h1:Xzp1Ns1RA2c9fY7nSgUJkpkUZGNbEIVHZbtbOMPktBI=
-github.com/labstack/gommon v0.4.2 h1:F8qTUNXgG1+6WQmqoUWnz8WiEU60mXVVw0P4ht1WRA0=
-github.com/labstack/gommon v0.4.2/go.mod h1:QlUFxVM+SNXhDL/Z7YhocGIBYOiwB0mXm1+1bAPHPyU=
 github.com/labstack/gommon v0.5.0 h1:6VSQ2NOzsnEJ5W6+84E0RbcaDDmgB6NIAzWCczTEe6c=
 github.com/labstack/gommon v0.5.0/go.mod h1:Rzlg7HHy1maLfzBYGg9NZcVuz1sA68HHhLjhcEllYE0=
 github.com/leaanthony/debme v1.2.1 h1:9Tgwf+kjcrbMQ4WnPcEIUcQuIZYqdWftzZkBr+i/oOc=
@@ -53,17 +40,12 @@ github.com/leaanthony/u v1.1.1/go.mod h1:9+o6hejoRljvZ3BzdYlVL0JYCwtnAsVuN9pVTQc
 github.com/matryer/is v1.4.0/go.mod h1:8I/i5uYgLzgsgEloJE1U6xx5HkBQpAZvepWuujKwMRU=
 github.com/matryer/is v1.4.1 h1:55ehd8zaGABKLXQUe2awZ99BD/PTc2ls+KV/dXphgEQ=
 github.com/matryer/is v1.4.1/go.mod h1:8I/i5uYgLzgsgEloJE1U6xx5HkBQpAZvepWuujKwMRU=
-github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
-github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
+github.com/matstech/image v0.0.0-20260519125732-ad443cf087e0 h1:V7V+Sm31d3r4Z/YnMYtovGT2reNsVbxRTEAMrAju4Yo=
+github.com/matstech/image v0.0.0-20260519125732-ad443cf087e0/go.mod h1:uIc348UZMSvS5Z65CVZ7iDPaNobNFEPeJ4kbqTOszmA=
 github.com/mattn/go-colorable v0.1.14 h1:9A9LHSqF/7dyVVX6g0U9cwm9pG3kP9gSzcuIPHPsaIE=
 github.com/mattn/go-colorable v0.1.14/go.mod h1:6LmQG8QLFO4G5z1gPvYEzlUgJ2wF+stgPZH1UqBm1s8=
-github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
-github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mattn/go-isatty v0.0.22 h1:j8l17JJ9i6VGPUFUYoTUKPSgKe/83EYU2zBC7YNKMw4=
 github.com/mattn/go-isatty v0.0.22/go.mod h1:ZXfXG4SQHsB/w3ZeOYbR0PrPwLy+n6xiMrJlRFqopa4=
-github.com/niemeyer/pretty v0.0.0-20200227124842-a10e7caefd8e h1:fD57ERR4JtEqsWbfPhv4DMiApHyliiK5xCTNVSPiaAs=
-github.com/niemeyer/pretty v0.0.0-20200227124842-a10e7caefd8e/go.mod h1:zD1mROLANZcx1PVRCS0qkT7pwLkGfwJo4zjcN/Tysno=
 github.com/pkg/browser v0.0.0-20240102092130-5ac0b6a4141c h1:+mdjkGKdHQG3305AYmdv1U2eRNDiU2ErMBj1gwrq8eQ=
 github.com/pkg/browser v0.0.0-20240102092130-5ac0b6a4141c/go.mod h1:7rwL4CYBLnjLxUqIJNnCWiEdr3bn6IUYi15bNlnbCCU=
 github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
@@ -73,23 +55,14 @@ github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZN
 github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
 github.com/rivo/uniseg v0.4.7 h1:WUdvkW8uEhrYfLC4ZzdpI2ztxP1I582+49Oc5Mq64VQ=
 github.com/rivo/uniseg v0.4.7/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
-github.com/samber/lo v1.49.1 h1:4BIFyVfuQSEpluc7Fua+j1NolZHiEHEpaSEKdsH0tew=
-github.com/samber/lo v1.49.1/go.mod h1:dO6KHFzUKXgP8LDhU0oI8d2hekjXnGOu0DB8Jecxd6o=
 github.com/samber/lo v1.53.0 h1:t975lj2py4kJPQ6haz1QMgtId2gtmfktACxIXArw3HM=
 github.com/samber/lo v1.53.0/go.mod h1:4+MXEGsJzbKGaUEQFKBq2xtfuznW9oz/WrgyzMzRoM0=
-github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
-github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
 github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu7U=
-github.com/tidwall/gjson v1.18.0 h1:FIDeeyB800efLX89e5a8Y0BNH+LOngJyGrIWxG2FKQY=
-github.com/tidwall/gjson v1.18.0/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
+github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
 github.com/tidwall/gjson v1.19.0 h1:xwxm7n691Uf3u5OFjzngavjGTh55KX5q/9w9xHW88JU=
 github.com/tidwall/gjson v1.19.0/go.mod h1:V37/opeE/JbLUOfH0QTXiNez2l0RUjYUhpT4szFQAfc=
-github.com/tidwall/match v1.1.1 h1:+Ho715JplO36QYgwN9PGYNhgZvoUSc9X2c80KVTi+GA=
-github.com/tidwall/match v1.1.1/go.mod h1:eRSPERbgtNPcGhD8UCthc6PmLEQXEWd3PRB5JTxsfmM=
 github.com/tidwall/match v1.2.0 h1:0pt8FlkOwjN2fPt4bIl4BoNxb98gGHN2ObFEDkrfZnM=
 github.com/tidwall/match v1.2.0/go.mod h1:eRSPERbgtNPcGhD8UCthc6PmLEQXEWd3PRB5JTxsfmM=
-github.com/tidwall/pretty v1.2.0 h1:RWIZEg2iJ8/g6fDDYzMpobmaoGh5OLl4AXtGUGPcqCs=
-github.com/tidwall/pretty v1.2.0/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU=
 github.com/tidwall/pretty v1.2.1 h1:qjsOFOWWQl+N3RsoF5/ssm1pHmJJwhjlSbZ51I6wMl4=
 github.com/tidwall/pretty v1.2.1/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU=
 github.com/tkrajina/go-reflector v0.5.8 h1:yPADHrwmUbMq4RGEyaOUpz2H90sRsETNVpjzo3DLVQQ=
@@ -98,51 +71,32 @@ github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6Kllzaw
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
 github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
 github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
-github.com/wailsapp/go-webview2 v1.0.22 h1:YT61F5lj+GGaat5OB96Aa3b4QA+mybD0Ggq6NZijQ58=
-github.com/wailsapp/go-webview2 v1.0.22/go.mod h1:qJmWAmAmaniuKGZPWwne+uor3AHMB5PFhqiK0Bbj8kc=
 github.com/wailsapp/go-webview2 v1.0.23 h1:jmv8qhz1lHibCc79bMM/a/FqOnnzOGEisLav+a0b9P0=
 github.com/wailsapp/go-webview2 v1.0.23/go.mod h1:qJmWAmAmaniuKGZPWwne+uor3AHMB5PFhqiK0Bbj8kc=
 github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhwHs=
 github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
-github.com/wailsapp/wails/v2 v2.11.0 h1:seLacV8pqupq32IjS4Y7V8ucab0WZwtK6VvUVxSBtqQ=
-github.com/wailsapp/wails/v2 v2.11.0/go.mod h1:jrf0ZaM6+GBc1wRmXsM8cIvzlg0karYin3erahI4+0k=
 github.com/wailsapp/wails/v2 v2.12.0 h1:BHO/kLNWFHYjCzucxbzAYZWUjub1Tvb4cSguQozHn5c=
 github.com/wailsapp/wails/v2 v2.12.0/go.mod h1:mo1bzK1DEJrobt7YrBjgxvb5Sihb1mhAY09hppbibQg=
-github.com/yuin/gopher-lua v1.1.1 h1:kYKnWBjvbNP4XLT3+bPEwAXJx262OhaHDWDVOPjL46M=
-github.com/yuin/gopher-lua v1.1.1/go.mod h1:GBR0iDaNXjAgGg9zfCvksxSRnQx76gclCIb7kdAd1Pw=
 github.com/yuin/gopher-lua v1.1.2 h1:yF/FjE3hD65tBbt0VXLE13HWS9h34fdzJmrWRXwobGA=
 github.com/yuin/gopher-lua v1.1.2/go.mod h1:7aRmXIWl37SqRf0koeyylBEzJ+aPt8A+mmkQ4f1ntR8=
-golang.org/x/crypto v0.45.0 h1:jMBrvKuj23MTlT0bQEOBcAE0mjg8mK9RXFhRH6nyF3Q=
-golang.org/x/crypto v0.45.0/go.mod h1:XTGrrkGJve7CYK7J8PEww4aY7gM3qMCElcJQ8n8JdX4=
 golang.org/x/crypto v0.51.0 h1:IBPXwPfKxY7cWQZ38ZCIRPI50YLeevDLlLnyC5wRGTI=
 golang.org/x/crypto v0.51.0/go.mod h1:8AdwkbraGNABw2kOX6YFPs3WM22XqI4EXEd8g+x7Oc8=
 golang.org/x/net v0.0.0-20210505024714-0287a6fb4125/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
-golang.org/x/net v0.47.0 h1:Mx+4dIFzqraBXUugkia1OOvlD6LemFo1ALMHjrXDOhY=
-golang.org/x/net v0.47.0/go.mod h1:/jNxtkgq5yWUGYkaZGqo27cfGZ1c5Nen03aYrrKpVRU=
 golang.org/x/net v0.54.0 h1:2zJIZAxAHV/OHCDTCOHAYehQzLfSXuf/5SoL/Dv6w/w=
 golang.org/x/net v0.54.0/go.mod h1:Sj4oj8jK6XmHpBZU/zWHw3BV3abl4Kvi+Ut7cQcY+cQ=
 golang.org/x/sys v0.0.0-20200810151505-1b9f1253b3ed/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.38.0 h1:3yZWxaJjBmCWXqhN1qh02AkOnCQ1poK6oF+a7xWL6Gc=
-golang.org/x/sys v0.38.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
 golang.org/x/sys v0.44.0 h1:ildZl3J4uzeKP07r2F++Op7E9B29JRUy+a27EibtBTQ=
 golang.org/x/sys v0.44.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.31.0 h1:aC8ghyu4JhP8VojJ2lEHBnochRno1sgL6nEi9WGFGMM=
-golang.org/x/text v0.31.0/go.mod h1:tKRAlv61yKIjGGHX/4tP1LTbc13YSec1pxVEWXzfoeM=
 golang.org/x/text v0.37.0 h1:Cqjiwd9eSg8e0QAkyCaQTNHFIIzWtidPahFWR83rTrc=
 golang.org/x/text v0.37.0/go.mod h1:a5sjxXGs9hsn/AJVwuElvCAo9v8QYLzvavO5z2PiM38=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
-golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
-gopkg.in/check.v1 v1.0.0-20200227125254-8fa46927fb4f h1:BLraFXnmrev5lT+xlilqcH8XK9/i0At2xKjWk4p6zsU=
-gopkg.in/check.v1 v1.0.0-20200227125254-8fa46927fb4f/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/natefinch/lumberjack.v2 v2.2.1 h1:bBRl1b0OH9s/DuPhuXpNl+VtCaJXFZ5/uEFST95x9zc=
 gopkg.in/natefinch/lumberjack.v2 v2.2.1/go.mod h1:YD8tP3GAjkrDg1eZH7EGmyESg/lsYskCTPBJVb9jqSc=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
diff --git a/internal/collection/folder.go b/internal/collection/folder.go
index b8a4ff70..15c3c910 100644
--- a/internal/collection/folder.go
+++ b/internal/collection/folder.go
@@ -19,7 +19,7 @@ type Folder struct {
 	Requests            []Request `json:"requests"`
 	Name                string    `json:"name"`
 	Id                  string    `json:"id"`
-	Folders          []Folder  `json:"folders"`
+	Folders             []Folder  `json:"folders"`
 }
 
 func NewFolder(name string) Folder {
diff --git a/internal/configuration/configuration.go b/internal/configuration/configuration.go
index e663bed5..37d4042d 100644
--- a/internal/configuration/configuration.go
+++ b/internal/configuration/configuration.go
@@ -12,14 +12,17 @@ type Configuration struct {
 }
 
 type GeneralSettings struct {
-	ActiveTheme              string `json:"activeTheme"`
-	ThemeMode                string `json:"themeMode,omitempty"`  // "manual" | "sync"
-	DayTheme                 string `json:"dayTheme,omitempty"`   // tema usato in sync light
-	NightTheme               string `json:"nightTheme,omitempty"` // tema usato in sync dark
-	CheckForUpdates          bool   `json:"checkForUpdates"`
-	IncludePrereleaseUpdates bool   `json:"includePrereleaseUpdates"`
-	DebugMode                bool   `json:"debugMode"`
-	SelectedEnvironment      string `json:"selectedEnvironment,omitempty"`
+	ActiveTheme              string  `json:"activeTheme"`
+	ThemeMode                string  `json:"themeMode,omitempty"`  // "manual" | "sync"
+	DayTheme                 string  `json:"dayTheme,omitempty"`   // tema usato in sync light
+	NightTheme               string  `json:"nightTheme,omitempty"` // tema usato in sync dark
+	CheckForUpdates          bool    `json:"checkForUpdates"`
+	IncludePrereleaseUpdates bool    `json:"includePrereleaseUpdates"`
+	DebugMode                bool    `json:"debugMode"`
+	SelectedEnvironment      string  `json:"selectedEnvironment,omitempty"`
+	DefaultFontFamily        string  `json:"defaultFontFamily"`
+	MonoFontFamily           string  `json:"monoFontFamily"`
+	ZoomLevel                float64 `json:"zoomLevel"`
 }
 
 type RequestSettings struct {
diff --git a/internal/configuration/configuration_manager.go b/internal/configuration/configuration_manager.go
index dd27302a..a269a317 100644
--- a/internal/configuration/configuration_manager.go
+++ b/internal/configuration/configuration_manager.go
@@ -8,6 +8,7 @@ import (
 	"fmt"
 	"log/slog"
 	"os"
+	"solo/internal/fonts"
 	"solo/internal/theme"
 	"solo/internal/tools"
 	"sync"
@@ -19,6 +20,13 @@ type ConfigurationManager struct {
 	config    *Configuration
 }
 
+func clampZoomLevel(level float64) float64 {
+	if level < tools.MIN_ZOOM_LEVEL || level > tools.MAX_ZOOM_LEVEL {
+		return tools.DEFAULT_ZOOM_LEVEL
+	}
+	return level
+}
+
 func NewConfigurationManager() (*ConfigurationManager, error) {
 	// Setup paths
 	baseDir, err := tools.GetOrCreateConfigDir()
@@ -60,6 +68,9 @@ func (cm *ConfigurationManager) createDefault() Configuration {
 			CheckForUpdates:          tools.DEFAULT_CHECK_UPDATES,
 			IncludePrereleaseUpdates: tools.DEFAULT_INCLUDE_PRERELEASE_UPDATES,
 			DebugMode:                false,
+			DefaultFontFamily:        "",
+			MonoFontFamily:           "",
+			ZoomLevel:                tools.DEFAULT_ZOOM_LEVEL,
 		},
 		Request: RequestSettings{
 			TimeoutSeconds:   tools.DEFAULT_TIMEOUT_SECONDS,
@@ -84,6 +95,7 @@ func (cm *ConfigurationManager) load() error {
 		slog.Error("Failed to parse configuration file", "error", err)
 		return err
 	}
+	cfg.General.ZoomLevel = clampZoomLevel(cfg.General.ZoomLevel)
 
 	cm.mu.Lock()
 	defer cm.mu.Unlock()
@@ -109,6 +121,8 @@ func (cm *ConfigurationManager) Get() Configuration {
 }
 
 func (cm *ConfigurationManager) Save(cfg Configuration) error {
+	cfg.General.ZoomLevel = clampZoomLevel(cfg.General.ZoomLevel)
+
 	data, err := json.MarshalIndent(cfg, "", "  ")
 	if err != nil {
 		slog.Error("Failed to marshal configuration", "error", err)
@@ -223,3 +237,39 @@ func (cm *ConfigurationManager) DeleteCustomTheme(themeName string) error {
 
 	return cm.Save(configToSave)
 }
+
+func (cm *ConfigurationManager) SetDefaultFontFamily(fontFamily string) error {
+	if fontFamily == "" || fonts.IsValidFontFamily(fontFamily) {
+		cm.mu.Lock()
+		cm.config.General.DefaultFontFamily = fontFamily
+		configToSave := *cm.config
+		cm.mu.Unlock()
+		return cm.Save(configToSave) // Save immediately to persist
+	}
+	return fmt.Errorf("invalid font family: %s", fontFamily)
+}
+
+func (cm *ConfigurationManager) GetMonoFontFamily() string {
+	cm.mu.RLock()
+	defer cm.mu.RUnlock()
+	return cm.config.General.MonoFontFamily
+}
+
+func (cm *ConfigurationManager) SetMonoFontFamily(fontFamily string) error {
+	if fontFamily == "" || fonts.IsValidMonoFontFamily(fontFamily) {
+		cm.mu.Lock()
+		cm.config.General.MonoFontFamily = fontFamily
+		configToSave := *cm.config
+		cm.mu.Unlock()
+		return cm.Save(configToSave) // Save immediately to persist
+	}
+	return fmt.Errorf("invalid font family: %s", fontFamily)
+}
+
+func (cm *ConfigurationManager) SetZoomLevel(level float64) error {
+	cm.mu.Lock()
+	cm.config.General.ZoomLevel = clampZoomLevel(level)
+	configToSave := *cm.config
+	cm.mu.Unlock()
+	return cm.Save(configToSave)
+}
diff --git a/internal/configuration/configuration_test.go b/internal/configuration/configuration_test.go
index a63cccc1..34f5d436 100644
--- a/internal/configuration/configuration_test.go
+++ b/internal/configuration/configuration_test.go
@@ -4,6 +4,8 @@
 package configuration
 
 import (
+	"os"
+	"path/filepath"
 	"solo/internal/testutil"
 	"solo/internal/theme"
 	"solo/internal/tools"
@@ -32,10 +34,20 @@ func TestConfigurationManager_Defaults(t *testing.T) {
 			cfg.General.IncludePrereleaseUpdates,
 		)
 	}
+	if cfg.General.DefaultFontFamily != "" {
+		t.Errorf("Expected default sans font family to be empty, got %q", cfg.General.DefaultFontFamily)
+	}
+	if cfg.General.MonoFontFamily != "" {
+		t.Errorf("Expected default mono font family to be empty, got %q", cfg.General.MonoFontFamily)
+	}
+	if cfg.General.ZoomLevel != tools.DEFAULT_ZOOM_LEVEL {
+		t.Errorf("Expected default zoom level %v, got %v", tools.DEFAULT_ZOOM_LEVEL, cfg.General.ZoomLevel)
+	}
 
 	newTheme := "nord"
 	cfg.General.ActiveTheme = newTheme
 	cfg.General.IncludePrereleaseUpdates = true
+	cfg.General.ZoomLevel = 1.2
 	if err := cm.Save(cfg); err != nil {
 		t.Fatalf("Save failed: %v", err)
 	}
@@ -51,6 +63,191 @@ func TestConfigurationManager_Defaults(t *testing.T) {
 	if !cfg2.General.IncludePrereleaseUpdates {
 		t.Error("Expected prerelease toggle to persist")
 	}
+	if cfg2.General.ZoomLevel != 1.2 {
+		t.Errorf("Expected zoom level 1.2 to persist, got %v", cfg2.General.ZoomLevel)
+	}
+}
+
+func TestConfigurationManager_LegacyTypographyFieldsRemainUnsetOnLoad(t *testing.T) {
+	testutil.IsolateUserConfigDir(t)
+
+	configDir, err := tools.GetOrCreateConfigDir()
+	if err != nil {
+		t.Fatalf("GetOrCreateConfigDir failed: %v", err)
+	}
+
+	legacyConfig := []byte(`{
+  "general": {
+    "activeTheme": "ocean",
+    "themeMode": "system",
+    "dayTheme": "ocean",
+    "nightTheme": "nord",
+    "checkForUpdates": true,
+    "includePrereleaseUpdates": false,
+    "debugMode": false
+  },
+  "request": {
+    "timeoutSeconds": 30,
+    "followRedirects": true,
+    "maxRedirects": 10,
+    "validateSSL": true,
+    "defaultUserAgent": "Solo/1.0"
+  },
+  "customThemes": []
+}`)
+	if err := os.WriteFile(filepath.Join(configDir, tools.CONFIG_JSON_FILENAME), legacyConfig, 0o600); err != nil {
+		t.Fatalf("WriteFile failed: %v", err)
+	}
+
+	cm, err := NewConfigurationManager()
+	if err != nil {
+		t.Fatalf("NewConfigurationManager failed: %v", err)
+	}
+
+	cfg := cm.Get()
+	if cfg.General.DefaultFontFamily != "" {
+		t.Errorf("Expected legacy sans font family to remain empty, got %q", cfg.General.DefaultFontFamily)
+	}
+	if cfg.General.MonoFontFamily != "" {
+		t.Errorf("Expected legacy mono font family to remain empty, got %q", cfg.General.MonoFontFamily)
+	}
+	if cfg.General.ZoomLevel != tools.DEFAULT_ZOOM_LEVEL {
+		t.Errorf("Expected legacy zoom level to default to %v, got %v", tools.DEFAULT_ZOOM_LEVEL, cfg.General.ZoomLevel)
+	}
+}
+
+func TestConfigurationManager_AllowsEmptyFontFamilies(t *testing.T) {
+	testutil.IsolateUserConfigDir(t)
+
+	cm, err := NewConfigurationManager()
+	if err != nil {
+		t.Fatalf("NewConfigurationManager failed: %v", err)
+	}
+
+	if err := cm.SetDefaultFontFamily(""); err != nil {
+		t.Fatalf("SetDefaultFontFamily empty failed: %v", err)
+	}
+	if err := cm.SetMonoFontFamily(""); err != nil {
+		t.Fatalf("SetMonoFontFamily empty failed: %v", err)
+	}
+
+	cfg := cm.Get()
+	if cfg.General.DefaultFontFamily != "" {
+		t.Errorf("Expected empty sans font family, got %q", cfg.General.DefaultFontFamily)
+	}
+	if cfg.General.MonoFontFamily != "" {
+		t.Errorf("Expected empty mono font family, got %q", cfg.General.MonoFontFamily)
+	}
+}
+
+func TestConfigurationManager_RejectsInvalidFontFamilies(t *testing.T) {
+	testutil.IsolateUserConfigDir(t)
+
+	cm, err := NewConfigurationManager()
+	if err != nil {
+		t.Fatalf("NewConfigurationManager failed: %v", err)
+	}
+
+	if err := cm.SetDefaultFontFamily("definitely-not-a-real-font"); err == nil {
+		t.Fatal("SetDefaultFontFamily should reject invalid non-empty font family")
+	}
+	if err := cm.SetMonoFontFamily("definitely-not-a-real-font"); err == nil {
+		t.Fatal("SetMonoFontFamily should reject invalid non-empty font family")
+	}
+}
+
+func TestConfigurationManager_SetZoomLevelPersistsValidValue(t *testing.T) {
+	testutil.IsolateUserConfigDir(t)
+
+	cm, err := NewConfigurationManager()
+	if err != nil {
+		t.Fatalf("NewConfigurationManager failed: %v", err)
+	}
+
+	if err := cm.SetZoomLevel(1.2); err != nil {
+		t.Fatalf("SetZoomLevel failed: %v", err)
+	}
+
+	cfg := cm.Get()
+	if cfg.General.ZoomLevel != 1.2 {
+		t.Fatalf("Expected in-memory zoom level 1.2, got %v", cfg.General.ZoomLevel)
+	}
+
+	cm2, err := NewConfigurationManager()
+	if err != nil {
+		t.Fatalf("Second NewConfigurationManager failed: %v", err)
+	}
+
+	if cm2.Get().General.ZoomLevel != 1.2 {
+		t.Fatalf("Expected persisted zoom level 1.2, got %v", cm2.Get().General.ZoomLevel)
+	}
+}
+
+func TestConfigurationManager_SetZoomLevelClampsInvalidValues(t *testing.T) {
+	testutil.IsolateUserConfigDir(t)
+
+	testCases := []struct {
+		name  string
+		level float64
+	}{
+		{name: "zero", level: 0},
+		{name: "negative", level: -1},
+		{name: "too large", level: 9},
+	}
+
+	for _, tc := range testCases {
+		t.Run(tc.name, func(t *testing.T) {
+			cm, err := NewConfigurationManager()
+			if err != nil {
+				t.Fatalf("NewConfigurationManager failed: %v", err)
+			}
+
+			if err := cm.SetZoomLevel(tc.level); err != nil {
+				t.Fatalf("SetZoomLevel failed: %v", err)
+			}
+
+			if got := cm.Get().General.ZoomLevel; got != tools.DEFAULT_ZOOM_LEVEL {
+				t.Fatalf("Expected clamped in-memory zoom level %v, got %v", tools.DEFAULT_ZOOM_LEVEL, got)
+			}
+
+			cm2, err := NewConfigurationManager()
+			if err != nil {
+				t.Fatalf("Second NewConfigurationManager failed: %v", err)
+			}
+
+			if got := cm2.Get().General.ZoomLevel; got != tools.DEFAULT_ZOOM_LEVEL {
+				t.Fatalf("Expected clamped persisted zoom level %v, got %v", tools.DEFAULT_ZOOM_LEVEL, got)
+			}
+		})
+	}
+}
+
+func TestConfigurationManager_SaveClampsInvalidZoomLevel(t *testing.T) {
+	testutil.IsolateUserConfigDir(t)
+
+	cm, err := NewConfigurationManager()
+	if err != nil {
+		t.Fatalf("NewConfigurationManager failed: %v", err)
+	}
+
+	cfg := cm.Get()
+	cfg.General.ZoomLevel = 99
+	if err := cm.Save(cfg); err != nil {
+		t.Fatalf("Save failed: %v", err)
+	}
+
+	if got := cm.Get().General.ZoomLevel; got != tools.DEFAULT_ZOOM_LEVEL {
+		t.Fatalf("Expected clamped in-memory zoom level %v, got %v", tools.DEFAULT_ZOOM_LEVEL, got)
+	}
+
+	cm2, err := NewConfigurationManager()
+	if err != nil {
+		t.Fatalf("Second NewConfigurationManager failed: %v", err)
+	}
+
+	if got := cm2.Get().General.ZoomLevel; got != tools.DEFAULT_ZOOM_LEVEL {
+		t.Fatalf("Expected clamped persisted zoom level %v, got %v", tools.DEFAULT_ZOOM_LEVEL, got)
+	}
 }
 
 func TestConfigurationManager_ThemeManagement(t *testing.T) {
diff --git a/internal/fonts/dirs_darwin.go b/internal/fonts/dirs_darwin.go
new file mode 100644
index 00000000..7c240a95
--- /dev/null
+++ b/internal/fonts/dirs_darwin.go
@@ -0,0 +1,20 @@
+// Copyright 2026-present raml-dev
+// SPDX-License-Identifier: AGPL-3.0-only
+
+//go:build darwin
+
+package fonts
+
+import (
+	"os"
+	"path/filepath"
+)
+
+func fontDirs() []string {
+	home, _ := os.UserHomeDir()
+	return []string{
+		filepath.Join(home, "Library", "Fonts"),
+		"/Library/Fonts",
+		"/System/Library/Fonts",
+	}
+}
diff --git a/internal/fonts/dirs_linux.go b/internal/fonts/dirs_linux.go
new file mode 100644
index 00000000..f69af295
--- /dev/null
+++ b/internal/fonts/dirs_linux.go
@@ -0,0 +1,21 @@
+// Copyright 2026-present raml-dev
+// SPDX-License-Identifier: AGPL-3.0-only
+
+//go:build linux
+
+package fonts
+
+import (
+	"os"
+	"path/filepath"
+)
+
+func fontDirs() []string {
+	home, _ := os.UserHomeDir()
+	return []string{
+		filepath.Join(home, ".fonts"),
+		filepath.Join(home, ".local", "share", "fonts"),
+		"/usr/share/fonts",
+		"/usr/local/share/fonts",
+	}
+}
diff --git a/internal/fonts/dirs_windows.go b/internal/fonts/dirs_windows.go
new file mode 100644
index 00000000..df6e0844
--- /dev/null
+++ b/internal/fonts/dirs_windows.go
@@ -0,0 +1,20 @@
+// Copyright 2026-present raml-dev
+// SPDX-License-Identifier: AGPL-3.0-only
+
+//go:build windows
+
+package fonts
+
+import (
+	"os"
+	"path/filepath"
+)
+
+func fontDirs() []string {
+	windir := os.Getenv("WINDIR")
+	home, _ := os.UserHomeDir()
+	return []string{
+		filepath.Join(windir, "Fonts"),
+		filepath.Join(home, "AppData", "Local", "Microsoft", "Windows", "Fonts"),
+	}
+}
diff --git a/internal/fonts/list.go b/internal/fonts/list.go
new file mode 100644
index 00000000..6faeae93
--- /dev/null
+++ b/internal/fonts/list.go
@@ -0,0 +1,177 @@
+// Copyright 2026-present raml-dev
+// SPDX-License-Identifier: AGPL-3.0-only
+
+package fonts
+
+import (
+	"errors"
+	"io/fs"
+	"os"
+	"path/filepath"
+	"slices"
+	"sort"
+	"strings"
+	"sync"
+
+	"golang.org/x/image/font/sfnt"
+)
+
+type SystemFont struct {
+	Family      string `json:"family"`
+	IsMonospace bool   `json:"isMonospace"`
+}
+
+var errNoUsableFontMetadata = errors.New("fonts: no usable font metadata")
+
+var getFontDirs = fontDirs
+
+var (
+	cacheMu        sync.RWMutex
+	cachedFamilies []SystemFont
+)
+
+func ListFamilies(refresh bool) ([]SystemFont, error) {
+	if !refresh {
+		cacheMu.RLock()
+		if cachedFamilies != nil {
+			cached := slices.Clone(cachedFamilies)
+			cacheMu.RUnlock()
+			return cached, nil
+		}
+		cacheMu.RUnlock()
+	}
+
+	families, err := scanFamilies()
+	if err != nil {
+		return nil, err
+	}
+
+	cacheMu.Lock()
+	cachedFamilies = slices.Clone(families)
+	cacheMu.Unlock()
+
+	return families, nil
+}
+
+func scanFamilies() ([]SystemFont, error) {
+	seen := map[string]SystemFont{}
+
+	for _, dir := range getFontDirs() {
+		info, err := os.Stat(dir)
+		if err != nil || !info.IsDir() {
+			continue
+		}
+
+		_ = filepath.WalkDir(dir, func(path string, d fs.DirEntry, err error) error {
+			if err != nil || d.IsDir() {
+				return nil
+			}
+			if !isSupportedFontExtension(strings.ToLower(filepath.Ext(d.Name()))) {
+				return nil
+			}
+
+			fonts, err := parseFontFile(path)
+			if err != nil {
+				return nil
+			}
+
+			for _, font := range fonts {
+				if font.Family == "" {
+					continue
+				}
+				if _, exists := seen[font.Family]; exists {
+					continue
+				}
+				seen[font.Family] = font
+			}
+			return nil
+		})
+	}
+
+	families := make([]SystemFont, 0, len(seen))
+	for _, font := range seen {
+		families = append(families, font)
+	}
+
+	sort.Slice(families, func(i, j int) bool {
+		return families[i].Family < families[j].Family
+	})
+	return families, nil
+}
+
+func parseFontFile(path string) ([]SystemFont, error) {
+     file, err := os.Open(path)
+     if err != nil {
+         return nil, err
+     }
+     defer file.Close()
+     ext := strings.ToLower(filepath.Ext(path))
+     if ext == ".ttc" {
+         collection, err := sfnt.ParseCollectionReaderAt(file)
+         if err != nil {
+             return nil, err
+         }
+         fonts := make([]SystemFont, 0, collection.NumFonts())
+         for i := 0; i < collection.NumFonts(); i++ {
+             font, err := collection.Font(i)
+             if err != nil {
+                 continue
+             }
+             parsed, err := parseSFNTFont(font)
+             if err != nil {
+                 continue
+             }
+             fonts = append(fonts, parsed)
+         }
+         if len(fonts) == 0 {
+             return nil, errNoUsableFontMetadata
+         }
+         return fonts, nil
+     }
+     font, err := sfnt.ParseReaderAt(file)
+     if err != nil {
+         return nil, err
+     }
+     parsed, err := parseSFNTFont(font)
+     if err != nil {
+         return nil, err
+     }
+     return []SystemFont{parsed}, nil
+ }
+
+func parseSFNTFont(font *sfnt.Font) (SystemFont, error) {
+	family, err := fontFamilyName(font)
+	if err != nil {
+		return SystemFont{}, err
+	}
+
+	post := font.PostTable()
+	return SystemFont{
+		Family:      family,
+		IsMonospace: post != nil && post.IsFixedPitch,
+	}, nil
+}
+
+func fontFamilyName(font *sfnt.Font) (string, error) {
+	for _, id := range []sfnt.NameID{sfnt.NameIDTypographicFamily, sfnt.NameIDFamily} {
+		name, err := font.Name(nil, id)
+		if err != nil {
+			continue
+		}
+		name = strings.TrimSpace(name)
+		if name != "" {
+			return name, nil
+		}
+	}
+
+	return "", errNoUsableFontMetadata
+}
+
+func isSupportedFontExtension(ext string) bool {
+	switch ext {
+	case ".ttf", ".otf", ".ttc":
+		return true
+	default:
+		return false
+	}
+}
diff --git a/internal/fonts/list_test.go b/internal/fonts/list_test.go
new file mode 100644
index 00000000..05073e3d
--- /dev/null
+++ b/internal/fonts/list_test.go
@@ -0,0 +1,241 @@
+// Copyright 2026-present raml-dev
+// SPDX-License-Identifier: AGPL-3.0-only
+
+package fonts
+
+import (
+	"errors"
+	"io"
+	"os"
+	"path/filepath"
+	"reflect"
+	"slices"
+	"testing"
+)
+
+func resetCache() {
+	cacheMu.Lock()
+	cachedFamilies = nil
+	cacheMu.Unlock()
+}
+
+func fixturePath(parts ...string) string {
+	segments := append([]string{"..", "..", "test", "fonts"}, parts...)
+	return filepath.Join(segments...)
+}
+
+func copyFile(t *testing.T, srcPath, dstPath string) {
+	t.Helper()
+
+	src, err := os.Open(srcPath)
+	if err != nil {
+		t.Fatalf("Open(%q) failed: %v", srcPath, err)
+	}
+	defer src.Close()
+
+	if err := os.MkdirAll(filepath.Dir(dstPath), 0o755); err != nil {
+		t.Fatalf("MkdirAll failed: %v", err)
+	}
+
+	dst, err := os.Create(dstPath)
+	if err != nil {
+		t.Fatalf("Create(%q) failed: %v", dstPath, err)
+	}
+	defer dst.Close()
+
+	if _, err := io.Copy(dst, src); err != nil {
+		t.Fatalf("Copy failed: %v", err)
+	}
+}
+
+func TestParseFontFile(t *testing.T) {
+	t.Run("ttf sans fixture", func(t *testing.T) {
+		path := fixturePath("inter", "Inter-Regular.ttf")
+
+		fonts, err := parseFontFile(path)
+		if err != nil {
+			t.Fatalf("parseFontFile(%q) failed: %v", path, err)
+		}
+
+		want := []SystemFont{{Family: "Inter", IsMonospace: false}}
+		if !reflect.DeepEqual(fonts, want) {
+			t.Fatalf("parseFontFile(%q) = %#v, want %#v", path, fonts, want)
+		}
+	})
+
+	t.Run("otf sans fixture", func(t *testing.T) {
+		path := fixturePath("inter", "Inter-Regular.otf")
+
+		fonts, err := parseFontFile(path)
+		if err != nil {
+			t.Fatalf("parseFontFile(%q) failed: %v", path, err)
+		}
+
+		want := []SystemFont{{Family: "Inter", IsMonospace: false}}
+		if !reflect.DeepEqual(fonts, want) {
+			t.Fatalf("parseFontFile(%q) = %#v, want %#v", path, fonts, want)
+		}
+	})
+
+	t.Run("ttf monospace fixture", func(t *testing.T) {
+		path := fixturePath("jetbrainsmono", "JetBrainsMono-Regular.ttf")
+
+		fonts, err := parseFontFile(path)
+		if err != nil {
+			t.Fatalf("parseFontFile(%q) failed: %v", path, err)
+		}
+
+		want := []SystemFont{{Family: "JetBrains Mono", IsMonospace: true}}
+		if !reflect.DeepEqual(fonts, want) {
+			t.Fatalf("parseFontFile(%q) = %#v, want %#v", path, fonts, want)
+		}
+	})
+
+	t.Run("ttc fixture", func(t *testing.T) {
+		path := fixturePath("inter", "Inter.ttc")
+
+		fonts, err := parseFontFile(path)
+		if err != nil {
+			t.Fatalf("parseFontFile(%q) failed: %v", path, err)
+		}
+		if len(fonts) != 36 {
+			t.Fatalf("parseFontFile(%q) returned %d fonts, want 36", path, len(fonts))
+		}
+
+		families := make([]string, 0, len(fonts))
+		for _, font := range fonts {
+			families = append(families, font.Family)
+			if font.IsMonospace {
+				t.Fatalf("parseFontFile(%q) returned monospace TTC face: %#v", path, font)
+			}
+		}
+
+		if !slices.Contains(families, "Inter") {
+			t.Fatalf("parseFontFile(%q) families = %#v, want family %q", path, families, "Inter")
+		}
+		if !slices.Contains(families, "Inter Display") {
+			t.Fatalf("parseFontFile(%q) families = %#v, want family %q", path, families, "Inter Display")
+		}
+	})
+
+	t.Run("invalid font fixture", func(t *testing.T) {
+		path := fixturePath("InvalidFont.otf")
+
+		_, err := parseFontFile(path)
+		if err == nil {
+			t.Fatalf("parseFontFile(%q) succeeded, want error", path)
+		}
+	})
+}
+
+func TestListFamiliesSortedAndDeduplicated(t *testing.T) {
+	resetCache()
+	t.Cleanup(resetCache)
+
+	tempDir := t.TempDir()
+
+	copyFile(t, fixturePath("inter", "Inter-Regular.ttf"), filepath.Join(tempDir, "A", "Inter-Regular.ttf"))
+	copyFile(t, fixturePath("inter", "Inter-Bold.ttf"), filepath.Join(tempDir, "B", "Inter-Bold.ttf"))
+	copyFile(t, fixturePath("inter", "Inter-Regular.otf"), filepath.Join(tempDir, "C", "Inter-Regular.otf"))
+	copyFile(t, fixturePath("inter", "Inter-Bold.otf"), filepath.Join(tempDir, "D", "Inter-Bold.otf"))
+	copyFile(t, fixturePath("jetbrainsmono", "JetBrainsMono-Regular.ttf"), filepath.Join(tempDir, "E", "JetBrainsMono-Regular.ttf"))
+	copyFile(t, fixturePath("InvalidFont.otf"), filepath.Join(tempDir, "broken", "InvalidFont.otf"))
+	copyFile(t, fixturePath("NotAFont.txt"), filepath.Join(tempDir, "ignored", "NotAFont.txt"))
+
+	originalGetFontDirs := getFontDirs
+	getFontDirs = func() []string { return []string{tempDir} }
+	t.Cleanup(func() { getFontDirs = originalGetFontDirs })
+
+	got, err := ListFamilies(true)
+	if err != nil {
+		t.Fatalf("ListFamilies(true) failed: %v", err)
+	}
+
+	want := []SystemFont{
+		{Family: "Inter", IsMonospace: false},
+		{Family: "JetBrains Mono", IsMonospace: true},
+	}
+	if !reflect.DeepEqual(got, want) {
+		t.Fatalf("ListFamilies(true) = %#v, want %#v", got, want)
+	}
+}
+
+func TestListFamiliesUsesCacheUntilRefresh(t *testing.T) {
+	resetCache()
+	t.Cleanup(resetCache)
+
+	tempDir := t.TempDir()
+	copyFile(t, fixturePath("inter", "Inter-Regular.ttf"), filepath.Join(tempDir, "Inter-Regular.ttf"))
+
+	originalGetFontDirs := getFontDirs
+	getFontDirs = func() []string { return []string{tempDir} }
+	t.Cleanup(func() { getFontDirs = originalGetFontDirs })
+
+	got, err := ListFamilies(false)
+	if err != nil {
+		t.Fatalf("ListFamilies(false) failed: %v", err)
+	}
+
+	wantInitial := []SystemFont{{Family: "Inter", IsMonospace: false}}
+	if !reflect.DeepEqual(got, wantInitial) {
+		t.Fatalf("initial ListFamilies(false) = %#v, want %#v", got, wantInitial)
+	}
+
+	copyFile(t, fixturePath("jetbrainsmono", "JetBrainsMono-Regular.ttf"), filepath.Join(tempDir, "nested", "JetBrainsMono-Regular.ttf"))
+
+	cached, err := ListFamilies(false)
+	if err != nil {
+		t.Fatalf("cached ListFamilies(false) failed: %v", err)
+	}
+	if !reflect.DeepEqual(cached, got) {
+		t.Fatalf("cached ListFamilies(false) = %#v, want %#v", cached, got)
+	}
+
+	fresh, err := ListFamilies(true)
+	if err != nil {
+		t.Fatalf("ListFamilies(true) failed: %v", err)
+	}
+
+	wantFresh := []SystemFont{
+		{Family: "Inter", IsMonospace: false},
+		{Family: "JetBrains Mono", IsMonospace: true},
+	}
+	if !reflect.DeepEqual(fresh, wantFresh) {
+		t.Fatalf("ListFamilies(true) = %#v, want %#v", fresh, wantFresh)
+	}
+}
+
+func TestListFamiliesSkipsUnusableDirectories(t *testing.T) {
+	resetCache()
+	t.Cleanup(resetCache)
+
+	tempDir := t.TempDir()
+	missingDir := filepath.Join(tempDir, "missing")
+	validDir := filepath.Join(tempDir, "valid")
+
+	copyFile(t, fixturePath("inter", "Inter-Regular.ttf"), filepath.Join(validDir, "Inter-Regular.ttf"))
+
+	originalGetFontDirs := getFontDirs
+	getFontDirs = func() []string { return []string{missingDir, validDir} }
+	t.Cleanup(func() { getFontDirs = originalGetFontDirs })
+
+	got, err := ListFamilies(true)
+	if err != nil {
+		t.Fatalf("ListFamilies(true) failed: %v", err)
+	}
+
+	want := []SystemFont{{Family: "Inter", IsMonospace: false}}
+	if !reflect.DeepEqual(got, want) {
+		t.Fatalf("ListFamilies(true) = %#v, want %#v", got, want)
+	}
+}
+
+func TestParseFontFileMissingFile(t *testing.T) {
+	_, err := parseFontFile(filepath.Join(t.TempDir(), "missing.ttf"))
+	if err == nil {
+		t.Fatal("parseFontFile(missing) succeeded, want error")
+	}
+	if !errors.Is(err, os.ErrNotExist) {
+		t.Fatalf("parseFontFile(missing) error = %v, want os.ErrNotExist", err)
+	}
+}
diff --git a/internal/fonts/utils.go b/internal/fonts/utils.go
new file mode 100644
index 00000000..56fece89
--- /dev/null
+++ b/internal/fonts/utils.go
@@ -0,0 +1,32 @@
+// Copyright 2026-present raml-dev
+// SPDX-License-Identifier: AGPL-3.0-only
+
+package fonts
+
+func IsValidFontFamily(family string) bool {
+	families, err := ListFamilies(false)
+	if err != nil {
+		return false
+	}
+	for _, f := range families {
+		if f.Family == family {
+			return true
+		}
+	}
+	return false
+}
+
+func IsValidMonoFontFamily(family string) bool {
+	families, err := ListFamilies(false)
+	if err != nil {
+		return false
+	}
+	for _, f := range families {
+		if f.Family == family {
+			// found the requested family, return true only if it is monospace
+			return f.IsMonospace
+		}
+	}
+	return false
+}
+
diff --git a/internal/importer/openapi_importer.go b/internal/importer/openapi_importer.go
index 838c47d3..442cb99c 100644
--- a/internal/importer/openapi_importer.go
+++ b/internal/importer/openapi_importer.go
@@ -499,11 +499,11 @@ type openAPIOperation struct {
 }
 
 type openAPIParameter struct {
-	Name     string                      `json:"name"     yaml:"name"`
-	In       string                      `json:"in"       yaml:"in"`
-	Schema   map[string]interface{}      `json:"schema"   yaml:"schema"`
-	Example  interface{}                 `json:"example"  yaml:"example"`
-	Examples map[string]openAPIExample   `json:"examples" yaml:"examples"`
+	Name     string                    `json:"name"     yaml:"name"`
+	In       string                    `json:"in"       yaml:"in"`
+	Schema   map[string]interface{}    `json:"schema"   yaml:"schema"`
+	Example  interface{}               `json:"example"  yaml:"example"`
+	Examples map[string]openAPIExample `json:"examples" yaml:"examples"`
 }
 
 type openAPIExample struct {
@@ -583,10 +583,10 @@ func resolveOpenAPIDefaultBaseURL(doc unifiedAPIDocument, version string) string
 	} else {
 		host := strings.TrimSpace(doc.Host)
 
-    if host != "" {
+		if host != "" {
 			scheme := "https"
 
-      if len(doc.Schemes) > 0 && strings.TrimSpace(doc.Schemes[0]) != "" {
+			if len(doc.Schemes) > 0 && strings.TrimSpace(doc.Schemes[0]) != "" {
 				scheme = strings.TrimSpace(doc.Schemes[0])
 			}
 
diff --git a/internal/importer/postman_importer.go b/internal/importer/postman_importer.go
index 3f091d66..9403956d 100644
--- a/internal/importer/postman_importer.go
+++ b/internal/importer/postman_importer.go
@@ -187,10 +187,10 @@ type postmanHeader struct {
 }
 
 type postmanBody struct {
-	Mode       string           `json:"mode"`
-	Raw        string           `json:"raw"`
-	Urlencoded []postmanKV      `json:"urlencoded"`
-	Formdata   []postmanFormKV  `json:"formdata"`
+	Mode       string          `json:"mode"`
+	Raw        string          `json:"raw"`
+	Urlencoded []postmanKV     `json:"urlencoded"`
+	Formdata   []postmanFormKV `json:"formdata"`
 	Options    struct {
 		Raw struct {
 			Language string `json:"language"`
diff --git a/internal/tools/constants.go b/internal/tools/constants.go
index 61f5e934..fa994ade 100644
--- a/internal/tools/constants.go
+++ b/internal/tools/constants.go
@@ -6,7 +6,7 @@ package tools
 const (
 	APP_NAME              = "solo"
 	APP_NAME_CAPITALIZED  = "Solo"
-  MAIN_DIR              = "solo"
+	MAIN_DIR              = "solo"
 	CONFIG_JSON_FILENAME  = "config.json"
 	CONFIG_COLLECTION_DIR = "collections"
 	CONFIG_HOST_DIR       = "hosts"
@@ -25,6 +25,9 @@ const (
 	DEFAULT_MAX_REDIRECTS              = 10
 	DEFAULT_VALIDATE_SSL               = true
 	DEFAULT_USER_AGENT                 = "Solo/1.0"
+	MIN_ZOOM_LEVEL                     = 0.5
+	MAX_ZOOM_LEVEL                     = 2.0
+	DEFAULT_ZOOM_LEVEL                 = 1.0
 )
 
 const (
diff --git a/mise.dev.toml b/mise.dev.toml
index b5294a1e..fcac8285 100644
--- a/mise.dev.toml
+++ b/mise.dev.toml
@@ -3,7 +3,7 @@
 
 [tools]
 pnpm = "10.32.1"
-"npm:@mariozechner/pi-coding-agent" = "0.64.0"
+"npm:@earendil-works/pi-coding-agent" = "0.74.0"
 rg = "15.1.0"
 "codex" = "0.125.0"
 
@@ -17,8 +17,28 @@ pi = "mise run --quiet pi "
 [tasks.dev]
 description = "Start the development server from the project root"
 dir = "{{ config_root }}"
-run = "wails dev"
+run_windows = "wails dev"
+run = """
+#!/usr/bin/env bash
+case "$(uname -s)" in
+  Linux*)     wails dev -tags webkit2_41 ;;
+  Darwin*)    wails dev ;;
+  *)          echo "Unsupported OS" && exit 1 ;;
+esac
+"""
 
+[tasks.build]
+description = "Build the app"
+dir = "{{ config_root }}"
+run_windows = "wails build"
+run = """
+#!/usr/bin/env bash
+case "$(uname -s)" in
+  Linux*)     wails build -tags webkit2_41 ;;
+  Darwin*)    wails build ;;
+  *)          echo "Unsupported OS" && exit 1 ;;
+esac
+"""
 [tasks.pi]
 description = "Start the pi coding agent from the project root"
 dir = "{{ config_root }}"
diff --git a/mise.toml b/mise.toml
index 332ea8a2..5564309c 100644
--- a/mise.toml
+++ b/mise.toml
@@ -2,11 +2,8 @@
 # SPDX-License-Identifier: AGPL-3.0-only
 
 [tools]
-go = "1.26.1"
-# "go:github.com/raml-dev/addlicense" = "1.0.0"
-"go:mvdan.cc/garble" = "0.15.0"
+go = "1.26.3"
 "go:github.com/wailsapp/wails/v2/cmd/wails" = "2.12.0"
 node = "24.15.0"
 "go:github.com/raml-dev/addlicense" = "1.0.0"
 python = "3.12"
-
diff --git a/test/fonts/InvalidFont.otf b/test/fonts/InvalidFont.otf
new file mode 100644
index 00000000..61feedb0
--- /dev/null
+++ b/test/fonts/InvalidFont.otf
@@ -0,0 +1 @@
+this is a text file, not a font
diff --git a/test/fonts/NotAFont.txt b/test/fonts/NotAFont.txt
new file mode 100644
index 00000000..e69de29b
diff --git a/test/fonts/inter/Inter-Bold.otf b/test/fonts/inter/Inter-Bold.otf
new file mode 100644
index 00000000..07cd5f08
Binary files /dev/null and b/test/fonts/inter/Inter-Bold.otf differ
diff --git a/test/fonts/inter/Inter-Bold.ttf b/test/fonts/inter/Inter-Bold.ttf
new file mode 100644
index 00000000..9fb9b751
Binary files /dev/null and b/test/fonts/inter/Inter-Bold.ttf differ
diff --git a/test/fonts/inter/Inter-Regular.otf b/test/fonts/inter/Inter-Regular.otf
new file mode 100644
index 00000000..13c3ec48
Binary files /dev/null and b/test/fonts/inter/Inter-Regular.otf differ
diff --git a/test/fonts/inter/Inter-Regular.ttf b/test/fonts/inter/Inter-Regular.ttf
new file mode 100644
index 00000000..b7aaca8d
Binary files /dev/null and b/test/fonts/inter/Inter-Regular.ttf differ
diff --git a/test/fonts/inter/Inter.ttc b/test/fonts/inter/Inter.ttc
new file mode 100644
index 00000000..eb1f5835
Binary files /dev/null and b/test/fonts/inter/Inter.ttc differ
diff --git a/test/fonts/inter/LICENSE.txt b/test/fonts/inter/LICENSE.txt
new file mode 100644
index 00000000..9b2ca37b
--- /dev/null
+++ b/test/fonts/inter/LICENSE.txt
@@ -0,0 +1,92 @@
+Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/test/fonts/jetbrainsmono/AUTHORS.txt b/test/fonts/jetbrainsmono/AUTHORS.txt
new file mode 100755
index 00000000..88149416
--- /dev/null
+++ b/test/fonts/jetbrainsmono/AUTHORS.txt
@@ -0,0 +1,10 @@
+# This is the official list of project authors for copyright purposes.
+# This file is distinct from the CONTRIBUTORS.txt file.
+# See the latter for an explanation.
+# 
+# Names should be added to this file as:
+# Name or Organization <email address>
+
+JetBrains <>
+Philipp Nurullin <philipp.nurullin@jetbrains.com>
+Konstantin Bulenkov <kb@jetbrains.com>
diff --git a/test/fonts/jetbrainsmono/JetBrainsMono-Bold.ttf b/test/fonts/jetbrainsmono/JetBrainsMono-Bold.ttf
new file mode 100644
index 00000000..8c93043d
Binary files /dev/null and b/test/fonts/jetbrainsmono/JetBrainsMono-Bold.ttf differ
diff --git a/test/fonts/jetbrainsmono/JetBrainsMono-Regular.ttf b/test/fonts/jetbrainsmono/JetBrainsMono-Regular.ttf
new file mode 100644
index 00000000..dff66cc5
Binary files /dev/null and b/test/fonts/jetbrainsmono/JetBrainsMono-Regular.ttf differ
diff --git a/test/fonts/jetbrainsmono/OFL.txt b/test/fonts/jetbrainsmono/OFL.txt
new file mode 100644
index 00000000..8bee4148
--- /dev/null
+++ b/test/fonts/jetbrainsmono/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.