diff --git a/apps/roam/src/components/DiscourseFloatingMenu.tsx b/apps/roam/src/components/DiscourseFloatingMenu.tsx
index a3e25b112..9d03bd7d0 100644
--- a/apps/roam/src/components/DiscourseFloatingMenu.tsx
+++ b/apps/roam/src/components/DiscourseFloatingMenu.tsx
@@ -12,6 +12,7 @@ import {
 } from "@blueprintjs/core";
 import { FeedbackWidget } from "./BirdEatsBugs";
 import { render as renderSettings } from "~/components/settings/Settings";
+import { getPersonalSetting } from "~/components/settings/utils/accessors";
 
 type DiscourseFloatingMenuProps = {
   // CSS placement class
@@ -118,7 +119,7 @@ export const installDiscourseFloatingMenu = (
     floatingMenuAnchor.id = ANCHOR_ID;
     document.getElementById("app")?.appendChild(floatingMenuAnchor);
   }
-  if (onLoadArgs.extensionAPI.settings.get("hide-feedback-button") as boolean) {
+  if (getPersonalSetting<boolean>(["Hide Feedback Button"])) {
     floatingMenuAnchor.classList.add("hidden");
   }
   ReactDOM.render(
diff --git a/apps/roam/src/components/settings/HomePersonalSettings.tsx b/apps/roam/src/components/settings/HomePersonalSettings.tsx
index d0283e48f..e54ce41c4 100644
--- a/apps/roam/src/components/settings/HomePersonalSettings.tsx
+++ b/apps/roam/src/components/settings/HomePersonalSettings.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { OnloadArgs } from "roamjs-components/types";
-import { Label, Checkbox } from "@blueprintjs/core";
+import { Label } from "@blueprintjs/core";
 import Description from "roamjs-components/components/Description";
 import { addStyle } from "roamjs-components/dom";
 import { NodeMenuTriggerComponent } from "~/components/DiscourseNodeMenu";
@@ -15,19 +15,12 @@ import {
   hideDiscourseFloatingMenu,
 } from "~/components/DiscourseFloatingMenu";
 import { NodeSearchMenuTriggerSetting } from "../DiscourseNodeSearchMenu";
-import {
-  AUTO_CANVAS_RELATIONS_KEY,
-  DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
-  DISCOURSE_TOOL_SHORTCUT_KEY,
-  STREAMLINE_STYLING_KEY,
-  DISALLOW_DIAGNOSTICS,
-} from "~/data/userSettings";
+import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
 import { enablePostHog, disablePostHog } from "~/utils/posthog";
-import internalError from "~/utils/internalError";
 import KeyboardShortcutInput from "./KeyboardShortcutInput";
-import { getSetting, setSetting } from "~/utils/extensionSettings";
 import streamlineStyling from "~/styles/streamlineStyling";
 import { useFeatureFlag } from "./utils/hooks";
+import { PersonalFlagPanel } from "./components/BlockPropSettingPanels";
 
 const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
   const extensionAPI = onloadArgs.extensionAPI;
@@ -61,246 +54,94 @@ const HomePersonalSettings = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
         description="Set a single key to activate the Discourse Tool in tldraw. Only single keys (no modifiers) are supported. Leave empty for no shortcut."
         placeholder="Click to set single key"
       />
-      <Checkbox
-        defaultChecked={
-          extensionAPI.settings.get("discourse-context-overlay") as boolean
-        }
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set(
-            "discourse-context-overlay",
-            target.checked,
-          );
-
-          onPageRefObserverChange(overlayHandler)(target.checked);
+      <PersonalFlagPanel
+        title="Overlay"
+        description="Whether or not to overlay Discourse Context information over Discourse Node references."
+        settingKeys={["Discourse Context Overlay"]}
+        onChange={(checked) => {
+          onPageRefObserverChange(overlayHandler)(checked);
         }}
-        labelElement={
-          <>
-            Overlay
-            <Description
-              description={
-                "Whether or not to overlay Discourse Context information over Discourse Node references."
-              }
-            />
-          </>
-        }
       />
       {suggestiveModeEnabled && (
-        <Checkbox
-          defaultChecked={
-            extensionAPI.settings.get("suggestive-mode-overlay") as boolean
-          }
-          onChange={(e) => {
-            const target = e.target as HTMLInputElement;
-            void extensionAPI.settings.set(
-              "suggestive-mode-overlay",
-              target.checked,
-            );
+        <PersonalFlagPanel
+          title="Suggestive Mode Overlay"
+          description="Whether or not to overlay Suggestive Mode button over Discourse Node references."
+          settingKeys={["Suggestive Mode Overlay"]}
+          onChange={(checked) => {
             onPageRefObserverChange(getSuggestiveOverlayHandler(onloadArgs))(
-              target.checked,
+              checked,
             );
           }}
-          labelElement={
-            <>
-              Suggestive Mode Overlay
-              <Description
-                description={
-                  "Whether or not to overlay Suggestive Mode button over Discourse Node references."
-                }
-              />
-            </>
-          }
         />
       )}
-      <Checkbox
-        defaultChecked={
-          extensionAPI.settings.get("text-selection-popup") !== false
-        }
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set("text-selection-popup", target.checked);
-        }}
-        labelElement={
-          <>
-            Text Selection Popup
-            <Description
-              description={
-                "Whether or not to show the Discourse Node Menu when selecting text."
-              }
-            />
-          </>
-        }
+      <PersonalFlagPanel
+        title="Text Selection Popup"
+        description="Whether or not to show the Discourse Node Menu when selecting text."
+        settingKeys={["Text Selection Popup"]}
+        defaultValue={true}
       />
-      <Checkbox
-        defaultChecked={
-          extensionAPI.settings.get("disable-sidebar-open") as boolean
-        }
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set("disable-sidebar-open", target.checked);
-        }}
-        labelElement={
-          <>
-            Disable Sidebar Open
-            <Description
-              description={
-                "Disable opening new nodes in the sidebar when created"
-              }
-            />
-          </>
-        }
+      <PersonalFlagPanel
+        title="Disable Sidebar Open"
+        description="Disable opening new nodes in the sidebar when created"
+        settingKeys={["Disable Sidebar Open"]}
       />
-      <Checkbox
-        defaultChecked={extensionAPI.settings.get("page-preview") as boolean}
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set("page-preview", target.checked);
-          onPageRefObserverChange(previewPageRefHandler)(target.checked);
+      <PersonalFlagPanel
+        title="Preview"
+        description="Whether or not to display page previews when hovering over page refs"
+        settingKeys={["Page Preview"]}
+        onChange={(checked) => {
+          onPageRefObserverChange(previewPageRefHandler)(checked);
         }}
-        labelElement={
-          <>
-            Preview
-            <Description
-              description={
-                "Whether or not to display page previews when hovering over page refs"
-              }
-            />
-          </>
-        }
       />
-      <Checkbox
-        defaultChecked={
-          extensionAPI.settings.get("hide-feedback-button") as boolean
-        }
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          extensionAPI.settings.set("hide-feedback-button", target.checked);
-
-          if (target.checked) {
+      <PersonalFlagPanel
+        title="Hide Feedback Button"
+        description="Hide the 'Send feedback' button at the bottom right of the screen."
+        settingKeys={["Hide Feedback Button"]}
+        onChange={(checked) => {
+          if (checked) {
             hideDiscourseFloatingMenu();
           } else {
             showDiscourseFloatingMenu();
           }
         }}
-        labelElement={
-          <>
-            Hide Feedback Button
-            <Description
-              description={
-                "Hide the 'Send feedback' button at the bottom right of the screen."
-              }
-            />
-          </>
-        }
       />
-      <Checkbox
-        defaultChecked={
-          extensionAPI.settings.get(AUTO_CANVAS_RELATIONS_KEY) === true
-        }
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          void extensionAPI.settings.set(
-            AUTO_CANVAS_RELATIONS_KEY,
-            target.checked,
-          );
-        }}
-        labelElement={
-          <>
-            Auto Canvas Relations
-            <Description
-              description={
-                "Automatically add discourse relations to canvas when a node is added"
-              }
-            />
-          </>
-        }
+      <PersonalFlagPanel
+        title="Auto Canvas Relations"
+        description="Automatically add discourse relations to canvas when a node is added"
+        settingKeys={["Auto Canvas Relations"]}
       />
