diff --git a/frontend/__tests__/commandline/util.spec.ts b/frontend/__tests__/commandline/util.spec.ts
index 0cab39f0e3b6..5f209a1bdefa 100644
--- a/frontend/__tests__/commandline/util.spec.ts
+++ b/frontend/__tests__/commandline/util.spec.ts
@@ -153,7 +153,9 @@ describe("CommandlineUtils", () => {
             },
           },
           configMeta: {
-            icon: "icon",
+            fa: {
+              icon: "fa-keyboard",
+            },
           },
           schema,
         });
@@ -173,8 +175,10 @@ describe("CommandlineUtils", () => {
           defaultValue: expect.anything(),
           alias: "alias",
           input: true,
-          icon: "icon",
+          icon: "fa-keyboard",
           exec: expect.anything(),
+          hover: undefined,
+          configValue: undefined,
           inputValueConvert: Number,
           validation: expect.anything(),
         });
@@ -198,7 +202,9 @@ describe("CommandlineUtils", () => {
           },
         },
         configMeta: {
-          icon: "icon",
+          fa: {
+            icon: "fa-keyboard",
+          },
         },
         schema,
       });
@@ -210,7 +216,7 @@ describe("CommandlineUtils", () => {
           display: "custom test...",
           alias: "alias",
           input: true,
-          icon: "icon",
+          icon: "fa-keyboard",
         }),
       );
     });
