diff --git a/apps/roam/src/components/left-sidebar/LeftSidebarPersonalSettings.tsx b/apps/roam/src/components/left-sidebar/LeftSidebarPersonalSettings.tsx
new file mode 100644
index 000000000..87699cbf0
--- /dev/null
+++ b/apps/roam/src/components/left-sidebar/LeftSidebarPersonalSettings.tsx
@@ -0,0 +1,611 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  memo,
+  Dispatch,
+  SetStateAction,
+} from "react";
+import {
+  Button,
+  ButtonGroup,
+  Dialog,
+  InputGroup,
+  NumericInput,
+} from "@blueprintjs/core";
+import AutocompleteInput from "roamjs-components/components/AutocompleteInput";
+import getAllPageNames from "roamjs-components/queries/getAllPageNames";
+import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
+import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
+import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
+import { extractRef } from "roamjs-components/util";
+import { render as renderToast } from "roamjs-components/components/Toast";
+import {
+  getPersonalSetting,
+  setPersonalSetting,
+} from "~/components/settings/block-prop/utils/accessors";
+import type { PersonalSection } from "~/components/settings/block-prop/utils/zodSchema";
+import { PersonalSettingsSchema } from "~/components/settings/block-prop/utils/zodSchema";
+import { FlagPanel } from "../settings/block-prop/components/FlagPanel";
+import { CollapsiblePanel } from "../settings/block-prop/components/CollapsiblePanel";
+import { getPersonalSettingsKey } from "~/components/settings/block-prop/utils/init";
+
+type SectionEntry = {
+  name: string;
+  data: PersonalSection;
+};
+
+type ChildEntry = PersonalSection["Children"][number];
+
+const SectionItem = memo(
+  ({
+    section,
+    sections,
+    setSettingsDialogSectionName,
+    pageNames,
+    setSections,
+    index,
+    isFirst,
+    isLast,
+    onMoveSection,
+  }: {
+    section: SectionEntry;
+    sections: SectionEntry[];
+    setSections: Dispatch<SetStateAction<SectionEntry[]>>;
+    setSettingsDialogSectionName: (name: string | null) => void;
+    pageNames: string[];
+    index: number;
+    isFirst: boolean;
+    isLast: boolean;
+    onMoveSection: (index: number, direction: "up" | "down") => void;
+  }) => {
+    const ref = extractRef(section.name);
+    const blockText = getTextByBlockUid(ref);
+    const originalName = blockText || section.name;
+    const [childInput, setChildInput] = useState("");
+    const [childInputKey, setChildInputKey] = useState(0);
+    const [childSettingsIndex, setChildSettingsIndex] = useState<number | null>(
+      null,
+    );
+
+    const removeSection = useCallback(
+      (sectionName: string) => {
+        const updated = sections.filter((s) => s.name !== sectionName);
+        const newRecord: Record<string, PersonalSection> = {};
+        updated.forEach((s) => {
+          newRecord[s.name] = s.data;
+        });
+        setPersonalSetting(["Left Sidebar"], newRecord);
+        setSections(updated);
+      },
+      [sections, setSections],
+    );
+
+    const addChildToSection = useCallback(
+      (sectionName: string, childName: string) => {
+        if (!childName) return;
+
+        const targetPage =
+          getPageUidByPageTitle(childName) || childName.trim();
+        const newChild: ChildEntry = {
+          Page: targetPage,
+          Alias: "",
+        };
+
+        const updated = sections.map((s) => {
+          if (s.name === sectionName) {
+            return {
+              ...s,
+              data: {
+                ...s.data,
+                Children: [...s.data.Children, newChild],
+              },
+            };
+          }
+          return s;
+        });
+
+        const newRecord: Record<string, PersonalSection> = {};
+        updated.forEach((s) => {
+          newRecord[s.name] = s.data;
+        });
+        setPersonalSetting(["Left Sidebar"], newRecord);
+        setSections(updated);
+      },
+      [sections, setSections],
+    );
+
+    const removeChild = useCallback(
+      (sectionName: string, childIndex: number) => {
+        const updated = sections.map((s) => {
+          if (s.name === sectionName) {
+            return {
+              ...s,
+              data: {
+                ...s.data,
+                Children: s.data.Children.filter((_, i) => i !== childIndex),
+              },
+            };
+          }
+          return s;
+        });
+
+        const newRecord: Record<string, PersonalSection> = {};
+        updated.forEach((s) => {
+          newRecord[s.name] = s.data;
+        });
+        setPersonalSetting(["Left Sidebar"], newRecord);
+        setSections(updated);
+      },
+      [sections, setSections],
+    );
+
+    const moveChild = useCallback(
+      (sectionName: string, childIndex: number, direction: "up" | "down") => {
+        const currentSection = sections.find((s) => s.name === sectionName);
+        if (!currentSection) return;
+
+        const children = [...currentSection.data.Children];
+        if (direction === "up" && childIndex === 0) return;
+        if (direction === "down" && childIndex === children.length - 1) return;
+
+        const newIndex = direction === "up" ? childIndex - 1 : childIndex + 1;
+        const [removed] = children.splice(childIndex, 1);
+        children.splice(newIndex, 0, removed);
+
+        const updated = sections.map((s) => {
+          if (s.name === sectionName) {
+            return {
+              ...s,
+              data: {
+                ...s.data,
+                Children: children,
+              },
+            };
+          }
+          return s;
+        });
+
+        const newRecord: Record<string, PersonalSection> = {};
+        updated.forEach((s) => {
+          newRecord[s.name] = s.data;
+        });
+        setPersonalSetting(["Left Sidebar"], newRecord);
+        setSections(updated);
+      },
+      [sections, setSections],
+    );
+
+    const updateChildAlias = useCallback(
+      (sectionName: string, childIndex: number, alias: string) => {
+        const updated = sections.map((s) => {
+          if (s.name === sectionName) {
+            const children = [...s.data.Children];
+            children[childIndex] = { ...children[childIndex], Alias: alias };
+            return {
+              ...s,
+              data: {
+                ...s.data,
+                Children: children,
+              },
+            };
+          }
+          return s;
+        });
+
+        const newRecord: Record<string, PersonalSection> = {};
+        updated.forEach((s) => {
+          newRecord[s.name] = s.data;
+        });
+        setPersonalSetting(["Left Sidebar"], newRecord);
+        setSections(updated);
+      },
+      [sections, setSections],
+    );
+
+    const handleAddChild = useCallback(() => {
+      if (childInput) {
+        addChildToSection(section.name, childInput);
+        setChildInput("");
+        setChildInputKey((prev) => prev + 1);
+      }
+    }, [childInput, section.name, addChildToSection]);
+
+    return (
+      <CollapsiblePanel
+        header={
+          <div className="group flex w-full items-center">
+            <div className="flex-1 truncate">
+              <span className="font-medium">{originalName}</span>
+            </div>
+            <ButtonGroup minimal>
+              <Button
+                icon="arrow-up"
+                small
+                disabled={isFirst}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onMoveSection(index, "up");
+                }}
+                title="Move section up"
+                className="opacity-0 transition-opacity group-hover:opacity-100"
+              />
+              <Button
+                icon="arrow-down"
+                small
+                disabled={isLast}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onMoveSection(index, "down");
+                }}
+                title="Move section down"
+                className="opacity-0 transition-opacity group-hover:opacity-100"
+              />
+              <Button
+                icon="settings"
+                title="Edit section settings"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setSettingsDialogSectionName(section.name);
+                }}
+              />
+              <Button
+                icon="trash"
+                intent="danger"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  removeSection(section.name);
+                }}
+                title="Remove section"
+              />
+            </ButtonGroup>
+          </div>
+        }
+        defaultOpen={!section.data.Settings.Folded}
+        className="personal-section"
+      >
+        <div className="ml-6">
+              <div className="mb-2 flex items-center gap-2">
+                <AutocompleteInput
+                  key={childInputKey}
+                  value={childInput}
+                  setValue={setChildInput}
+                  placeholder="Add child page…"
+                  options={pageNames}
+                  maxItemsDisplayed={50}
+                  autoFocus
+                  onConfirm={() => handleAddChild()}
+                />
+                <Button
+                  icon="plus"
+                  small
+                  minimal
+                  disabled={!childInput}
+                  onClick={() => handleAddChild()}
+                  title="Add child"
+                />
+              </div>
+
+              {section.data.Children.length > 0 && (
+                <div className="space-y-1">
+                  {section.data.Children.map((child, childIndex) => {
+                    const childAlias = child.Alias;
+                    const isSettingsOpen = childSettingsIndex === childIndex;
+                    const childDisplayTitle =
+                      getPageTitleByPageUid(child.Page) ||
+                      getTextByBlockUid(extractRef(child.Page)) ||
+                      child.Page;
+                    return (
+                      <div key={`${child.Page}-${childIndex}`}>
+                        <div className="group flex items-center justify-between rounded bg-gray-50 p-2 hover:bg-gray-100">
+                          <div
+                            className="mr-2 min-w-0 flex-1 truncate"
+                            title={childDisplayTitle}
+                          >
+                            {childAlias ? (
+                              <span>
+                                <span className="font-medium">
+                                  {childAlias}
+                                </span>
+                                <span className="ml-2 text-xs text-gray-400">
+                                  ({childDisplayTitle})
+                                </span>
+                              </span>
+                            ) : (
+                              childDisplayTitle
+                            )}
+                          </div>
+                          <ButtonGroup minimal className="flex-shrink-0">
+                            <Button
+                              icon="settings"
+                              small
+                              onClick={() => setChildSettingsIndex(childIndex)}
+                              title="Child Settings"
+                              className="opacity-0 transition-opacity group-hover:opacity-100"
+                            />
+                            <Button
+                              icon="arrow-up"
+                              small
+                              disabled={childIndex === 0}
+                              onClick={() =>
+                                moveChild(section.name, childIndex, "up")
+                              }
+                              title="Move child up"
+                              className="opacity-0 transition-opacity group-hover:opacity-100"
+                            />
+                            <Button
+                              icon="arrow-down"
+                              small
+                              disabled={
+                                childIndex === section.data.Children.length - 1
+                              }
+                              onClick={() =>
+                                moveChild(section.name, childIndex, "down")
+                              }
+                              title="Move child down"
+                              className="opacity-0 transition-opacity group-hover:opacity-100"
+                            />
+                            <Button
+                              icon="trash"
+                              small
+                              intent="danger"
+                              onClick={() =>
+                                removeChild(section.name, childIndex)
+                              }
+                              title="Remove child"
+                            />
+                          </ButtonGroup>
+                        </div>
+                        <Dialog
+                          isOpen={isSettingsOpen}
+                          onClose={() => setChildSettingsIndex(null)}
+                          title={`Settings for "${childDisplayTitle}"`}
+                          style={{ width: "400px" }}
+                        >
+                          <div className="p-4">
+                            <label className="mb-2 block text-sm font-medium">
+                              Alias
+                            </label>
+                            <InputGroup
+                              value={child.Alias}
+                              onChange={(e) =>
+                                updateChildAlias(
+                                  section.name,
+                                  childIndex,
+                                  e.target.value,
+                                )
+                              }
+                              placeholder="Display name for this item"
+                            />
+                          </div>
+                        </Dialog>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+
+              {section.data.Children.length === 0 && (
+                <div className="text-sm italic text-gray-400">
+                  No children added yet
+                </div>
+              )}
+        </div>
+      </CollapsiblePanel>
+    );
+  },
+);
+
+SectionItem.displayName = "SectionItem";
+
+export const LeftSidebarPersonalSections = () => {
+  const [sections, setSections] = useState<SectionEntry[]>([]);
+  const [newSectionInput, setNewSectionInput] = useState("");
+  const [settingsDialogSectionName, setSettingsDialogSectionName] = useState<
+    string | null
+  >(null);
+
+  useEffect(() => {
+    const loadSettings = () => {
+      const rawSettings = getPersonalSetting(["Left Sidebar"]);
+      const parsed = PersonalSettingsSchema.shape["Left Sidebar"].safeParse(
+        rawSettings || {},
+      );
+
+      if (parsed.success) {
+        const entries: SectionEntry[] = Object.entries(parsed.data).map(
+          ([name, data]) => ({
+            name,
+            data,
+          }),
+        );
+        setSections(entries);
+      } else {
+        console.warn("Failed to parse personal settings:", parsed.error);
+        setSections([]);
+      }
+    };
+
+    loadSettings();
+  }, []);
+
+  const addSection = useCallback(
+    (sectionName: string) => {
+      if (!sectionName) return;
+      if (sections.some((s) => s.name === sectionName)) {
+        renderToast({
+          content: "Section already exists",
+          intent: "warning",
+          id: "section-exists-warning",
+        });
+        return;
+      }
+
+      const newSectionData: PersonalSection = {
+        Children: [],
+        Settings: {
+          "Truncate-result?": 75,
+          Folded: false,
+        },
+      };
+
+      const updated = [...sections, { name: sectionName, data: newSectionData }];
+      const newRecord: Record<string, PersonalSection> = {};
+      updated.forEach((s) => {
+        newRecord[s.name] = s.data;
+      });
+      setPersonalSetting(["Left Sidebar"], newRecord);
+      setSections(updated);
+      setNewSectionInput("");
+    },
+    [sections],
+  );
+
+  const moveSection = useCallback(
+    (index: number, direction: "up" | "down") => {
+      if (direction === "up" && index === 0) return;
+      if (direction === "down" && index === sections.length - 1) return;
+
+      const newSections = [...sections];
+      const newIndex = direction === "up" ? index - 1 : index + 1;
+      const [removed] = newSections.splice(index, 1);
+      newSections.splice(newIndex, 0, removed);
+
+      const newRecord: Record<string, PersonalSection> = {};
+      newSections.forEach((s) => {
+        newRecord[s.name] = s.data;
+      });
+      setPersonalSetting(["Left Sidebar"], newRecord);
+      setSections(newSections);
+    },
+    [sections],
+  );
+
+  const updateSectionSettings = useCallback(
+    (sectionName: string, settings: Partial<PersonalSection["Settings"]>) => {
+      const updated = sections.map((s) => {
+        if (s.name === sectionName) {
+          return {
+            ...s,
+            data: {
+              ...s.data,
+              Settings: {
+                ...s.data.Settings,
+                ...settings,
+              },
+            },
+          };
+        }
+        return s;
+      });
+
+      const newRecord: Record<string, PersonalSection> = {};
+      updated.forEach((s) => {
+        newRecord[s.name] = s.data;
+      });
+      setPersonalSetting(["Left Sidebar"], newRecord);
+      setSections(updated);
+    },
+    [sections],
+  );
+
+  const activeDialogSection = useMemo(() => {
+    return sections.find((s) => s.name === settingsDialogSectionName) || null;
+  }, [sections, settingsDialogSectionName]);
+
+  const pageNames = useMemo(() => getAllPageNames(), []);
+
+  return (
+    <div className="flex flex-col gap-4 p-1">
+      <div className="mb-2">
+        <div className="mb-2 text-sm text-gray-600">
+          Add pages or create custom sections with settings and children
+        </div>
+        <div className="flex items-center gap-2">
+          <InputGroup
+            value={newSectionInput}
+            onChange={(e) => setNewSectionInput(e.target.value)}
+            placeholder="Add section …"
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && newSectionInput) {
+                e.preventDefault();
+                e.stopPropagation();
+                addSection(newSectionInput);
+              }
+            }}
+          />
+          <Button
+            icon="plus"
+            small
+            minimal
+            disabled={
+              !newSectionInput ||
+              sections.some((s) => s.name === newSectionInput)
+            }
+            onClick={() => addSection(newSectionInput)}
+          />
+        </div>
+      </div>
+
+      <div className="mt-2 space-y-2">
+        {sections.map((section, index) => (
+          <SectionItem
+            key={section.name}
+            section={section}
+            sections={sections}
+            setSettingsDialogSectionName={setSettingsDialogSectionName}
+            pageNames={pageNames}
+            setSections={setSections}
+            index={index}
+            isFirst={index === 0}
+            isLast={index === sections.length - 1}
+            onMoveSection={moveSection}
+          />
+        ))}
+      </div>
+
+      {activeDialogSection && (
+        <Dialog
+          isOpen={true}
+          onClose={() => setSettingsDialogSectionName(null)}
+          title={`Settings for "${activeDialogSection.name}"`}
+          style={{ width: "500px" }}
+        >
+          <div className="space-y-4 p-4">
+            <div className="space-y-3">
+              <FlagPanel
+                title="Folded"
+                description="Start with section collapsed in left sidebar"
+                flag={[
+                  getPersonalSettingsKey(),
+                  "Left Sidebar",
+                  activeDialogSection.name,
+                  "Settings",
+                  "Folded",
+                ]}
+              />
+              <div>
+                <label className="mb-2 block text-sm font-medium">
+                  Truncate result (characters)
+                </label>
+                <NumericInput
+                  value={
+                    activeDialogSection.data.Settings["Truncate-result?"] || 75
+                  }
+                  onValueChange={(value) =>
+                    updateSectionSettings(activeDialogSection.name, {
+                      "Truncate-result?": value,
+                    })
+                  }
+                  min={0}
+                  fill
+                />
+              </div>
+            </div>
+          </div>
+        </Dialog>
+      )}
+    </div>
+  );
+};
diff --git a/apps/roam/src/components/LeftSidebarView.tsx b/apps/roam/src/components/left-sidebar/LeftSidebarView.tsx
similarity index 70%
rename from apps/roam/src/components/LeftSidebarView.tsx
rename to apps/roam/src/components/left-sidebar/LeftSidebarView.tsx
index 5a002d4f1..1beea95cf 100644
--- a/apps/roam/src/components/LeftSidebarView.tsx
+++ b/apps/roam/src/components/left-sidebar/LeftSidebarView.tsx
@@ -1,14 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import {
-  Collapse,
   Icon,
   Popover,
   Menu,
@@ -24,130 +17,16 @@ import {
   notify,
   subscribe,
 } from "~/utils/discourseConfigRef";
-import type {
-  LeftSidebarConfig,
-  LeftSidebarPersonalSectionConfig,
-} from "~/utils/getLeftSidebarSettings";
 import { createBlock } from "roamjs-components/writes";
-import deleteBlock from "roamjs-components/writes/deleteBlock";
-import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
 import refreshConfigTree from "~/utils/refreshConfigTree";
-import { Dispatch, SetStateAction } from "react";
-import { SettingsDialog } from "./settings/Settings";
+import { SettingsDialog } from "../settings/Settings";
 import { OnloadArgs } from "roamjs-components/types";
 import renderOverlay from "roamjs-components/util/renderOverlay";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
 import { migrateLeftSidebarSettings } from "~/utils/migrateLeftSidebarSettings";
-import { parseReference, SectionChildren } from "./left-sidebar/utils";
-import { ViewGlobalLeftSidebar } from "./left-sidebar/ViewGlobalLeftSidebar";
-
-const toggleFoldedState = ({
-  isOpen,
-  setIsOpen,
-  folded,
-  parentUid,
-}: {
-  isOpen: boolean;
-  setIsOpen: Dispatch<SetStateAction<boolean>>;
-  folded: { uid?: string; value: boolean };
-  parentUid: string;
-}) => {
-  if (isOpen) {
-    setIsOpen(false);
-    if (folded.uid) {
-      void deleteBlock(folded.uid);
-      folded.uid = undefined;
-      folded.value = false;
-    }
-  } else {
-    setIsOpen(true);
-    const newUid = window.roamAlphaAPI.util.generateUID();
-    void createBlock({
-      parentUid,
-      node: { text: "Folded", uid: newUid },
-    });
-    folded.uid = newUid;
-    folded.value = true;
-  }
-};
-
-const PersonalSectionItem = ({
-  section,
-}: {
-  section: LeftSidebarPersonalSectionConfig;
-}) => {
-  const titleRef = parseReference(section.text);
-  const blockText = useMemo(
-    () =>
-      titleRef.type === "block" ? getTextByBlockUid(titleRef.uid) : undefined,
-    [titleRef],
-  );
-  const truncateAt = section.settings?.truncateResult.value;
-  const [isOpen, setIsOpen] = useState<boolean>(
-    !!section.settings?.folded.value || false,
-  );
-
-  const handleChevronClick = () => {
-    if (!section.settings) return;
-
-    toggleFoldedState({
-      isOpen,
-      setIsOpen,
-      folded: section.settings.folded,
-      parentUid: section.settings.uid || "",
-    });
-  };
-
-  return (
-    <>
-      <div className="sidebar-title-button flex w-full cursor-pointer items-center border-none bg-transparent pl-6 pr-2.5 font-semibold outline-none">
-        <div className="flex w-full items-center justify-between">
-          <div
-            className="flex items-center"
-            onClick={() => {
-              if ((section.children?.length || 0) > 0) {
-                handleChevronClick();
-              }
-            }}
-          >
-            {(blockText || titleRef.display).toUpperCase()}
-          </div>
-          {(section.children?.length || 0) > 0 && (
-            <span
-              className="sidebar-title-button-chevron p-1"
-              onClick={handleChevronClick}
-            >
-              <Icon icon={isOpen ? "chevron-down" : "chevron-right"} />
-            </span>
-          )}
-        </div>
-      </div>
-      <Collapse isOpen={isOpen}>
-        <SectionChildren
-          childrenNodes={section.children || []}
-          truncateAt={truncateAt}
-        />
-      </Collapse>
-    </>
-  );
-};
-
-const PersonalSections = ({ config }: { config: LeftSidebarConfig }) => {
-  const sections = config.personal.sections || [];
-
-  if (!sections.length) return null;
-
-  return (
-    <div className="personal-left-sidebar-sections">
-      {sections.map((section) => (
-        <div key={section.uid}>
-          <PersonalSectionItem section={section} />
-        </div>
-      ))}
-    </div>
-  );
-};
+import { ViewGlobalLeftSidebar } from "./ViewGlobalLeftSidebar";
+import { ViewPersonalLeftSidebar } from "./ViewPersonalLeftSidebar";
 
 export const useConfig = () => {
   const [config, setConfig] = useState(
@@ -281,13 +160,11 @@ const FavoritesPopover = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
 };
 
 const LeftSidebarView = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
-  const { config } = useConfig();
-
   return (
     <>
       <FavoritesPopover onloadArgs={onloadArgs} />
       <ViewGlobalLeftSidebar />
-      <PersonalSections config={config} />
+      <ViewPersonalLeftSidebar />
     </>
   );
 };
diff --git a/apps/roam/src/components/left-sidebar/ViewGlobalLeftSidebar.tsx b/apps/roam/src/components/left-sidebar/ViewGlobalLeftSidebar.tsx
index 4fe89db10..b2cb9e73f 100644
--- a/apps/roam/src/components/left-sidebar/ViewGlobalLeftSidebar.tsx
+++ b/apps/roam/src/components/left-sidebar/ViewGlobalLeftSidebar.tsx
@@ -28,10 +28,11 @@ export const ViewGlobalLeftSidebar = () => {
     return (
       <div className="global-left-sidebar-section">
         <CollapsiblePanel
+          variant="sidebar"
           header={header}
           settingKey={["Left Sidebar", "Settings", "Folded"]}
           defaultOpen={!folded}
-          className="border-none bg-transparent p-0 hover:bg-transparent"
+          className="!hover:bg-transparent !border-none !bg-transparent !p-0"
         >
           <SectionChildren childrenNodes={childrenNodes} />
         </CollapsiblePanel>
diff --git a/apps/roam/src/components/left-sidebar/ViewPersonalLeftSidebar.tsx b/apps/roam/src/components/left-sidebar/ViewPersonalLeftSidebar.tsx
new file mode 100644
index 000000000..075e939d8
--- /dev/null
+++ b/apps/roam/src/components/left-sidebar/ViewPersonalLeftSidebar.tsx
@@ -0,0 +1,70 @@
+import { getPersonalSetting } from "~/components/settings/block-prop/utils/accessors";
+import { PersonalSettingsSchema } from "~/components/settings/block-prop/utils/zodSchema";
+import { CollapsiblePanel } from "~/components/settings/block-prop/components/CollapsiblePanel";
+import { getPersonalSettingsKey } from "~/components/settings/block-prop/utils/init";
+import React from "react";
+import { SectionChildren } from "./utils";
+import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
+import { extractRef } from "roamjs-components/util";
+
+export const ViewPersonalLeftSidebar = () => {
+  const rawSettings = getPersonalSetting(["Left Sidebar"]);
+  const settings = PersonalSettingsSchema.shape["Left Sidebar"].parse(
+    rawSettings || {},
+  );
+
+  const sectionEntries = Object.entries(settings);
+
+  if (!sectionEntries.length) return null;
+
+  const personalSettingsKey = getPersonalSettingsKey();
+
+  return (
+    <div className="personal-left-sidebar-sections">
+      {sectionEntries.map(([sectionName, sectionData]) => {
+        const children = sectionData.Children || [];
+
+        if (!children.length) return null;
+
+        const ref = extractRef(sectionName);
+        const blockText = getTextByBlockUid(ref);
+        const displayName = (blockText || sectionName).toUpperCase();
+        const folded = sectionData.Settings.Folded;
+        const truncateAt = sectionData.Settings["Truncate-result?"];
+
+        const childrenNodes = children.map((child) => ({
+          uid: child.Page,
+          text: child.Page,
+          alias: child.Alias ? { value: child.Alias } : undefined,
+        }));
+
+        const header = (
+          <span className="flex items-center font-semibold">{displayName}</span>
+        );
+
+        return (
+          <div key={sectionName} className="personal-left-sidebar-section">
+            <CollapsiblePanel
+              variant="sidebar"
+              header={header}
+              settingKey={[
+                personalSettingsKey,
+                "Left Sidebar",
+                sectionName,
+                "Settings",
+                "Folded",
+              ]}
+              defaultOpen={!folded}
+              className="!hover:bg-transparent !border-none !bg-transparent !p-0"
+            >
+              <SectionChildren
+                childrenNodes={childrenNodes}
+                truncateAt={truncateAt}
+              />
+            </CollapsiblePanel>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/apps/roam/src/components/settings/block-prop/components/CollapsiblePanel.tsx b/apps/roam/src/components/settings/block-prop/components/CollapsiblePanel.tsx
index 876eef00a..04d35f18f 100644
--- a/apps/roam/src/components/settings/block-prop/components/CollapsiblePanel.tsx
+++ b/apps/roam/src/components/settings/block-prop/components/CollapsiblePanel.tsx
@@ -1,6 +1,12 @@
 import React, { useState, ReactNode, useCallback } from "react";
-import { Button, Collapse } from "@blueprintjs/core";
-import { getGlobalSetting, setGlobalSetting } from "~/components/settings/block-prop/utils/accessors";
+import { Button, Collapse, Icon } from "@blueprintjs/core";
+import {
+  getGlobalSetting,
+  getPersonalSetting,
+  setGlobalSetting,
+  setPersonalSetting,
+} from "~/components/settings/block-prop/utils/accessors";
+import { getPersonalSettingsKey } from "~/components/settings/block-prop/utils/init";
 import z from "zod";
 
 type Props = {
@@ -9,6 +15,23 @@ type Props = {
   settingKey?: string[];
   defaultOpen?: boolean;
   className?: string;
+  variant?: "panel" | "sidebar";
+};
+
+const getAccessors = (settingKey: string[]) => {
+  const [root, ...rest] = settingKey;
+
+  if (root === getPersonalSettingsKey()) {
+    return {
+      get: () => getPersonalSetting(rest),
+      set: (value: boolean) => setPersonalSetting(rest, value),
+    };
+  }
+
+  return {
+    get: () => getGlobalSetting(settingKey),
+    set: (value: boolean) => setGlobalSetting(settingKey, value),
+  };
 };
 
 export const CollapsiblePanel = ({
@@ -17,10 +40,12 @@ export const CollapsiblePanel = ({
   settingKey,
   defaultOpen = false,
   className = "",
+  variant = "panel",
 }: Props) => {
   const getPersistedValue = useCallback(() => {
     if (!settingKey || settingKey.length === 0) return undefined;
-    const current = getGlobalSetting(settingKey);
+    const { get } = getAccessors(settingKey);
+    const current = get();
     const parsed = z.boolean().safeParse(current);
     return parsed.success ? parsed.data : undefined;
   }, [settingKey]);
@@ -34,16 +59,33 @@ export const CollapsiblePanel = ({
     const newState = !isOpen;
     setIsOpen(newState);
     if (settingKey && settingKey.length > 0) {
-      setGlobalSetting(settingKey, newState);
+      const { set } = getAccessors(settingKey);
+      set(newState);
     }
   };
 
+  if (variant === "sidebar") {
+    return (
+      <div className={`collapsible-panel ${className}`}>
+        <div
+          className="sidebar-title-button flex w-full cursor-pointer items-center border-none bg-transparent pl-6 pr-2.5 font-semibold outline-none"
+          onClick={handleToggle}
+        >
+          <div className="flex w-full items-center justify-between">
+            {header}
+            <span className="sidebar-title-button-chevron p-1">
+              <Icon icon={isOpen ? "chevron-down" : "chevron-right"} />
+            </span>
+          </div>
+        </div>
+        <Collapse isOpen={isOpen}>{children}</Collapse>
+      </div>
+    );
+  }
+
   return (
     <div
-      className={`collapsible-panel rounded-md p-3 hover:bg-gray-50 ${className}`}
-      style={{
-        border: "1px solid rgba(51, 51, 51, 0.2)",
-      }}
+      className={`collapsible-panel rounded-md border border-[rgba(51,51,51,0.2)] p-3 hover:bg-gray-50 ${className}`}
     >
       <div
         className="mb-2 flex cursor-pointer items-center justify-between"
diff --git a/apps/roam/src/components/settings/block-prop/components/FlagPanel.tsx b/apps/roam/src/components/settings/block-prop/components/FlagPanel.tsx
index c6b2745da..5940f68dd 100644
--- a/apps/roam/src/components/settings/block-prop/components/FlagPanel.tsx
+++ b/apps/roam/src/components/settings/block-prop/components/FlagPanel.tsx
@@ -5,12 +5,15 @@ import idToTitle from "roamjs-components/util/idToTitle";
 import {
   getFeatureFlag,
   getGlobalSetting,
+  getPersonalSetting,
   setFeatureFlag,
   setGlobalSetting,
+  setPersonalSetting,
 } from "~/components/settings/block-prop/utils/accessors";
 import { type FeatureFlags } from "~/components/settings/block-prop/utils/zodSchema";
 import z from "zod";
 import { TOP_LEVEL_BLOCK_PROP_KEYS } from "~/components/settings/block-prop/data/blockPropsSettingsConfig";
+import { getPersonalSettingsKey } from "~/components/settings/block-prop/utils/init";
 
 type FeatureFlagPath = [
   typeof TOP_LEVEL_BLOCK_PROP_KEYS.featureFlags,
@@ -19,14 +22,18 @@ type FeatureFlagPath = [
 
 type GlobalSettingPath = [typeof TOP_LEVEL_BLOCK_PROP_KEYS.global, ...string[]];
 
+type PersonalSettingPath = [string, ...string[]];
+
+type FlagPath = FeatureFlagPath | GlobalSettingPath | PersonalSettingPath;
+
 type Props = {
   title: string;
   description: string;
   disabled?: boolean;
-  flag: FeatureFlagPath | GlobalSettingPath;
+  flag: FlagPath;
 };
 
-const getAdapter = (flag: FeatureFlagPath | GlobalSettingPath) => {
+const getAdapter = (flag: FlagPath) => {
   const [root, ...rest] = flag;
 
   if (root === TOP_LEVEL_BLOCK_PROP_KEYS.featureFlags) {
@@ -48,6 +55,17 @@ const getAdapter = (flag: FeatureFlagPath | GlobalSettingPath) => {
     };
   }
 
+  if (root === getPersonalSettingsKey()) {
+    return {
+      getValue: () => {
+        const current = getPersonalSetting(rest);
+        const parsed = z.boolean().safeParse(current);
+        return parsed.success ? parsed.data : false;
+      },
+      setValue: (checked: boolean) => setPersonalSetting(rest, checked),
+    };
+  }
+
   return {
     getValue: () => false,
     setValue: (checked: boolean) => {
diff --git a/apps/roam/src/utils/initializeObserversAndListeners.ts b/apps/roam/src/utils/initializeObserversAndListeners.ts
index 59c116552..4e163f705 100644
--- a/apps/roam/src/utils/initializeObserversAndListeners.ts
+++ b/apps/roam/src/utils/initializeObserversAndListeners.ts
@@ -52,7 +52,7 @@ import { getSetting } from "./extensionSettings";
 import {
   mountLeftSidebar,
   unmountLeftSidebar,
-} from "~/components/LeftSidebarView";
+} from "~/components/left-sidebar/LeftSidebarView";
 import { getCleanTagText } from "~/components/settings/NodeConfig";
 import getPleasingColors from "@repo/utils/getPleasingColors";
 import { colord } from "colord";