-      <Checkbox
-        defaultChecked={getSetting(
-          DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
-          false,
-        )}
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          void setSetting(
-            DISCOURSE_CONTEXT_OVERLAY_IN_CANVAS_KEY,
-            target.checked,
-          ).catch(() => undefined);
-        }}
-        labelElement={
-          <>
-            (BETA) Overlay in Canvas
-            <Description
-              description={
-                "Whether or not to overlay Discourse Context information over Canvas Nodes."
-              }
-            />
-          </>
-        }
+      <PersonalFlagPanel
+        title="(BETA) Overlay in Canvas"
+        description="Whether or not to overlay Discourse Context information over Canvas Nodes."
+        settingKeys={["Overlay in Canvas"]}
       />
-      <Checkbox
-        defaultChecked={getSetting(STREAMLINE_STYLING_KEY, false)}
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          void setSetting(STREAMLINE_STYLING_KEY, target.checked).catch(
-            () => undefined,
-          );
-
-          // Load or unload the streamline styling
+      <PersonalFlagPanel
+        title="Streamline Styling"
+        description="Apply streamlined styling to your personal graph for a cleaner appearance."
+        settingKeys={["Streamline Styling"]}
+        onChange={(checked) => {
           const existingStyleElement =
             document.getElementById("streamline-styling");
 
-          if (target.checked && !existingStyleElement) {
-            // Load the styles
+          if (checked && !existingStyleElement) {
             const styleElement = addStyle(streamlineStyling);
             styleElement.id = "streamline-styling";
-          } else if (!target.checked && existingStyleElement) {
-            // Unload the styles
+          } else if (!checked && existingStyleElement) {
             existingStyleElement.remove();
           }
         }}
-        labelElement={
-          <>
-            Streamline Styling
-            <Description
-              description={
-                "Apply streamlined styling to your personal graph for a cleaner appearance."
-              }
-            />
-          </>
-        }
       />
-      <Checkbox
-        defaultChecked={getSetting(DISALLOW_DIAGNOSTICS, false)}
-        onChange={(e) => {
-          const target = e.target as HTMLInputElement;
-          const disallow = target.checked;
-          void setSetting(DISALLOW_DIAGNOSTICS, disallow)
-            .then(() => {
-              if (disallow) {
-                disablePostHog();
-              } else {
-                enablePostHog();
-              }
-            })
-            .catch((error) => {
-              target.checked = !disallow;
-              internalError({
-                error,
-                userMessage: "Could not change settings",
-              });
-            });
+      <PersonalFlagPanel
+        title="Disable Product Diagnostics"
+        description="Disable sending usage signals and error reports that help us improve the product."
+        settingKeys={["Disable Product Diagnostics"]}
+        onChange={(checked) => {
+          if (checked) {
+            disablePostHog();
+          } else {
+            enablePostHog();
+          }
         }}
-        labelElement={
-          <>
-            Disable Product Diagnostics
-            <Description
-              description={
-                "Disable sending usage signals and error reports that help us improve the product."
-              }
-            />
-          </>
-        }
       />
     </div>
   );
diff --git a/apps/roam/src/utils/createDiscourseNode.ts b/apps/roam/src/utils/createDiscourseNode.ts
index ed38e6481..4f7adf3b5 100644
--- a/apps/roam/src/utils/createDiscourseNode.ts
+++ b/apps/roam/src/utils/createDiscourseNode.ts
@@ -8,6 +8,7 @@ import getSubTree from "roamjs-components/util/getSubTree";
 import openBlockInSidebar from "roamjs-components/writes/openBlockInSidebar";
 import getDiscourseNodes from "./getDiscourseNodes";
 import isFlagEnabled from "./isFlagEnabled";
+import { getPersonalSetting } from "~/components/settings/utils/accessors";
 import resolveQueryBuilderRef from "./resolveQueryBuilderRef";
 import { OnloadArgs, RoamBasicNode } from "roamjs-components/types";
 import runQuery from "./runQuery";
@@ -33,7 +34,7 @@ const createDiscourseNode = async ({
     text: text,
   });
   const handleOpenInSidebar = (uid: string) => {
-    if (extensionAPI?.settings.get("disable-sidebar-open")) return;
+    if (getPersonalSetting<boolean>(["Disable Sidebar Open"])) return;
     openBlockInSidebar(uid);
     setTimeout(() => {
       const sidebarTitle = document.querySelector(
diff --git a/apps/roam/src/utils/initializeObserversAndListeners.ts b/apps/roam/src/utils/initializeObserversAndListeners.ts
index 536d71bc3..08d859c5d 100644
--- a/apps/roam/src/utils/initializeObserversAndListeners.ts
+++ b/apps/roam/src/utils/initializeObserversAndListeners.ts
@@ -53,6 +53,7 @@ import { getCleanTagText } from "~/components/settings/NodeConfig";
 import {
   getFeatureFlag,
   getGlobalSetting,
+  getPersonalSetting,
 } from "~/components/settings/utils/accessors";
 import getPleasingColors from "@repo/utils/getPleasingColors";
 import { colord } from "colord";
@@ -187,7 +188,7 @@ export const initObservers = async ({
       });
   }) as EventListener;
 
-  if (onloadArgs.extensionAPI.settings.get("suggestive-mode-overlay")) {
+  if (getPersonalSetting<boolean>(["Suggestive Mode Overlay"])) {
     addPageRefObserver(getSuggestiveOverlayHandler(onloadArgs));
   }
 
@@ -210,9 +211,9 @@ export const initObservers = async ({
     },
   });
 
-  if (onloadArgs.extensionAPI.settings.get("page-preview"))
+  if (getPersonalSetting<boolean>(["Page Preview"]))
     addPageRefObserver(previewPageRefHandler);
-  if (onloadArgs.extensionAPI.settings.get("discourse-context-overlay")) {
+  if (getPersonalSetting<boolean>(["Discourse Context Overlay"])) {
     const overlayHandler = getOverlayHandler(onloadArgs);
     onPageRefObserverChange(overlayHandler)(true);
   }
@@ -363,7 +364,7 @@ export const initObservers = async ({
 
   const nodeCreationPopoverListener = debounce(() => {
     const isTextSelectionPopupEnabled =
-      onloadArgs.extensionAPI.settings.get("text-selection-popup") !== false;
+      getPersonalSetting<boolean>(["Text Selection Popup"]) !== false;
 
     if (!isTextSelectionPopupEnabled) return;
 
diff --git a/apps/roam/src/utils/registerCommandPaletteCommands.ts b/apps/roam/src/utils/registerCommandPaletteCommands.ts
index 58a3b636f..63d208230 100644
--- a/apps/roam/src/utils/registerCommandPaletteCommands.ts
+++ b/apps/roam/src/utils/registerCommandPaletteCommands.ts
@@ -17,6 +17,10 @@ import {
   onPageRefObserverChange,
 } from "./pageRefObserverHandlers";
 import { HIDE_METADATA_KEY } from "~/data/userSettings";
+import {
+  getPersonalSetting,
+  setPersonalSetting,
+} from "~/components/settings/utils/accessors";
 
 export const registerCommandPaletteCommands = (onloadArgs: OnloadArgs) => {
   const { extensionAPI } = onloadArgs;
@@ -139,21 +143,11 @@ export const registerCommandPaletteCommands = (onloadArgs: OnloadArgs) => {
 
   const renderSettingsPopup = () => renderSettings({ onloadArgs });
 
-  const toggleDiscourseContextOverlay = async () => {
+  const toggleDiscourseContextOverlay = () => {
     const currentValue =
-      (extensionAPI.settings.get("discourse-context-overlay") as boolean) ??
-      false;
+      getPersonalSetting<boolean>(["Discourse Context Overlay"]) ?? false;
     const newValue = !currentValue;
-    try {
-      await extensionAPI.settings.set("discourse-context-overlay", newValue);
-    } catch (error) {
-      const e = error as Error;
-      renderToast({
-        id: "discourse-context-overlay-toggle-error",
-        content: `Failed to toggle discourse context overlay: ${e.message}`,
-      });
-      return;
-    }
+    setPersonalSetting(["Discourse Context Overlay"], newValue);
     const overlayHandler = getOverlayHandler(onloadArgs);
     onPageRefObserverChange(overlayHandler)(newValue);
     renderToast({