diff --git a/frontend/src/ts/commandline/util.ts b/frontend/src/ts/commandline/util.ts
index ec65be67ff1f..2bc0451ea613 100644
--- a/frontend/src/ts/commandline/util.ts
+++ b/frontend/src/ts/commandline/util.ts
@@ -136,7 +136,7 @@ function buildCommandWithSubgroup<K extends keyof ConfigSchemas.Config>(
   return {
     id: `change${capitalizeFirstLetter(key)}`,
     display: display,
-    icon: configMeta?.icon ?? "fa-cog",
+    icon: configMeta?.fa?.icon ?? "fa-cog",
     subgroup: {
       title: display,
       configKey: key,
@@ -230,7 +230,7 @@ function buildInputCommand<K extends keyof ConfigSchemas.Config>({
     display: displayString,
     alias: inputProps?.alias ?? undefined,
     input: true,
-    icon: configMeta.icon ?? "fa-cog",
+    icon: configMeta?.fa?.icon ?? "fa-cog",
 
     //@ts-expect-error this is fine
     exec: ({ input }): void => {
diff --git a/frontend/src/ts/components/pages/test/TestConfig.tsx b/frontend/src/ts/components/pages/test/TestConfig.tsx
index e179d2fe73b8..9f3627c17484 100644
--- a/frontend/src/ts/components/pages/test/TestConfig.tsx
+++ b/frontend/src/ts/components/pages/test/TestConfig.tsx
@@ -1,5 +1,6 @@
 import { ComponentProps, For, JSXElement, Show } from "solid-js";
 
+import { configMetadata } from "../../../config/metadata";
 import { setConfig, setQuoteLengthAll } from "../../../config/setters";
 import { getConfig } from "../../../config/store";
 import { restartTestEvent } from "../../../events/test";
@@ -8,7 +9,7 @@ import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
 import { isLoggedIn } from "../../../states/core";
 import { showModal } from "../../../states/modals";
 import { getResultVisible, getFocus } from "../../../states/test";
-import { FaSolidIcon } from "../../../types/font-awesome";
+import { FaObject } from "../../../types/font-awesome";
 import { areUnsortedArraysEqual } from "../../../utils/arrays";
 import { cn } from "../../../utils/cn";
 import { Anime, AnimeShow } from "../../common/anime";
@@ -59,7 +60,7 @@ export function TestConfig(): JSXElement {
 }
 
 function TCButton(props: {
-  icon: FaSolidIcon;
+  fa: FaObject;
   text: string;
   active?: boolean;
   disabled?: boolean;
@@ -69,7 +70,7 @@ function TCButton(props: {
     <Button
       variant="text"
       class={cn(buttonClass)}
-      fa={{ icon: props.icon, fixedWidth: true }}
+      fa={{ ...props.fa, fixedWidth: true }}
       text={props.text}
       active={props.active}
       onClick={props.onClick}
@@ -79,10 +80,7 @@ function TCButton(props: {
 }
 
 function PuncAndNum(): JSXElement {
-  const buttons = [
-    { icon: "fa-at", configKey: "punctuation" },
-    { icon: "fa-hashtag", configKey: "numbers" },
-  ] as const;
+  const buttons = ["punctuation", "numbers"] as const;
 
   return (
     <Anime
@@ -96,10 +94,10 @@ function PuncAndNum(): JSXElement {
       <AnimeShow when={getConfig.mode !== "zen"} duration={durationMs}>
         <div class={cardClass}>
           <For each={buttons}>
-            {({ icon, configKey }) => (
+            {(configKey) => (
               <TCButton
-                icon={icon}
-                text={configKey}
+                fa={configMetadata[configKey].fa}
+                text={configMetadata[configKey].displayString ?? configKey}
                 active={getConfig[configKey]}
                 disabled={
                   getConfig.mode === "zen" || getConfig.mode === "quote"
@@ -118,24 +116,24 @@ function PuncAndNum(): JSXElement {
 }
 
 function Mode(): JSXElement {
-  const modes = [
-    { icon: "fa-clock", mode: "time" },
-    { icon: "fa-font", mode: "words" },
-    { icon: "fa-quote-left", mode: "quote" },
-    { icon: "fa-mountain", mode: "zen" },
-    { icon: "fa-wrench", mode: "custom" },
-  ] as const;
+  const modeOptions = ["time", "words", "quote", "zen", "custom"] as const;
 
   return (
     <div class={cn("z-2", cardClass)}>
-      <For each={modes}>
-        {({ icon, mode }) => (
+      <For each={modeOptions}>
+        {(modeOption) => (
           <TCButton
-            icon={icon}
-            text={mode}
-            active={getConfig.mode === mode}
+            fa={
+              configMetadata.mode.optionsMetadata?.[modeOption]?.fa ??
+              configMetadata.mode.fa
+            }
+            text={
+              configMetadata.mode.optionsMetadata?.[modeOption]
+                ?.displayString ?? modeOption
+            }
+            active={getConfig.mode === modeOption}
             onClick={() => {
-              setConfig("mode", mode);
+              setConfig("mode", modeOption);
               restartTestEvent.dispatch();
             }}
           />
diff --git a/frontend/src/ts/config/metadata.ts b/frontend/src/ts/config/metadata.ts
index 4a5f62f5c2a6..481faf990236 100644
--- a/frontend/src/ts/config/metadata.ts
+++ b/frontend/src/ts/config/metadata.ts
@@ -9,6 +9,7 @@ import * as ConfigSchemas from "@monkeytype/schemas/configs";
 import { roundTo1 } from "@monkeytype/util/numbers";
 import { capitalizeFirstLetter } from "../utils/strings";
 import { getDefaultConfig } from "../constants/default-config";
+import { FaObject } from "../types/font-awesome";
 // type SetBlock = {
 //   [K in keyof ConfigSchemas.Config]?: ConfigSchemas.Config[K][];
 // };
@@ -18,6 +19,11 @@ import { getDefaultConfig } from "../constants/default-config";
 // };
 
 export type ConfigMetadata<K extends keyof ConfigSchemas.Config> = {
+  /**
+   * The config key that this metadata is for
+   */
+  key: K;
+
   /**
    * Optional display string for the config key.
    */
@@ -28,9 +34,21 @@ export type ConfigMetadata<K extends keyof ConfigSchemas.Config> = {
   triggerResize?: true;
 
   /**
-   * Icon to display in the commandline and settings
+   * Fa object (icon)
    */
-  icon: string;
+  fa: FaObject;
+
+  optionsMetadata?: ConfigSchemas.Config[K] extends string | number | symbol
+    ? Partial<
+        Record<
+          ConfigSchemas.Config[K],
+          {
+            displayString?: string;
+            fa?: FaObject;
+          }
+        >
+      >
+    : never;
 
   // commandline?: {
   //   displayValues?: ConfigSchemas.Config[K] extends string | number | symbol
@@ -97,7 +115,10 @@ export type ConfigMetadataObject = {
 export const configMetadata: ConfigMetadataObject = {
   // test
   punctuation: {
-    icon: "fa-at",
+    key: "punctuation",
+    fa: {
+      icon: "fa-at",
+    },
     changeRequiresRestart: true,
     group: "test",
     overrideValue: ({ value, currentConfig }) => {
@@ -108,7 +129,10 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   numbers: {
-    icon: "fa-hashtag",
+    key: "numbers",
+    fa: {
+      icon: "fa-hashtag",
+    },
     changeRequiresRestart: true,
     group: "test",
     overrideValue: ({ value, currentConfig }) => {
@@ -119,7 +143,8 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   words: {
-    icon: "fa-font",
+    key: "words",
+    fa: { icon: "fa-font" },
     displayString: "word count",
     changeRequiresRestart: true,
     group: "test",
@@ -133,7 +158,8 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   time: {
-    icon: "fa-clock",
+    key: "time",
+    fa: { icon: "fa-clock" },
     changeRequiresRestart: true,
     displayString: "time",
     group: "test",
@@ -147,8 +173,26 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   mode: {
-    icon: "fa-bars",
+    key: "mode",
+    fa: { icon: "fa-bars" },
     changeRequiresRestart: true,
+    optionsMetadata: {
+      time: {
+        fa: { icon: "fa-clock" },
+      },
+      words: {
+        fa: { icon: "fa-font" },
+      },
+      quote: {
+        fa: { icon: "fa-quote-left" },
+      },
+      zen: {
+        fa: { icon: "fa-mountain" },
+      },
+      custom: {
+        fa: { icon: "fa-wrench" },
+      },
+    },
     group: "test",
     overrideConfig: ({ value }) => {
       if (value === "custom" || value === "quote" || value === "zen") {
@@ -166,7 +210,8 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   quoteLength: {
-    icon: "fa-quote-right",
+    key: "quoteLength",
+    fa: { icon: "fa-quote-right" },
     displayString: "quote length",
     changeRequiresRestart: true,
     group: "test",
@@ -180,13 +225,15 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   language: {
-    icon: "fa-language",
+    key: "language",
+    fa: { icon: "fa-language" },
     displayString: "language",
     changeRequiresRestart: true,
     group: "test",
   },
   burstHeatmap: {
-    icon: "fa-fire",
+    key: "burstHeatmap",
+    fa: { icon: "fa-fire" },
     displayString: "word burst heatmap",
     changeRequiresRestart: false,
     group: "test",
@@ -194,54 +241,63 @@ export const configMetadata: ConfigMetadataObject = {
 
   // behavior
   difficulty: {
-    icon: "fa-star",
+    key: "difficulty",
+    fa: { icon: "fa-star" },
     changeRequiresRestart: true,
     group: "behavior",
   },
   quickRestart: {
-    icon: "fa-redo-alt",
+    key: "quickRestart",
+    fa: { icon: "fa-redo-alt" },
     displayString: "quick restart",
     changeRequiresRestart: false,
     group: "behavior",
   },
   repeatQuotes: {
-    icon: "fa-sync-alt",
+    key: "repeatQuotes",
+    fa: { icon: "fa-sync-alt" },
     displayString: "repeat quotes",
     changeRequiresRestart: false,
     group: "behavior",
   },
   resultSaving: {
-    icon: "fa-save",
+    key: "resultSaving",
+    fa: { icon: "fa-save" },
     displayString: "result saving",
     changeRequiresRestart: false,
     group: "behavior",
   },
   blindMode: {
-    icon: "fa-eye-slash",
+    key: "blindMode",
+    fa: { icon: "fa-eye-slash" },
     displayString: "blind mode",
     changeRequiresRestart: false,
     group: "behavior",
   },
   alwaysShowWordsHistory: {
-    icon: "fa-align-left",
+    key: "alwaysShowWordsHistory",
+    fa: { icon: "fa-align-left" },
     displayString: "always show words history",
     changeRequiresRestart: false,
     group: "behavior",
   },
   singleListCommandLine: {
-    icon: "fa-list",
+    key: "singleListCommandLine",
+    fa: { icon: "fa-list" },
     displayString: "single list command line",
     changeRequiresRestart: false,
     group: "behavior",
   },
   minWpm: {
-    icon: "fa-bomb",
+    key: "minWpm",
+    fa: { icon: "fa-bomb" },
     displayString: "min speed",
     changeRequiresRestart: true,
     group: "behavior",
   },
   minWpmCustomSpeed: {
-    icon: "fa-bomb",
+    key: "minWpmCustomSpeed",
+    fa: { icon: "fa-bomb" },
     displayString: "min speed custom",
     changeRequiresRestart: true,
     group: "behavior",
@@ -255,13 +311,15 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   minAcc: {
-    icon: "fa-bomb",
+    key: "minAcc",
+    fa: { icon: "fa-bomb" },
     displayString: "min accuracy",
     changeRequiresRestart: true,
     group: "behavior",
   },
   minAccCustom: {
-    icon: "fa-bomb",
+    key: "minAccCustom",
+    fa: { icon: "fa-bomb" },
     displayString: "min accuracy custom",
     changeRequiresRestart: true,
     group: "behavior",
@@ -275,25 +333,29 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   minBurst: {
-    icon: "fa-bomb",
+    key: "minBurst",
+    fa: { icon: "fa-bomb" },
     displayString: "min word burst",
     changeRequiresRestart: true,
     group: "behavior",
   },
   minBurstCustomSpeed: {
-    icon: "fa-bomb",
+    key: "minBurstCustomSpeed",
+    fa: { icon: "fa-bomb" },
     displayString: "min word burst custom speed",
     changeRequiresRestart: true,
     group: "behavior",
   },
   britishEnglish: {
-    icon: "fa-language",
+    key: "britishEnglish",
+    fa: { icon: "fa-language" },
     displayString: "british english",
     changeRequiresRestart: true,
     group: "behavior",
   },
   funbox: {
-    icon: "fa-gamepad",
+    key: "funbox",
+    fa: { icon: "fa-gamepad" },
     changeRequiresRestart: true,
     group: "behavior",
     isBlocked: ({ value, currentConfig }) => {
@@ -320,7 +382,8 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   customLayoutfluid: {
-    icon: "fa-tint",
+    key: "customLayoutfluid",
+    fa: { icon: "fa-tint" },
     displayString: "custom layoutfluid",
     changeRequiresRestart: true,
     group: "behavior",
@@ -329,7 +392,8 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   customPolyglot: {
-    icon: "fa-language",
+    key: "customPolyglot",
+    fa: { icon: "fa-language" },
     displayString: "custom polyglot",
     changeRequiresRestart: false,
     group: "behavior",
@@ -340,7 +404,8 @@ export const configMetadata: ConfigMetadataObject = {
 
   // input
   freedomMode: {
-    icon: "fa-feather-alt",
+    key: "freedomMode",
+    fa: { icon: "fa-feather-alt" },
     changeRequiresRestart: false,
     displayString: "freedom mode",
     group: "input",
@@ -354,19 +419,22 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   strictSpace: {
-    icon: "fa-minus",
+    key: "strictSpace",
+    fa: { icon: "fa-minus" },
     displayString: "strict space",
     changeRequiresRestart: true,
     group: "input",
   },
   oppositeShiftMode: {
-    icon: "fa-exchange-alt",
+    key: "oppositeShiftMode",
+    fa: { icon: "fa-exchange-alt" },
     displayString: "opposite shift mode",
     changeRequiresRestart: false,
     group: "input",
   },
   stopOnError: {
-    icon: "fa-hand-paper",
+    key: "stopOnError",
+    fa: { icon: "fa-hand-paper" },
     displayString: "stop on error",
     changeRequiresRestart: true,
     group: "input",
@@ -380,7 +448,8 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   confidenceMode: {
-    icon: "fa-backspace",
+    key: "confidenceMode",
+    fa: { icon: "fa-backspace" },
     displayString: "confidence mode",
     changeRequiresRestart: false,
     group: "input",
@@ -395,43 +464,50 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   quickEnd: {
-    icon: "fa-step-forward",
+    key: "quickEnd",
+    fa: { icon: "fa-step-forward" },
     displayString: "quick end",
     changeRequiresRestart: false,
     group: "input",
   },
   indicateTypos: {
-    icon: "fa-exclamation",
+    key: "indicateTypos",
+    fa: { icon: "fa-exclamation" },
     displayString: "indicate typos",
     changeRequiresRestart: false,
     group: "input",
   },
   compositionDisplay: {
-    icon: "fa-language",
+    key: "compositionDisplay",
+    fa: { icon: "fa-language" },
     displayString: "composition display",
     changeRequiresRestart: false,
     group: "input",
   },
   hideExtraLetters: {
-    icon: "fa-eye-slash",
+    key: "hideExtraLetters",
+    fa: { icon: "fa-eye-slash" },
     displayString: "hide extra letters",
     changeRequiresRestart: false,
     group: "input",
   },
   lazyMode: {
-    icon: "fa-couch",
+    key: "lazyMode",
+    fa: { icon: "fa-couch" },
     displayString: "lazy mode",
     changeRequiresRestart: true,
     group: "input",
   },
   layout: {
-    icon: "fa-keyboard",
+    key: "layout",
+    fa: { icon: "fa-keyboard" },
     displayString: "layout",
     changeRequiresRestart: true,
     group: "input",
   },
   codeUnindentOnBackspace: {
-    icon: "fa-code",
+    key: "codeUnindentOnBackspace",
+    fa: { icon: "fa-code" },
     displayString: "code unindent on backspace",
     changeRequiresRestart: true,
     group: "input",
@@ -439,25 +515,29 @@ export const configMetadata: ConfigMetadataObject = {
 
   // sound
   soundVolume: {
-    icon: "fa-volume-down",
+    key: "soundVolume",
+    fa: { icon: "fa-volume-down" },
     displayString: "sound volume",
     changeRequiresRestart: false,
     group: "sound",
   },
   playSoundOnClick: {
-    icon: "fa-volume-up",
+    key: "playSoundOnClick",
+    fa: { icon: "fa-volume-up" },
     displayString: "play sound on click",
     changeRequiresRestart: false,
     group: "sound",
   },
   playSoundOnError: {
-    icon: "fa-volume-mute",
+    key: "playSoundOnError",
+    fa: { icon: "fa-volume-mute" },
     displayString: "play sound on error",
     changeRequiresRestart: false,
     group: "sound",
   },
   playTimeWarning: {
-    icon: "fa-exclamation-triangle",
+    key: "playTimeWarning",
+    fa: { icon: "fa-exclamation-triangle" },
     displayString: "play time warning",
     changeRequiresRestart: false,
     group: "sound",
@@ -465,19 +545,22 @@ export const configMetadata: ConfigMetadataObject = {
 
   // caret
   smoothCaret: {
-    icon: "fa-i-cursor",
+    key: "smoothCaret",
+    fa: { icon: "fa-i-cursor" },
     displayString: "smooth caret",
     changeRequiresRestart: false,
     group: "caret",
   },
   caretStyle: {
-    icon: "fa-i-cursor",
+    key: "caretStyle",
+    fa: { icon: "fa-i-cursor" },
     displayString: "caret style",
     changeRequiresRestart: false,
     group: "caret",
   },
   paceCaret: {
-    icon: "fa-i-cursor",
+    key: "paceCaret",
+    fa: { icon: "fa-i-cursor" },
     displayString: "pace caret",
     changeRequiresRestart: false,
     group: "caret",
@@ -494,7 +577,8 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   paceCaretCustomSpeed: {
-    icon: "fa-i-cursor",
+    key: "paceCaretCustomSpeed",
+    fa: { icon: "fa-i-cursor" },
     displayString: "pace caret custom speed",
     changeRequiresRestart: false,
     group: "caret",
@@ -508,13 +592,15 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   paceCaretStyle: {
-    icon: "fa-i-cursor",
+    key: "paceCaretStyle",
+    fa: { icon: "fa-i-cursor" },
     displayString: "pace caret style",
     changeRequiresRestart: false,
     group: "caret",
   },
   repeatedPace: {
-    icon: "fa-i-cursor",
+    key: "repeatedPace",
+    fa: { icon: "fa-i-cursor" },
     displayString: "repeated pace",
     changeRequiresRestart: false,
     group: "caret",
@@ -522,55 +608,64 @@ export const configMetadata: ConfigMetadataObject = {
 
   // appearance
   timerStyle: {
-    icon: "fa-chart-pie",
+    key: "timerStyle",
+    fa: { icon: "fa-chart-pie" },
     displayString: "live progress style",
     changeRequiresRestart: false,
     group: "appearance",
   },
   liveSpeedStyle: {
-    icon: "fa-tachometer-alt",
+    key: "liveSpeedStyle",
+    fa: { icon: "fa-tachometer-alt" },
     displayString: "live speed style",
     changeRequiresRestart: false,
     group: "appearance",
   },
   liveAccStyle: {
-    icon: "fa-tachometer-alt",
+    key: "liveAccStyle",
+    fa: { icon: "fa-tachometer-alt" },
     displayString: "live accuracy style",
     changeRequiresRestart: false,
     group: "appearance",
   },
   liveBurstStyle: {
-    icon: "fa-tachometer-alt",
+    key: "liveBurstStyle",
+    fa: { icon: "fa-tachometer-alt" },
     displayString: "live word burst style",
     changeRequiresRestart: false,
     group: "appearance",
   },
   timerColor: {
-    icon: "fa-chart-pie",
+    key: "timerColor",
+    fa: { icon: "fa-chart-pie" },
     displayString: "timer color",
     changeRequiresRestart: false,
     group: "appearance",
   },
   timerOpacity: {
-    icon: "fa-chart-pie",
+    key: "timerOpacity",
+    fa: { icon: "fa-chart-pie" },
     displayString: "timer opacity",
     changeRequiresRestart: false,
     group: "appearance",
   },
   highlightMode: {
-    icon: "fa-highlighter",
+    key: "highlightMode",
+    fa: { icon: "fa-highlighter" },
     displayString: "highlight mode",
     changeRequiresRestart: false,
     group: "appearance",
   },
   typedEffect: {
-    icon: "fa-eye",
+    key: "typedEffect",
+    fa: { icon: "fa-eye" },
     displayString: "typed effect",
     changeRequiresRestart: false,
     group: "appearance",
   },
   tapeMode: {
-    icon: "fa-tape",
+    key: "tapeMode",
+    fa: { icon: "fa-tape" },
     triggerResize: true,
     changeRequiresRestart: false,
     displayString: "tape mode",
@@ -585,20 +680,23 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   tapeMargin: {
-    icon: "fa-tape",
+    key: "tapeMargin",
+    fa: { icon: "fa-tape" },
     displayString: "tape margin",
     triggerResize: true,
     changeRequiresRestart: false,
     group: "appearance",
   },
   smoothLineScroll: {
-    icon: "fa-align-left",
+    key: "smoothLineScroll",
+    fa: { icon: "fa-align-left" },
     displayString: "smooth line scroll",
     changeRequiresRestart: false,
     group: "appearance",
   },
   showAllLines: {
-    icon: "fa-align-left",
+    key: "showAllLines",
+    fa: { icon: "fa-align-left" },
     changeRequiresRestart: false,
     displayString: "show all lines",
     group: "appearance",
@@ -611,51 +709,61 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   alwaysShowDecimalPlaces: {
-    icon: "00",
+    key: "alwaysShowDecimalPlaces",
+    fa: {
+      icon: "fa-ellipsis-h",
+    },
     displayString: "always show decimal places",
     changeRequiresRestart: false,
     group: "appearance",
   },
   typingSpeedUnit: {
-    icon: "fa-tachometer-alt",
+    key: "typingSpeedUnit",
+    fa: { icon: "fa-tachometer-alt" },
     displayString: "typing speed unit",
     changeRequiresRestart: false,
     group: "appearance",
   },
   startGraphsAtZero: {
-    icon: "fa-chart-line",
+    key: "startGraphsAtZero",
+    fa: { icon: "fa-chart-line" },
     displayString: "start graphs at zero",
     changeRequiresRestart: false,
     group: "appearance",
   },
   maxLineWidth: {
-    icon: "fa-text-width",
+    key: "maxLineWidth",
+    fa: { icon: "fa-text-width" },
     changeRequiresRestart: false,
     triggerResize: true,
     displayString: "max line width",
     group: "appearance",
   },
   fontSize: {
-    icon: "fa-font",
+    key: "fontSize",
+    fa: { icon: "fa-font" },
     changeRequiresRestart: false,
     triggerResize: true,
     displayString: "font size",
     group: "appearance",
   },
   fontFamily: {
-    icon: "fa-font",
+    key: "fontFamily",
+    fa: { icon: "fa-font" },
     displayString: "font family",
     changeRequiresRestart: false,
     group: "appearance",
   },
   keymapMode: {
-    icon: "fa-keyboard",
+    key: "keymapMode",
+    fa: { icon: "fa-keyboard" },
     displayString: "keymap mode",
     changeRequiresRestart: false,
     group: "appearance",
   },
   keymapLayout: {
-    icon: "fa-keyboard",
+    key: "keymapLayout",
+    fa: { icon: "fa-keyboard" },
     displayString: "keymap layout",
     changeRequiresRestart: false,
     group: "appearance",
@@ -663,7 +771,8 @@ export const configMetadata: ConfigMetadataObject = {
       currentConfig.keymapMode === "off" ? { keymapMode: "static" } : {},
   },
   keymapStyle: {
-    icon: "fa-keyboard",
+    key: "keymapStyle",
+    fa: { icon: "fa-keyboard" },
     displayString: "keymap style",
     changeRequiresRestart: false,
     group: "appearance",
@@ -671,7 +780,8 @@ export const configMetadata: ConfigMetadataObject = {
       currentConfig.keymapMode === "off" ? { keymapMode: "static" } : {},
   },
   keymapLegendStyle: {
-    icon: "fa-keyboard",
+    key: "keymapLegendStyle",
+    fa: { icon: "fa-keyboard" },
     displayString: "keymap legend style",
     changeRequiresRestart: false,
     group: "appearance",
@@ -679,7 +789,8 @@ export const configMetadata: ConfigMetadataObject = {
       currentConfig.keymapMode === "off" ? { keymapMode: "static" } : {},
   },
   keymapShowTopRow: {
-    icon: "fa-keyboard",
+    key: "keymapShowTopRow",
+    fa: { icon: "fa-keyboard" },
     displayString: "keymap show top row",
     changeRequiresRestart: false,
     group: "appearance",
@@ -687,7 +798,8 @@ export const configMetadata: ConfigMetadataObject = {
       currentConfig.keymapMode === "off" ? { keymapMode: "static" } : {},
   },
   keymapSize: {
-    icon: "fa-keyboard",
+    key: "keymapSize",
+    fa: { icon: "fa-keyboard" },
     triggerResize: true,
     changeRequiresRestart: false,
     displayString: "keymap size",
@@ -703,19 +815,22 @@ export const configMetadata: ConfigMetadataObject = {
 
   // theme
   flipTestColors: {
-    icon: "fa-adjust",
+    key: "flipTestColors",
+    fa: { icon: "fa-adjust" },
     displayString: "flip test colors",
     changeRequiresRestart: false,
     group: "theme",
   },
   colorfulMode: {
-    icon: "fa-fill-drip",
+    key: "colorfulMode",
+    fa: { icon: "fa-fill-drip" },
     displayString: "colorful mode",
     changeRequiresRestart: false,
     group: "theme",
   },
   customBackground: {
-    icon: "fa-link",
+    key: "customBackground",
+    fa: { icon: "fa-link" },
     displayString: "URL background",
     changeRequiresRestart: false,
     group: "theme",
@@ -724,37 +839,43 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   customBackgroundSize: {
-    icon: "fa-image",
+    key: "customBackgroundSize",
+    fa: { icon: "fa-image" },
     displayString: "custom background size",
     changeRequiresRestart: false,
     group: "theme",
   },
   customBackgroundFilter: {
-    icon: "fa-image",
+    key: "customBackgroundFilter",
+    fa: { icon: "fa-image" },
     displayString: "custom background filter",
     changeRequiresRestart: false,
     group: "theme",
   },
   autoSwitchTheme: {
-    icon: "fa-palette",
+    key: "autoSwitchTheme",
+    fa: { icon: "fa-palette" },
     displayString: "auto switch theme",
     changeRequiresRestart: false,
     group: "theme",
   },
   themeLight: {
-    icon: "fa-palette",
+    key: "themeLight",
+    fa: { icon: "fa-palette" },
     displayString: "theme light",
     changeRequiresRestart: false,
     group: "theme",
   },
   themeDark: {
-    icon: "fa-palette",
+    key: "themeDark",
+    fa: { icon: "fa-palette" },
     displayString: "theme dark",
     changeRequiresRestart: false,
     group: "theme",
   },
   randomTheme: {
-    icon: "fa-palette",
+    key: "randomTheme",
+    fa: { icon: "fa-palette" },
     changeRequiresRestart: false,
     displayString: "random theme",
     group: "theme",
@@ -784,13 +905,15 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   favThemes: {
-    icon: "fa-palette",
+    key: "favThemes",
+    fa: { icon: "fa-palette" },
     displayString: "favorite themes",
     changeRequiresRestart: false,
     group: "theme",
   },
   theme: {
-    icon: "fa-palette",
+    key: "theme",
+    fa: { icon: "fa-palette" },
     changeRequiresRestart: false,
     group: "theme",
     overrideConfig: () => {
@@ -800,13 +923,15 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   customTheme: {
-    icon: "fa-palette",
+    key: "customTheme",
+    fa: { icon: "fa-palette" },
     displayString: "custom theme",
     changeRequiresRestart: false,
     group: "theme",
   },
   customThemeColors: {
-    icon: "fa-palette",
+    key: "customThemeColors",
+    fa: { icon: "fa-palette" },
     displayString: "custom theme colors",
     changeRequiresRestart: false,
     group: "theme",
@@ -822,31 +947,36 @@ export const configMetadata: ConfigMetadataObject = {
 
   // hide elements
   showKeyTips: {
-    icon: "fa-question",
+    key: "showKeyTips",
+    fa: { icon: "fa-question" },
     displayString: "show key tips",
     changeRequiresRestart: false,
     group: "hideElements",
   },
   showOutOfFocusWarning: {
-    icon: "fa-exclamation",
+    key: "showOutOfFocusWarning",
+    fa: { icon: "fa-exclamation" },
     displayString: "show out of focus warning",
     changeRequiresRestart: false,
     group: "hideElements",
   },
   capsLockWarning: {
-    icon: "fa-exclamation-triangle",
+    key: "capsLockWarning",
+    fa: { icon: "fa-exclamation-triangle" },
     displayString: "caps lock warning",
     changeRequiresRestart: false,
     group: "hideElements",
   },
   showAverage: {
-    icon: "fa-chart-bar",
+    key: "showAverage",
+    fa: { icon: "fa-chart-bar" },
     displayString: "show average",
     changeRequiresRestart: false,
     group: "hideElements",
   },
   showPb: {
-    icon: "fa-crown",
+    key: "showPb",
+    fa: { icon: "fa-crown" },
     displayString: "show personal best",
     changeRequiresRestart: false,
     group: "hideElements",
@@ -854,7 +984,8 @@ export const configMetadata: ConfigMetadataObject = {
 
   // other (hidden)
   accountChart: {
-    icon: "fa-chart-line",
+    key: "accountChart",
+    fa: { icon: "fa-chart-line" },
     displayString: "account chart",
     changeRequiresRestart: false,
     group: "hidden",
@@ -869,13 +1000,15 @@ export const configMetadata: ConfigMetadataObject = {
     },
   },
   monkey: {
-    icon: "fa-egg",
+    key: "monkey",
+    fa: { icon: "fa-egg" },
     displayString: "monkey",
     changeRequiresRestart: false,
     group: "hidden",
   },
   monkeyPowerLevel: {
-    icon: "fa-egg",
+    key: "monkeyPowerLevel",
+    fa: { icon: "fa-egg" },
     displayString: "monkey power level",
     changeRequiresRestart: false,
     group: "hidden",
@@ -883,7 +1016,8 @@ export const configMetadata: ConfigMetadataObject = {
 
   // ads
   ads: {
-    icon: "fa-ad",
+    key: "ads",
+    fa: { icon: "fa-ad" },
     changeRequiresRestart: false,
     group: "ads",
     overrideValue: ({ value }) => {
diff --git a/frontend/src/ts/modals/google-sign-up.ts b/frontend/src/ts/modals/google-sign-up.ts
index 33da69dddaf4..8f6305d0438f 100644
--- a/frontend/src/ts/modals/google-sign-up.ts
+++ b/frontend/src/ts/modals/google-sign-up.ts
@@ -21,6 +21,7 @@ import { resetIgnoreAuthCallback } from "../firebase";
 import { ValidatedHtmlInputElement } from "../elements/input-validation";
 import { UserNameSchema } from "@monkeytype/schemas/users";
 import { remoteValidation } from "../utils/remote-validation";
+import { authEvent } from "../events/auth";
 
 let signedInUser: UserCredential | undefined = undefined;
 
@@ -109,6 +110,11 @@ async function apply(): Promise<void> {
       showSuccessNotification("Account created");
       await AccountController.loadUser(signedInUser.user);
 
+      authEvent.dispatch({
+        type: "authStateChanged",
+        data: { isUserSignedIn: true, loadPromise: Promise.resolve() },
+      });
+
       signedInUser = undefined;
       hideLoaderBar();
       void hide();
diff --git a/package.json b/package.json
index 45a9bab2499c..6d904664f6b4 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,8 @@
     "oxlint-tsgolint": "0.17.3",
     "prettier": "3.7.1",
     "turbo": "2.7.5",
-    "vitest": "4.1.0"
+    "vitest": "4.1.0",
+    "yaml": "2.8.2"
   },
   "lint-staged": {
     "*": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1e40af4d5068..50270802713f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ importers:
       vitest:
         specifier: 4.1.0
         version: 4.1.0(@types/node@20.5.1)(happy-dom@20.0.10)(jsdom@27.4.0)(vite@8.0.1(@types/node@20.5.1)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.2))
+      yaml:
+        specifier: 2.8.2
+        version: 2.8.2
 
   backend:
     dependencies:
@@ -659,7 +662,7 @@ importers:
         version: 6.0.2
       vitest:
         specifier: 4.1.0
-        version: 4.1.0(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(vite@8.0.1(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.2))
+        version: 4.1.0(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(vite@8.0.1(@types/node@24.9.1)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.2))
 
   packages/funbox:
     dependencies:
@@ -10779,11 +10782,6 @@ packages:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
 
-  yaml@2.8.1:
-    resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==}
-    engines: {node: '>= 14.6'}
-    hasBin: true
-
   yaml@2.8.2:
     resolution: {integrity: sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==}
     engines: {node: '>= 14.6'}
@@ -14727,14 +14725,6 @@ snapshots:
     optionalDependencies:
       vite: 8.0.1(@types/node@20.5.1)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.2)
 
-  '@vitest/mocker@4.1.0(vite@8.0.1(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.2))':
-    dependencies:
-      '@vitest/spy': 4.1.0
-      estree-walker: 3.0.3
-      magic-string: 0.30.21
-    optionalDependencies:
-      vite: 8.0.1(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.2)
-
   '@vitest/mocker@4.1.0(vite@8.0.1(@types/node@24.9.1)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.70.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.2))':
     dependencies:
       '@vitest/spy': 4.1.0
@@ -17001,7 +16991,7 @@ snapshots:
       winston: 3.6.0
       winston-transport: 4.7.1
       ws: 7.5.10
-      yaml: 2.8.1
+      yaml: 2.8.2
     transitivePeerDependencies:
       - bufferutil
       - encoding
@@ -17062,7 +17052,7 @@ snapshots:
       lodash: 4.17.21
       mkdirp: 2.1.6
       subset-font: 2.3.0
-      yaml: 2.8.1
+      yaml: 2.8.2
     optionalDependencies:
       '@fortawesome/fontawesome-free': 5.15.4
 
@@ -18370,7 +18360,7 @@ snapshots:
       object-inspect: 1.13.4
       pidtree: 0.6.0
       string-argv: 0.3.2
-      yaml: 2.8.1
+      yaml: 2.8.2
     transitivePeerDependencies:
       - enquirer
       - supports-color
@@ -19450,7 +19440,7 @@ snapshots:
 
   openapi3-ts@3.2.0:
     dependencies:
-      yaml: 2.8.1
+      yaml: 2.8.2
 
   optionator@0.9.4:
     dependencies:
@@ -21885,23 +21875,6 @@ snapshots:
       tsx: 4.21.0
       yaml: 2.8.2
 
-  vite@8.0.1(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.2):
-    dependencies:
-      lightningcss: 1.32.0
-      picomatch: 4.0.3
-      postcss: 8.5.8
-      rolldown: 1.0.0-rc.10
-      tinyglobby: 0.2.15
-    optionalDependencies:
-      '@types/node': 24.9.1
-      esbuild: 0.25.11
-      fsevents: 2.3.3
-      jiti: 2.6.1
-      sass: 1.98.0
-      terser: 5.46.1
-      tsx: 4.21.0
-      yaml: 2.8.2
-
   vite@8.0.1(@types/node@24.9.1)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.70.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       lightningcss: 1.32.0
@@ -22033,35 +22006,6 @@ snapshots:
     transitivePeerDependencies:
       - msw
 
-  vitest@4.1.0(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(vite@8.0.1(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.2)):
-    dependencies:
-      '@vitest/expect': 4.1.0
-      '@vitest/mocker': 4.1.0(vite@8.0.1(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.2))
-      '@vitest/pretty-format': 4.1.0
-      '@vitest/runner': 4.1.0
-      '@vitest/snapshot': 4.1.0
-      '@vitest/spy': 4.1.0
-      '@vitest/utils': 4.1.0
-      es-module-lexer: 2.0.0
-      expect-type: 1.3.0
-      magic-string: 0.30.21
-      obug: 2.1.1
-      pathe: 2.0.3
-      picomatch: 4.0.3
-      std-env: 4.0.0
-      tinybench: 2.9.0
-      tinyexec: 1.0.2
-      tinyglobby: 0.2.15
-      tinyrainbow: 3.0.3
-      vite: 8.0.1(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(sass@1.98.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.2)
-      why-is-node-running: 2.3.0
-    optionalDependencies:
-      '@types/node': 24.9.1
-      happy-dom: 20.0.10
-      jsdom: 27.4.0
-    transitivePeerDependencies:
-      - msw
-
   vitest@4.1.0(@types/node@24.9.1)(happy-dom@20.0.10)(jsdom@27.4.0)(vite@8.0.1(@types/node@24.9.1)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.70.0)(terser@5.46.1)(tsx@4.21.0)(yaml@2.8.2)):
     dependencies:
       '@vitest/expect': 4.1.0
@@ -22431,8 +22375,6 @@ snapshots:
 
   yaml@1.10.2: {}
 
-  yaml@2.8.1: {}
-
   yaml@2.8.2: {}
 
   yargs-parser@20.2.9: {}