Feat: add persisted account theme settings

Backend/internal/bootstrap/bootstrap_types.go

@@ -91,6 +91,11 @@ type AdminRecord struct {
 	DisplayName     string `json:"displayName"`
 	IsInstanceAdmin bool   `json:"isInstanceAdmin"`
 	HomeTitle       string `json:"homeTitle"`
+	ThemePresetID   string `json:"themePresetId,omitempty"`
+}
+
+type SaveThemePresetInput struct {
+	PresetID string
 }
 
 type OrganizationRecord struct {
@@ -243,8 +248,8 @@ type MoveProjectItemInput struct {
 }
 
 type CreateProjectFolderResult struct {
-	ProjectID     string                       `json:"projectId"`
-	CreatedFolder ProjectHierarchyFolderRecord `json:"createdFolder"`
+	ProjectID     string                         `json:"projectId"`
+	CreatedFolder ProjectHierarchyFolderRecord   `json:"createdFolder"`
 	Folders       []ProjectHierarchyFolderRecord `json:"folders"`
 }
 
@@ -272,8 +277,8 @@ type MoveProjectFolderResult struct {
 }
 
 type CreateProjectItemResult struct {
-	ProjectID   string                `json:"projectId"`
-	CreatedItem ProjectTreeNodeRecord `json:"createdItem"`
+	ProjectID   string                  `json:"projectId"`
+	CreatedItem ProjectTreeNodeRecord   `json:"createdItem"`
 	Nodes       []ProjectTreeNodeRecord `json:"nodes"`
 }
 
@@ -285,10 +290,10 @@ type DeleteProjectItemResult struct {
 }
 
 type MoveProjectItemResult struct {
-	ProjectID            string                `json:"projectId"`
-	PreviousItemStableID string                `json:"previousItemId"`
-	PreviousItemPath     string                `json:"previousItemPath"`
-	MovedItem            ProjectTreeNodeRecord `json:"movedItem"`
+	ProjectID            string                  `json:"projectId"`
+	PreviousItemStableID string                  `json:"previousItemId"`
+	PreviousItemPath     string                  `json:"previousItemPath"`
+	MovedItem            ProjectTreeNodeRecord   `json:"movedItem"`
 	Nodes                []ProjectTreeNodeRecord `json:"nodes"`
 }
 

Backend/internal/bootstrap/project_disk_bootstrap.go

@@ -232,6 +232,9 @@ func (service *Service) ensureBootstrapPOSIXSkeleton(
 		"type": "personal",
 		"name": personalName,
 		"slug": personalSlug,
+		"theme": map[string]any{
+			"presetId": "moku-midnight",
+		},
 	}); err != nil {
 		return fmt.Errorf("write personal %s: %w", posixSettingsFileName, err)
 	}

Backend/internal/bootstrap/service.go

@@ -318,6 +318,14 @@ func (service *Service) GetAdmin(ctx context.Context) (*AdminRecord, error) {
 		return nil, err
 	}
 
+	themePresetID, err := service.loadAdminThemePresetID(ctx, record.DisplayName)
+	if err != nil {
+		return nil, err
+	}
+	if themePresetID != "" {
+		record.ThemePresetID = themePresetID
+	}
+
 	return &record, nil
 }
 

Backend/internal/bootstrap/service_test.go

