From 843f0527300a41c5147f08f9b2eab448b9bde808 Mon Sep 17 00:00:00 2001
From: Gautam25Raj <ashragautam25@gmail.com>
Date: Tue, 19 May 2026 16:11:48 +0530
Subject: [PATCH] refactor: remove API key components and related logic

- Deleted ApiKeyTypes.ts and GeneratedApiKeyCard.tsx as they are no longer needed.
- Updated settings page to remove API key fetching logic and replaced it with navigation to a dedicated API keys page.
- Refactored settings page layout to use a new SettingsPanel component for better organization.
- Improved navigation structure in the settings page for better user experience.
- Enhanced the AdditionalSections component by filtering custom sections and simplifying the rendering logic.
- Introduced MasterProfileNavigator and MasterMobileSectionNav components for improved navigation in the profile section.
- Added MasterSkeleton component for loading states in the profile section.
- Updated utility functions for profile data sanitization and compatibility with resume templates.
---
 .../(dashboard)/profile/master/page.tsx       |  58 +++-
 .../settings/components/ApiKeySection.tsx     | 246 --------------
 .../settings/components/ProfileCTA.tsx        |  32 --
 .../components/apiKeys/ApiKeyCreateForm.tsx   | 118 -------
 .../components/apiKeys/ApiKeyList.tsx         | 111 -------
 .../components/apiKeys/ApiKeyRotateModal.tsx  | 202 ------------
 .../components/apiKeys/ApiKeyScopePicker.tsx  |  63 ----
 .../components/apiKeys/ApiKeyScopes.ts        |  86 -----
 .../components/apiKeys/ApiKeyTypes.ts         |  17 -
 .../apiKeys/GeneratedApiKeyCard.tsx           |  44 ---
 .../app/(main)/(dashboard)/settings/page.tsx  | 199 ++++++++----
 .../components/master/AdditionalSections.tsx  | 303 +++++++++---------
 .../components/master/MasterProfileClient.tsx | 191 +----------
 .../master/MasterProfileLoading.tsx           |  16 +
 .../master/MasterProfileNavigator.tsx         | 158 +++++++++
 .../components/master/ProfileMaster.tsx       |   3 +-
 .../components/master/master-section-nav.ts   |  25 ++
 .../profile/components/master/master-utils.ts | 160 ++++++++-
 18 files changed, 695 insertions(+), 1337 deletions(-)
 delete mode 100644 apps/studio/app/(main)/(dashboard)/settings/components/ApiKeySection.tsx
 delete mode 100644 apps/studio/app/(main)/(dashboard)/settings/components/ProfileCTA.tsx
 delete mode 100644 apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyCreateForm.tsx
 delete mode 100644 apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyList.tsx
 delete mode 100644 apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyRotateModal.tsx
 delete mode 100644 apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyScopePicker.tsx
 delete mode 100644 apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyScopes.ts
 delete mode 100644 apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyTypes.ts
 delete mode 100644 apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/GeneratedApiKeyCard.tsx
 create mode 100644 apps/studio/features/profile/components/master/MasterProfileLoading.tsx
 create mode 100644 apps/studio/features/profile/components/master/MasterProfileNavigator.tsx
 create mode 100644 apps/studio/features/profile/components/master/master-section-nav.ts

diff --git a/apps/studio/app/(main)/(dashboard)/profile/master/page.tsx b/apps/studio/app/(main)/(dashboard)/profile/master/page.tsx
index 105208d..f6095b7 100644
--- a/apps/studio/app/(main)/(dashboard)/profile/master/page.tsx
+++ b/apps/studio/app/(main)/(dashboard)/profile/master/page.tsx
@@ -1,34 +1,58 @@
 import type { Metadata } from "next";
+import type { LucideIcon } from "lucide-react";
+
+import Link from "next/link";
+import { ArrowLeft, FileJson } from "lucide-react";
 
 import MasterProfileClient from "@/features/profile/components/master/MasterProfileClient";
 
 export const metadata: Metadata = {
-  title: `Master Editor`,
-  description: "Guided form experience for your global resume data.",
+  title: "Master Career Data",
+  description: "Guided editor for reusable career data.",
   robots: { index: false, follow: false },
 };
 
+function QuickLink({ href, icon: Icon, label }: { href: string; icon: LucideIcon; label: string }) {
+  return (
+    <Link
+      href={href}
+      className="bg-background/70 hover:border-accent/40 flex items-center gap-3 rounded-xl border border-transparent p-3 text-sm font-bold transition"
+    >
+      <Icon className="text-accent h-4 w-4" />
+      {label}
+    </Link>
+  );
+}
+
 const MasterProfilePage = () => {
   return (
-    <div className="animate-in fade-in mx-auto max-w-7xl space-y-10 px-4 py-10 duration-500 sm:px-6 lg:px-8">
-      <header className="space-y-3 px-1">
-        <div className="text-accent flex items-center gap-2 text-[10px] font-bold tracking-[0.25em] uppercase">
-          <div className="bg-accent h-0.5 w-6 rounded-full" />
-          Data Architecture
-        </div>
+    <main className="space-y-6" aria-labelledby="master-profile-title">
+      <section className="border-border bg-card grid gap-0 overflow-hidden rounded-2xl border lg:grid-cols-[minmax(0,1fr)_20rem]">
+        <div className="p-5 sm:p-6">
+          <p className="text-accent text-xs font-bold tracking-[0.2em] uppercase">
+            Master career data
+          </p>
+
+          <h1
+            id="master-profile-title"
+            className="mt-3 text-3xl font-black tracking-tight sm:text-4xl"
+          >
+            Guided data editor
+          </h1>
 
-        <h1 className="text-foreground text-4xl font-black tracking-tight">
-          Master Profile Editor
-        </h1>
+          <p className="text-muted mt-2 max-w-2xl text-base">
+            Reusable resume facts live here. User account profile remains separate.
+          </p>
+        </div>
 
-        <p className="text-muted-foreground max-w-2xl text-lg leading-relaxed">
-          The global source of truth for your professional identity. Changes here populate all
-          future resume drafts.
-        </p>
-      </header>
+        <div className="border-border/70 grid gap-3 border-t p-5 lg:border-t-0 lg:border-l">
+          <QuickLink href="/profile" icon={ArrowLeft} label="User profile" />
+          <QuickLink href="/profile/advanced" icon={FileJson} label="Advanced JSON" />
+        </div>
+      </section>
 
       <MasterProfileClient />
-    </div>
+    </main>
   );
 };
 
