diff --git a/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/page.tsx
new file mode 100644
index 000000000..8dd7eb38e
--- /dev/null
+++ b/surfsense_web/app/dashboard/[search_space_id]/search-space-settings/page.tsx
@@ -0,0 +1,40 @@
+import {
+	SearchSpaceSettingsPanel,
+	type SearchSpaceSettingsTab,
+} from "@/components/settings/search-space-settings-panel";
+
+const SEARCH_SPACE_SETTINGS_TABS = new Set<string>([
+	"general",
+	"roles",
+	"models",
+	"image-models",
+	"vision-models",
+	"team-roles",
+	"prompts",
+	"team-memory",
+	"public-links",
+]);
+
+function getInitialTab(tab: string | string[] | undefined): SearchSpaceSettingsTab {
+	const value = Array.isArray(tab) ? tab[0] : tab;
+	return value && SEARCH_SPACE_SETTINGS_TABS.has(value)
+		? (value as SearchSpaceSettingsTab)
+		: "general";
+}
+
+export default async function SearchSpaceSettingsPage({
+	params,
+	searchParams,
+}: {
+	params: Promise<{ search_space_id: string }>;
+	searchParams: Promise<{ tab?: string | string[] }>;
+}) {
+	const [{ search_space_id }, resolvedSearchParams] = await Promise.all([params, searchParams]);
+
+	return (
+		<SearchSpaceSettingsPanel
+			searchSpaceId={search_space_id}
+			initialTab={getInitialTab(resolvedSearchParams.tab)}
+		/>
+	);
+}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
index e93ad1799..cc83148a3 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import {
 	Calendar,
 	Check,
@@ -20,6 +20,7 @@ import {
 	UserPlus,
 	Users,
 } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import {
@@ -31,7 +32,6 @@ import {
 	updateMemberMutationAtom,
 } from "@/atoms/members/members-mutation.atoms";
 import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
-import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -346,6 +346,7 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
 						{owners.map((member) => (
 							<MemberRow
 								key={`member-${member.id}`}
+								searchSpaceId={searchSpaceId}
 								member={member}
 								roles={roles}
 								canManageRoles={canManageRoles}
@@ -357,6 +358,7 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
 						{paginatedMembers.map((member) => (
 							<MemberRow
 								key={`member-${member.id}`}
+								searchSpaceId={searchSpaceId}
 								member={member}
 								roles={roles}
 								canManageRoles={canManageRoles}
@@ -433,6 +435,7 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
 }
 
 function MemberRow({
+	searchSpaceId,
 	member,
 	roles,
 	canManageRoles,
@@ -440,6 +443,7 @@ function MemberRow({
 	onUpdateRole,
 	onRemoveMember,
 }: {
+	searchSpaceId: number;
 	member: Membership;
 	roles: Role[];
 	canManageRoles: boolean;
@@ -447,7 +451,7 @@ function MemberRow({
 	onUpdateRole: (membershipId: number, roleId: number | null) => Promise<Membership>;
 	onRemoveMember: (membershipId: number) => Promise<boolean>;
 }) {
-	const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
+	const router = useRouter();
 	const initials = getAvatarInitials(member);
 	const displayName = member.user_display_name || member.user_email || "Unknown";
 	const roleName = member.is_owner ? "Owner" : member.role?.name || "No role";
@@ -541,10 +545,7 @@ function MemberRow({
 							<DropdownMenuSeparator className="dark:bg-white/5" />
 							<DropdownMenuItem
 								onClick={() =>
-									setSearchSpaceSettingsDialog({
-										open: true,
-										initialTab: "team-roles",
-									})
+									router.push(`/dashboard/${searchSpaceId}/search-space-settings?tab=team-roles`)
 								}
 							>
 								Manage Roles
diff --git a/surfsense_web/atoms/layout/dialogs.atom.ts b/surfsense_web/atoms/layout/dialogs.atom.ts
new file mode 100644
index 000000000..e9ee0c6ea
--- /dev/null
+++ b/surfsense_web/atoms/layout/dialogs.atom.ts
@@ -0,0 +1,5 @@
+import { atom } from "jotai";
+
+export const teamDialogAtom = atom<boolean>(false);
+
+export const announcementsDialogAtom = atom<boolean>(false);
diff --git a/surfsense_web/atoms/settings/settings-dialog.atoms.ts b/surfsense_web/atoms/settings/settings-dialog.atoms.ts
deleted file mode 100644
index e066fc8ca..000000000
--- a/surfsense_web/atoms/settings/settings-dialog.atoms.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { atom } from "jotai";
-
-export interface SearchSpaceSettingsDialogState {
-	open: boolean;
-	initialTab: string;
-}
-
-export const searchSpaceSettingsDialogAtom = atom<SearchSpaceSettingsDialogState>({
-	open: false,
-	initialTab: "general",
-});
-
-export const teamDialogAtom = atom<boolean>(false);
-
-export const announcementsDialogAtom = atom<boolean>(false);
diff --git a/surfsense_web/components/announcements/AnnouncementsDialog.tsx b/surfsense_web/components/announcements/AnnouncementsDialog.tsx
index d624444c4..54653b535 100644
--- a/surfsense_web/components/announcements/AnnouncementsDialog.tsx
+++ b/surfsense_web/components/announcements/AnnouncementsDialog.tsx
@@ -2,7 +2,7 @@
 
 import { useAtom } from "jotai";
 import { useEffect } from "react";
-import { announcementsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
+import { announcementsDialogAtom } from "@/atoms/layout/dialogs.atom";
 import { AnnouncementCard } from "@/components/announcements/AnnouncementCard";
 import { AnnouncementsEmptyState } from "@/components/announcements/AnnouncementsEmptyState";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index 001259236..ed671d374 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import { AlertTriangle, Settings } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
@@ -10,7 +11,6 @@ import {
 	llmPreferencesAtom,
 } from "@/atoms/new-llm-config/new-llm-config-query.atoms";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
-import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
@@ -44,8 +44,8 @@ interface ConnectorIndicatorProps {
 
 export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, ConnectorIndicatorProps>(
 	(_props, ref) => {
+		const router = useRouter();
 		const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
-		const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
 		const { data: preferences = {}, isFetching: preferencesLoading } =
 			useAtomValue(llmPreferencesAtom);
 		const { data: globalConfigs = [], isFetching: globalConfigsLoading } =
@@ -397,10 +397,9 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 														variant="outline"
 														onClick={() => {
 															handleOpenChange(false);
-															setSearchSpaceSettingsDialog({
-																open: true,
-																initialTab: "models",
-															});
+															router.push(
+																`/dashboard/${searchSpaceId}/search-space-settings?tab=models`
+															);
 														}}
 													>
 														<Settings className="mr-2 h-4 w-4" />
diff --git a/surfsense_web/components/assistant-ui/document-upload-popup.tsx b/surfsense_web/components/assistant-ui/document-upload-popup.tsx
index 13683162f..d4482a01b 100644
--- a/surfsense_web/components/assistant-ui/document-upload-popup.tsx
+++ b/surfsense_web/components/assistant-ui/document-upload-popup.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import { AlertTriangle, Settings } from "lucide-react";
+import { useRouter } from "next/navigation";
 import {
 	createContext,
 	type FC,
@@ -16,7 +17,6 @@ import {
 	llmPreferencesAtom,
 } from "@/atoms/new-llm-config/new-llm-config-query.atoms";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
-import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { DocumentUploadTab } from "@/components/sources/DocumentUploadTab";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
@@ -98,8 +98,8 @@ const DocumentUploadPopupContent: FC<{
 	isOpen: boolean;
 	onOpenChange: (open: boolean) => void;
 }> = ({ isOpen, onOpenChange }) => {
+	const router = useRouter();
 	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
-	const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
 	const { data: preferences = {}, isFetching: preferencesLoading } =
 		useAtomValue(llmPreferencesAtom);
 	const { data: globalConfigs = [], isFetching: globalConfigsLoading } =
@@ -164,10 +164,7 @@ const DocumentUploadPopupContent: FC<{
 										variant="outline"
 										onClick={() => {
 											onOpenChange(false);
-											setSearchSpaceSettingsDialog({
-												open: true,
-												initialTab: "models",
-											});
+											router.push(`/dashboard/${searchSpaceId}/search-space-settings?tab=models`);
 										}}
 									>
 										<Settings className="mr-2 h-4 w-4" />
diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
index c1fe3e5c1..d46895a0a 100644
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@@ -11,19 +11,14 @@ import { toast } from "sonner";
 import { currentThreadAtom, resetCurrentThreadAtom } from "@/atoms/chat/current-thread.atom";
 import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
 import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
+import { announcementsDialogAtom, teamDialogAtom } from "@/atoms/layout/dialogs.atom";
 import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
 import { deleteSearchSpaceMutationAtom } from "@/atoms/search-spaces/search-space-mutation.atoms";
 import { searchSpacesAtom } from "@/atoms/search-spaces/search-space-query.atoms";
-import {
-	announcementsDialogAtom,
-	searchSpaceSettingsDialogAtom,
-	teamDialogAtom,
-} from "@/atoms/settings/settings-dialog.atoms";
 import { removeChatTabAtom, syncChatTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { ActionLogDialog } from "@/components/agent-action-log/action-log-dialog";
 import { AnnouncementsDialog } from "@/components/announcements/AnnouncementsDialog";
-import { SearchSpaceSettingsDialog } from "@/components/settings/search-space-settings-dialog";
 import { TeamDialog } from "@/components/settings/team-dialog";
 import {
 	AlertDialog,
@@ -380,7 +375,6 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		setIsCreateSearchSpaceDialogOpen(true);
 	}, []);
 
-	const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
 	const setTeamDialogOpen = useSetAtom(teamDialogAtom);
 	const setAnnouncementsDialog = useSetAtom(announcementsDialogAtom);
 
@@ -393,10 +387,10 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	}, [setAnnouncementsDialog]);
 
 	const handleSearchSpaceSettings = useCallback(
-		(_space: SearchSpace) => {
-			setSearchSpaceSettingsDialog({ open: true, initialTab: "general" });
+		(space: SearchSpace) => {
+			router.push(`/dashboard/${space.id}/search-space-settings`);
 		},
-		[setSearchSpaceSettingsDialog]
+		[router]
 	);
 
 	const handleSearchSpaceDeleteClick = useCallback((space: SearchSpace) => {
@@ -568,8 +562,8 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	);
 
 	const handleSettings = useCallback(() => {
-		setSearchSpaceSettingsDialog({ open: true, initialTab: "general" });
-	}, [setSearchSpaceSettingsDialog]);
+		router.push(`/dashboard/${searchSpaceId}/search-space-settings`);
+	}, [router, searchSpaceId]);
 
 	const handleManageMembers = useCallback(() => {
 		setTeamDialogOpen(true);
@@ -666,10 +660,12 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	// Detect if we're on the chat page (needs overflow-hidden for chat's own scroll)
 	const isChatPage = pathname?.includes("/new-chat") ?? false;
 	const isUserSettingsPage = pathname?.endsWith("/user-settings") === true;
+	const isSearchSpaceSettingsPage = pathname?.endsWith("/search-space-settings") === true;
 	const useWorkspacePanel =
 		pathname?.endsWith("/buy-more") === true ||
 		pathname?.endsWith("/more-pages") === true ||
-		isUserSettingsPage;
+		isUserSettingsPage ||
+		isSearchSpaceSettingsPage;
 
 	return (
 		<>
@@ -709,9 +705,13 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 				isChatPage={isChatPage}
 				useWorkspacePanel={useWorkspacePanel}
 				workspacePanelViewportClassName={
-					isUserSettingsPage ? "items-start justify-center px-6 py-8 md:px-10 md:py-10" : undefined
+					isUserSettingsPage || isSearchSpaceSettingsPage
+						? "items-start justify-center px-6 py-8 md:px-10 md:py-10"
+						: undefined
+				}
+				workspacePanelContentClassName={
+					isUserSettingsPage || isSearchSpaceSettingsPage ? "max-w-5xl" : undefined
 				}
-				workspacePanelContentClassName={isUserSettingsPage ? "max-w-5xl" : undefined}
 				isLoadingChats={isLoadingThreads}
 				activeSlideoutPanel={activeSlideoutPanel}
 				onSlideoutPanelChange={setActiveSlideoutPanel}
@@ -891,7 +891,6 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 				onOpenChange={setIsCreateSearchSpaceDialogOpen}
 			/>
 
-			<SearchSpaceSettingsDialog searchSpaceId={Number(searchSpaceId)} />
 			<TeamDialog searchSpaceId={Number(searchSpaceId)} />
 			<AnnouncementsDialog />
 
diff --git a/surfsense_web/components/new-chat/chat-share-button.tsx b/surfsense_web/components/new-chat/chat-share-button.tsx
index f8a9f55ff..3b4ff0654 100644
--- a/surfsense_web/components/new-chat/chat-share-button.tsx
+++ b/surfsense_web/components/new-chat/chat-share-button.tsx
@@ -3,13 +3,13 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAtomValue, useSetAtom } from "jotai";
 import { Earth, User, Users } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 import { useCallback, useState } from "react";
 import { toast } from "sonner";
 import { currentThreadAtom, setThreadVisibilityAtom } from "@/atoms/chat/current-thread.atom";
 import { myAccessAtom } from "@/atoms/members/members-query.atoms";
 import { createPublicChatSnapshotMutationAtom } from "@/atoms/public-chat-snapshots/public-chat-snapshots-mutation.atoms";
-import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -49,8 +49,8 @@ const visibilityOptions: {
 
 export function ChatShareButton({ thread, onVisibilityChange, className }: ChatShareButtonProps) {
 	const queryClient = useQueryClient();
+	const router = useRouter();
 	const [open, setOpen] = useState(false);
-	const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
 
 	// Use Jotai atom for visibility (single source of truth)
 	const currentThreadState = useAtomValue(currentThreadAtom);
@@ -148,10 +148,9 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 							variant="ghost"
 							size="icon"
 							onClick={() =>
-								setSearchSpaceSettingsDialog({
-									open: true,
-									initialTab: "public-links",
-								})
+								router.push(
+									`/dashboard/${thread.search_space_id}/search-space-settings?tab=public-links`
+								)
 							}
 							className="size-8 bg-muted/50 hover:bg-accent hover:text-accent-foreground"
 						>
diff --git a/surfsense_web/components/settings/search-space-settings-dialog.tsx b/surfsense_web/components/settings/search-space-settings-dialog.tsx
deleted file mode 100644
index 2a7ba82b6..000000000
--- a/surfsense_web/components/settings/search-space-settings-dialog.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-"use client";
-
-import { useAtom } from "jotai";
-import {
-	BookText,
-	Bot,
-	Brain,
-	CircleUser,
-	Earth,
-	ImageIcon,
-	ListChecks,
-	ScanEye,
-	UserKey,
-} from "lucide-react";
-import dynamic from "next/dynamic";
-import { useTranslations } from "next-intl";
-import type React from "react";
-import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
-import { SettingsDialog } from "@/components/settings/settings-dialog";
-
-const GeneralSettingsManager = dynamic(
-	() =>
-		import("@/components/settings/general-settings-manager").then((m) => ({
-			default: m.GeneralSettingsManager,
-		})),
-	{ ssr: false }
-);
-const AgentModelManager = dynamic(
-	() =>
-		import("@/components/settings/agent-model-manager").then((m) => ({
-			default: m.AgentModelManager,
-		})),
-	{ ssr: false }
-);
-const LLMRoleManager = dynamic(
-	() =>
-		import("@/components/settings/llm-role-manager").then((m) => ({ default: m.LLMRoleManager })),
-	{ ssr: false }
-);
-const ImageModelManager = dynamic(
-	() =>
-		import("@/components/settings/image-model-manager").then((m) => ({
-			default: m.ImageModelManager,
-		})),
-	{ ssr: false }
-);
-const VisionModelManager = dynamic(
-	() =>
-		import("@/components/settings/vision-model-manager").then((m) => ({
-			default: m.VisionModelManager,
-		})),
-	{ ssr: false }
-);
-const RolesManager = dynamic(
-	() => import("@/components/settings/roles-manager").then((m) => ({ default: m.RolesManager })),
-	{ ssr: false }
-);
-const PromptConfigManager = dynamic(
-	() =>
-		import("@/components/settings/prompt-config-manager").then((m) => ({
-			default: m.PromptConfigManager,
-		})),
-	{ ssr: false }
-);
-const PublicChatSnapshotsManager = dynamic(
-	() =>
-		import("@/components/public-chat-snapshots/public-chat-snapshots-manager").then((m) => ({
-			default: m.PublicChatSnapshotsManager,
-		})),
-	{ ssr: false }
-);
-const TeamMemoryManager = dynamic(
-	() =>
-		import("@/components/settings/team-memory-manager").then((m) => ({
-			default: m.TeamMemoryManager,
-		})),
-	{ ssr: false }
-);
-
-interface SearchSpaceSettingsDialogProps {
-	searchSpaceId: number;
-}
-
-export function SearchSpaceSettingsDialog({ searchSpaceId }: SearchSpaceSettingsDialogProps) {
-	const t = useTranslations("searchSpaceSettings");
-	const [state, setState] = useAtom(searchSpaceSettingsDialogAtom);
-
-	const navItems = [
-		{ value: "general", label: t("nav_general"), icon: <CircleUser className="h-4 w-4" /> },
-		{ value: "roles", label: t("nav_role_assignments"), icon: <ListChecks className="h-4 w-4" /> },
-		{ value: "models", label: t("nav_agent_models"), icon: <Bot className="h-4 w-4" /> },
-		{
-			value: "image-models",
-			label: t("nav_image_models"),
-			icon: <ImageIcon className="h-4 w-4" />,
-		},
-		{
-			value: "vision-models",
-			label: t("nav_vision_models"),
-			icon: <ScanEye className="h-4 w-4" />,
-		},
-		{ value: "team-roles", label: t("nav_team_roles"), icon: <UserKey className="h-4 w-4" /> },
-		{
-			value: "prompts",
-			label: t("nav_system_instructions"),
-			icon: <BookText className="h-4 w-4" />,
-		},
-		{
-			value: "team-memory",
-			label: "Team Memory",
-			icon: <Brain className="h-4 w-4" />,
-		},
-		{ value: "public-links", label: t("nav_public_links"), icon: <Earth className="h-4 w-4" /> },
-	];
-
-	const content: Record<string, React.ReactNode> = {
-		general: <GeneralSettingsManager searchSpaceId={searchSpaceId} />,
-		models: <AgentModelManager searchSpaceId={searchSpaceId} />,
-		roles: <LLMRoleManager key={searchSpaceId} searchSpaceId={searchSpaceId} />,
-		"image-models": <ImageModelManager searchSpaceId={searchSpaceId} />,
-		"vision-models": <VisionModelManager searchSpaceId={searchSpaceId} />,
-		"team-roles": <RolesManager searchSpaceId={searchSpaceId} />,
-		prompts: <PromptConfigManager searchSpaceId={searchSpaceId} />,
-		"team-memory": <TeamMemoryManager searchSpaceId={searchSpaceId} />,
-		"public-links": <PublicChatSnapshotsManager searchSpaceId={searchSpaceId} />,
-	};
-
-	return (
-		<SettingsDialog
-			open={state.open}
-			onOpenChange={(open) => setState((prev) => ({ ...prev, open }))}
-			title={t("title")}
-			navItems={navItems}
-			activeItem={state.initialTab}
-			onItemChange={(tab) => setState((prev) => ({ ...prev, initialTab: tab }))}
-		>
-			<div className="pt-4">{content[state.initialTab]}</div>
-		</SettingsDialog>
-	);
-}
diff --git a/surfsense_web/components/settings/search-space-settings-panel.tsx b/surfsense_web/components/settings/search-space-settings-panel.tsx
new file mode 100644
index 000000000..248b2c585
--- /dev/null
+++ b/surfsense_web/components/settings/search-space-settings-panel.tsx
@@ -0,0 +1,245 @@
+"use client";
+
+import {
+	BookText,
+	Bot,
+	Brain,
+	CircleUser,
+	Earth,
+	ImageIcon,
+	ListChecks,
+	ScanEye,
+	UserKey,
+} from "lucide-react";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const GeneralSettingsManager = dynamic(
+	() =>
+		import("@/components/settings/general-settings-manager").then((m) => ({
+			default: m.GeneralSettingsManager,
+		})),
+	{ ssr: false }
+);
+const AgentModelManager = dynamic(
+	() =>
+		import("@/components/settings/agent-model-manager").then((m) => ({
+			default: m.AgentModelManager,
+		})),
+	{ ssr: false }
+);
+const LLMRoleManager = dynamic(
+	() =>
+		import("@/components/settings/llm-role-manager").then((m) => ({ default: m.LLMRoleManager })),
+	{ ssr: false }
+);
+const ImageModelManager = dynamic(
+	() =>
+		import("@/components/settings/image-model-manager").then((m) => ({
+			default: m.ImageModelManager,
+		})),
+	{ ssr: false }
+);
+const VisionModelManager = dynamic(
+	() =>
+		import("@/components/settings/vision-model-manager").then((m) => ({
+			default: m.VisionModelManager,
+		})),
+	{ ssr: false }
+);
+const RolesManager = dynamic(
+	() => import("@/components/settings/roles-manager").then((m) => ({ default: m.RolesManager })),
+	{ ssr: false }
+);
+const PromptConfigManager = dynamic(
+	() =>
+		import("@/components/settings/prompt-config-manager").then((m) => ({
+			default: m.PromptConfigManager,
+		})),
+	{ ssr: false }
+);
+const PublicChatSnapshotsManager = dynamic(
+	() =>
+		import("@/components/public-chat-snapshots/public-chat-snapshots-manager").then((m) => ({
+			default: m.PublicChatSnapshotsManager,
+		})),
+	{ ssr: false }
+);
+const TeamMemoryManager = dynamic(
+	() =>
+		import("@/components/settings/team-memory-manager").then((m) => ({
+			default: m.TeamMemoryManager,
+		})),
+	{ ssr: false }
+);
+
+export type SearchSpaceSettingsTab =
+	| "general"
+	| "roles"
+	| "models"
+	| "image-models"
+	| "vision-models"
+	| "team-roles"
+	| "prompts"
+	| "team-memory"
+	| "public-links";
+
+interface SearchSpaceSettingsPanelProps {
+	searchSpaceId: string;
+	initialTab?: SearchSpaceSettingsTab;
+}
+
+export function SearchSpaceSettingsPanel({
+	searchSpaceId,
+	initialTab = "general",
+}: SearchSpaceSettingsPanelProps) {
+	const t = useTranslations("searchSpaceSettings");
+	const router = useRouter();
+	const numericSearchSpaceId = Number(searchSpaceId);
+	const [activeTab, setActiveTab] = useState<SearchSpaceSettingsTab>(initialTab);
+	const [tabScrollPos, setTabScrollPos] = useState<"start" | "middle" | "end">("start");
+
+	useEffect(() => {
+		setActiveTab(initialTab);
+	}, [initialTab]);
+
+	const handleTabScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+		const el = e.currentTarget;
+		const atStart = el.scrollLeft <= 2;
+		const atEnd = el.scrollWidth - el.scrollLeft - el.clientWidth <= 2;
+		setTabScrollPos(atStart ? "start" : atEnd ? "end" : "middle");
+	}, []);
+
+	const navItems = useMemo(
+		() => [
+			{ value: "general", label: t("nav_general"), icon: <CircleUser className="h-4 w-4" /> },
+			{ value: "roles", label: t("nav_role_assignments"), icon: <ListChecks className="h-4 w-4" /> },
+			{ value: "models", label: t("nav_agent_models"), icon: <Bot className="h-4 w-4" /> },
+			{
+				value: "image-models",
+				label: t("nav_image_models"),
+				icon: <ImageIcon className="h-4 w-4" />,
+			},
+			{
+				value: "vision-models",
+				label: t("nav_vision_models"),
+				icon: <ScanEye className="h-4 w-4" />,
+			},
+			{ value: "team-roles", label: t("nav_team_roles"), icon: <UserKey className="h-4 w-4" /> },
+			{
+				value: "prompts",
+				label: t("nav_system_instructions"),
+				icon: <BookText className="h-4 w-4" />,
+			},
+			{
+				value: "team-memory",
+				label: "Team Memory",
+				icon: <Brain className="h-4 w-4" />,
+			},
+			{ value: "public-links", label: t("nav_public_links"), icon: <Earth className="h-4 w-4" /> },
+		],
+		[t]
+	);
+
+	const selectedTab = navItems.some((item) => item.value === activeTab) ? activeTab : "general";
+	const selectedLabel = navItems.find((item) => item.value === selectedTab)?.label ?? t("title");
+
+	const handleItemChange = (tab: SearchSpaceSettingsTab) => {
+		setActiveTab(tab);
+		const suffix = tab === "general" ? "" : `?tab=${tab}`;
+		router.replace(`/dashboard/${searchSpaceId}/search-space-settings${suffix}`, { scroll: false });
+	};
+
+	return (
+		<section className="flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col gap-6 md:pt-6 md:flex-row">
+			<div className="md:w-[220px] md:shrink-0">
+				<h1 className="mb-4 px-1 text-2xl font-semibold tracking-tight">{t("title")}</h1>
+				<nav className="hidden flex-col gap-0.5 md:flex">
+					{navItems.map((item) => (
+						<Button
+							key={item.value}
+							type="button"
+							variant="ghost"
+							onClick={() => handleItemChange(item.value as SearchSpaceSettingsTab)}
+							className={cn(
+								"h-auto justify-start gap-3 px-3 py-2.5 text-left text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
+								selectedTab === item.value
+									? "bg-accent text-accent-foreground"
+									: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+							)}
+						>
+							{item.icon}
+							{item.label}
+						</Button>
+					))}
+				</nav>
+				<div
+					className="overflow-x-auto border-b border-border pb-3 md:hidden"
+					onScroll={handleTabScroll}
+					style={{
+						maskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
+						WebkitMaskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
+					}}
+				>
+					<div className="flex gap-1">
+						{navItems.map((item) => (
+							<Button
+								key={item.value}
+								type="button"
+								variant="ghost"
+								onClick={() => handleItemChange(item.value as SearchSpaceSettingsTab)}
+								className={cn(
+									"h-auto shrink-0 gap-2 px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
+									selectedTab === item.value
+										? "bg-accent text-accent-foreground"
+										: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+								)}
+							>
+								{item.icon}
+								{item.label}
+							</Button>
+						))}
+					</div>
+				</div>
+			</div>
+
+			<div className="min-w-0 flex-1">
+				<div className="hidden md:block">
+					<h2 className="text-lg font-semibold">{selectedLabel}</h2>
+					<Separator className="mt-4" />
+				</div>
+				<div className="min-w-0 pt-4 md:max-w-3xl">
+					{selectedTab === "general" && (
+						<GeneralSettingsManager searchSpaceId={numericSearchSpaceId} />
+					)}
+					{selectedTab === "models" && <AgentModelManager searchSpaceId={numericSearchSpaceId} />}
+					{selectedTab === "roles" && (
+						<LLMRoleManager key={searchSpaceId} searchSpaceId={numericSearchSpaceId} />
+					)}
+					{selectedTab === "image-models" && (
+						<ImageModelManager searchSpaceId={numericSearchSpaceId} />
+					)}
+					{selectedTab === "vision-models" && (
+						<VisionModelManager searchSpaceId={numericSearchSpaceId} />
+					)}
+					{selectedTab === "team-roles" && <RolesManager searchSpaceId={numericSearchSpaceId} />}
+					{selectedTab === "prompts" && (
+						<PromptConfigManager searchSpaceId={numericSearchSpaceId} />
+					)}
+					{selectedTab === "team-memory" && (
+						<TeamMemoryManager searchSpaceId={numericSearchSpaceId} />
+					)}
+					{selectedTab === "public-links" && (
+						<PublicChatSnapshotsManager searchSpaceId={numericSearchSpaceId} />
+					)}
+				</div>
+			</div>
+		</section>
+	);
+}
diff --git a/surfsense_web/components/settings/settings-dialog.tsx b/surfsense_web/components/settings/settings-dialog.tsx
deleted file mode 100644
index d3f75c2a8..000000000
--- a/surfsense_web/components/settings/settings-dialog.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-"use client";
-
-import type * as React from "react";
-import { useCallback, useRef, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
-
-interface NavItem {
-	value: string;
-	label: string;
-	icon: React.ReactNode;
-}
-
-interface SettingsDialogProps {
-	open: boolean;
-	onOpenChange: (open: boolean) => void;
-	title: string;
-	navItems: NavItem[];
-	activeItem: string;
-	onItemChange: (value: string) => void;
-	children: React.ReactNode;
-}
-
-export function SettingsDialog({
-	open,
-	onOpenChange,
-	title,
-	navItems,
-	activeItem,
-	onItemChange,
-	children,
-}: SettingsDialogProps) {
-	const activeRef = useRef<HTMLButtonElement>(null);
-	const [tabScrollPos, setTabScrollPos] = useState<"start" | "middle" | "end">("start");
-
-	const handleTabScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-		const el = e.currentTarget;
-		const atStart = el.scrollLeft <= 2;
-		const atEnd = el.scrollWidth - el.scrollLeft - el.clientWidth <= 2;
-		setTabScrollPos(atStart ? "start" : atEnd ? "end" : "middle");
-	}, []);
-
-	const handleItemChange = (value: string) => {
-		onItemChange(value);
-		activeRef.current?.scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
-	};
-
-	return (
-		<Dialog open={open} onOpenChange={onOpenChange}>
-			<DialogContent className="select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col md:flex-row p-0 gap-0 overflow-hidden [--card:var(--popover)]">
-				<DialogTitle className="sr-only">{title}</DialogTitle>
-
-				{/* Desktop: Left sidebar */}
-				<nav className="hidden md:flex w-[220px] shrink-0 flex-col border-r border-border p-3 pt-6">
-					<div className="flex flex-col gap-0.5">
-						{navItems.map((item) => (
-							<Button
-								key={item.value}
-								type="button"
-								variant="ghost"
-								onClick={() => onItemChange(item.value)}
-								className={cn(
-									"h-auto justify-start gap-3 rounded-lg px-3 py-2.5 text-left text-sm font-medium transition-colors focus:outline-none focus-visible:outline-none",
-									activeItem === item.value
-										? "bg-accent text-accent-foreground"
-										: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-								)}
-							>
-								{item.icon}
-								{item.label}
-							</Button>
-						))}
-					</div>
-				</nav>
-
-				{/* Mobile: Top header + horizontal tabs */}
-				<div className="flex md:hidden flex-col shrink-0">
-					<div className="px-4 pt-4 pb-2">
-						<h2 className="text-base font-semibold">{title}</h2>
-					</div>
-					<div
-						className="overflow-x-auto scrollbar-hide border-b border-border"
-						onScroll={handleTabScroll}
-						style={{
-							maskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
-							WebkitMaskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
-						}}
-					>
-						<div className="flex gap-1 px-4 pb-2">
-							{navItems.map((item) => (
-								<Button
-									key={item.value}
-									ref={activeItem === item.value ? activeRef : undefined}
-									type="button"
-									variant="ghost"
-									onClick={() => handleItemChange(item.value)}
-									className={cn(
-										"h-auto shrink-0 gap-2 rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus:outline-none focus-visible:outline-none",
-										activeItem === item.value
-											? "bg-accent text-accent-foreground"
-											: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-									)}
-								>
-									{item.icon}
-									{item.label}
-								</Button>
-							))}
-						</div>
-					</div>
-				</div>
-
-				{/* Content area */}
-				<div className="flex flex-1 flex-col overflow-hidden min-w-0">
-					<div className="hidden md:block px-8 pt-6 pb-2">
-						<h2 className="text-lg font-semibold">
-							{navItems.find((i) => i.value === activeItem)?.label ?? title}
-						</h2>
-						<Separator className="mt-4" />
-					</div>
-					<div className="flex-1 overflow-y-auto overflow-x-hidden">
-						<div className="px-4 md:px-8 pb-6 pt-4 md:pt-0 min-w-0">{children}</div>
-					</div>
-				</div>
-			</DialogContent>
-		</Dialog>
-	);
-}
diff --git a/surfsense_web/components/settings/team-dialog.tsx b/surfsense_web/components/settings/team-dialog.tsx
index 22c2a0eda..eb601fb64 100644
--- a/surfsense_web/components/settings/team-dialog.tsx
+++ b/surfsense_web/components/settings/team-dialog.tsx
@@ -3,7 +3,7 @@
 import { useAtom } from "jotai";
 import { useTranslations } from "next-intl";
 import { TeamContent } from "@/app/dashboard/[search_space_id]/team/team-content";
-import { teamDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
+import { teamDialogAtom } from "@/atoms/layout/dialogs.atom";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 
 interface TeamDialogProps {