@@ -206,6 +206,13 @@ func TestEnsureBootstrapPOSIXSkeletonInitializesEmptyRoot(t *testing.T) {
 	if personalSettings["slug"] != "ronald" {
 		t.Fatalf("expected personal slug ronald, got %#v", personalSettings["slug"])
 	}
+	personalTheme, ok := personalSettings["theme"].(map[string]any)
+	if !ok {
+		t.Fatalf("expected personal settings to contain theme object, got %#v", personalSettings)
+	}
+	if personalTheme["presetId"] != defaultThemePresetID {
+		t.Fatalf("expected personal theme preset %s, got %#v", defaultThemePresetID, personalTheme["presetId"])
+	}
 
 	personalHome := readStructuredFileForTest[map[string]any](t, filepath.Join(rootPath, "users", "personals", "personal-ronald", posixHomeFileName))
 	if personalHome["type"] != "personal-home" {
@@ -277,6 +284,39 @@ func TestCreateProjectHierarchyFolderOnDiskCreatesExpectedFolderShape(t *testing
 	}
 }
 
+func TestPersonalSettingsPathForDisplayName(t *testing.T) {
+	path := personalSettingsPathForDisplayName(" Ronald ")
+	if path != "users/personals/personal-ronald/settings.cbor" {
+		t.Fatalf("unexpected personal settings path: %s", path)
+	}
+}
+
+func TestApplyThemePresetToSettingsPreservesExistingFields(t *testing.T) {
+	settings := map[string]any{
+		"type": "personal",
+		"slug": "ronald",
+		"theme": map[string]any{
+			"density": "comfortable",
+		},
+	}
+
+	updated := applyThemePresetToSettings(settings, "moku-default")
+
+	if updated["type"] != "personal" {
+		t.Fatalf("expected type personal, got %#v", updated["type"])
+	}
+	theme, ok := updated["theme"].(map[string]any)
+	if !ok {
+		t.Fatalf("expected theme object, got %#v", updated["theme"])
+	}
+	if theme["presetId"] != "moku-default" {
+		t.Fatalf("expected presetId moku-default, got %#v", theme["presetId"])
+	}
+	if theme["density"] != "comfortable" {
+		t.Fatalf("expected density to be preserved, got %#v", theme["density"])
+	}
+}
+
 func TestCreateProjectTreeFolderOnDiskCreatesExpectedFolderShape(t *testing.T) {
 	rootPath := filepath.Join(t.TempDir(), "POSIX")
 	service := NewService(nil, rootPath)

Backend/internal/bootstrap/settings_theme.go

@@ -0,0 +1,111 @@
+package bootstrap
+
+import (
+	"context"
+	"errors"
+	"fmt"
+	"path/filepath"
+	"strings"
+
+	"github.com/jackc/pgx/v5"
+)
+
+const defaultThemePresetID = "moku-midnight"
+
+func personalSettingsPathForDisplayName(displayName string) string {
+	personalName := strings.TrimSpace(displayName)
+	if personalName == "" {
+		personalName = defaultPersonalDisplayName
+	}
+
+	personalSlug := normalizePOSIXSlug(personalName)
+	return filepath.ToSlash(filepath.Join("users", "personals", slugDir("personal", personalSlug), posixSettingsFileName))
+}
+
+func extractThemePresetID(settings map[string]any) string {
+	theme, ok := settings["theme"].(map[string]any)
+	if !ok {
+		return ""
+	}
+
+	presetID, _ := theme["presetId"].(string)
+	return strings.TrimSpace(presetID)
+}
+
+func applyThemePresetToSettings(settings map[string]any, presetID string) map[string]any {
+	normalized := settings
+	if normalized == nil {
+		normalized = map[string]any{}
+	}
+
+	theme, ok := normalized["theme"].(map[string]any)
+	if !ok || theme == nil {
+		theme = map[string]any{}
+	}
+
+	theme["presetId"] = presetID
+	normalized["theme"] = theme
+	return normalized
+}
+
+func (service *Service) SaveThemePreset(ctx context.Context, input SaveThemePresetInput) (*AdminRecord, error) {
+	admin, err := service.GetAdmin(ctx)
+	if err != nil {
+		return nil, err
+	}
+	if admin == nil {
+		return nil, ErrAdminNotConfigured
+	}
+
+	presetID := strings.TrimSpace(input.PresetID)
+	if presetID == "" {
+		return nil, fmt.Errorf("theme preset id is required")
+	}
+
+	rootPath := strings.TrimSpace(service.posixRoot)
+	if rootPath == "" {
+		return nil, fmt.Errorf("posix root is not configured")
+	}
+
+	relativeSettingsPath := personalSettingsPathForDisplayName(admin.DisplayName)
+	absoluteSettingsPath := filepath.Join(rootPath, filepath.FromSlash(relativeSettingsPath))
+	settings := readStructuredFileMap(absoluteSettingsPath)
+	if len(settings) == 0 {
+		return nil, fmt.Errorf("personal settings file is missing")
+	}
+
+	updatedSettings := applyThemePresetToSettings(settings, presetID)
+	if err := writeCBORFile(absoluteSettingsPath, updatedSettings); err != nil {
+		return nil, fmt.Errorf("write personal %s: %w", posixSettingsFileName, err)
+	}
+
+	if err := service.rebuildProjection(ctx); err != nil {
+		return nil, err
+	}
+
+	return service.GetAdmin(ctx)
+}
+
+func (service *Service) loadAdminThemePresetID(ctx context.Context, displayName string) (string, error) {
+	path := personalSettingsPathForDisplayName(displayName)
+
+	var presetID *string
+	err := service.db.Pool.QueryRow(ctx, `
+		SELECT content_json->'theme'->>'presetId'
+		FROM posix_nodes
+		WHERE path = $1
+		LIMIT 1;
+	`, path).Scan(&presetID)
+	if err != nil {
+		if errors.Is(err, pgx.ErrNoRows) {
+			return "", nil
+		}
+		return "", err
+	}
+
+	if presetID == nil {
+		return "", nil
+	}
+
+	return strings.TrimSpace(*presetID), nil
+}

Backend/internal/httpx/api_routes.go

@@ -31,6 +31,7 @@ func (routes apiRoutes) Register(router chi.Router) {
 			bootstrapRouter.Post("/structure", routes.handleBootstrapStructureStep)
 		})
 		apiRouter.Get("/app-shell", routes.handleAppShellState)
+		apiRouter.Put("/settings/theme", routes.handleSaveThemePreset)
 		apiRouter.Get("/organizations", routes.handleOrganizations)
 		apiRouter.Get("/workspaces", routes.handleWorkspaces)
 		apiRouter.Route("/projects/{projectId}", func(projectRouter chi.Router) {

Backend/internal/httpx/api_settings_routes.go

@@ -0,0 +1,43 @@
+package httpx
+
+import (
+	"net/http"
+	"strings"
+
+	bootstrapservice "moku-backend/internal/bootstrap"
+)
+
+type saveThemePresetRequest struct {
+	PresetID string `json:"presetId"`
+}
+
+func (routes apiRoutes) handleSaveThemePreset(w http.ResponseWriter, r *http.Request) {
+	payload, ok := decodeBootstrapRequest[saveThemePresetRequest](w, r)
+	if !ok {
+		return
+	}
+
+	payload.PresetID = strings.TrimSpace(payload.PresetID)
+	if payload.PresetID == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Theme preset ID is required.")
+		return
+	}
+
+	admin, err := routes.bootstrapService().SaveThemePreset(r.Context(), bootstrapservice.SaveThemePresetInput{
+		PresetID: payload.PresetID,
+	})
+	if err != nil {
+		routes.writeBootstrapPersistenceError(w, r, err)
+		return
+	}
+
+	WriteJSON(w, http.StatusOK, map[string]any{
+		"data": map[string]any{
+			"presetId": payload.PresetID,
+			"admin":    admin,
+		},
+		"meta": map[string]any{
+			"resource": "settings-theme",
+		},
+	})
+}

Frontend/package.json

@@ -17,6 +17,7 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@solidjs/router": "^0.16.1",
 		"@solidjs/start": "2.0.0-alpha.2",
 		"@solidjs/vite-plugin-nitro-2": "^0.1.0",
 		"lucide-solid": "^0.542.0",

Frontend/pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@solidjs/router':
+        specifier: ^0.16.1
+        version: 0.16.1(solid-js@1.9.11)
       '@solidjs/start':
         specifier: 2.0.0-alpha.2
         version: 2.0.0-alpha.2(crossws@0.4.4(srvx@0.11.8))(vite@7.3.1(@types/node@25.9.3)(jiti@2.6.1)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0))
@@ -1210,6 +1213,11 @@ packages:
     peerDependencies:
       solid-js: '>=1.8.4'
 
+  '@solidjs/router@0.16.1':
+    resolution: {integrity: sha512-IhyjedgC6LRpw/8CPGGI89FrV+r0xTHzOl2c4CRyzYQ1bLepJxbVI1LLKvsavMWY5TRBRacV7hAeOhuTXkjiqg==}
+    peerDependencies:
+      solid-js: ^1.8.6
+
   '@solidjs/start@2.0.0-alpha.2':
     resolution: {integrity: sha512-z56ATi3P07q8F5Io2I+RQrwjyWZtFZzpXN/J+8scf/gqrAW83LtgRkZFZjJaGH7i9WrHP+ep9F+ZiJ2gDHVBcw==}
     engines: {node: '>=22'}
@@ -4485,6 +4493,10 @@ snapshots:
     dependencies:
       solid-js: 1.9.11
 
+  '@solidjs/router@0.16.1(solid-js@1.9.11)':
+    dependencies:
+      solid-js: 1.9.11
+
   '@solidjs/start@2.0.0-alpha.2(crossws@0.4.4(srvx@0.11.8))(vite@7.3.1(@types/node@25.9.3)(jiti@2.6.1)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0))':
     dependencies:
       '@babel/core': 7.29.0

Frontend/src/app.tsx

@@ -1,12 +1,17 @@
 // Path: Frontend/src/app.tsx
 
-import type { JSX } from "solid-js";
-import { AppShell } from "./components/app-shell/AppShell/AppShell";
+import { Suspense, type JSX } from "solid-js";
+import { Router } from "@solidjs/router";
+import { FileRoutes } from "@solidjs/start/router";
 import "./styles/main.scss";
 import "./styles/user-overrides.scss";
 
 const App = (): JSX.Element => {
-	return <AppShell />;
+	return (
+		<Router root={(props): JSX.Element => <Suspense>{props.children}</Suspense>}>
+			<FileRoutes />
+		</Router>
+	);
 };
 
 export default App;

Frontend/src/components/app-shell/AppShell/AppShell.module.scss

@@ -95,6 +95,8 @@
   min-width: 0;
   min-height: 0;
   position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
   overflow: hidden;
   z-index: 1;
   border-top: 1px solid var(--shell-frame-border);
@@ -103,6 +105,14 @@
   border-top-right-radius: 0;
 }
 