diff --git a/apps/studio/app/(main)/(dashboard)/settings/components/ApiKeySection.tsx b/apps/studio/app/(main)/(dashboard)/settings/components/ApiKeySection.tsx
deleted file mode 100644
index 8ecb838..0000000
--- a/apps/studio/app/(main)/(dashboard)/settings/components/ApiKeySection.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-"use client";
-
-import { toast } from "sonner";
-import { useEffect, useState, useCallback } from "react";
-
-import type { ApiKeyRecord, GeneratedApiKeyRecord } from "./apiKeys/ApiKeyTypes";
-
-import { ApiRequestError, fetchApiData } from "@/utils/fetchApiData";
-
-import ApiKeyList from "./apiKeys/ApiKeyList";
-import ApiKeyCreateForm from "./apiKeys/ApiKeyCreateForm";
-import ApiKeyRotateModal from "./apiKeys/ApiKeyRotateModal";
-import GeneratedApiKeyCard from "./apiKeys/GeneratedApiKeyCard";
-import { AVAILABLE_API_KEY_SCOPES } from "./apiKeys/ApiKeyScopes";
-
-import DestructiveModal from "@/components/modals/DestructiveModal";
-
-type ApiKeySectionProps = {
-  initialKeys: ApiKeyRecord[];
-  initialKeysLoaded: boolean;
-};
-
-function resolveErrorMessage(error: unknown, fallback: string) {
-  if (error instanceof ApiRequestError) {
-    return error.message;
-  }
-
-  return fallback;
-}
-
-export default function ApiKeySection({ initialKeys, initialKeysLoaded }: ApiKeySectionProps) {
-  const [creating, setCreating] = useState(false);
-  const [loading, setLoading] = useState(!initialKeysLoaded);
-
-  const [rateLimit, setRateLimit] = useState(20);
-  const [newKeyName, setNewKeyName] = useState("");
-  const [keys, setKeys] = useState<ApiKeyRecord[]>(initialKeys);
-  const [generatedKey, setGeneratedKey] = useState<GeneratedApiKeyRecord | null>(null);
-
-  const [expiresAt, setExpiresAt] = useState("");
-  const [copiedId, setCopiedId] = useState<string | null>(null);
-  const [selectedScopes, setSelectedScopes] = useState<string[]>(["user:read"]);
-
-  const [deleteSubmitting, setDeleteSubmitting] = useState(false);
-  const [rotateSubmitting, setRotateSubmitting] = useState(false);
-  const [deleteTarget, setDeleteTarget] = useState<ApiKeyRecord | null>(null);
-  const [rotateTarget, setRotateTarget] = useState<ApiKeyRecord | null>(null);
-
-  const fetchKeys = useCallback(async () => {
-    try {
-      setLoading(true);
-
-      const data = await fetchApiData<ApiKeyRecord[]>("/api-keys", {
-        method: "GET",
-      });
-
-      setKeys(data);
-    } catch (error) {
-      toast.error(resolveErrorMessage(error, "Failed to fetch API keys."));
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (initialKeysLoaded) {
-      void Promise.resolve().then(() => {
-        setKeys(initialKeys);
-        setLoading(false);
-      });
-
-      return;
-    }
-
-    const timer = setTimeout(() => {
-      void fetchKeys();
-    }, 0);
-
-    return () => clearTimeout(timer);
-  }, [fetchKeys, initialKeys, initialKeysLoaded]);
-
-  const handleCreateKey = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!newKeyName.trim()) return;
-
-    try {
-      setCreating(true);
-      const data = await fetchApiData<GeneratedApiKeyRecord>("/api-keys", {
-        method: "POST",
-        body: JSON.stringify({
-          name: newKeyName,
-          scopes: selectedScopes,
-          rateLimit,
-          expiresAt: expiresAt ? new Date(expiresAt).toISOString() : undefined,
-        }),
-      });
-
-      setGeneratedKey(data);
-      setNewKeyName("");
-      setRateLimit(20);
-      setExpiresAt("");
-      setSelectedScopes(["user:read"]);
-
-      toast.success("API key created successfully.");
-
-      void fetchKeys();
-    } catch (error) {
-      toast.error(resolveErrorMessage(error, "Failed to create API key."));
-    } finally {
-      setCreating(false);
-    }
-  };
-
-  const handleRotateKey = async (values: {
-    name: string;
-    rateLimit: number;
-    expiresAt?: string;
-    scopes: string[];
-  }) => {
-    if (!rotateTarget) {
-      return;
-    }
-
-    try {
-      setRotateSubmitting(true);
-      const data = await fetchApiData<GeneratedApiKeyRecord>(
-        `/api-keys/${rotateTarget.id}/rotate`,
-        {
-          method: "POST",
-          body: JSON.stringify(values),
-        },
-      );
-
-      setGeneratedKey(data);
-      setRotateTarget(null);
-
-      toast.success("API key rotated successfully.");
-
-      void fetchKeys();
-    } catch (error) {
-      toast.error(resolveErrorMessage(error, "Failed to rotate API key."));
-    } finally {
-      setRotateSubmitting(false);
-    }
-  };
-
-  const handleDeleteKey = async () => {
-    if (!deleteTarget) {
-      return;
-    }
-
-    try {
-      setDeleteSubmitting(true);
-
-      await fetchApiData<null>(`/api-keys/${deleteTarget.id}`, {
-        method: "DELETE",
-      });
-
-      setDeleteTarget(null);
-      toast.success("API key deleted.");
-      void fetchKeys();
-    } catch (error) {
-      toast.error(resolveErrorMessage(error, "Failed to delete API key."));
-    } finally {
-      setDeleteSubmitting(false);
-    }
-  };
-
-  const copyToClipboard = async (text: string, id: string) => {
-    try {
-      await navigator.clipboard.writeText(text);
-
-      setCopiedId(id);
-      toast.success("Copied to clipboard");
-
-      setTimeout(() => setCopiedId(null), 2000);
-    } catch {
-      toast.error("Failed to copy API key to clipboard.");
-    }
-  };
-
-  return (
-    <section id="api-keys" className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div className="space-y-1">
-          <h2 className="text-foreground text-2xl font-bold tracking-tight">API Keys</h2>
-
-          <p className="text-muted-foreground text-sm">
-            Manage your API keys for programmatic access to VeriWorkly.
-          </p>
-        </div>
-      </div>
-
-      <div className="grid gap-6">
-        <ApiKeyCreateForm
-          creating={creating}
-          newKeyName={newKeyName}
-          rateLimit={rateLimit}
-          expiresAt={expiresAt}
-          selectedScopes={selectedScopes}
-          availableScopes={AVAILABLE_API_KEY_SCOPES}
-          onNameChange={setNewKeyName}
-          onRateLimitChange={setRateLimit}
-          onExpiresAtChange={setExpiresAt}
-          onScopesChange={setSelectedScopes}
-          onSubmitAction={handleCreateKey}
-        />
-
-        {generatedKey && (
-          <GeneratedApiKeyCard
-            generatedKey={generatedKey.key}
-            copied={copiedId === generatedKey.id}
-            onCopy={() => void copyToClipboard(generatedKey.key, generatedKey.id)}
-            onDismiss={() => setGeneratedKey(null)}
-          />
-        )}
-
-        <ApiKeyList
-          keys={keys}
-          loading={loading}
-          onRotate={setRotateTarget}
-          onDelete={setDeleteTarget}
-        />
-
-        <ApiKeyRotateModal
-          open={Boolean(rotateTarget)}
-          keyRecord={rotateTarget}
-          submitting={rotateSubmitting}
-          onCloseAction={() => setRotateTarget(null)}
-          onSubmitAction={handleRotateKey}
-        />
-
-        <DestructiveModal
-          open={Boolean(deleteTarget)}
-          onCloseAction={() => setDeleteTarget(null)}
-          onConfirmAction={handleDeleteKey}
-          loading={deleteSubmitting}
-          entityName="API key"
-          title="Delete API key?"
-          warningText="This action permanently deletes the key from the database."
-          description="Use this only when you no longer need the key at all. Permanent deletion cannot be undone."
-        />
-      </div>
-    </section>
-  );
-}
diff --git a/apps/studio/app/(main)/(dashboard)/settings/components/ProfileCTA.tsx b/apps/studio/app/(main)/(dashboard)/settings/components/ProfileCTA.tsx
deleted file mode 100644
index 552dff9..0000000
--- a/apps/studio/app/(main)/(dashboard)/settings/components/ProfileCTA.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import Link from "next/link";
-import { UserCircle, ArrowUpRight } from "lucide-react";
-
-import { Card } from "@veriworkly/ui";
-
-export default function ProfileCTA() {
-  return (
-    <section>
-      <Link href="/profile" className="group block">
-        <Card className="group-hover:border-accent/40 group-hover:shadow-accent/5 relative overflow-hidden p-8 transition-all duration-500 group-hover:shadow-2xl">
-          <div className="absolute top-0 right-0 translate-x-4 transform p-6 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100">
-            <ArrowUpRight className="text-accent h-6 w-6" />
-          </div>
-
-          <div className="flex items-center gap-8">
-            <div className="bg-accent/10 text-accent ring-accent/20 group-hover:bg-accent flex h-16 w-16 items-center justify-center rounded-2xl ring-1 transition-all duration-300 group-hover:scale-110 group-hover:text-white">
-              <UserCircle className="h-9 w-9" />
-            </div>
-
-            <div className="space-y-1">
-              <h3 className="text-foreground text-xl font-bold">Master Profile</h3>
-
-              <p className="text-muted-foreground text-sm">
-                Centralized data used for auto-filling resume drafts.
-              </p>
-            </div>
-          </div>
-        </Card>
-      </Link>
-    </section>
-  );
-}
diff --git a/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyCreateForm.tsx b/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyCreateForm.tsx
deleted file mode 100644
index 6ef9bac..0000000
--- a/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyCreateForm.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { SyntheticEvent } from "react";
-import { Plus, Loader2 } from "lucide-react";
-
-import { Button, Card, Input } from "@veriworkly/ui";
-
-import ApiKeyScopePicker from "./ApiKeyScopePicker";
-
-type ApiKeyCreateFormProps = {
-  creating: boolean;
-  newKeyName: string;
-  rateLimit: number;
-  expiresAt: string;
-  selectedScopes: string[];
-  availableScopes: readonly string[];
-  onNameChange: (value: string) => void;
-  onRateLimitChange: (value: number) => void;
-  onExpiresAtChange: (value: string) => void;
-  onScopesChange: (value: string[]) => void;
-  onSubmitAction: (e: SyntheticEvent<HTMLFormElement>) => void | Promise<void>;
-};
-
-export default function ApiKeyCreateForm({
-  creating,
-  newKeyName,
-  rateLimit,
-  expiresAt,
-  selectedScopes,
-  availableScopes,
-  onNameChange,
-  onRateLimitChange,
-  onExpiresAtChange,
-  onScopesChange,
-  onSubmitAction,
-}: ApiKeyCreateFormProps) {
-  return (
-    <Card className="border-accent/10 bg-card/50 p-6 backdrop-blur-sm">
-      <form onSubmit={onSubmitAction} className="space-y-4">
-        <div className="space-y-2">
-          <label htmlFor="key-name" className="text-foreground text-sm font-medium">
-            Create New Key
-          </label>
-
-          <div className="flex gap-2">
-            <Input
-              id="key-name"
-              value={newKeyName}
-              disabled={creating}
-              className="bg-background/50"
-              placeholder="e.g. Documentation Project"
-              onChange={(e) => onNameChange(e.target.value)}
-            />
-
-            <Button type="submit" disabled={creating || !newKeyName.trim()}>
-              {creating ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              ) : (
-                <Plus className="mr-2 h-4 w-4" />
-              )}
-              Generate
-            </Button>
-          </div>
-        </div>
-
-        <div className="grid gap-3 sm:grid-cols-2">
-          <div className="space-y-1">
-            <label htmlFor="rate-limit" className="text-foreground text-sm font-medium">
-              Rate limit
-            </label>
-
-            <Input
-              min={1}
-              max={20}
-              type="number"
-              id="rate-limit"
-              value={rateLimit}
-              disabled={creating}
-              className="bg-background/50"
-              onChange={(e) => {
-                const nextValue = Number(e.target.value || 1);
-                onRateLimitChange(Math.min(20, Math.max(1, nextValue)));
-              }}
-            />
-
-            <p className="text-muted-foreground text-[11px]">
-              Values above 20 are capped automatically.
-            </p>
-          </div>
-
-          <div className="space-y-1">
-            <label htmlFor="expires-at" className="text-foreground text-sm font-medium">
-              Expires at
-            </label>
-
-            <Input
-              type="date"
-              id="expires-at"
-              value={expiresAt}
-              disabled={creating}
-              className="bg-background/50"
-              onChange={(e) => onExpiresAtChange(e.target.value)}
-            />
-          </div>
-        </div>
-
-        <ApiKeyScopePicker
-          onChange={onScopesChange}
-          selectedScopes={selectedScopes}
-          availableScopes={availableScopes}
-        />
-
-        <p className="text-muted-foreground text-[12px] italic">
-          Leave expiry empty to use the default lifetime. Lower scopes and lower rate limits are
-          safer.
-        </p>
-      </form>
-    </Card>
-  );
-}
diff --git a/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyList.tsx b/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyList.tsx
deleted file mode 100644
index 776cd0f..0000000
--- a/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyList.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { ArrowRightLeft, Key, Loader2, Trash2 } from "lucide-react";
-
-import { Badge, Button, Card } from "@veriworkly/ui";
-
-import type { ApiKeyRecord } from "./ApiKeyTypes";
-import { summarizeApiKeyScopes } from "./ApiKeyScopes";
-
-type ApiKeyListProps = {
-  keys: ApiKeyRecord[];
-  loading: boolean;
-  onRotate: (key: ApiKeyRecord) => void;
-  onDelete: (key: ApiKeyRecord) => void;
-};
-
-export default function ApiKeyList({ keys, loading, onRotate, onDelete }: ApiKeyListProps) {
-  return (
-    <div className="space-y-4">
-      <h3 className="text-muted-foreground/70 text-sm font-semibold tracking-wider uppercase">
-        Active Keys
-      </h3>
-
-      {loading ? (
-        <div className="flex justify-center py-12">
-          <Loader2 className="text-accent/50 h-8 w-8 animate-spin" />
-        </div>
-      ) : keys.length === 0 ? (
-        <div className="border-accent/20 bg-accent/5 rounded-2xl border border-dashed py-12 text-center">
-          <Key className="text-muted-foreground/30 mx-auto mb-3 h-12 w-12" />
-
-          <p className="text-muted-foreground">No API keys found. Generate one to get started.</p>
-        </div>
-      ) : (
-        <div className="grid gap-4">
-          {keys.map((key) => (
-            <Card key={key.id} className="group hover:border-accent/30 p-4 transition-colors">
-              <div className="flex items-center justify-between gap-4">
-                <div className="flex min-w-0 items-center gap-4">
-                  <div className="bg-accent/10 text-accent shrink-0 rounded-lg p-2">
-                    <Key className="h-5 w-5" />
-                  </div>
-
-                  <div className="min-w-0">
-                    <div className="flex items-center gap-2">
-                      <span className="text-foreground truncate font-bold">{key.name}</span>
-
-                      <Badge className="py-0 text-[10px]">
-                        {key.isActive ? "Active" : "Revoked"}
-                      </Badge>
-                    </div>
-
-                    <div className="text-muted-foreground mt-1 flex items-center gap-3 text-xs">
-                      <span className="font-mono">
-                        {key.keyPrefix}...{key.keySuffix}
-                      </span>
-
-                      <span>•</span>
-
-                      <span>
-                        {key.scopes.length} scope{key.scopes.length === 1 ? "" : "s"}
-                      </span>
-                    </div>
-
-                    <div className="mt-3 flex flex-wrap gap-2">
-                      {summarizeApiKeyScopes(key.scopes).map((scope) => (
-                        <Badge
-                          key={`${key.id}-${scope.label}`}
-                          className="rounded-full px-2 py-0.5 text-[10px] font-medium"
-                        >
-                          {scope.label} {scope.access}
-                        </Badge>
-                      ))}
-                    </div>
-
-                    <div className="text-muted-foreground mt-2 flex items-center gap-3 text-xs">
-                      <span>Created {new Date(key.createdAt).toLocaleDateString()}</span>
-                      <span>•</span>
-                      <span>
-                        Expires{" "}
-                        {key.expiresAt ? new Date(key.expiresAt).toLocaleDateString() : "never"}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="flex shrink-0 items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100">
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => onRotate(key)}
-                    className="text-foreground hover:bg-accent/10 hover:text-accent"
-                  >
-                    <ArrowRightLeft className="h-4 w-4" />
-                  </Button>
-
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    onClick={() => onDelete(key)}
-                    className="text-red-500 hover:bg-red-500/10 hover:text-red-600"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-              </div>
-            </Card>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyRotateModal.tsx b/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyRotateModal.tsx
deleted file mode 100644
index 7f57fa3..0000000
--- a/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyRotateModal.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { ArrowRightLeft, Calendar, Key, TrendingUp, UserPen } from "lucide-react";
-
-import type { ApiKeyRecord } from "./ApiKeyTypes";
-
-import { Button, Input, Modal } from "@veriworkly/ui";
-
-type ApiKeyRotateModalProps = {
-  open: boolean;
-  keyRecord: ApiKeyRecord | null;
-  submitting: boolean;
-  onCloseAction: () => void;
-  onSubmitAction: (values: {
-    name: string;
-    rateLimit: number;
-    expiresAt?: string;
-    scopes: string[];
-  }) => void;
-};
-
-function formatDateValue(dateValue: string | null) {
-  if (!dateValue) {
-    return "";
-  }
-
-  const parsed = new Date(dateValue);
-
-  if (Number.isNaN(parsed.getTime())) {
-    return "";
-  }
-
-  return parsed.toISOString().slice(0, 10);
-}
-
-export default function ApiKeyRotateModal({
-  open,
-  keyRecord,
-  submitting,
-  onCloseAction,
-  onSubmitAction,
-}: ApiKeyRotateModalProps) {
-  const [name, setName] = useState("");
-  const [rateLimit, setRateLimit] = useState(20);
-  const [expiresAt, setExpiresAt] = useState("");
-
-  const [selectedScopes, setSelectedScopes] = useState<string[]>([]);
-
-  useEffect(() => {
-    if (!open || !keyRecord) {
-      return;
-    }
-
-    void Promise.resolve().then(() => {
-      setName(keyRecord.name);
-      setSelectedScopes(keyRecord.scopes);
-      setExpiresAt(formatDateValue(keyRecord.expiresAt));
-      setRateLimit(Math.min(20, Math.max(1, keyRecord.rateLimit || 20)));
-    });
-  }, [open, keyRecord]);
-
-  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!keyRecord) {
-      return;
-    }
-
-    onSubmitAction({
-      name: name.trim() || keyRecord.name,
-      rateLimit: Math.min(20, Math.max(1, rateLimit)),
-      expiresAt: expiresAt ? new Date(expiresAt).toISOString() : undefined,
-      scopes: selectedScopes,
-    });
-  };
-
-  const handleClose = () => {
-    if (!submitting) {
-      onCloseAction();
-    }
-  };
-
-  return (
-    <Modal open={open} onClose={handleClose}>
-      <Modal.Content className="w-full overflow-hidden p-0 sm:rounded-xl">
-        <div className="flex items-center gap-3 border-b px-4 pt-2 pb-4 md:bg-zinc-50/50 md:pt-4 dark:bg-zinc-900/50">
-          <ArrowRightLeft className="text-accent h-5 w-5" />
-
-          <div className="min-w-0 space-y-1">
-            <Modal.Title>Rotate API Key</Modal.Title>
-
-            {keyRecord ? (
-              <p className="text-muted-foreground text-xs font-medium">
-                Rotating{" "}
-                <span className="text-foreground font-mono">
-                  {keyRecord.keyPrefix}...{keyRecord.keySuffix}
-                </span>
-              </p>
-            ) : null}
-          </div>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-5 pt-4">
-          <div className="grid gap-4 px-4 sm:grid-cols-1">
-            <div className="space-y-1.5">
-              <label
-                htmlFor="rotate-api-key-name"
-                className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium"
-              >
-                <UserPen className="h-3.5 w-3.5" /> Key name
-              </label>
-
-              <Input
-                value={name}
-                inputSize="sm"
-                disabled={submitting}
-                id="rotate-api-key-name"
-                className="bg-background/50 h-9"
-                placeholder="Documentation token"
-                onChange={(event) => setName(event.target.value)}
-              />
-            </div>
-          </div>
-
-          <div className="grid gap-4 px-4 sm:grid-cols-2">
-            <div className="space-y-1.5">
-              <label
-                htmlFor="rotate-api-key-rate-limit"
-                className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium"
-              >
-                <TrendingUp className="h-3.5 w-3.5" /> Rate limit
-              </label>
-
-              <Input
-                min={1}
-                max={20}
-                type="number"
-                inputSize="sm"
-                value={rateLimit}
-                disabled={submitting}
-                id="rotate-api-key-rate-limit"
-                className="bg-background/50 h-9"
-                onChange={(event) => {
-                  const nextValue = Number(event.target.value || 1);
-                  setRateLimit(Math.min(20, Math.max(1, nextValue)));
-                }}
-              />
-            </div>
-
-            <div className="space-y-1.5">
-              <label
-                htmlFor="rotate-api-key-expires-at"
-                className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium"
-              >
-                <Calendar className="h-3.5 w-3.5" /> Expires at
-              </label>
-
-              <Input
-                type="date"
-                inputSize="sm"
-                value={expiresAt}
-                disabled={submitting}
-                className="bg-background/50 h-9"
-                id="rotate-api-key-expires-at"
-                onChange={(event) => setExpiresAt(event.target.value)}
-              />
-            </div>
-          </div>
-
-          <div className="border-border/70 bg-muted/10 text-muted-foreground mx-4 rounded-xl border p-3 text-xs">
-            <div className="flex items-start gap-2">
-              <Key className="text-accent mt-0.5 h-4 w-4 shrink-0" />
-
-              <p>
-                The old key is revoked as soon as this replacement is created. Share the new key
-                only after copying it securely.
-              </p>
-            </div>
-          </div>
-
-          <Modal.Footer>
-            <Button
-              size="sm"
-              type="button"
-              variant="secondary"
-              onClick={handleClose}
-              disabled={submitting}
-              className="w-full sm:w-auto"
-            >
-              Cancel
-            </Button>
-
-            <Button size="sm" type="submit" loading={submitting} className="w-full sm:w-auto">
-              Generate Replacement Key
-            </Button>
-          </Modal.Footer>
-        </form>
-      </Modal.Content>
-    </Modal>
-  );
-}
diff --git a/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyScopePicker.tsx b/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyScopePicker.tsx
deleted file mode 100644
index 1b43bc8..0000000
--- a/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyScopePicker.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Checkbox, Card } from "@veriworkly/ui";
-
-import { API_KEY_SCOPE_OPTIONS } from "./ApiKeyScopes";
-
-type ApiKeyScopePickerProps = {
-  availableScopes: readonly string[];
-  selectedScopes: string[];
-  onChange: (value: string[]) => void;
-};
-
-export default function ApiKeyScopePicker({
-  availableScopes,
-  selectedScopes,
-  onChange,
-}: ApiKeyScopePickerProps) {
-  const setScope = (scope: string, checked: boolean) => {
-    if (checked) {
-      onChange(Array.from(new Set([...selectedScopes, scope])));
-      return;
-    }
-
-    onChange(selectedScopes.filter((value) => value !== scope));
-  };
-
-  return (
-    <Card className="border-border/60 bg-background/30 p-4">
-      <div className="space-y-3">
-        <div className="space-y-1">
-          <p className="text-foreground text-sm font-semibold">Scopes</p>
-
-          <p className="text-muted-foreground text-xs">
-            Choose exactly what this key can do. Start with the least access possible.
-          </p>
-        </div>
-
-        <div className="grid gap-2 sm:grid-cols-2">
-          {API_KEY_SCOPE_OPTIONS.filter((option) => availableScopes.includes(option.value)).map(
-            (option) => (
-              <label
-                key={option.value}
-                className="hover:border-accent/30 hover:bg-accent/5 border-border/70 flex cursor-pointer items-start gap-3 rounded-xl border px-3 py-3 text-sm transition-colors"
-              >
-                <Checkbox
-                  checked={selectedScopes.includes(option.value)}
-                  onCheckedChange={(checked) => setScope(option.value, Boolean(checked))}
-                  className="mt-0.5"
-                />
-
-                <span className="min-w-0 space-y-0.5">
-                  <span className="text-foreground block font-medium">{option.label}</span>
-
-                  <span className="text-muted-foreground block text-xs leading-relaxed">
-                    {option.description}
-                  </span>
-                </span>
-              </label>
-            ),
-          )}
-        </div>
-      </div>
-    </Card>
-  );
-}
diff --git a/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyScopes.ts b/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyScopes.ts
deleted file mode 100644
index 9d6a44d..0000000
--- a/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyScopes.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-export const AVAILABLE_API_KEY_SCOPES = [
-  "user:read",
-  "user:write",
-  "resume:read",
-  "resume:write",
-  "roadmap:read",
-  "roadmap:write",
-  "github:read",
-  "github:write",
-] as const;
-
-export const API_KEY_SCOPE_OPTIONS = [
-  {
-    value: "user:read",
-    label: "Profile access",
-    description: "Read your account profile and identity details.",
-  },
-  {
-    value: "user:write",
-    label: "Profile updates",
-    description: "Update user-facing profile fields.",
-  },
-  {
-    value: "resume:read",
-    label: "Resume read",
-    description: "View resume content and metadata.",
-  },
-  {
-    value: "resume:write",
-    label: "Resume write",
-    description: "Create, edit, and publish resume data.",
-  },
-  {
-    value: "roadmap:read",
-    label: "Roadmap read",
-    description: "Inspect roadmap items and release planning data.",
-  },
-  {
-    value: "roadmap:write",
-    label: "Roadmap write",
-    description: "Update roadmap items and progress states.",
-  },
-  {
-    value: "github:read",
-    label: "GitHub read",
-    description: "Read synced GitHub issue and stats data.",
-  },
-  {
-    value: "github:write",
-    label: "GitHub write",
-    description: "Trigger GitHub sync and write GitHub-backed data.",
-  },
-] as const;
-
-const SCOPE_GROUPS = [
-  { key: "user", label: "Profile" },
-  { key: "resume", label: "Resume" },
-  { key: "roadmap", label: "Roadmap" },
-  { key: "github", label: "GitHub" },
-] as const;
-
-export type ApiKeyScopeSummary = {
-  label: string;
-  access: string;
-};
-
-export function summarizeApiKeyScopes(scopes: string[]): ApiKeyScopeSummary[] {
-  const selected = new Set(scopes);
-
-  return SCOPE_GROUPS.flatMap((group) => {
-    const readScope = `${group.key}:read`;
-    const writeScope = `${group.key}:write`;
-
-    const hasRead = selected.has(readScope);
-    const hasWrite = selected.has(writeScope);
-
-    if (!hasRead && !hasWrite) {
-      return [];
-    }
-
-    return {
-      label: group.label,
-      access: hasRead && hasWrite ? "Read / Write" : hasWrite ? "Write" : "Read",
-    };
-  });
-}
diff --git a/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyTypes.ts b/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyTypes.ts
deleted file mode 100644
index c52ee12..0000000
--- a/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/ApiKeyTypes.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export interface ApiKeyRecord {
-  id: string;
-  keyPrefix: string;
-  keySuffix: string;
-  name: string;
-  isActive: boolean;
-  rateLimit: number;
-  scopes: string[];
-  expiresAt: string | null;
-  revokedAt: string | null;
-  createdAt: string;
-  lastUsed: string | null;
-}
-
-export interface GeneratedApiKeyRecord extends ApiKeyRecord {
-  key: string;
-}
diff --git a/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/GeneratedApiKeyCard.tsx b/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/GeneratedApiKeyCard.tsx
deleted file mode 100644
index eb8ea8d..0000000
--- a/apps/studio/app/(main)/(dashboard)/settings/components/apiKeys/GeneratedApiKeyCard.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { AlertCircle, Check, Copy } from "lucide-react";
-
-import { Button, Card } from "@veriworkly/ui";
-
-type GeneratedApiKeyCardProps = {
-  generatedKey: string;
-  copied: boolean;
-  onCopy: () => void;
-  onDismiss: () => void;
-};
-
-export default function GeneratedApiKeyCard({
-  generatedKey,
-  copied,
-  onCopy,
-  onDismiss,
-}: GeneratedApiKeyCardProps) {
-  return (
-    <Card className="animate-in zoom-in-95 border-accent/20 bg-accent/5 p-6 duration-300">
-      <div className="space-y-4">
-        <div className="text-accent flex items-center gap-2">
-          <AlertCircle className="h-5 w-5" />
-          <h3 className="font-bold">Save your API Key</h3>
-        </div>
-
-        <p className="text-muted-foreground text-sm">
-          For security reasons, this key will only be shown once. Please copy it now.
-        </p>
-
-        <div className="group border-accent/20 bg-background/80 flex items-center justify-between gap-2 rounded-lg border p-3 font-mono text-sm break-all">
-          <span className="text-foreground">{generatedKey}</span>
-
-          <Button size="sm" variant="ghost" onClick={onCopy} className="shrink-0">
-            {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
-          </Button>
-        </div>
-
-        <Button size="sm" onClick={onDismiss} className="w-full">
-          I have saved the key
-        </Button>
-      </div>
-    </Card>
-  );
-}
diff --git a/apps/studio/app/(main)/(dashboard)/settings/page.tsx b/apps/studio/app/(main)/(dashboard)/settings/page.tsx
index 9a157cf..bf60ec9 100644
--- a/apps/studio/app/(main)/(dashboard)/settings/page.tsx
+++ b/apps/studio/app/(main)/(dashboard)/settings/page.tsx
@@ -1,88 +1,157 @@
 import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
 
-import type { ApiKeyRecord } from "./components/apiKeys/ApiKeyTypes";
+import Link from "next/link";
+import { ArrowRight, Cloud, KeyRound, Palette, ShieldCheck } from "lucide-react";
 
-import { backendApiUrl } from "@/lib/constants";
-
-import ProfileCTA from "./components/ProfileCTA";
 import SyncSection from "./components/SyncSection";
-import ApiKeySection from "./components/ApiKeySection";
 import AppearanceSection from "./components/AppearanceSection";
 
 export const metadata: Metadata = {
-  title: `Settings`,
+  title: "Settings",
   description: "Manage workspace defaults and behavior.",
   robots: { index: false, follow: false },
 };
 
-async function fetchInitialApiKeys() {
-  try {
-    const response = await fetch(backendApiUrl("/api-keys"), {
-      method: "GET",
-      cache: "no-store",
-      credentials: "include",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-
-    if (!response.ok) {
-      return { keys: [] as ApiKeyRecord[], loaded: false };
-    }
-
-    const payload = (await response.json()) as {
-      data?: ApiKeyRecord[];
-    };
-
-    return { keys: payload.data ?? [], loaded: true };
-  } catch {
-    return { keys: [] as ApiKeyRecord[], loaded: false };
-  }
-}
+const settingsNav = [
+  ["Appearance", "#appearance", Palette],
+  ["Sync", "#sync", Cloud],
+] satisfies Array<[string, string, LucideIcon]>;
+
+function SettingsPanel({
+  children,
+  icon: Icon,
+  id,
+  text,
+  title,
+}: {
+  children: ReactNode;
+  icon: LucideIcon;
+  id: string;
+  text: string;
+  title: string;
+}) {
+  return (
+    <section
+      id={id}
+      className="border-border bg-card rounded-2xl border p-5 sm:p-6"
+      aria-labelledby={`${id}-title`}
+    >
+      <div className="mb-5 flex items-start gap-3">
+        <span className="bg-accent/10 text-accent flex h-10 w-10 shrink-0 items-center justify-center rounded-xl">
+          <Icon className="h-5 w-5" />
+        </span>
+
+        <div>
+          <h2 id={`${id}-title`} className="text-lg font-black">
+            {title}
+          </h2>
+
+          <p className="text-muted text-sm">{text}</p>
+        </div>
+      </div>
 
-export default async function SettingsPage() {
-  const initialApiKeys = await fetchInitialApiKeys();
+      {children}
+    </section>
+  );
+}
 
+const SettingsPage = async () => {
   return (
-    <div className="animate-in fade-in mx-auto max-w-5xl px-6 py-12 duration-500">
-      <header className="mb-12 space-y-2">
-        <div className="text-accent flex items-center gap-2 text-xs font-bold tracking-[0.2em] uppercase">
-          <div className="bg-accent h-1 w-4 rounded-full" />
-          System Preferences
+    <main className="space-y-6" aria-labelledby="settings-title">
+      <section className="border-border bg-card grid gap-0 overflow-hidden rounded-2xl border lg:grid-cols-[minmax(0,1fr)_21rem]">
+        <div className="p-5 sm:p-6">
+          <p className="text-accent text-xs font-bold tracking-[0.2em] uppercase">Settings</p>
+
+          <div className="mt-3">
+            <div>
+              <h1 id="settings-title" className="text-3xl font-black tracking-tight sm:text-4xl">
+                Workspace controls
+              </h1>
+
+              <p className="text-muted mt-2 max-w-2xl text-base">
+                Tune studio behavior without mixing in profile identity or developer tokens.
+              </p>
+            </div>
+          </div>
         </div>
 
-        <h1 className="text-foreground text-4xl font-extrabold tracking-tight">Workspace</h1>
-
-        <p className="text-muted-foreground max-w-2xl text-lg leading-relaxed">
-          Fine-tune your environment, appearance, and cloud-synchronization behavior.
-        </p>
-      </header>
-
-      <div className="grid grid-cols-1 gap-12 lg:grid-cols-12">
-        <aside className="lg:col-span-3">
-          <nav className="sticky top-24 hidden space-y-1 lg:block">
-            {["Appearance", "Sync & Cloud", "Profile", "API Keys"].map((item) => (
-              <a
-                key={item}
-                href={item === "API Keys" ? "#api-keys" : "#"}
-                className="text-muted-foreground/60 hover:text-accent hover:bg-accent/5 block rounded-xl p-2.5 text-sm font-semibold transition-all"
+        <div className="border-border/70 border-t p-5 lg:border-t-0 lg:border-l">
+          <div className="bg-background/70 rounded-xl p-4">
+            <div className="flex items-center gap-2">
+              <ShieldCheck className="text-accent h-4 w-4" />
+              <span className="text-sm font-bold">Private workspace</span>
+            </div>
+
+            <p className="text-muted mt-2 text-sm leading-6">
+              Account profile lives on Profile. API keys live on their own page.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <div className="grid gap-5 lg:grid-cols-[13rem_minmax(0,1fr)]">
+        <aside className="lg:sticky lg:top-6 lg:self-start">
+          <nav
+            className="border-border bg-card rounded-2xl border p-2"
+            aria-label="Settings sections"
+          >
+            {settingsNav.map(([label, href, Icon]) => (
+              <Link
+                key={href}
+                href={href}
+                className="text-foreground/80 hover:bg-background hover:text-foreground flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-semibold transition"
               >
-                {item}
-              </a>
+                <Icon className="h-4 w-4" />
+                {label}
+              </Link>
             ))}
           </nav>
         </aside>
 
-        <main className="space-y-20 lg:col-span-9">
-          <AppearanceSection />
-          <SyncSection />
-          <ApiKeySection
-            initialKeys={initialApiKeys.keys}
-            initialKeysLoaded={initialApiKeys.loaded}
-          />
-          <ProfileCTA />
-        </main>
+        <div className="space-y-5">
+          <SettingsPanel
+            icon={Palette}
+            id="appearance"
+            title="Appearance"
+            text="Theme and visual preferences for the studio."
+          >
+            <AppearanceSection />
+          </SettingsPanel>
+
+          <SettingsPanel
+            id="sync"
+            icon={Cloud}
+            title="Sync"
+            text="Cloud behavior and local-first controls."
+          >
+            <SyncSection />
+          </SettingsPanel>
+
+          <Link
+            href="/api-keys"
+            className="border-border bg-card hover:border-accent/50 group flex items-center justify-between gap-4 rounded-2xl border p-5 transition hover:shadow-sm sm:p-6"
+          >
+            <span className="flex min-w-0 items-center gap-3">
+              <span className="bg-accent/10 text-accent flex h-10 w-10 shrink-0 items-center justify-center rounded-xl">
+                <KeyRound className="h-5 w-5" />
+              </span>
+
+              <span className="min-w-0">
+                <span className="block text-lg font-black">Developer API keys</span>
+                <span className="text-muted block text-sm">
+                  Create, rotate, and delete integration tokens on a dedicated page.
+                </span>
+              </span>
+            </span>
+
+            <ArrowRight className="text-muted group-hover:text-accent h-5 w-5 shrink-0 transition group-hover:translate-x-1" />
+          </Link>
+        </div>
       </div>
-    </div>
+    </main>
   );
-}
+};
+
+export default SettingsPage;
diff --git a/apps/studio/features/profile/components/master/AdditionalSections.tsx b/apps/studio/features/profile/components/master/AdditionalSections.tsx
index e61e157..7b0df24 100644
--- a/apps/studio/features/profile/components/master/AdditionalSections.tsx
+++ b/apps/studio/features/profile/components/master/AdditionalSections.tsx
@@ -1,8 +1,7 @@
 import { Button } from "@veriworkly/ui";
 import { Input } from "@veriworkly/ui";
-import { Select } from "@veriworkly/ui";
 import { TextArea } from "@veriworkly/ui";
-import type { MasterProfileData, ResumeAdditionalItem, ResumeCustomSection } from "@/types/resume";
+import type { MasterProfileData, ResumeAdditionalItem } from "@/types/resume";
 
 import { SectionCard, SectionItemCard } from "./master-shared";
 import {
@@ -602,189 +601,175 @@ export function AdditionalSections({
         description="Other structures that do not fit the standard sections."
       >
         <div className="space-y-4">
-          {localProfile.customSections.map((item) => (
-            <SectionItemCard
-              key={item.id}
-              title={item.title || "Custom section"}
-              onRemove={() => removeRepeatableItem("customSections", item.id)}
-            >
-              <div className="grid gap-4 md:grid-cols-2">
-                <Input
-                  value={item.title}
-                  onChange={(event) =>
-                    updateRepeatableItem("customSections", item.id, (current) => ({
-                      ...current,
-                      title: event.target.value,
-                    }))
-                  }
-                  placeholder="Title"
-                />
-                <Select
-                  value={item.kind}
-                  onChange={(event) =>
-                    updateRepeatableItem("customSections", item.id, (current) => ({
-                      ...current,
-                      kind: event.target.value as ResumeCustomSection["kind"],
-                    }))
-                  }
-                >
-                  <option value="certifications">Certifications</option>
-                  <option value="awards">Awards</option>
-                  <option value="publications">Publications</option>
-                  <option value="languages">Languages</option>
-                  <option value="interests">Interests</option>
-                  <option value="volunteer">Volunteer</option>
-                  <option value="references">References</option>
-                  <option value="achievements">Achievements</option>
-                  <option value="custom">Custom</option>
-                </Select>
-                <label className="border-border/60 bg-card/40 flex items-center gap-3 rounded-xl border px-3 py-2 text-sm">
-                  <input
-                    type="checkbox"
-                    checked={item.editableTitle ?? true}
+          {localProfile.customSections
+            .filter((section) => section.kind === "custom")
+            .map((item) => (
+              <SectionItemCard
+                key={item.id}
+                title={item.title || "Custom section"}
+                onRemove={() => removeRepeatableItem("customSections", item.id)}
+              >
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Input
+                    value={item.title}
                     onChange={(event) =>
                       updateRepeatableItem("customSections", item.id, (current) => ({
                         ...current,
-                        editableTitle: event.target.checked,
+                        title: event.target.value,
                       }))
                     }
+                    placeholder="Title"
                   />
-                  Editable title
-                </label>
-              </div>
-              <div className="space-y-3">
-                {item.items.map((customItem) => (
-                  <div
-                    key={customItem.id}
-                    className="border-border/60 bg-card/30 space-y-3 rounded-xl border p-4"
-                  >
-                    <div className="grid gap-4 md:grid-cols-2">
-                      <Input
-                        value={customItem.name}
-                        onChange={(event) =>
-                          updateRepeatableItem("customSections", item.id, (current) => ({
-                            ...current,
-                            items: updateItem(current.items, customItem.id, (currentItem) => ({
-                              ...currentItem,
-                              name: event.target.value,
-                            })),
-                          }))
-                        }
-                        placeholder="Name"
-                      />
-                      <Input
-                        value={customItem.issuer}
-                        onChange={(event) =>
-                          updateRepeatableItem("customSections", item.id, (current) => ({
-                            ...current,
-                            items: updateItem(current.items, customItem.id, (currentItem) => ({
-                              ...currentItem,
-                              issuer: event.target.value,
-                            })),
-                          }))
-                        }
-                        placeholder="Issuer"
-                      />
-                      <Input
-                        value={customItem.date}
-                        onChange={(event) =>
-                          updateRepeatableItem("customSections", item.id, (current) => ({
-                            ...current,
-                            items: updateItem(current.items, customItem.id, (currentItem) => ({
-                              ...currentItem,
-                              date: event.target.value,
-                            })),
-                          }))
-                        }
-                        placeholder="Date"
-                      />
-                      <Input
-                        value={customItem.link}
-                        onChange={(event) =>
-                          updateRepeatableItem("customSections", item.id, (current) => ({
-                            ...current,
-                            items: updateItem(current.items, customItem.id, (currentItem) => ({
-                              ...currentItem,
-                              link: event.target.value,
-                            })),
-                          }))
-                        }
-                        placeholder="Link"
-                      />
-                      <Input
-                        value={customItem.referenceId}
-                        onChange={(event) =>
-                          updateRepeatableItem("customSections", item.id, (current) => ({
-                            ...current,
-                            items: updateItem(current.items, customItem.id, (currentItem) => ({
-                              ...currentItem,
-                              referenceId: event.target.value,
-                            })),
-                          }))
-                        }
-                        placeholder="Reference ID"
-                      />
-                      <div className="space-y-2 md:col-span-2">
-                        <label className="text-sm font-medium">Description</label>
-                        <TextArea
-                          value={customItem.description}
+                  <div className="border-border/60 bg-muted/20 text-muted flex h-10 items-center rounded-xl border px-3 text-sm">
+                    Custom section
+                  </div>
+                  <label className="border-border/60 bg-card/40 flex items-center gap-3 rounded-xl border px-3 py-2 text-sm">
+                    <input
+                      type="checkbox"
+                      checked={item.editableTitle ?? true}
+                      onChange={(event) =>
+                        updateRepeatableItem("customSections", item.id, (current) => ({
+                          ...current,
+                          editableTitle: event.target.checked,
+                        }))
+                      }
+                    />
+                    Editable title
+                  </label>
+                </div>
+                <div className="space-y-3">
+                  {item.items.map((customItem) => (
+                    <div
+                      key={customItem.id}
+                      className="border-border/60 bg-card/30 space-y-3 rounded-xl border p-4"
+                    >
+                      <div className="grid gap-4 md:grid-cols-2">
+                        <Input
+                          value={customItem.name}
                           onChange={(event) =>
                             updateRepeatableItem("customSections", item.id, (current) => ({
                               ...current,
                               items: updateItem(current.items, customItem.id, (currentItem) => ({
                                 ...currentItem,
-                                description: event.target.value,
+                                name: event.target.value,
                               })),
                             }))
                           }
-                          rows={3}
+                          placeholder="Name"
                         />
-                      </div>
-                      <div className="space-y-2 md:col-span-2">
-                        <label className="text-sm font-medium">Details</label>
-                        <TextArea
-                          value={joinLines(customItem.details)}
+                        <Input
+                          value={customItem.issuer}
+                          onChange={(event) =>
+                            updateRepeatableItem("customSections", item.id, (current) => ({
+                              ...current,
+                              items: updateItem(current.items, customItem.id, (currentItem) => ({
+                                ...currentItem,
+                                issuer: event.target.value,
+                              })),
+                            }))
+                          }
+                          placeholder="Issuer"
+                        />
+                        <Input
+                          value={customItem.date}
                           onChange={(event) =>
                             updateRepeatableItem("customSections", item.id, (current) => ({
                               ...current,
                               items: updateItem(current.items, customItem.id, (currentItem) => ({
                                 ...currentItem,
-                                details: splitLines(event.target.value),
+                                date: event.target.value,
                               })),
                             }))
                           }
-                          rows={3}
+                          placeholder="Date"
                         />
+                        <Input
+                          value={customItem.link}
+                          onChange={(event) =>
+                            updateRepeatableItem("customSections", item.id, (current) => ({
+                              ...current,
+                              items: updateItem(current.items, customItem.id, (currentItem) => ({
+                                ...currentItem,
+                                link: event.target.value,
+                              })),
+                            }))
+                          }
+                          placeholder="Link"
+                        />
+                        <Input
+                          value={customItem.referenceId}
+                          onChange={(event) =>
+                            updateRepeatableItem("customSections", item.id, (current) => ({
+                              ...current,
+                              items: updateItem(current.items, customItem.id, (currentItem) => ({
+                                ...currentItem,
+                                referenceId: event.target.value,
+                              })),
+                            }))
+                          }
+                          placeholder="Reference ID"
+                        />
+                        <div className="space-y-2 md:col-span-2">
+                          <label className="text-sm font-medium">Description</label>
+                          <TextArea
+                            value={customItem.description}
+                            onChange={(event) =>
+                              updateRepeatableItem("customSections", item.id, (current) => ({
+                                ...current,
+                                items: updateItem(current.items, customItem.id, (currentItem) => ({
+                                  ...currentItem,
+                                  description: event.target.value,
+                                })),
+                              }))
+                            }
+                            rows={3}
+                          />
+                        </div>
+                        <div className="space-y-2 md:col-span-2">
+                          <label className="text-sm font-medium">Details</label>
+                          <TextArea
+                            value={joinLines(customItem.details)}
+                            onChange={(event) =>
+                              updateRepeatableItem("customSections", item.id, (current) => ({
+                                ...current,
+                                items: updateItem(current.items, customItem.id, (currentItem) => ({
+                                  ...currentItem,
+                                  details: splitLines(event.target.value),
+                                })),
+                              }))
+                            }
+                            rows={3}
+                          />
+                        </div>
                       </div>
                     </div>
-                  </div>
-                ))}
-                <Button
-                  onClick={() =>
-                    updateRepeatableItem("customSections", item.id, (current) => ({
-                      ...current,
-                      items: [
-                        ...current.items,
-                        {
-                          id: createId("custom-item"),
-                          name: "",
-                          issuer: "",
-                          date: "",
-                          link: "",
-                          referenceId: "",
-                          description: "",
-                          details: [],
-                        } satisfies ResumeAdditionalItem,
-                      ],
-                    }))
-                  }
-                  variant="secondary"
-                >
-                  Add custom item
-                </Button>
-              </div>
-            </SectionItemCard>
-          ))}
+                  ))}
+                  <Button
+                    onClick={() =>
+                      updateRepeatableItem("customSections", item.id, (current) => ({
+                        ...current,
+                        items: [
+                          ...current.items,
+                          {
+                            id: createId("custom-item"),
+                            name: "",
+                            issuer: "",
+                            date: "",
+                            link: "",
+                            referenceId: "",
+                            description: "",
+                            details: [],
+                          } satisfies ResumeAdditionalItem,
+                        ],
+                      }))
+                    }
+                    variant="secondary"
+                  >
+                    Add custom item
+                  </Button>
+                </div>
+              </SectionItemCard>
+            ))}
           <Button
             onClick={() => addRepeatableItem("customSections", emptyCustomSection())}
             variant="secondary"
diff --git a/apps/studio/features/profile/components/master/MasterProfileClient.tsx b/apps/studio/features/profile/components/master/MasterProfileClient.tsx
index 9cfe3cc..e4a1a3b 100644
--- a/apps/studio/features/profile/components/master/MasterProfileClient.tsx
+++ b/apps/studio/features/profile/components/master/MasterProfileClient.tsx
@@ -1,16 +1,13 @@
 "use client";
 
-import Link from "next/link";
-import { ChevronRight, Circle, Compass, ArrowUp } from "lucide-react";
 import { useEffect, useState, useMemo, useCallback, useRef } from "react";
 
 import type { MasterProfileData } from "@/types/resume";
 
-import { cn } from "@/lib/utils";
-
-import { Card } from "@veriworkly/ui";
-
 import ProfileMaster from "./ProfileMaster";
+import { MasterSkeleton } from "./MasterProfileLoading";
+import { MASTER_SECTION_NAV } from "./master-section-nav";
+import { MasterMobileSectionNav, MasterProfileNavigator } from "./MasterProfileNavigator";
 
 import {
   saveMasterProfileToDatabase,
@@ -19,32 +16,6 @@ import {
   loadMasterProfileFromLocalStorage,
 } from "@/features/resume/services/master-profile";
 
-type CountKey = "experience" | "projects" | "skills";
-
-type MasterSectionNavItem = {
-  id: string;
-  label: string;
-  countKey?: CountKey;
-};
-
-const MASTER_SECTION_NAV: MasterSectionNavItem[] = [
-  { id: "profile-basics", label: "Resume Basics" },
-  { id: "profile-summary-links", label: "Summary and Links" },
-  { id: "profile-appearance", label: "Appearance" },
-  { id: "profile-visibility", label: "Section Visibility" },
-  { id: "profile-experience", label: "Experience", countKey: "experience" },
-  { id: "profile-education", label: "Education" },
-  { id: "profile-projects", label: "Projects", countKey: "projects" },
-  { id: "profile-skills", label: "Skills", countKey: "skills" },
-  { id: "profile-languages", label: "Languages" },
-  { id: "profile-interests", label: "Interests" },
-  { id: "profile-credentials", label: "Awards, Certificates, Publications" },
-  { id: "profile-volunteer", label: "Volunteer" },
-  { id: "profile-references", label: "References" },
-  { id: "profile-achievements", label: "Achievements" },
-  { id: "profile-custom-sections", label: "Custom Sections" },
-];
-
 export default function MasterProfileClient() {
   const [state, setState] = useState<{
     profile: MasterProfileData | null;
@@ -168,153 +139,25 @@ export default function MasterProfileClient() {
 
   return (
     <div className="grid grid-cols-1 gap-8 xl:grid-cols-12 xl:gap-10">
-      <aside className="xl:col-span-3">
-        <div className="sticky top-24 space-y-5">
-          <Card className="border-dashed bg-zinc-500/5 p-4">
-            <header className="mb-4 flex items-center gap-2">
-              <Compass className="text-accent h-4 w-4" />
-
-              <h4 className="text-muted-foreground text-[10px] font-black tracking-widest uppercase">
-                Navigator
-              </h4>
-            </header>
-
-            <div className="mb-6 space-y-2 border-b border-dashed pb-4 text-[11px]">
-              <StatRow label="Source" value={sourceLabel} />
-
-              <StatRow
-                isMono
-                label="Updated"
-                value={state.updatedAt ? new Date(state.updatedAt).toLocaleDateString() : "New"}
-              />
-
-              <StatRow
-                label="Progress"
-                value={`${activeSectionIndex + 1} / ${MASTER_SECTION_NAV.length}`}
-              />
-            </div>
-
-            <nav
-              className="custom-scrollbar max-h-[50vh] space-y-1 overflow-y-auto pr-1"
-              aria-label="Sections"
-            >
-              {MASTER_SECTION_NAV.map((section) => (
-                <NavButton
-                  key={section.id}
-                  section={section}
-                  isActive={activeSectionId === section.id}
-                  count={section.countKey ? sectionCounts[section.countKey] : undefined}
-                  onClick={() => scrollToSection(section.id)}
-                />
-              ))}
-            </nav>
-
-            <button
-              onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
-              className="text-muted-foreground hover:text-foreground hover:bg-accent/5 mt-4 flex w-full items-center justify-center gap-2 rounded-xl border border-dashed py-2 text-xs font-bold transition-all"
-            >
-              <ArrowUp className="h-3.5 w-3.5" /> Back to top
-            </button>
-          </Card>
-
-          <nav className="hidden flex-col gap-1 px-2 xl:flex">
-            <ToolLink href="/profile" label="Back to Profile" />
-            <ToolLink href="/profile/advanced" label="Advanced JSON" />
-          </nav>
-        </div>
-      </aside>
+      <MasterProfileNavigator
+        sourceLabel={sourceLabel}
+        updatedAt={state.updatedAt}
+        onNavigate={scrollToSection}
+        sections={MASTER_SECTION_NAV}
+        sectionCounts={sectionCounts}
+        activeSectionId={activeSectionId}
+        activeSectionIndex={activeSectionIndex}
+      />
 
       <main className="xl:col-span-9">
-        <div className="bg-background/80 sticky top-18 z-30 -mx-4 mb-6 border-y px-4 py-3 backdrop-blur-md xl:hidden">
-          <div className="no-scrollbar flex gap-2 overflow-x-auto pb-1">
-            {MASTER_SECTION_NAV.map((section) => (
-              <button
-                key={section.id}
-                onClick={() => scrollToSection(section.id)}
-                className={cn(
-                  "rounded-full px-4 py-1.5 text-xs font-medium whitespace-nowrap transition",
-                  activeSectionId === section.id
-                    ? "bg-accent text-white"
-                    : "bg-muted/50 text-muted-foreground",
-                )}
-              >
-                {section.label}
-              </button>
-            ))}
-          </div>
-        </div>
+        <MasterMobileSectionNav
+          onNavigate={scrollToSection}
+          sections={MASTER_SECTION_NAV}
+          activeSectionId={activeSectionId}
+        />
 
         <ProfileMaster profile={state.profile} onSave={handleSave} isSaving={saving} />
       </main>
     </div>
   );
 }
-
-const StatRow = ({ label, value, isMono }: { label: string; value: string; isMono?: boolean }) => (
-  <div className="flex justify-between">
-    <span className="text-muted-foreground">{label}</span>
-    <span className={cn("font-semibold", isMono && "font-mono")}>{value}</span>
-  </div>
-);
-
-interface NavButtonProps {
-  section: MasterSectionNavItem;
-  isActive: boolean;
-  count?: number;
-  onClick: () => void;
-}
-
-const NavButton = ({ section, isActive, count, onClick }: NavButtonProps) => (
-  <button
-    onClick={onClick}
-    className={cn(
-      "group flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-all",
-      isActive
-        ? "bg-accent/10 text-accent font-bold"
-        : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
-    )}
-  >
-    <Circle
-      className={cn(
-        "h-2 w-2 transition-transform",
-        isActive ? "scale-125 fill-current" : "opacity-40",
-      )}
-    />
-
-    <span className="flex-1 truncate">{section.label}</span>
-    {count !== undefined && (
-      <span
-        className={cn(
-          "rounded px-1.5 py-0.5 text-[9px]",
-          count > 0 ? "bg-emerald-500/10 text-emerald-600" : "bg-zinc-500/10 text-zinc-500",
-        )}
-      >
-        {count}
-      </span>
-    )}
-  </button>
-);
-
-const ToolLink = ({ href, label }: { href: string; label: string }) => (
-  <Link
-    href={href}
-    className="text-muted-foreground hover:text-accent flex items-center gap-2 py-1.5 text-[11px] font-medium transition-colors"
-  >
-    <ChevronRight className="h-3 w-3" /> {label}
-  </Link>
-);
-
-function MasterSkeleton() {
-  return (
-    <div className="grid animate-pulse grid-cols-1 gap-8 xl:grid-cols-12">
-      <div className="hidden xl:col-span-3 xl:block">
-        <div className="bg-muted/20 h-125 w-full rounded-2xl" />
-      </div>
-
-      <div className="space-y-6 xl:col-span-9">
-        <div className="bg-muted/10 h-20 w-full rounded-2xl" />
-        <div className="bg-muted/10 h-150 w-full rounded-2xl" />
-      </div>
-    </div>
-  );
-}
diff --git a/apps/studio/features/profile/components/master/MasterProfileLoading.tsx b/apps/studio/features/profile/components/master/MasterProfileLoading.tsx
new file mode 100644
index 0000000..fffbbe7
--- /dev/null
+++ b/apps/studio/features/profile/components/master/MasterProfileLoading.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+export function MasterSkeleton() {
+  return (
+    <div className="grid animate-pulse grid-cols-1 gap-8 xl:grid-cols-12">
+      <div className="hidden xl:col-span-3 xl:block">
+        <div className="bg-muted/20 h-125 w-full rounded-2xl" />
+      </div>
+
+      <div className="space-y-6 xl:col-span-9">
+        <div className="bg-muted/10 h-20 w-full rounded-2xl" />
+        <div className="bg-muted/10 h-150 w-full rounded-2xl" />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/studio/features/profile/components/master/MasterProfileNavigator.tsx b/apps/studio/features/profile/components/master/MasterProfileNavigator.tsx
new file mode 100644
index 0000000..41a87ef
--- /dev/null
+++ b/apps/studio/features/profile/components/master/MasterProfileNavigator.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { ArrowUp, Circle, Compass } from "lucide-react";
+
+import type { CountKey, MasterSectionNavItem } from "./master-section-nav";
+
+import { Card } from "@veriworkly/ui";
+
+import { cn } from "@/lib/utils";
+
+type SectionCounts = Record<CountKey, number>;
+
+type MasterProfileNavigatorProps = {
+  sections: MasterSectionNavItem[];
+  activeSectionId: string;
+  activeSectionIndex: number;
+  sourceLabel: string;
+  updatedAt: string | null;
+  sectionCounts: SectionCounts;
+  onNavigate: (sectionId: string) => void;
+};
+
+export function MasterProfileNavigator({
+  sections,
+  activeSectionId,
+  activeSectionIndex,
+  sourceLabel,
+  updatedAt,
+  sectionCounts,
+  onNavigate,
+}: MasterProfileNavigatorProps) {
+  return (
+    <aside className="relative xl:col-span-3">
+      <div className="sticky top-8">
+        <Card className="border-dashed bg-zinc-500/5 p-4">
+          <header className="mb-4 flex items-center gap-2">
+            <Compass className="text-accent h-4 w-4" />
+
+            <h2 className="text-muted-foreground text-[10px] font-black tracking-widest uppercase">
+              Navigator
+            </h2>
+          </header>
+
+          <div className="mb-6 space-y-2 border-b border-dashed pb-4 text-[11px]">
+            <StatRow label="Source" value={sourceLabel} />
+            <StatRow
+              isMono
+              label="Updated"
+              value={updatedAt ? new Date(updatedAt).toLocaleDateString() : "New"}
+            />
+            <StatRow label="Progress" value={`${activeSectionIndex + 1} / ${sections.length}`} />
+          </div>
+
+          <nav className="custom-scrollbar max-h-[50vh] space-y-1 overflow-y-auto pr-1">
+            {sections.map((section) => (
+              <NavButton
+                key={section.id}
+                section={section}
+                isActive={activeSectionId === section.id}
+                count={section.countKey ? sectionCounts[section.countKey] : undefined}
+                onClick={() => onNavigate(section.id)}
+              />
+            ))}
+          </nav>
+
+          <button
+            onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+            className="text-muted-foreground hover:text-foreground hover:bg-accent/5 mt-4 flex w-full items-center justify-center gap-2 rounded-xl border border-dashed py-2 text-xs font-bold transition-all"
+          >
+            <ArrowUp className="h-3.5 w-3.5" /> Back to top
+          </button>
+        </Card>
+      </div>
+    </aside>
+  );
+}
+
+export function MasterMobileSectionNav({
+  sections,
+  activeSectionId,
+  onNavigate,
+}: {
+  sections: MasterSectionNavItem[];
+  activeSectionId: string;
+  onNavigate: (sectionId: string) => void;
+}) {
+  return (
+    <div className="bg-background/80 sticky top-18 z-30 -mx-4 mb-6 border-y px-4 py-3 backdrop-blur-md xl:hidden">
+      <div className="no-scrollbar flex gap-2 overflow-x-auto pb-1">
+        {sections.map((section) => (
+          <button
+            key={section.id}
+            onClick={() => onNavigate(section.id)}
+            className={cn(
+              "rounded-full px-4 py-1.5 text-xs font-medium whitespace-nowrap transition",
+              activeSectionId === section.id
+                ? "bg-accent text-white"
+                : "bg-muted/50 text-muted-foreground",
+            )}
+          >
+            {section.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const StatRow = ({ label, value, isMono }: { label: string; value: string; isMono?: boolean }) => (
+  <div className="flex justify-between">
+    <span className="text-muted-foreground">{label}</span>
+    <span className={cn("font-semibold", isMono && "font-mono")}>{value}</span>
+  </div>
+);
+
+function NavButton({
+  section,
+  isActive,
+  count,
+  onClick,
+}: {
+  section: MasterSectionNavItem;
+  isActive: boolean;
+  count?: number;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "group flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-all",
+        isActive
+          ? "bg-accent/10 text-accent font-bold"
+          : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+      )}
+    >
+      <Circle
+        className={cn(
+          "h-2 w-2 transition-transform",
+          isActive ? "scale-125 fill-current" : "opacity-40",
+        )}
+      />
+
+      <span className="flex-1 truncate">{section.label}</span>
+
+      {count !== undefined && (
+        <span
+          className={cn(
+            "rounded px-1.5 py-0.5 text-[9px]",
+            count > 0 ? "bg-emerald-500/10 text-emerald-600" : "bg-zinc-500/10 text-zinc-500",
+          )}
+        >
+          {count}
+        </span>
+      )}
+    </button>
+  );
+}
diff --git a/apps/studio/features/profile/components/master/ProfileMaster.tsx b/apps/studio/features/profile/components/master/ProfileMaster.tsx
index dced3f2..7cfbae9 100644
--- a/apps/studio/features/profile/components/master/ProfileMaster.tsx
+++ b/apps/studio/features/profile/components/master/ProfileMaster.tsx
@@ -7,8 +7,7 @@ import { useState, useEffect, useCallback, useMemo } from "react";
 import type { UpdateProfile } from "./types";
 import type { MasterProfileData } from "@/types/resume";
 
-import { Card } from "@veriworkly/ui";
-import { Button } from "@veriworkly/ui";
+import { Card, Button } from "@veriworkly/ui";
 
 import { cn } from "@/lib/utils";
 
diff --git a/apps/studio/features/profile/components/master/master-section-nav.ts b/apps/studio/features/profile/components/master/master-section-nav.ts
new file mode 100644
index 0000000..c42ab8d
--- /dev/null
+++ b/apps/studio/features/profile/components/master/master-section-nav.ts
@@ -0,0 +1,25 @@
+export type CountKey = "experience" | "projects" | "skills";
+
+export type MasterSectionNavItem = {
+  id: string;
+  label: string;
+  countKey?: CountKey;
+};
+
+export const MASTER_SECTION_NAV: MasterSectionNavItem[] = [
+  { id: "profile-basics", label: "Resume basics" },
+  { id: "profile-summary-links", label: "Summary and links" },
+  { id: "profile-appearance", label: "Appearance" },
+  { id: "profile-visibility", label: "Section visibility" },
+  { id: "profile-experience", label: "Experience", countKey: "experience" },
+  { id: "profile-education", label: "Education" },
+  { id: "profile-projects", label: "Projects", countKey: "projects" },
+  { id: "profile-skills", label: "Skills", countKey: "skills" },
+  { id: "profile-languages", label: "Languages" },
+  { id: "profile-interests", label: "Interests" },
+  { id: "profile-credentials", label: "Awards, certificates, publications" },
+  { id: "profile-volunteer", label: "Volunteer" },
+  { id: "profile-references", label: "References" },
+  { id: "profile-achievements", label: "Achievements" },
+  { id: "profile-custom-sections", label: "Custom sections" },
+];
diff --git a/apps/studio/features/profile/components/master/master-utils.ts b/apps/studio/features/profile/components/master/master-utils.ts
index 2922568..08bd8f3 100644
--- a/apps/studio/features/profile/components/master/master-utils.ts
+++ b/apps/studio/features/profile/components/master/master-utils.ts
@@ -252,7 +252,7 @@ export function validateMasterProfileForSave(profile: MasterProfileData) {
 }
 
 export function sanitizeMasterProfileForSave(profile: MasterProfileData): MasterProfileData {
-  return {
+  const sanitized = {
     ...profile,
     basics: {
       ...profile.basics,
@@ -326,6 +326,164 @@ export function sanitizeMasterProfileForSave(profile: MasterProfileData): Master
       endDate: item.current ? "" : item.endDate.trim(),
     })),
   };
+
+  return {
+    ...sanitized,
+    customSections: buildResumeCompatibilityCustomSections(sanitized),
+  };
+}
+
+function findExistingCustomSection(profile: MasterProfileData, kind: ResumeCustomSection["kind"]) {
+  return profile.customSections.find((section) => section.kind === kind);
+}
+
+function makeCompatibilitySection(
+  profile: MasterProfileData,
+  kind: ResumeCustomSection["kind"],
+  title: string,
+  items: ResumeCustomSection["items"],
+): ResumeCustomSection {
+  const existing = findExistingCustomSection(profile, kind);
+
+  return {
+    id: existing?.id || createId(kind),
+    kind,
+    title: existing?.title || title,
+    editableTitle: existing?.editableTitle ?? true,
+    items,
+  };
+}
+
+// Resume templates still read these optional sections from customSections.
+// Master editor stores them in dedicated top-level arrays, then mirrors them here on save.
+function buildResumeCompatibilityCustomSections(profile: MasterProfileData) {
+  const compatibilitySections: ResumeCustomSection[] = [
+    makeCompatibilitySection(
+      profile,
+      "certifications",
+      "Certifications",
+      profile.certificates.map((item) => ({
+        id: item.id,
+        name: item.title,
+        issuer: item.issuer,
+        date: item.date,
+        link: item.website ?? "",
+        referenceId: "",
+        description: item.description,
+        details: [],
+      })),
+    ),
+    makeCompatibilitySection(
+      profile,
+      "awards",
+      "Awards",
+      profile.awards.map((item) => ({
+        id: item.id,
+        name: item.title,
+        issuer: item.awarder,
+        date: item.date,
+        link: item.website ?? "",
+        referenceId: "",
+        description: item.description,
+        details: [],
+      })),
+    ),
+    makeCompatibilitySection(
+      profile,
+      "publications",
+      "Publications",
+      profile.publications.map((item) => ({
+        id: item.id,
+        name: item.title,
+        issuer: item.publisher,
+        date: item.date,
+        link: item.website ?? "",
+        referenceId: "",
+        description: item.description,
+        details: [],
+      })),
+    ),
+    makeCompatibilitySection(
+      profile,
+      "languages",
+      "Languages",
+      profile.languages.map((item) => ({
+        id: item.id,
+        name: item.language,
+        issuer: item.fluency,
+        date: "",
+        link: "",
+        referenceId: "",
+        description: item.fluency,
+        details: [],
+      })),
+    ),
+    makeCompatibilitySection(
+      profile,
+      "interests",
+      "Interests",
+      profile.interests.map((item) => ({
+        id: item.id,
+        name: item.name,
+        issuer: "",
+        date: "",
+        link: "",
+        referenceId: "",
+        description: "",
+        details: item.keywords,
+      })),
+    ),
+    makeCompatibilitySection(
+      profile,
+      "volunteer",
+      "Volunteer",
+      profile.volunteer.map((item) => ({
+        id: item.id,
+        name: item.organization,
+        issuer: item.role,
+        date: [item.startDate, item.current ? "Present" : item.endDate].filter(Boolean).join(" - "),
+        link: "",
+        referenceId: "",
+        description: item.summary,
+        details: item.location ? [item.location] : [],
+      })),
+    ),
+    makeCompatibilitySection(
+      profile,
+      "references",
+      "References",
+      profile.references.map((item) => ({
+        id: item.id,
+        name: item.name,
+        issuer: item.organization,
+        date: "",
+        link: item.email ? `mailto:${item.email}` : "",
+        referenceId: "",
+        description: [item.title, item.relationship].filter(Boolean).join(" / "),
+        details: [item.phone ?? ""].filter(Boolean),
+      })),
+    ),
+    makeCompatibilitySection(
+      profile,
+      "achievements",
+      "Achievements",
+      profile.achievements.map((item) => ({
+        id: item.id,
+        name: item.title,
+        issuer: "",
+        date: "",
+        link: "",
+        referenceId: "",
+        description: item.description,
+        details: [],
+      })),
+    ),
+  ];
+
+  return [
+    ...compatibilitySections,
+    ...profile.customSections.filter((section) => section.kind === "custom"),
+  ];
 }
 
 export function ensureUniqueIds<T extends { id: string }>(items: T[], prefix: string) {