+.workspaceContent {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+
 .mobileWorkspaceView {
   min-width: 0;
   min-height: 0;

Frontend/src/components/app-shell/AppShell/AppShell.tsx

@@ -1,10 +1,11 @@
 // Path: Frontend/src/components/app-shell/AppShell/AppShell.tsx
 
+import { useLocation } from "@solidjs/router";
 import { createSignal, onCleanup, onMount, Show, type JSX } from "solid-js";
 import { getDocumentTheme, setTheme, type Theme } from "../../../helper/themeRuntime";
 import { BootstrapWizard } from "../../bootstrap/BootstrapWizard/BootstrapWizard";
-import { WorkspaceHome } from "../../workspace-home/WorkspaceHome";
 import { AppShellDataProvider, useAppShellData } from "../data/app-shell.context";
+import { getWorkspaceBreadcrumbSegments } from "../data/workspace-routes";
 import { LeftRail } from "../../workspace-navigation/LeftRail/LeftRail";
 import { MobileBottomNav } from "../MobileBottomNav/MobileBottomNav";
 import { MobileWorkspaceBrowser } from "../../workspace-navigation/MobileWorkspaceBrowser/MobileWorkspaceBrowser";
@@ -19,7 +20,7 @@ import styles from "./AppShell.module.scss";
 type MobileWorkspaceView = "notifications" | "profile" | null;
 const MOBILE_VIEWPORT_QUERY = "(max-width: 48rem)";
 
-const AppShellContent = (): JSX.Element => {
+const AppShellContent = (props: { children: JSX.Element }): JSX.Element => {
 	const [themeState, setThemeState] = createSignal<Theme>("light");
 	const [isRailCollapsed, setIsRailCollapsed] = createSignal(false);
 	const [isSidebarCollapsed, setIsSidebarCollapsed] = createSignal(false);
@@ -27,6 +28,7 @@ const AppShellContent = (): JSX.Element => {
 	const [isMobileWorkspaceBrowserOpen, setIsMobileWorkspaceBrowserOpen] = createSignal(false);
 	const [activeMobileWorkspaceView, setActiveMobileWorkspaceView] = createSignal<MobileWorkspaceView>(null);
 	const appShellData = useAppShellData();
+	const location = useLocation();
 
 	onMount((): void => {
 		setThemeState(getDocumentTheme());
@@ -82,7 +84,15 @@ const AppShellContent = (): JSX.Element => {
 		setActiveMobileWorkspaceView(null);
 	};
 
-	const workspaceBreadcrumb = (): string => `${appShellData.activeServer().name} / ${appShellData.activeProject().name} / Home`;
+	const workspaceBreadcrumb = (): string =>
+		[
+			appShellData.activeServer().name,
+			...getWorkspaceBreadcrumbSegments(location.pathname, {
+				activeProjectName: appShellData.activeProject().name,
+				activeDepartmentName: appShellData.activeDepartment().name,
+				activeTeamName: appShellData.activeDepartment().teamName,
+			}),
+		].join(" / ");
 
 	return (
 		<div class={styles.shell} data-ui="app-shell" data-app-shell-status={appShellData.status()}>
@@ -136,7 +146,9 @@ const AppShellContent = (): JSX.Element => {
 											setIsSidebarCollapsed((collapsed) => !collapsed);
 										}}
 									/>
-									<WorkspaceHome />
+									<div class={styles.workspaceContent} data-slot="workspace-content">
+										{props.children}
+									</div>
 								</>
 							}
 						>
@@ -175,10 +187,10 @@ const AppShellContent = (): JSX.Element => {
 	);
 };
 
-export const AppShell = (): JSX.Element => {
+export const AppShell = (props: { children: JSX.Element }): JSX.Element => {
 	return (
 		<AppShellDataProvider>
-			<AppShellContent />
+			<AppShellContent>{props.children}</AppShellContent>
 		</AppShellDataProvider>
 	);
 };

Frontend/src/components/app-shell/ServerDock/ServerDock.tsx

@@ -1,13 +1,22 @@
 // Path: Frontend/src/components/app-shell/ServerDock/ServerDock.tsx
 
 import { For, Show, type JSX } from "solid-js";
+import { useNavigate } from "@solidjs/router";
 import { useAppShellData } from "../data/app-shell.context";
+import { getWorkspaceSurfaceRoute } from "../data/workspace-routes";
 import styles from "./ServerDock.module.scss";
 
 export const ServerDock = (): JSX.Element => {
 	const appShellData = useAppShellData();
+	const navigate = useNavigate();
 	const activeServer = () => appShellData.activeServer();
 
+	const handleAction = (actionId: string): void => {
+		if (actionId === "settings" || actionId === "server") {
+			navigate(getWorkspaceSurfaceRoute("settings"));
+		}
+	};
+
 	return (
 		<section class={styles.panel} aria-label="Server dock" data-ui="server-dock" data-server-kind={activeServer().kind}>
 			<div class={styles.identity} data-slot="server-dock-identity">
@@ -35,7 +44,15 @@ export const ServerDock = (): JSX.Element => {
 							const Icon = item.icon;
 
 							return (
-								<button type="button" class={styles.action} aria-label={item.label} title={item.label} data-slot="server-dock-action" data-action-id={item.id}>
+								<button
+									type="button"
+									class={styles.action}
+									aria-label={item.label}
+									title={item.label}
+									data-slot="server-dock-action"
+									data-action-id={item.id}
+									onClick={() => handleAction(item.id)}
+								>
 									<Icon size={16} strokeWidth={2} />
 									<span class={styles.actionLabel}>{item.label}</span>
 								</button>

Frontend/src/components/app-shell/data/app-shell.context.tsx

@@ -1,14 +1,8 @@
 // Path: Frontend/src/components/app-shell/data/app-shell.context.tsx
 
-import {
-	createContext,
-	createMemo,
-	createSignal,
-	onMount,
-	useContext,
-	type JSX,
-} from "solid-js";
+import { createContext, createMemo, createSignal, onMount, useContext, type JSX } from "solid-js";
 import { resolveAPIBase } from "../../../lib/api";
+import { applyThemePresetById, resolvePreferredThemePresetId } from "../../../helper/themeRuntime";
 import {
 	buildActiveDepartment,
 	buildActiveProject,
@@ -56,7 +50,13 @@ export const AppShellDataProvider = (props: { children: JSX.Element }): JSX.Elem
 				throw new Error(errorMessage || "Failed to load app shell state.");
 			}
 
-			setPayload(normalizeAppShellPayload(body.data));
+			const normalizedPayload = normalizeAppShellPayload(body.data);
+			const persistedThemePresetId = normalizedPayload.admin?.themePresetId?.trim();
+			if (persistedThemePresetId && persistedThemePresetId !== resolvePreferredThemePresetId()) {
+				await applyThemePresetById(persistedThemePresetId);
+			}
+
+			setPayload(normalizedPayload);
 			setStatus("success");
 		} catch (loadError) {
 			setStatus("error");
@@ -72,6 +72,7 @@ export const AppShellDataProvider = (props: { children: JSX.Element }): JSX.Elem
 		status,
 		error,
 		installation: createMemo(() => payload()?.installation),
+		admin: createMemo(() => payload()?.admin),
 		railItems: createMemo(() => buildRailItems(payload())),
 		activeServer: createMemo(() => buildActiveServer(payload())),
 		activeProject: createMemo(() => buildActiveProject(payload())),

Frontend/src/components/app-shell/data/app-shell.types.ts

@@ -30,6 +30,7 @@ export type AppShellAdmin = {
 	displayName: string;
 	isInstanceAdmin: boolean;
 	homeTitle: string;
+	themePresetId?: string;
 };
 
 export type AppShellOrganization = {
@@ -87,6 +88,7 @@ export type AppShellContextValue = {
 	status: Accessor<"idle" | "loading" | "success" | "error">;
 	error: Accessor<string>;
 	installation: Accessor<AppShellInstallation | undefined>;
+	admin: Accessor<AppShellAdmin | undefined>;
 	railItems: Accessor<readonly RailItem[]>;
 	activeServer: Accessor<ActiveServer>;
 	activeProject: Accessor<ActiveProject>;

Frontend/src/components/app-shell/data/shell.types.ts

@@ -103,10 +103,12 @@ export type SidebarItem = {
 
 export type WorkspaceStaticKind = "workspace" | "home" | "settings";
 
+export type WorkspaceStaticSurfaceKind = Exclude<WorkspaceStaticKind, "workspace">;
+
 export type WorkspaceItemTypeId = string;
 
 export type WorkspaceStaticItem = SidebarItem & {
-	contextKind: WorkspaceStaticKind;
+	contextKind: WorkspaceStaticSurfaceKind;
 };
 
 export type WorkspaceFolderNode = {

Frontend/src/components/app-shell/data/workspace-routes.ts

@@ -0,0 +1,79 @@
+// Path: Frontend/src/components/app-shell/data/workspace-routes.ts
+
+import type { WorkspaceStaticKind } from "./shell.types";
+
+export type WorkspaceSurfaceKind = Exclude<WorkspaceStaticKind, "workspace">;
+export type SettingsSectionKind = "account" | "workspace" | "server" | "theme" | "security" | "members";
+
+export type WorkspaceBreadcrumbContext = {
+	activeProjectName: string;
+	activeDepartmentName: string;
+	activeTeamName?: string;
+};
+
+const workspaceSurfaceRoutes: Record<WorkspaceSurfaceKind, string> = {
+	home: "/workspace/home",
+	settings: "/settings",
+};
+
+export const getWorkspaceSurfaceRoute = (surface: WorkspaceSurfaceKind): string => workspaceSurfaceRoutes[surface];
+
+const settingsSectionRoutes: Record<SettingsSectionKind, string> = {
+	account: "/settings/account",
+	workspace: "/settings/workspace",
+	server: "/settings/server",
+	theme: "/settings/theme",
+	security: "/settings/security",
+	members: "/settings/members",
+};
+
+export const getSettingsSectionRoute = (section: SettingsSectionKind): string => settingsSectionRoutes[section];
+
+export const getWorkspaceSurfaceFromPathname = (pathname: string): WorkspaceSurfaceKind => {
+	if (pathname.startsWith(workspaceSurfaceRoutes.settings) || pathname.startsWith("/workspace/settings")) {
+		return "settings";
+	}
+
+	return "home";
+};
+
+export const getWorkspaceSurfaceBreadcrumbLabel = (pathname: string): string => {
+	const surface = getWorkspaceSurfaceFromPathname(pathname);
+	return surface === "settings" ? "Settings" : "Home";
+};
+
+const getSettingsSectionFromPathname = (pathname: string): SettingsSectionKind | null => {
+	const matchedEntry = (Object.entries(settingsSectionRoutes) as Array<[SettingsSectionKind, string]>).find(([, route]) => pathname.startsWith(route));
+
+	return matchedEntry?.[0] ?? null;
+};
+
+export const getWorkspaceBreadcrumbSegments = (
+	pathname: string,
+	context: WorkspaceBreadcrumbContext,
+): string[] => {
+	const settingsSection = getSettingsSectionFromPathname(pathname);
+
+	if (pathname === workspaceSurfaceRoutes.settings || pathname === "/workspace/settings") {
+		return ["Settings"];
+	}
+
+	if (settingsSection) {
+		switch (settingsSection) {
+			case "account":
+				return ["Users", "Settings"];
+			case "workspace":
+				return [context.activeProjectName, "Settings"];
+			case "server":
+				return ["Settings"];
+			case "theme":
+				return ["Personal", "Settings"];
+			case "security":
+				return ["Users", "Settings"];
+			case "members":
+				return [context.activeTeamName || context.activeDepartmentName || "Members", "Users"];
+		}
+	}
+
+	return [context.activeProjectName, getWorkspaceSurfaceBreadcrumbLabel(pathname)];
+};

Frontend/src/components/settings/SettingsDetailPage/SettingsDetailPage.module.scss

@@ -0,0 +1,86 @@
+// Path: Frontend/src/components/settings/SettingsDetailPage/SettingsDetailPage.module.scss
+
+.viewport {
+	width: 100%;
+	max-width: min(72rem, 100%);
+	min-height: 100%;
+	padding: var(--space-5) var(--space-6) calc(var(--space-7) + env(safe-area-inset-bottom));
+	box-sizing: border-box;
+	display: grid;
+	gap: var(--space-6);
+	align-content: start;
+}
+
+.hero,
+.panel {
+	border: 1px solid var(--color-border-subtle);
+	border-radius: var(--radius-xl);
+	background: var(--color-surface-raised);
+	box-shadow: var(--shadow-sm);
+	padding: var(--space-6);
+	display: grid;
+	gap: var(--space-2);
+}
+
+.hero {
+	border-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-border-subtle));
+	box-shadow:
+		0 10px 24px color-mix(in srgb, var(--color-accent) 8%, transparent),
+		var(--shadow-sm);
+}
+
+.backLink {
+	width: fit-content;
+	text-decoration: none;
+	color: color-mix(in srgb, var(--color-accent) 34%, var(--color-text-primary));
+	@include text-label;
+}
+
+.backLink:hover {
+	text-decoration: underline;
+}
+
+.title,
+.panelTitle {
+	margin: 0;
+	color: var(--color-text-primary);
+}
+
+.title {
+	@include text-display;
+	line-height: 1.02;
+	letter-spacing: -0.02em;
+}
+
+.panelTitle {
+	@include text-title;
+	line-height: 1.12;
+}
+
+.description,
+.focusList {
+	margin: 0;
+	color: var(--color-text-secondary);
+	@include text-body;
+}
+
+.focusList {
+	padding-left: 1.1rem;
+	display: grid;
+	gap: 0.35rem;
+}
+
+.focusList li::marker {
+	color: color-mix(in srgb, var(--color-accent) 44%, var(--color-text-secondary));
+}
+
+@media (max-width: 48rem) {
+	.viewport {
+		padding: var(--space-4) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
+	}
+
+	.hero,
+	.panel {
+		padding: var(--space-4);
+	}
+}

Frontend/src/components/settings/SettingsDetailPage/SettingsDetailPage.tsx

@@ -0,0 +1,32 @@
+// Path: Frontend/src/components/settings/SettingsDetailPage/SettingsDetailPage.tsx
+
+import { A } from "@solidjs/router";
+import { For, type JSX } from "solid-js";
+import styles from "./SettingsDetailPage.module.scss";
+
+type SettingsDetailPageProps = {
+	title: string;
+	description: string;
+	focus: readonly string[];
+};
+
+export const SettingsDetailPage = (props: SettingsDetailPageProps): JSX.Element => {
+	return (
+		<main class={styles.viewport}>
+			<section class={styles.hero}>
+				<A class={styles.backLink} href="/settings">
+					Back to Settings
+				</A>
+				<h1 class={styles.title}>{props.title}</h1>
+				<p class={styles.description}>{props.description}</p>
+			</section>
+
+			<section class={styles.panel}>
+				<h2 class={styles.panelTitle}>Focus areas</h2>
+				<ul class={styles.focusList}>
+					<For each={props.focus}>{(item) => <li>{item}</li>}</For>
+				</ul>
+			</section>
+		</main>
+	);
+};

Frontend/src/components/settings/SettingsWorkspace/SettingsWorkspace.module.scss

@@ -0,0 +1,229 @@
+// Path: Frontend/src/components/settings/SettingsWorkspace/SettingsWorkspace.module.scss
+
+.viewport {
+	--settings-page-max-width: min(88rem, 100%);
+
+	min-height: 100%;
+	box-sizing: border-box;
+	display: grid;
+	gap: var(--space-6);
+	padding-top: var(--space-5);
+	padding-right: var(--space-6);
+	padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom));
+	padding-left: var(--space-6);
+	align-content: start;
+}
+
+.hero {
+	display: grid;
+	gap: var(--space-4);
+	width: 100%;
+	max-width: var(--settings-page-max-width);
+	padding-inline: var(--space-6);
+	box-sizing: border-box;
+}
+
+.heroCopy,
+.card {
+	border: 1px solid var(--color-border-subtle);
+	border-radius: var(--radius-xl);
+	box-shadow: var(--shadow-sm);
+}
+
+.heroCopy {
+	padding: var(--space-6);
+	display: grid;
+	gap: var(--space-2);
+	position: relative;
+	background: var(--color-surface-raised);
+	border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-border-subtle));
+	box-shadow:
+		0 12px 28px color-mix(in srgb, var(--color-accent) 8%, transparent),
+		var(--shadow-sm);
+}
+
+	.eyebrow,
+	.sectionEyebrow {
+		margin: 0;
+		color: color-mix(in srgb, var(--color-accent) 42%, var(--color-text-tertiary));
+	@include text-label;
+}
+
+.title,
+.sectionTitle,
+.cardTitle {
+	margin: 0;
+	color: var(--color-text-primary);
+}
+
+.title {
+	@include text-display;
+	max-width: 13ch;
+	text-wrap: balance;
+	letter-spacing: -0.025em;
+	line-height: 1.02;
+}
+
+	.description,
+	.sectionDescription,
+	.cardDescription,
+	.focusList {
+	margin: 0;
+	color: var(--color-text-secondary);
+	@include text-body;
+}
+
+.focusList {
+	padding-left: 1.1rem;
+	display: grid;
+	gap: 0.45rem;
+}
+
+.sectionStack {
+	width: 100%;
+	max-width: var(--settings-page-max-width);
+	display: grid;
+	gap: var(--space-5);
+	padding-inline: var(--space-6);
+	box-sizing: border-box;
+}
+
+.section {
+	display: grid;
+	gap: var(--space-4);
+}
+
+.sectionHeader {
+	display: grid;
+	gap: var(--space-2);
+}
+
+.sectionTitle {
+	@include text-title;
+}
+
+.cardGrid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: var(--space-4);
+}
+
+.card {
+	padding: var(--space-5);
+	display: grid;
+	gap: var(--space-3);
+	align-items: start;
+	text-decoration: none;
+	color: inherit;
+	position: relative;
+	background: var(--color-surface-raised);
+	transition:
+		transform 120ms ease,
+		border-color 120ms ease,
+		box-shadow 120ms ease;
+}
+
+.card::before {
+	content: none;
+}
+
+.card::after {
+	content: none;
+}
+
+.card:hover {
+	transform: translateY(-1px);
+	border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-border-strong));
+	box-shadow:
+		0 10px 22px color-mix(in srgb, var(--color-accent) 8%, transparent),
+		var(--shadow-md);
+}
+
+.card:focus-visible {
+	outline: 2px solid color-mix(in srgb, var(--color-accent) 54%, transparent);
+	outline-offset: 2px;
+	border-color: color-mix(in srgb, var(--color-accent) 26%, var(--color-border-strong));
+	box-shadow: var(--shadow-md);
+}
+
+.cardHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--space-3);
+	position: relative;
+	z-index: 1;
+}
+
+.cardIconWrap {
+	width: 2.75rem;
+	height: 2.75rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--radius-lg);
+	background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 14%, transparent), color-mix(in srgb, var(--color-accent-soft) 22%, transparent));
+	color: var(--color-text-primary);
+	border: 1px solid color-mix(in srgb, var(--color-accent) 16%, var(--color-border-subtle));
+	box-shadow:
+		inset 0 1px 0 color-mix(in srgb, white 8%, transparent),
+		0 6px 14px color-mix(in srgb, var(--color-accent) 7%, transparent);
+}
+
+.cardBody {
+	display: grid;
+	gap: var(--space-2);
+	position: relative;
+	z-index: 1;
+}
+
+.cardTitle {
+	@include text-title;
+	line-height: 1.1;
+}
+
+.focusList li::marker {
+	color: color-mix(in srgb, var(--color-accent) 44%, var(--color-text-secondary));
+}
+
+.card:nth-child(2n) .cardIconWrap {
+	background: linear-gradient(180deg, color-mix(in srgb, #8b5cf6 14%, transparent), color-mix(in srgb, var(--color-accent-soft) 22%, transparent));
+	border-color: color-mix(in srgb, #8b5cf6 16%, var(--color-border-subtle));
+}
+
+.card:nth-child(3n) .cardIconWrap {
+	background: linear-gradient(180deg, color-mix(in srgb, #06b6d4 12%, transparent), color-mix(in srgb, var(--color-accent) 18%, transparent));
+	border-color: color-mix(in srgb, #06b6d4 14%, var(--color-border-subtle));
+}
+
+@media (max-width: 64rem) {
+	.cardGrid {
+		grid-template-columns: 1fr;
+	}
+}
+
+@media (max-width: 48rem) {
+	.viewport {
+		padding-top: var(--space-4);
+		padding-right: var(--space-4);
+		padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
+		padding-left: var(--space-4);
+	}
+
+	.hero,
+	.sectionStack {
+		padding-inline: var(--space-4);
+	}
+
+	.heroCopy,
+	.card {
+		padding: var(--space-4);
+	}
+
+	.cardHeader {
+		align-items: flex-start;
+	}
+
+	.title {
+		max-width: none;
+	}
+}

Frontend/src/components/settings/SettingsWorkspace/SettingsWorkspace.tsx

@@ -0,0 +1,95 @@
+// Path: Frontend/src/components/settings/SettingsWorkspace/SettingsWorkspace.tsx
+
+import { A } from "@solidjs/router";
+import { For, type JSX } from "solid-js";
+import { Bell, Home, Moon, Shield, Settings, User } from "../../../lib/icons";
+import { getSettingsSectionRoute } from "../../app-shell/data/workspace-routes";
+import styles from "./SettingsWorkspace.module.scss";
+
+const sections = [
+	{
+		title: "Account Settings",
+		description: "Profile, identity, and account preferences for the active user.",
+		icon: User,
+		href: getSettingsSectionRoute("account"),
+		focus: ["Profile", "Notifications", "Personal defaults"],
+	},
+	{
+		title: "Workspace Settings",
+		description: "Core workspace behavior mapped to the project-level `settings.cbor` surface.",
+		icon: Home,
+		href: getSettingsSectionRoute("workspace"),
+		focus: ["Navigation defaults", "Workspace behavior", "Content rules"],
+	},
+	{
+		title: "Server Settings",
+		description: "Organization and server-wide controls that should live above individual workspaces.",
+		icon: Settings,
+		href: getSettingsSectionRoute("server"),
+		focus: ["Server identity", "Policies", "Operational defaults"],
+	},
+	{
+		title: "Theme Settings",
+		description: "Theme preferences and presentation settings that should eventually map cleanly to POSIX-backed configuration.",
+		icon: Moon,
+		href: getSettingsSectionRoute("theme"),
+		focus: ["Theme preset", "Density", "Visual preferences"],
+	},
+	{
+		title: "Security Settings",
+		description: "Authentication, sessions, and access hardening for users and organizations.",
+		icon: Shield,
+		href: getSettingsSectionRoute("security"),
+		focus: ["Sessions", "Access controls", "Recovery"],
+	},
+	{
+		title: "Members & Roles",
+		description: "People, invitations, and organization-level permission management.",
+		icon: Bell,
+		href: getSettingsSectionRoute("members"),
+		focus: ["Members", "Roles", "Invitations"],
+	},
+] as const;
+
+export const SettingsWorkspace = (): JSX.Element => {
+	return (
+		<main class={styles.viewport} data-ui="workspace-settings-page">
+			<section class={styles.hero}>
+				<div class={styles.heroCopy}>
+					<h1 class={styles.title}>Settings</h1>
+				</div>
+			</section>
+
+			<section class={styles.sectionStack}>
+				<section class={styles.section}>
+					<div class={styles.cardGrid}>
+						<For each={sections}>
+							{(section) => {
+								const Icon = section.icon;
+
+								return (
+									<A class={styles.card} href={section.href}>
+										<div class={styles.cardHeader}>
+											<div class={styles.cardIconWrap}>
+												<Icon size={18} strokeWidth={2} />
+											</div>
+										</div>
+
+										<div class={styles.cardBody}>
+											<h3 class={styles.cardTitle}>{section.title}</h3>
+											<p class={styles.cardDescription}>{section.description}</p>
+
+											<ul class={styles.focusList}>
+												<For each={section.focus}>{(focus) => <li>{focus}</li>}</For>
+											</ul>
+										</div>
+									</A>
+								);
+							}}
+						</For>
+					</div>
+				</section>
+			</section>
+		</main>
+	);
+};

Frontend/src/components/settings/ThemeSettingsPage/ThemeSettingsPage.module.scss

@@ -0,0 +1,234 @@
+// Path: Frontend/src/components/settings/ThemeSettingsPage/ThemeSettingsPage.module.scss
+
+.viewport {
+	width: 100%;
+	max-width: min(80rem, 100%);
+	min-height: 100%;
+	padding: var(--space-5) var(--space-6) calc(var(--space-7) + env(safe-area-inset-bottom));
+	box-sizing: border-box;
+	display: grid;
+	gap: var(--space-5);
+	align-content: start;
+}
+
+.hero,
+.card,
+.errorBanner {
+	border: 1px solid var(--color-border-subtle);
+	border-radius: var(--radius-xl);
+	background: var(--color-surface-raised);
+	box-shadow: var(--shadow-sm);
+}
+
+.hero {
+	padding: var(--space-6);
+	display: flex;
+	align-items: center;
+	gap: var(--space-4);
+	border-color: color-mix(in srgb, var(--color-accent) 20%, var(--color-border-subtle));
+	box-shadow:
+		0 10px 24px color-mix(in srgb, var(--color-accent) 8%, transparent),
+		var(--shadow-sm);
+}
+
+.heroIcon {
+	width: 3rem;
+	height: 3rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--radius-lg);
+	background: linear-gradient(
+		180deg,
+		color-mix(in srgb, var(--color-accent) 14%, transparent),
+		color-mix(in srgb, var(--color-accent-soft) 22%, transparent)
+	);
+	border: 1px solid color-mix(in srgb, var(--color-accent) 16%, var(--color-border-subtle));
+	box-shadow:
+		inset 0 1px 0 color-mix(in srgb, white 8%, transparent),
+		0 6px 14px color-mix(in srgb, var(--color-accent) 7%, transparent);
+	color: var(--color-text-primary);
+	flex: 0 0 auto;
+}
+
+.heroCopy {
+	display: grid;
+	gap: var(--space-2);
+}
+
+.title,
+.cardTitle {
+	margin: 0;
+	color: var(--color-text-primary);
+}
+
+.title {
+	@include text-display;
+	line-height: 1.02;
+	letter-spacing: -0.02em;
+}
+
+.description,
+.cardDescription,
+.errorBanner {
+	margin: 0;
+	color: var(--color-text-secondary);
+	@include text-body;
+}
+
+.errorBanner {
+	padding: var(--space-4) var(--space-5);
+	border-color: color-mix(in srgb, #ef4444 24%, var(--color-border-subtle));
+	color: color-mix(in srgb, #ef4444 64%, var(--color-text-primary));
+}
+
+.grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: var(--space-4);
+}
+
+.card {
+	padding: var(--space-4);
+	display: grid;
+	gap: var(--space-4);
+	text-align: left;
+	color: inherit;
+	cursor: pointer;
+	transition:
+		transform 120ms ease,
+		border-color 120ms ease,
+		box-shadow 120ms ease;
+}
+
+.card:hover:not(:disabled) {
+	transform: translateY(-1px);
+	border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border-strong));
+	box-shadow:
+		0 10px 22px color-mix(in srgb, var(--color-accent) 8%, transparent),
+		var(--shadow-md);
+}
+
+.card:focus-visible {
+	outline: 2px solid color-mix(in srgb, var(--color-accent) 54%, transparent);
+	outline-offset: 2px;
+}
+
+.card:disabled {
+	cursor: default;
+}
+
+.cardSelected {
+	border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-border-strong));
+	box-shadow:
+		0 10px 22px color-mix(in srgb, var(--color-accent) 10%, transparent),
+		var(--shadow-md);
+}
+
+.preview {
+	border-radius: var(--radius-lg);
+	overflow: hidden;
+	border: 1px solid var(--color-border-subtle);
+	background: var(--color-surface);
+	min-height: 9.5rem;
+}
+
+.previewCanvas {
+	height: 100%;
+	min-height: 9.5rem;
+	padding: 0.8rem;
+	box-sizing: border-box;
+	display: grid;
+	grid-template-rows: auto 1fr;
+	gap: 0.75rem;
+}
+
+.previewTopbar {
+	height: 0.65rem;
+	border-radius: 999px;
+	opacity: 0.9;
+}
+
+.previewSurface {
+	border-radius: calc(var(--radius-lg) - 0.25rem);
+	padding: 0.9rem;
+	display: grid;
+	align-content: start;
+	gap: 0.55rem;
+	box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
+}
+
+.previewChip {
+	width: 2.8rem;
+	height: 0.55rem;
+	border-radius: 999px;
+	opacity: 0.95;
+}
+
+.previewLine,
+.previewLineShort {
+	height: 0.5rem;
+	border-radius: 999px;
+	background: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
+}
+
+.previewLineShort {
+	width: 58%;
+}
+
+.cardBody {
+	display: grid;
+	gap: var(--space-2);
+}
+
+.cardHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--space-3);
+}
+
+.cardTitle {
+	@include text-title;
+	line-height: 1.1;
+}
+
+.badge {
+	padding: 0.25rem 0.55rem;
+	border-radius: 999px;
+	border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border-subtle));
+	background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+	color: color-mix(in srgb, var(--color-accent) 44%, var(--color-text-primary));
+	@include text-label;
+	white-space: nowrap;
+}
+
+@media (max-width: 64rem) {
+	.grid {
+		grid-template-columns: 1fr;
+	}
+}
+
+@media (max-width: 48rem) {
+	.viewport {
+		padding: var(--space-4) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
+	}
+
+	.hero,
+	.card {
+		padding: var(--space-4);
+	}
+
+	.hero {
+		align-items: flex-start;
+	}
+
+	.title {
+		max-width: none;
+	}
+
+	.cardHeader {
+		align-items: flex-start;
+		flex-direction: column;
+	}
+}

Frontend/src/components/settings/ThemeSettingsPage/ThemeSettingsPage.tsx

@@ -0,0 +1,129 @@
+// Path: Frontend/src/components/settings/ThemeSettingsPage/ThemeSettingsPage.tsx
+
+import { For, Show, createMemo, createSignal, type JSX } from "solid-js";
+import { resolveAPIBase } from "../../../lib/api";
+import { Moon } from "../../../lib/icons";
+import { useAppShellData } from "../../app-shell/data/app-shell.context";
+import { applyThemePresetById, resolvePreferredThemePresetId } from "../../../helper/themeRuntime";
+import { themePresetMetas } from "../../../theme/presets";
+import styles from "./ThemeSettingsPage.module.scss";
+
+type SaveThemeResponse = {
+	data?: {
+		presetId?: string;
+	};
+	error?: { message?: string } | string;
+	message?: string;
+};
+
+export const ThemeSettingsPage = (): JSX.Element => {
+	const appShell = useAppShellData();
+	const [savingPresetId, setSavingPresetId] = createSignal<string | null>(null);
+	const [error, setError] = createSignal("");
+
+	const activePresetId = createMemo(() => {
+		return appShell.admin()?.themePresetId?.trim() || resolvePreferredThemePresetId();
+	});
+
+	const savePreset = async (presetId: string): Promise<void> => {
+		if (savingPresetId() || presetId === activePresetId()) {
+			return;
+		}
+
+		setSavingPresetId(presetId);
+		setError("");
+
+		try {
+			const response = await fetch(`${resolveAPIBase()}/settings/theme`, {
+				method: "PUT",
+				headers: {
+					"Content-Type": "application/json",
+					Accept: "application/json",
+				},
+				body: JSON.stringify({ presetId }),
+			});
+
+			const body = (await response.json().catch(() => ({}))) as SaveThemeResponse;
+			const errorMessage =
+				typeof body.message === "string"
+					? body.message
+					: typeof body.error === "string"
+						? body.error
+						: body.error?.message;
+
+			if (!response.ok) {
+				throw new Error(errorMessage || "Failed to save theme preset.");
+			}
+
+			await applyThemePresetById(presetId);
+			await appShell.reload();
+		} catch (saveError) {
+			setError(saveError instanceof Error ? saveError.message : "Failed to save theme preset.");
+		} finally {
+			setSavingPresetId(null);
+		}
+	};
+
+	return (
+		<main class={styles.viewport}>
+			<section class={styles.hero}>
+				<div class={styles.heroIcon}>
+					<Moon size={18} strokeWidth={2} />
+				</div>
+				<div class={styles.heroCopy}>
+					<h1 class={styles.title}>Theme Settings</h1>
+					<p class={styles.description}>Pick the theme preset for your account.</p>
+				</div>
+			</section>
+
+			<Show when={error()}>
+				<div class={styles.errorBanner} role="alert">
+					{error()}
+				</div>
+			</Show>
+
+			<section class={styles.grid}>
+				<For each={themePresetMetas}>
+					{(preset) => {
+						const isSelected = () => activePresetId() === preset.id;
+						const isSaving = () => savingPresetId() === preset.id;
+
+						return (
+							<button
+								type="button"
+								classList={{
+									[styles.card]: true,
+									[styles.cardSelected]: isSelected(),
+								}}
+								onClick={() => void savePreset(preset.id)}
+								disabled={Boolean(savingPresetId())}
+								aria-pressed={isSelected()}
+							>
+								<div class={styles.preview} aria-hidden="true">
+									<div class={styles.previewCanvas} style={{ background: preset.preview.canvas }}>
+										<div class={styles.previewTopbar} style={{ background: preset.preview.accent }} />
+										<div class={styles.previewSurface} style={{ background: preset.preview.surface }}>
+											<div class={styles.previewChip} style={{ background: preset.preview.accent }} />
+											<div class={styles.previewLine} />
+											<div class={styles.previewLineShort} />
+										</div>
+									</div>
+								</div>
+
+								<div class={styles.cardBody}>
+									<div class={styles.cardHeader}>
+										<h2 class={styles.cardTitle}>{preset.name}</h2>
+										<Show when={isSelected() || isSaving()}>
+											<span class={styles.badge}>{isSaving() ? "Saving..." : "Current"}</span>
+										</Show>
+									</div>
+									<p class={styles.cardDescription}>{preset.description}</p>
+								</div>
+							</button>
+						);
+					}}
+				</For>
+			</section>
+		</main>
+	);
+};

Frontend/src/components/top-bar/TopBar/ProfileMenu.tsx

@@ -1,6 +1,8 @@
+import { useNavigate } from "@solidjs/router";
 import { For, type JSX } from "solid-js";
 import { User } from "../../../lib/icons";
 import { useAppShellData } from "../../app-shell/data/app-shell.context";
+import { getWorkspaceSurfaceRoute } from "../../app-shell/data/workspace-routes";
 import { profileMenuSections } from "../../app-shell/data/shell.data";
 import styles from "./ProfileMenu.module.scss";
 
@@ -14,8 +16,17 @@ type ProfileMenuProps = {
 export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 	const variant = props.variant ?? "popover";
 	const appShellData = useAppShellData();
+	const navigate = useNavigate();
 	const activeUserProfile = () => appShellData.activeUserProfile();
 
+	const handleSelect = (actionId: string): void => {
+		if (actionId === "account-settings" || actionId === "security" || actionId === "theme-preferences") {
+			navigate(getWorkspaceSurfaceRoute("settings"));
+		}
+
+		props.onSelect();
+	};
+
 	return (
 		<div
 			id={props.id}
@@ -61,11 +72,11 @@ export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 											[styles.item]: true,
 											[styles.itemDanger]: item.tone === "danger",
 										}}
-										data-slot="profile-action"
-										data-action-id={item.id}
-										data-tone={item.tone ?? "default"}
-										onClick={props.onSelect}
-										>
+									data-slot="profile-action"
+									data-action-id={item.id}
+									data-tone={item.tone ?? "default"}
+									onClick={() => handleSelect(item.id)}
+									>
 											<span class={styles.itemIcon} aria-hidden="true">
 												<Icon size={16} strokeWidth={2} />
 											</span>

Frontend/src/components/workspace-navigation/MobileWorkspaceBrowser/MobileWorkspaceBrowser.parts.tsx

@@ -1,8 +1,10 @@
 // Path: Frontend/src/components/workspace-navigation/MobileWorkspaceBrowser/MobileWorkspaceBrowser.parts.tsx
 
+import { useLocation, useNavigate } from "@solidjs/router";
 import { For, Show, type JSX } from "solid-js";
 import { ChevronRight } from "../../../lib/icons";
 import { createLongPressGesture } from "../../../helper/createLongPressGesture";
+import { getWorkspaceSurfaceRoute } from "../../app-shell/data/workspace-routes";
 import {
 	createWorkspaceStaticTarget,
 	createWorkspaceTreeTarget,
@@ -72,8 +74,12 @@ export const StaticRow = (props: { item: SidebarItem }): JSX.Element => {
 export const WorkspaceStaticRow = (props: {
 	item: WorkspaceStaticItem;
 	onOpenActionSheet: (target: WorkspaceContextMenuTarget) => void;
+	onSelect: VoidFunction;
 }): JSX.Element => {
+	const navigate = useNavigate();
+	const location = useLocation();
 	const target = createWorkspaceStaticTarget(props.item);
+	const isActive = (): boolean => location.pathname === getWorkspaceSurfaceRoute(props.item.contextKind);
 	const longPress = createLongPressGesture({
 		onLongPress: () => {
 			props.onOpenActionSheet(target);
@@ -84,16 +90,20 @@ export const WorkspaceStaticRow = (props: {
 		<li
 			class={styles.treeListItem}
 			data-slot="mobile-workspace-static-item"
-			data-target-kind={target.kind}
-			onContextMenu={(event): void => {
-				event.preventDefault();
-				props.onOpenActionSheet(target);
-			}}
-			{...longPress}
-		>
-			<StaticRow item={props.item} />
-		</li>
-	);
+				data-target-kind={target.kind}
+				onContextMenu={(event): void => {
+					event.preventDefault();
+					props.onOpenActionSheet(target);
+				}}
+				onClick={(): void => {
+					navigate(getWorkspaceSurfaceRoute(props.item.contextKind));
+					props.onSelect();
+				}}
+				{...longPress}
+			>
+				<StaticRow item={{ ...props.item, active: isActive() }} />
+			</li>
+		);
 };
 
 export const WorkspaceTreeBranch = (props: {

Frontend/src/components/workspace-navigation/MobileWorkspaceBrowser/MobileWorkspaceBrowser.tsx

@@ -72,12 +72,14 @@ export const MobileWorkspaceBrowser = (props: MobileWorkspaceBrowserProps): JSX.
 					<div class={styles.sheetBody} data-slot="mobile-workspace-body">
 						<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="workspace">
 							<span class={styles.sectionLabel}>Workspace</span>
-							<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="workspace">
-								<For each={workspaceStaticItems}>
-									{(item): JSX.Element => <WorkspaceStaticRow item={item} onOpenActionSheet={openActionSheet} />}
-								</For>
-							</ul>
-						</section>
+						<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="workspace">
+							<For each={workspaceStaticItems}>
+								{(item): JSX.Element => (
+									<WorkspaceStaticRow item={item} onOpenActionSheet={openActionSheet} onSelect={props.onClose} />
+								)}
+							</For>
+						</ul>
+					</section>
 
 						<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="items">
 							<span class={styles.sectionLabel}>Items</span>

Frontend/src/components/workspace-navigation/WorkspaceSidebar/WorkspaceSidebar.parts.tsx

@@ -1,7 +1,9 @@
 // Path: Frontend/src/components/workspace-navigation/WorkspaceSidebar/WorkspaceSidebar.parts.tsx
 
+import { useLocation, useNavigate } from "@solidjs/router";
 import { For, Show, type JSX } from "solid-js";
 import { ChevronRight, Folder } from "../../../lib/icons";
+import { getWorkspaceSurfaceRoute } from "../../app-shell/data/workspace-routes";
 import {
 	createWorkspaceStaticTarget,
 	createWorkspaceTreeTarget,
@@ -66,8 +68,11 @@ export const WorkspaceHomeEntry = (props: {
 	onOpenContextMenu: (event: MouseEvent, target: WorkspaceContextMenuTarget) => void;
 	onOpenContextMenuFromKeyboard: (element: HTMLElement, target: WorkspaceContextMenuTarget) => void;
 }): JSX.Element => {
+	const navigate = useNavigate();
+	const location = useLocation();
 	const Icon = props.item.icon;
 	const target = createWorkspaceStaticTarget(props.item);
+	const isActive = (): boolean => location.pathname === getWorkspaceSurfaceRoute(props.item.contextKind);
 
 	return (
 		<li>
@@ -75,14 +80,17 @@ export const WorkspaceHomeEntry = (props: {
 				type="button"
 				classList={{
 					[styles.navItem]: true,
-					[styles.navItemActive]: !!props.item.active,
+					[styles.navItemActive]: isActive(),
 				}}
-				aria-current={props.item.active ? "page" : undefined}
+				aria-current={isActive() ? "page" : undefined}
 				aria-label={props.item.label}
 				title={props.item.label}
 				data-slot="workspace-static-item"
 				data-target-kind={target.kind}
-				data-active={props.item.active ? "true" : "false"}
+				data-active={isActive() ? "true" : "false"}
+				onClick={(): void => {
+					navigate(getWorkspaceSurfaceRoute(props.item.contextKind));
+				}}
 				onContextMenu={(event): void => {
 					event.stopPropagation();
 					props.onOpenContextMenu(event, target);

Frontend/src/helper/themeRuntime.ts

@@ -36,6 +36,29 @@ const persistThemePreset = (themeDefinition: ThemeDefinition): void => {
 	localStorage.setItem(THEME_PRESET_STORAGE_KEY, themeDefinition.id);
 };
 
+const fetchThemeDefinitionByPresetId = async (presetId: string): Promise<ThemeDefinition | null> => {
+	const themePath = resolveThemePresetPath(presetId) ?? defaultThemePresetPath;
+
+	const response = await fetch(themePath, {
+		headers: {
+			Accept: "application/json",
+		},
+	});
+
+	if (!response.ok) {
+		throw new Error(`Theme preset request failed with status ${response.status}.`);
+	}
+
+	const candidate = (await response.json()) as unknown;
+	const result = validateThemeDefinition(candidate);
+
+	if (!result.success) {
+		throw new Error(result.errors.join(" "));
+	}
+
+	return result.data;
+};
+
 const setDocumentThemeMode = (theme: Theme): void => {
 	const rootElement = getRootElement();
 
@@ -111,6 +134,21 @@ export const resolvePreferredThemePresetPath = (): string => {
 	return resolveThemePresetPath(presetId) ?? defaultThemePresetPath;
 };
 
+export const applyThemePresetById = async (presetId: string, theme: Theme = getDocumentTheme()): Promise<ThemeDefinition | null> => {
+	try {
+		const definition = await fetchThemeDefinitionByPresetId(presetId);
+		if (!definition) {
+			return null;
+		}
+
+		applyThemeDefinition(definition, theme);
+		return definition;
+	} catch (error) {
+		console.error("Failed to apply theme preset.", error);
+		return null;
+	}
+};
+
 export const initializeThemeRuntime = async (): Promise<ThemeDefinition | null> => {
 	if (typeof window === "undefined") {
 		return null;
@@ -124,26 +162,7 @@ export const initializeThemeRuntime = async (): Promise<ThemeDefinition | null>
 	if (!themeInitializationPromise) {
 		themeInitializationPromise = (async (): Promise<ThemeDefinition | null> => {
 			try {
-				const response = await fetch(resolvePreferredThemePresetPath(), {
-					headers: {
-						Accept: "application/json",
-					},
-				});
-
-				if (!response.ok) {
-					throw new Error(`Theme preset request failed with status ${response.status}.`);
-				}
-
-				const candidate = (await response.json()) as unknown;
-				const result = validateThemeDefinition(candidate);
-
-				if (!result.success) {
-					throw new Error(result.errors.join(" "));
-				}
-
-				applyThemeDefinition(result.data, getDocumentTheme());
-
-				return result.data;
+				return await applyThemePresetById(resolvePreferredThemePresetId(), getDocumentTheme());
 			} catch (error) {
 				console.error("Failed to initialize theme runtime.", error);
 				return null;

Frontend/src/routes/index.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/index.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const IndexRoute = (): JSX.Element => {
+	return <Navigate href="/workspace/home" />;
+};
+
+export default IndexRoute;

Frontend/src/routes/settings.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/settings.tsx
+
+import type { RouteSectionProps } from "@solidjs/router";
+import { AppShell } from "../components/app-shell/AppShell/AppShell";
+
+const SettingsLayoutRoute = (props: RouteSectionProps) => {
+	return <AppShell>{props.children}</AppShell>;
+};
+
+export default SettingsLayoutRoute;

Frontend/src/routes/settings/account.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/account.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsAccountRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Account Settings"
+			description="Manage the active user account, profile details, notifications, and personal defaults."
+			focus={["Profile", "Notifications", "Personal defaults"]}
+		/>
+	);
+};
+
+export default SettingsAccountRoute;

Frontend/src/routes/settings/index.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/settings/index.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsWorkspace } from "../../components/settings/SettingsWorkspace/SettingsWorkspace";
+
+const SettingsIndexRoute = (): JSX.Element => {
+	return <SettingsWorkspace />;
+};
+
+export default SettingsIndexRoute;

Frontend/src/routes/settings/members.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/members.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsMembersRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Members & Roles"
+			description="Manage people, invitations, roles, and permission assignments across the organization structure."
+			focus={["Members", "Roles", "Invitations"]}
+		/>
+	);
+};
+
+export default SettingsMembersRoute;

Frontend/src/routes/settings/security.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/security.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsSecurityRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Security Settings"
+			description="Review sessions, access controls, and account recovery settings for users and organizations."
+			focus={["Sessions", "Access controls", "Recovery"]}
+		/>
+	);
+};
+
+export default SettingsSecurityRoute;

Frontend/src/routes/settings/server.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/server.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsServerRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Server Settings"
+			description="Manage server-wide controls, identity, and policy defaults that apply across workspaces."
+			focus={["Server identity", "Policies", "Operational defaults"]}
+		/>
+	);
+};
+
+export default SettingsServerRoute;

Frontend/src/routes/settings/theme.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/settings/theme.tsx
+
+import { type JSX } from "solid-js";
+import { ThemeSettingsPage } from "../../components/settings/ThemeSettingsPage/ThemeSettingsPage";
+
+const SettingsThemeRoute = (): JSX.Element => {
+	return <ThemeSettingsPage />;
+};
+
+export default SettingsThemeRoute;

Frontend/src/routes/settings/workspace.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/workspace.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsWorkspaceRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Workspace Settings"
+			description="Control workspace-level behavior, structure defaults, and the way content behaves inside this workspace."
+			focus={["Navigation defaults", "Workspace behavior", "Content rules"]}
+		/>
+	);
+};
+
+export default SettingsWorkspaceRoute;

Frontend/src/routes/workspace.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace.tsx
+
+import type { RouteSectionProps } from "@solidjs/router";
+import { AppShell } from "../components/app-shell/AppShell/AppShell";
+
+const WorkspaceLayout = (props: RouteSectionProps) => {
+	return <AppShell>{props.children}</AppShell>;
+};
+
+export default WorkspaceLayout;

Frontend/src/routes/workspace/home.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/home.tsx
+
+import { type JSX } from "solid-js";
+import { WorkspaceHome } from "../../components/workspace-home/WorkspaceHome";
+
+const WorkspaceHomeRoute = (): JSX.Element => {
+	return <WorkspaceHome />;
+};
+
+export default WorkspaceHomeRoute;

Frontend/src/routes/workspace/index.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/index.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceIndexRoute = (): JSX.Element => {
+	return <Navigate href="/workspace/home" />;
+};
+
+export default WorkspaceIndexRoute;

Frontend/src/routes/workspace/settings.tsx

@@ -0,0 +1,9 @@
+// Path: Frontend/src/routes/workspace/settings.tsx
+
+import type { RouteSectionProps } from "@solidjs/router";
+
+const WorkspaceSettingsLayoutRoute = (props: RouteSectionProps) => {
+	return props.children;
+};
+
+export default WorkspaceSettingsLayoutRoute;

Frontend/src/routes/workspace/settings/account.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/account.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsAccountRoute = (): JSX.Element => {
+	return <Navigate href="/settings/account" />;
+};
+
+export default WorkspaceSettingsAccountRoute;

Frontend/src/routes/workspace/settings/index.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/index.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsIndexRoute = (): JSX.Element => {
+	return <Navigate href="/settings" />;
+};
+
+export default WorkspaceSettingsIndexRoute;

Frontend/src/routes/workspace/settings/members.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/members.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsMembersRoute = (): JSX.Element => {
+	return <Navigate href="/settings/members" />;
+};
+
+export default WorkspaceSettingsMembersRoute;

Frontend/src/routes/workspace/settings/security.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/security.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsSecurityRoute = (): JSX.Element => {
+	return <Navigate href="/settings/security" />;
+};
+
+export default WorkspaceSettingsSecurityRoute;

Frontend/src/routes/workspace/settings/server.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/server.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsServerRoute = (): JSX.Element => {
+	return <Navigate href="/settings/server" />;
+};
+
+export default WorkspaceSettingsServerRoute;

Frontend/src/routes/workspace/settings/theme.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/theme.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsThemeRoute = (): JSX.Element => {
+	return <Navigate href="/settings/theme" />;
+};
+
+export default WorkspaceSettingsThemeRoute;

Frontend/src/routes/workspace/settings/workspace.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/workspace.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsWorkspaceRoute = (): JSX.Element => {
+	return <Navigate href="/settings/workspace" />;
+};
+
+export default WorkspaceSettingsWorkspaceRoute;

Frontend/src/theme/presets.ts

@@ -8,14 +8,31 @@ export const themePresetMetas = [
 		name: "Moku Default",
 		description: "The baseline Moku theme preset, matching the original shell styling tokens.",
 		path: "/themes/moku-default.json",
+		preview: {
+			canvas: "hsl(210 20% 99%)",
+			surface: "hsl(0 0% 100%)",
+			accent: "hsl(221 83% 53%)",
+		},
 	},
 	{
 		id: "moku-midnight",
 		name: "Moku Midnight",
 		description: "The active warm, low-light Moku theme preset inspired by the Midnight Discord palette direction.",
 		path: "/themes/moku-midnight.json",
+		preview: {
+			canvas: "#282828",
+			surface: "hsl(20 8% 16%)",
+			accent: "#d3869b",
+		},
 	},
-] as const satisfies readonly (Pick<ThemeDefinition, "id" | "name" | "description"> & { path: string })[];
+] as const satisfies readonly (Pick<ThemeDefinition, "id" | "name" | "description"> & {
+	path: string;
+	preview: {
+		canvas: string;
+		surface: string;
+		accent: string;
+	};
+})[];
 
 export const defaultThemePresetPath = "/themes/moku-midnight.json";