diff --git a/surfsense_web/components/layout/hooks/index.ts b/surfsense_web/components/layout/hooks/index.ts
new file mode 100644
index 000000000..51cf8f7a0
--- /dev/null
+++ b/surfsense_web/components/layout/hooks/index.ts
@@ -0,0 +1 @@
+export { useSidebarState } from "./useSidebarState";
diff --git a/surfsense_web/components/layout/hooks/useSidebarState.ts b/surfsense_web/components/layout/hooks/useSidebarState.ts
new file mode 100644
index 000000000..9caa0b451
--- /dev/null
+++ b/surfsense_web/components/layout/hooks/useSidebarState.ts
@@ -0,0 +1,61 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_collapsed";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 365; // 1 year
+
+interface UseSidebarStateReturn {
+	isCollapsed: boolean;
+	setIsCollapsed: (collapsed: boolean) => void;
+	toggleCollapsed: () => void;
+}
+
+export function useSidebarState(defaultCollapsed = false): UseSidebarStateReturn {
+	const [isCollapsed, setIsCollapsedState] = useState(defaultCollapsed);
+
+	// Initialize from cookie on mount
+	useEffect(() => {
+		try {
+			const match = document.cookie.match(/(?:^|; )sidebar_collapsed=([^;]+)/);
+			if (match) {
+				setIsCollapsedState(match[1] === "true");
+			}
+		} catch {
+			// Ignore cookie read errors
+		}
+	}, []);
+
+	// Persist to cookie when state changes
+	const setIsCollapsed = useCallback((collapsed: boolean) => {
+		setIsCollapsedState(collapsed);
+		try {
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${collapsed}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		} catch {
+			// Ignore cookie write errors
+		}
+	}, []);
+
+	const toggleCollapsed = useCallback(() => {
+		setIsCollapsed(!isCollapsed);
+	}, [isCollapsed, setIsCollapsed]);
+
+	// Keyboard shortcut: Cmd/Ctrl + B
+	useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === "b" && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				toggleCollapsed();
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleCollapsed]);
+
+	return {
+		isCollapsed,
+		setIsCollapsed,
+		toggleCollapsed,
+	};
+}
diff --git a/surfsense_web/components/layout/index.ts b/surfsense_web/components/layout/index.ts
new file mode 100644
index 000000000..745075b6f
--- /dev/null
+++ b/surfsense_web/components/layout/index.ts
@@ -0,0 +1,30 @@
+export { useSidebarState } from "./hooks";
+export { LayoutDataProvider } from "./providers";
+export type {
+	ChatItem,
+	IconRailProps,
+	NavItem,
+	NoteItem,
+	PageUsage,
+	SidebarSectionProps,
+	User,
+	Workspace,
+} from "./types/layout.types";
+export {
+	ChatListItem,
+	Header,
+	IconRail,
+	LayoutShell,
+	MobileSidebar,
+	MobileSidebarTrigger,
+	NavIcon,
+	NavSection,
+	NoteListItem,
+	PageUsageDisplay,
+	Sidebar,
+	SidebarCollapseButton,
+	SidebarHeader,
+	SidebarSection,
+	SidebarUserProfile,
+	WorkspaceAvatar,
+} from "./ui";
diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
new file mode 100644
index 000000000..ea750a365
--- /dev/null
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@@ -0,0 +1,486 @@
+"use client";
+
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useAtomValue, useSetAtom } from "jotai";
+import { Logs, SquareLibrary, Trash2 } from "lucide-react";
+import { useParams, usePathname, useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useTheme } from "next-themes";
+import { useCallback, useMemo, useState } from "react";
+import { hasUnsavedEditorChangesAtom, pendingEditorNavigationAtom } from "@/atoms/editor/ui.atoms";
+import { searchSpacesAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import { currentUserAtom } from "@/atoms/user/user-query.atoms";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { useLogsSummary } from "@/hooks/use-logs";
+import { notesApiService } from "@/lib/apis/notes-api.service";
+import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
+import { deleteThread, fetchThreads } from "@/lib/chat/thread-persistence";
+import { resetUser, trackLogout } from "@/lib/posthog/events";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
+import type { ChatItem, NavItem, NoteItem, Workspace } from "../types/layout.types";
+import { LayoutShell } from "../ui/shell";
+import { AllChatsSidebar } from "../ui/sidebar/AllChatsSidebar";
+import { AllNotesSidebar } from "../ui/sidebar/AllNotesSidebar";
+
+interface LayoutDataProviderProps {
+	searchSpaceId: string;
+	children: React.ReactNode;
+	breadcrumb?: React.ReactNode;
+	languageSwitcher?: React.ReactNode;
+}
+
+export function LayoutDataProvider({
+	searchSpaceId,
+	children,
+	breadcrumb,
+	languageSwitcher,
+}: LayoutDataProviderProps) {
+	const t = useTranslations("dashboard");
+	const tCommon = useTranslations("common");
+	const router = useRouter();
+	const params = useParams();
+	const pathname = usePathname();
+	const queryClient = useQueryClient();
+	const { theme, setTheme } = useTheme();
+
+	// Atoms
+	const { data: user } = useAtomValue(currentUserAtom);
+	const { data: searchSpacesData } = useAtomValue(searchSpacesAtom);
+	const hasUnsavedEditorChanges = useAtomValue(hasUnsavedEditorChangesAtom);
+	const setPendingNavigation = useSetAtom(pendingEditorNavigationAtom);
+
+	// Current IDs from URL
+	const currentChatId = params?.chat_id
+		? Number(Array.isArray(params.chat_id) ? params.chat_id[0] : params.chat_id)
+		: null;
+	const currentNoteId = params?.note_id
+		? Number(Array.isArray(params.note_id) ? params.note_id[0] : params.note_id)
+		: null;
+
+	// Fetch current search space
+	const { data: searchSpace } = useQuery({
+		queryKey: cacheKeys.searchSpaces.detail(searchSpaceId),
+		queryFn: () => searchSpacesApiService.getSearchSpace({ id: Number(searchSpaceId) }),
+		enabled: !!searchSpaceId,
+	});
+
+	// Fetch threads
+	const { data: threadsData, refetch: refetchThreads } = useQuery({
+		queryKey: ["threads", searchSpaceId, { limit: 4 }],
+		queryFn: () => fetchThreads(Number(searchSpaceId), 4),
+		enabled: !!searchSpaceId,
+	});
+
+	// Fetch notes
+	const { data: notesData, refetch: refetchNotes } = useQuery({
+		queryKey: ["notes", searchSpaceId],
+		queryFn: () =>
+			notesApiService.getNotes({
+				search_space_id: Number(searchSpaceId),
+				page_size: 4,
+			}),
+		enabled: !!searchSpaceId,
+	});
+
+	// Poll for active reindexing tasks to show inline loading indicators
+	const { summary } = useLogsSummary(searchSpaceId ? Number(searchSpaceId) : 0, 24, {
+		enablePolling: true,
+		refetchInterval: 5000,
+	});
+
+	// Create a Set of document IDs that are currently being reindexed
+	const reindexingDocumentIds = useMemo(() => {
+		if (!summary?.active_tasks) return new Set<number>();
+		return new Set(
+			summary.active_tasks
+				.filter((task) => task.document_id != null)
+				.map((task) => task.document_id as number)
+		);
+	}, [summary?.active_tasks]);
+
+	// All chats/notes sidebars state
+	const [isAllChatsSidebarOpen, setIsAllChatsSidebarOpen] = useState(false);
+	const [isAllNotesSidebarOpen, setIsAllNotesSidebarOpen] = useState(false);
+
+	// Delete dialogs state
+	const [showDeleteChatDialog, setShowDeleteChatDialog] = useState(false);
+	const [chatToDelete, setChatToDelete] = useState<{ id: number; name: string } | null>(null);
+	const [isDeletingChat, setIsDeletingChat] = useState(false);
+
+	const [showDeleteNoteDialog, setShowDeleteNoteDialog] = useState(false);
+	const [noteToDelete, setNoteToDelete] = useState<{
+		id: number;
+		name: string;
+		search_space_id: number;
+	} | null>(null);
+	const [isDeletingNote, setIsDeletingNote] = useState(false);
+
+	// Transform workspaces (API returns array directly, not { items: [...] })
+	const workspaces: Workspace[] = useMemo(() => {
+		if (!searchSpacesData || !Array.isArray(searchSpacesData)) return [];
+		return searchSpacesData.map((space) => ({
+			id: space.id,
+			name: space.name,
+			description: space.description,
+			isOwner: space.is_owner,
+			memberCount: space.member_count || 0,
+		}));
+	}, [searchSpacesData]);
+
+	// Use searchSpace query result for current workspace (more reliable than finding in list)
+	const activeWorkspace: Workspace | null = searchSpace
+		? {
+				id: searchSpace.id,
+				name: searchSpace.name,
+				description: searchSpace.description,
+				isOwner: searchSpace.is_owner,
+				memberCount: searchSpace.member_count || 0,
+			}
+		: null;
+
+	// Transform chats
+	const chats: ChatItem[] = useMemo(() => {
+		if (!threadsData?.threads) return [];
+		return threadsData.threads.map((thread) => ({
+			id: thread.id,
+			name: thread.title || `Chat ${thread.id}`,
+			url: `/dashboard/${searchSpaceId}/new-chat/${thread.id}`,
+		}));
+	}, [threadsData, searchSpaceId]);
+
+	// Transform notes
+	const notes: NoteItem[] = useMemo(() => {
+		if (!notesData?.items) return [];
+		const sortedNotes = [...notesData.items].sort((a, b) => {
+			const dateA = a.updated_at
+				? new Date(a.updated_at).getTime()
+				: new Date(a.created_at).getTime();
+			const dateB = b.updated_at
+				? new Date(b.updated_at).getTime()
+				: new Date(b.created_at).getTime();
+			return dateB - dateA;
+		});
+		return sortedNotes.slice(0, 4).map((note) => ({
+			id: note.id,
+			name: note.title,
+			url: `/dashboard/${note.search_space_id}/editor/${note.id}`,
+			isReindexing: reindexingDocumentIds.has(note.id),
+		}));
+	}, [notesData, reindexingDocumentIds]);
+
+	// Navigation items
+	const navItems: NavItem[] = useMemo(
+		() => [
+			{
+				title: "Documents",
+				url: `/dashboard/${searchSpaceId}/documents`,
+				icon: SquareLibrary,
+				isActive: pathname?.includes("/documents"),
+			},
+			{
+				title: "Logs",
+				url: `/dashboard/${searchSpaceId}/logs`,
+				icon: Logs,
+				isActive: pathname?.includes("/logs"),
+			},
+		],
+		[searchSpaceId, pathname]
+	);
+
+	// Handlers
+	const handleWorkspaceSelect = useCallback(
+		(id: number) => {
+			router.push(`/dashboard/${id}/new-chat`);
+		},
+		[router]
+	);
+
+	const handleAddWorkspace = useCallback(() => {
+		router.push("/dashboard/searchspaces");
+	}, [router]);
+
+	const handleSeeAllWorkspaces = useCallback(() => {
+		router.push("/dashboard");
+	}, [router]);
+
+	const handleNavItemClick = useCallback(
+		(item: NavItem) => {
+			router.push(item.url);
+		},
+		[router]
+	);
+
+	const handleNewChat = useCallback(() => {
+		router.push(`/dashboard/${searchSpaceId}/new-chat`);
+	}, [router, searchSpaceId]);
+
+	const handleChatSelect = useCallback(
+		(chat: ChatItem) => {
+			router.push(chat.url);
+		},
+		[router]
+	);
+
+	const handleChatDelete = useCallback((chat: ChatItem) => {
+		setChatToDelete({ id: chat.id, name: chat.name });
+		setShowDeleteChatDialog(true);
+	}, []);
+
+	const handleNoteSelect = useCallback(
+		(note: NoteItem) => {
+			if (hasUnsavedEditorChanges) {
+				setPendingNavigation(note.url);
+			} else {
+				router.push(note.url);
+			}
+		},
+		[router, hasUnsavedEditorChanges, setPendingNavigation]
+	);
+
+	const handleNoteDelete = useCallback(
+		(note: NoteItem) => {
+			setNoteToDelete({ id: note.id, name: note.name, search_space_id: Number(searchSpaceId) });
+			setShowDeleteNoteDialog(true);
+		},
+		[searchSpaceId]
+	);
+
+	const handleAddNote = useCallback(() => {
+		const newNoteUrl = `/dashboard/${searchSpaceId}/editor/new`;
+		if (hasUnsavedEditorChanges) {
+			setPendingNavigation(newNoteUrl);
+		} else {
+			router.push(newNoteUrl);
+		}
+	}, [router, searchSpaceId, hasUnsavedEditorChanges, setPendingNavigation]);
+
+	const handleSettings = useCallback(() => {
+		router.push(`/dashboard/${searchSpaceId}/settings`);
+	}, [router, searchSpaceId]);
+
+	const handleInviteMembers = useCallback(() => {
+		router.push(`/dashboard/${searchSpaceId}/team`);
+	}, [router, searchSpaceId]);
+
+	const handleLogout = useCallback(() => {
+		try {
+			trackLogout();
+			resetUser();
+			if (typeof window !== "undefined") {
+				localStorage.removeItem("surfsense_bearer_token");
+				router.push("/");
+			}
+		} catch (error) {
+			console.error("Error during logout:", error);
+			router.push("/");
+		}
+	}, [router]);
+
+	const handleToggleTheme = useCallback(() => {
+		setTheme(theme === "dark" ? "light" : "dark");
+	}, [theme, setTheme]);
+
+	const handleViewAllChats = useCallback(() => {
+		setIsAllChatsSidebarOpen(true);
+	}, []);
+
+	const handleViewAllNotes = useCallback(() => {
+		setIsAllNotesSidebarOpen(true);
+	}, []);
+
+	// Delete handlers
+	const confirmDeleteChat = useCallback(async () => {
+		if (!chatToDelete) return;
+		setIsDeletingChat(true);
+		try {
+			await deleteThread(chatToDelete.id);
+			queryClient.invalidateQueries({ queryKey: ["threads", searchSpaceId] });
+			if (currentChatId === chatToDelete.id) {
+				router.push(`/dashboard/${searchSpaceId}/new-chat`);
+			}
+		} catch (error) {
+			console.error("Error deleting thread:", error);
+		} finally {
+			setIsDeletingChat(false);
+			setShowDeleteChatDialog(false);
+			setChatToDelete(null);
+		}
+	}, [chatToDelete, queryClient, searchSpaceId, router, currentChatId]);
+
+	const confirmDeleteNote = useCallback(async () => {
+		if (!noteToDelete) return;
+		setIsDeletingNote(true);
+		try {
+			await notesApiService.deleteNote({
+				search_space_id: noteToDelete.search_space_id,
+				note_id: noteToDelete.id,
+			});
+			refetchNotes();
+		} catch (error) {
+			console.error("Error deleting note:", error);
+		} finally {
+			setIsDeletingNote(false);
+			setShowDeleteNoteDialog(false);
+			setNoteToDelete(null);
+		}
+	}, [noteToDelete, refetchNotes]);
+
+	// Page usage
+	const pageUsage = user
+		? {
+				pagesUsed: user.pages_used,
+				pagesLimit: user.pages_limit,
+			}
+		: undefined;
+
+	// Detect if we're on the chat page (needs overflow-hidden for chat's own scroll)
+	const isChatPage = pathname?.includes("/new-chat") ?? false;
+
+	return (
+		<>
+			<LayoutShell
+				workspaces={workspaces}
+				activeWorkspaceId={Number(searchSpaceId)}
+				onWorkspaceSelect={handleWorkspaceSelect}
+				onAddWorkspace={handleAddWorkspace}
+				workspace={activeWorkspace}
+				navItems={navItems}
+				onNavItemClick={handleNavItemClick}
+				chats={chats}
+				activeChatId={currentChatId}
+				onNewChat={handleNewChat}
+				onChatSelect={handleChatSelect}
+				onChatDelete={handleChatDelete}
+				onViewAllChats={handleViewAllChats}
+				notes={notes}
+				activeNoteId={currentNoteId}
+				onNoteSelect={handleNoteSelect}
+				onNoteDelete={handleNoteDelete}
+				onAddNote={handleAddNote}
+				onViewAllNotes={handleViewAllNotes}
+				user={{ email: user?.email || "", name: user?.email?.split("@")[0] }}
+				onSettings={handleSettings}
+				onInviteMembers={handleInviteMembers}
+				onSeeAllWorkspaces={handleSeeAllWorkspaces}
+				onLogout={handleLogout}
+				pageUsage={pageUsage}
+				breadcrumb={breadcrumb}
+				languageSwitcher={languageSwitcher}
+				theme={theme}
+				onToggleTheme={handleToggleTheme}
+				isChatPage={isChatPage}
+			>
+				{children}
+			</LayoutShell>
+
+			{/* Delete Chat Dialog */}
+			<Dialog open={showDeleteChatDialog} onOpenChange={setShowDeleteChatDialog}>
+				<DialogContent className="sm:max-w-md">
+					<DialogHeader>
+						<DialogTitle className="flex items-center gap-2">
+							<Trash2 className="h-5 w-5 text-destructive" />
+							<span>{t("delete_chat")}</span>
+						</DialogTitle>
+						<DialogDescription>
+							{t("delete_chat_confirm")} <span className="font-medium">{chatToDelete?.name}</span>?{" "}
+							{t("action_cannot_undone")}
+						</DialogDescription>
+					</DialogHeader>
+					<DialogFooter className="flex gap-2 sm:justify-end">
+						<Button
+							variant="outline"
+							onClick={() => setShowDeleteChatDialog(false)}
+							disabled={isDeletingChat}
+						>
+							{tCommon("cancel")}
+						</Button>
+						<Button
+							variant="destructive"
+							onClick={confirmDeleteChat}
+							disabled={isDeletingChat}
+							className="gap-2"
+						>
+							{isDeletingChat ? (
+								<>
+									<span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+									{t("deleting")}
+								</>
+							) : (
+								<>
+									<Trash2 className="h-4 w-4" />
+									{tCommon("delete")}
+								</>
+							)}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+
+			{/* All Chats Sidebar */}
+			<AllChatsSidebar
+				open={isAllChatsSidebarOpen}
+				onOpenChange={setIsAllChatsSidebarOpen}
+				searchSpaceId={searchSpaceId}
+			/>
+
+			{/* All Notes Sidebar */}
+			<AllNotesSidebar
+				open={isAllNotesSidebarOpen}
+				onOpenChange={setIsAllNotesSidebarOpen}
+				searchSpaceId={searchSpaceId}
+				onAddNote={handleAddNote}
+			/>
+
+			{/* Delete Note Dialog */}
+			<Dialog open={showDeleteNoteDialog} onOpenChange={setShowDeleteNoteDialog}>
+				<DialogContent className="sm:max-w-md">
+					<DialogHeader>
+						<DialogTitle className="flex items-center gap-2">
+							<Trash2 className="h-5 w-5 text-destructive" />
+							<span>{t("delete_note")}</span>
+						</DialogTitle>
+						<DialogDescription>
+							{t("delete_note_confirm")} <span className="font-medium">{noteToDelete?.name}</span>?{" "}
+							{t("action_cannot_undone")}
+						</DialogDescription>
+					</DialogHeader>
+					<DialogFooter className="flex gap-2 sm:justify-end">
+						<Button
+							variant="outline"
+							onClick={() => setShowDeleteNoteDialog(false)}
+							disabled={isDeletingNote}
+						>
+							{tCommon("cancel")}
+						</Button>
+						<Button
+							variant="destructive"
+							onClick={confirmDeleteNote}
+							disabled={isDeletingNote}
+							className="gap-2"
+						>
+							{isDeletingNote ? (
+								<>
+									<span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+									{t("deleting")}
+								</>
+							) : (
+								<>
+									<Trash2 className="h-4 w-4" />
+									{tCommon("delete")}
+								</>
+							)}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		</>
+	);
+}
diff --git a/surfsense_web/components/layout/providers/index.ts b/surfsense_web/components/layout/providers/index.ts
new file mode 100644
index 000000000..61ea094de
--- /dev/null
+++ b/surfsense_web/components/layout/providers/index.ts
@@ -0,0 +1 @@
+export { LayoutDataProvider } from "./LayoutDataProvider";
diff --git a/surfsense_web/components/layout/types/layout.types.ts b/surfsense_web/components/layout/types/layout.types.ts
new file mode 100644
index 000000000..b11619c60
--- /dev/null
+++ b/surfsense_web/components/layout/types/layout.types.ts
@@ -0,0 +1,139 @@
+import type { LucideIcon } from "lucide-react";
+
+export interface Workspace {
+	id: number;
+	name: string;
+	description?: string | null;
+	isOwner: boolean;
+	memberCount: number;
+}
+
+export interface User {
+	email: string;
+	name?: string;
+}
+
+export interface NavItem {
+	title: string;
+	url: string;
+	icon: LucideIcon;
+	isActive?: boolean;
+	badge?: string | number;
+}
+
+export interface ChatItem {
+	id: number;
+	name: string;
+	url: string;
+	isActive?: boolean;
+}
+
+export interface NoteItem {
+	id: number;
+	name: string;
+	url: string;
+	isActive?: boolean;
+	isReindexing?: boolean;
+}
+
+export interface PageUsage {
+	pagesUsed: number;
+	pagesLimit: number;
+}
+
+export interface IconRailProps {
+	workspaces: Workspace[];
+	activeWorkspaceId: number | null;
+	onWorkspaceSelect: (id: number) => void;
+	onAddWorkspace: () => void;
+	className?: string;
+}
+
+export interface SidebarHeaderProps {
+	workspace: Workspace | null;
+	onSettings?: () => void;
+}
+
+export interface SidebarSectionProps {
+	title: string;
+	defaultOpen?: boolean;
+	children: React.ReactNode;
+	action?: React.ReactNode;
+}
+
+export interface NavSectionProps {
+	items: NavItem[];
+	onItemClick?: (item: NavItem) => void;
+}
+
+export interface ChatsSectionProps {
+	chats: ChatItem[];
+	activeChatId?: number | null;
+	onChatSelect: (chat: ChatItem) => void;
+	onChatDelete?: (chat: ChatItem) => void;
+	onViewAllChats?: () => void;
+	searchSpaceId?: string;
+}
+
+export interface NotesSectionProps {
+	notes: NoteItem[];
+	activeNoteId?: number | null;
+	onNoteSelect: (note: NoteItem) => void;
+	onNoteDelete?: (note: NoteItem) => void;
+	onAddNote?: () => void;
+	onViewAllNotes?: () => void;
+	searchSpaceId?: string;
+}
+
+export interface PageUsageDisplayProps {
+	pagesUsed: number;
+	pagesLimit: number;
+}
+
+export interface SidebarUserProfileProps {
+	user: User;
+	searchSpaceId?: string;
+	onSettings?: () => void;
+	onInviteMembers?: () => void;
+	onSwitchWorkspace?: () => void;
+	onToggleTheme?: () => void;
+	onLogout?: () => void;
+	theme?: string;
+}
+
+export interface SidebarProps {
+	workspace: Workspace | null;
+	searchSpaceId?: string;
+	navItems: NavItem[];
+	chats: ChatItem[];
+	activeChatId?: number | null;
+	onNewChat: () => void;
+	onChatSelect: (chat: ChatItem) => void;
+	onChatDelete?: (chat: ChatItem) => void;
+	onViewAllChats?: () => void;
+	notes: NoteItem[];
+	activeNoteId?: number | null;
+	onNoteSelect: (note: NoteItem) => void;
+	onNoteDelete?: (note: NoteItem) => void;
+	onAddNote?: () => void;
+	onViewAllNotes?: () => void;
+	user: User;
+	theme?: string;
+	onSettings?: () => void;
+	onInviteMembers?: () => void;
+	onSwitchWorkspace?: () => void;
+	onToggleTheme?: () => void;
+	onLogout?: () => void;
+	pageUsage?: PageUsage;
+	className?: string;
+}
+
+export interface LayoutShellProps {
+	workspaces: Workspace[];
+	activeWorkspaceId: number | null;
+	onWorkspaceSelect: (id: number) => void;
+	onAddWorkspace: () => void;
+	sidebarProps: Omit<SidebarProps, "className">;
+	children: React.ReactNode;
+	className?: string;
+}
diff --git a/surfsense_web/components/layout/ui/header/Header.tsx b/surfsense_web/components/layout/ui/header/Header.tsx
new file mode 100644
index 000000000..a03761ef5
--- /dev/null
+++ b/surfsense_web/components/layout/ui/header/Header.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+interface HeaderProps {
+	breadcrumb?: React.ReactNode;
+	languageSwitcher?: React.ReactNode;
+	theme?: string;
+	onToggleTheme?: () => void;
+	mobileMenuTrigger?: React.ReactNode;
+}
+
+export function Header({
+	breadcrumb,
+	languageSwitcher,
+	theme,
+	onToggleTheme,
+	mobileMenuTrigger,
+}: HeaderProps) {
+	return (
+		<header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 px-4">
+			{/* Left side - Mobile menu trigger + Breadcrumb */}
+			<div className="flex flex-1 items-center gap-2 min-w-0">
+				{mobileMenuTrigger}
+				{breadcrumb}
+			</div>
+
+			{/* Right side - Actions */}
+			<div className="flex items-center gap-2">
+				{/* Theme toggle */}
+				{onToggleTheme && (
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button variant="outline" size="icon" onClick={onToggleTheme} className="h-8 w-8">
+								{theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+								<span className="sr-only">Toggle theme</span>
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent>{theme === "dark" ? "Light mode" : "Dark mode"}</TooltipContent>
+					</Tooltip>
+				)}
+
+				{languageSwitcher}
+			</div>
+		</header>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/header/index.ts b/surfsense_web/components/layout/ui/header/index.ts
new file mode 100644
index 000000000..c940126c9
--- /dev/null
+++ b/surfsense_web/components/layout/ui/header/index.ts
@@ -0,0 +1 @@
+export { Header } from "./Header";
diff --git a/surfsense_web/components/layout/ui/icon-rail/IconRail.tsx b/surfsense_web/components/layout/ui/icon-rail/IconRail.tsx
new file mode 100644
index 000000000..0d6b39cdc
--- /dev/null
+++ b/surfsense_web/components/layout/ui/icon-rail/IconRail.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import type { Workspace } from "../../types/layout.types";
+import { WorkspaceAvatar } from "./WorkspaceAvatar";
+
+interface IconRailProps {
+	workspaces: Workspace[];
+	activeWorkspaceId: number | null;
+	onWorkspaceSelect: (id: number) => void;
+	onAddWorkspace: () => void;
+	className?: string;
+}
+
+export function IconRail({
+	workspaces,
+	activeWorkspaceId,
+	onWorkspaceSelect,
+	onAddWorkspace,
+	className,
+}: IconRailProps) {
+	return (
+		<div className={cn("flex h-full w-14 flex-col items-center", className)}>
+			<ScrollArea className="w-full">
+				<div className="flex flex-col items-center gap-2 px-1.5 py-3">
+					{workspaces.map((workspace) => (
+						<WorkspaceAvatar
+							key={workspace.id}
+							name={workspace.name}
+							isActive={workspace.id === activeWorkspaceId}
+							onClick={() => onWorkspaceSelect(workspace.id)}
+							size="md"
+						/>
+					))}
+
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={onAddWorkspace}
+								className="h-10 w-10 rounded-lg border-2 border-dashed border-muted-foreground/30 hover:border-muted-foreground/50"
+							>
+								<Plus className="h-5 w-5 text-muted-foreground" />
+								<span className="sr-only">Add workspace</span>
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent side="right" sideOffset={8}>
+							Add workspace
+						</TooltipContent>
+					</Tooltip>
+				</div>
+			</ScrollArea>
+		</div>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/icon-rail/NavIcon.tsx b/surfsense_web/components/layout/ui/icon-rail/NavIcon.tsx
new file mode 100644
index 000000000..3efb48748
--- /dev/null
+++ b/surfsense_web/components/layout/ui/icon-rail/NavIcon.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+interface NavIconProps {
+	icon: LucideIcon;
+	label: string;
+	isActive?: boolean;
+	onClick?: () => void;
+}
+
+export function NavIcon({ icon: Icon, label, isActive, onClick }: NavIconProps) {
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button
+					variant="ghost"
+					size="icon"
+					onClick={onClick}
+					className={cn("h-10 w-10 rounded-lg", isActive && "bg-accent text-accent-foreground")}
+				>
+					<Icon className="h-5 w-5" />
+					<span className="sr-only">{label}</span>
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent side="right" sideOffset={8}>
+				{label}
+			</TooltipContent>
+		</Tooltip>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/icon-rail/WorkspaceAvatar.tsx b/surfsense_web/components/layout/ui/icon-rail/WorkspaceAvatar.tsx
new file mode 100644
index 000000000..1c4798d2a
--- /dev/null
+++ b/surfsense_web/components/layout/ui/icon-rail/WorkspaceAvatar.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+interface WorkspaceAvatarProps {
+	name: string;
+	isActive?: boolean;
+	onClick?: () => void;
+	size?: "sm" | "md";
+}
+
+/**
+ * Generates a consistent color based on workspace name
+ */
+function stringToColor(str: string): string {
+	let hash = 0;
+	for (let i = 0; i < str.length; i++) {
+		hash = str.charCodeAt(i) + ((hash << 5) - hash);
+	}
+	const colors = [
+		"#6366f1", // indigo
+		"#22c55e", // green
+		"#f59e0b", // amber
+		"#ef4444", // red
+		"#8b5cf6", // violet
+		"#06b6d4", // cyan
+		"#ec4899", // pink
+		"#14b8a6", // teal
+	];
+	return colors[Math.abs(hash) % colors.length];
+}
+
+/**
+ * Gets initials from workspace name (max 2 chars)
+ */
+function getInitials(name: string): string {
+	const words = name.trim().split(/\s+/);
+	if (words.length >= 2) {
+		return (words[0][0] + words[1][0]).toUpperCase();
+	}
+	return name.slice(0, 2).toUpperCase();
+}
+
+export function WorkspaceAvatar({ name, isActive, onClick, size = "md" }: WorkspaceAvatarProps) {
+	const bgColor = stringToColor(name);
+	const initials = getInitials(name);
+	const sizeClasses = size === "sm" ? "h-8 w-8 text-xs" : "h-10 w-10 text-sm";
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<button
+					type="button"
+					onClick={onClick}
+					className={cn(
+						"flex items-center justify-center rounded-lg font-semibold text-white transition-all",
+						"hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+						sizeClasses,
+						isActive && "ring-2 ring-primary ring-offset-1 ring-offset-background"
+					)}
+					style={{ backgroundColor: bgColor }}
+				>
+					{initials}
+				</button>
+			</TooltipTrigger>
+			<TooltipContent side="right" sideOffset={8}>
+				{name}
+			</TooltipContent>
+		</Tooltip>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/icon-rail/index.ts b/surfsense_web/components/layout/ui/icon-rail/index.ts
new file mode 100644
index 000000000..0e7e8cd29
--- /dev/null
+++ b/surfsense_web/components/layout/ui/icon-rail/index.ts
@@ -0,0 +1,3 @@
+export { IconRail } from "./IconRail";
+export { NavIcon } from "./NavIcon";
+export { WorkspaceAvatar } from "./WorkspaceAvatar";
diff --git a/surfsense_web/components/layout/ui/index.ts b/surfsense_web/components/layout/ui/index.ts
new file mode 100644
index 000000000..74b1e9240
--- /dev/null
+++ b/surfsense_web/components/layout/ui/index.ts
@@ -0,0 +1,16 @@
+export { Header } from "./header";
+export { IconRail, NavIcon, WorkspaceAvatar } from "./icon-rail";
+export { LayoutShell } from "./shell";
+export {
+	ChatListItem,
+	MobileSidebar,
+	MobileSidebarTrigger,
+	NavSection,
+	NoteListItem,
+	PageUsageDisplay,
+	Sidebar,
+	SidebarCollapseButton,
+	SidebarHeader,
+	SidebarSection,
+	SidebarUserProfile,
+} from "./sidebar";
diff --git a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
new file mode 100644
index 000000000..0d7b24113
--- /dev/null
+++ b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+import { useState } from "react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { useSidebarState } from "../../hooks";
+import type {
+	ChatItem,
+	NavItem,
+	NoteItem,
+	PageUsage,
+	User,
+	Workspace,
+} from "../../types/layout.types";
+import { Header } from "../header";
+import { IconRail } from "../icon-rail";
+import { MobileSidebar, MobileSidebarTrigger, Sidebar } from "../sidebar";
+
+interface LayoutShellProps {
+	workspaces: Workspace[];
+	activeWorkspaceId: number | null;
+	onWorkspaceSelect: (id: number) => void;
+	onAddWorkspace: () => void;
+	workspace: Workspace | null;
+	navItems: NavItem[];
+	onNavItemClick?: (item: NavItem) => void;
+	chats: ChatItem[];
+	activeChatId?: number | null;
+	onNewChat: () => void;
+	onChatSelect: (chat: ChatItem) => void;
+	onChatDelete?: (chat: ChatItem) => void;
+	onViewAllChats?: () => void;
+	notes: NoteItem[];
+	activeNoteId?: number | null;
+	onNoteSelect: (note: NoteItem) => void;
+	onNoteDelete?: (note: NoteItem) => void;
+	onAddNote?: () => void;
+	onViewAllNotes?: () => void;
+	user: User;
+	onSettings?: () => void;
+	onInviteMembers?: () => void;
+	onSeeAllWorkspaces?: () => void;
+	onLogout?: () => void;
+	pageUsage?: PageUsage;
+	breadcrumb?: React.ReactNode;
+	languageSwitcher?: React.ReactNode;
+	theme?: string;
+	onToggleTheme?: () => void;
+	defaultCollapsed?: boolean;
+	isChatPage?: boolean;
+	children: React.ReactNode;
+	className?: string;
+}
+
+export function LayoutShell({
+	workspaces,
+	activeWorkspaceId,
+	onWorkspaceSelect,
+	onAddWorkspace,
+	workspace,
+	navItems,
+	onNavItemClick,
+	chats,
+	activeChatId,
+	onNewChat,
+	onChatSelect,
+	onChatDelete,
+	onViewAllChats,
+	notes,
+	activeNoteId,
+	onNoteSelect,
+	onNoteDelete,
+	onAddNote,
+	onViewAllNotes,
+	user,
+	onSettings,
+	onInviteMembers,
+	onSeeAllWorkspaces,
+	onLogout,
+	pageUsage,
+	breadcrumb,
+	languageSwitcher,
+	theme,
+	onToggleTheme,
+	defaultCollapsed = false,
+	isChatPage = false,
+	children,
+	className,
+}: LayoutShellProps) {
+	const isMobile = useIsMobile();
+	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+	const { isCollapsed, toggleCollapsed } = useSidebarState(defaultCollapsed);
+
+	// Mobile layout
+	if (isMobile) {
+		return (
+			<TooltipProvider delayDuration={0}>
+				<div className={cn("flex h-screen w-full flex-col bg-background", className)}>
+					<Header
+						breadcrumb={breadcrumb}
+						languageSwitcher={languageSwitcher}
+						theme={theme}
+						onToggleTheme={onToggleTheme}
+						mobileMenuTrigger={<MobileSidebarTrigger onClick={() => setMobileMenuOpen(true)} />}
+					/>
+
+					<MobileSidebar
+						isOpen={mobileMenuOpen}
+						onOpenChange={setMobileMenuOpen}
+						workspaces={workspaces}
+						activeWorkspaceId={activeWorkspaceId}
+						onWorkspaceSelect={onWorkspaceSelect}
+						onAddWorkspace={onAddWorkspace}
+						workspace={workspace}
+						navItems={navItems}
+						onNavItemClick={onNavItemClick}
+						chats={chats}
+						activeChatId={activeChatId}
+						onNewChat={onNewChat}
+						onChatSelect={onChatSelect}
+						onChatDelete={onChatDelete}
+						onViewAllChats={onViewAllChats}
+						notes={notes}
+						activeNoteId={activeNoteId}
+						onNoteSelect={onNoteSelect}
+						onNoteDelete={onNoteDelete}
+						onAddNote={onAddNote}
+						onViewAllNotes={onViewAllNotes}
+						user={user}
+						onSettings={onSettings}
+						onInviteMembers={onInviteMembers}
+						onSeeAllWorkspaces={onSeeAllWorkspaces}
+						onLogout={onLogout}
+						pageUsage={pageUsage}
+					/>
+
+					<main className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
+						{children}
+					</main>
+				</div>
+			</TooltipProvider>
+		);
+	}
+
+	// Desktop layout
+	return (
+		<TooltipProvider delayDuration={0}>
+			<div className={cn("flex h-screen w-full gap-2 p-2 overflow-hidden bg-muted/40", className)}>
+				<div className="hidden md:flex overflow-hidden">
+					<IconRail
+						workspaces={workspaces}
+						activeWorkspaceId={activeWorkspaceId}
+						onWorkspaceSelect={onWorkspaceSelect}
+						onAddWorkspace={onAddWorkspace}
+					/>
+				</div>
+
+				<div className="flex flex-1 rounded-xl border bg-background overflow-hidden">
+					<Sidebar
+						workspace={workspace}
+						isCollapsed={isCollapsed}
+						onToggleCollapse={toggleCollapsed}
+						navItems={navItems}
+						onNavItemClick={onNavItemClick}
+						chats={chats}
+						activeChatId={activeChatId}
+						onNewChat={onNewChat}
+						onChatSelect={onChatSelect}
+						onChatDelete={onChatDelete}
+						onViewAllChats={onViewAllChats}
+						notes={notes}
+						activeNoteId={activeNoteId}
+						onNoteSelect={onNoteSelect}
+						onNoteDelete={onNoteDelete}
+						onAddNote={onAddNote}
+						onViewAllNotes={onViewAllNotes}
+						user={user}
+						onSettings={onSettings}
+						onInviteMembers={onInviteMembers}
+						onSeeAllWorkspaces={onSeeAllWorkspaces}
+						onLogout={onLogout}
+						pageUsage={pageUsage}
+						className="hidden md:flex border-r shrink-0"
+					/>
+
+					<main className="flex-1 flex flex-col min-w-0">
+						<Header
+							breadcrumb={breadcrumb}
+							languageSwitcher={languageSwitcher}
+							theme={theme}
+							onToggleTheme={onToggleTheme}
+						/>
+
+						<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
+							{children}
+						</div>
+					</main>
+				</div>
+			</div>
+		</TooltipProvider>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/shell/index.ts b/surfsense_web/components/layout/ui/shell/index.ts
new file mode 100644
index 000000000..d7d96a574
--- /dev/null
+++ b/surfsense_web/components/layout/ui/shell/index.ts
@@ -0,0 +1 @@
+export { LayoutShell } from "./LayoutShell";
diff --git a/surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx
new file mode 100644
index 000000000..02459f2b9
--- /dev/null
+++ b/surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx
@@ -0,0 +1,443 @@
+"use client";
+
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { format } from "date-fns";
+import {
+	ArchiveIcon,
+	Loader2,
+	MessageCircleMore,
+	MoreHorizontal,
+	RotateCcwIcon,
+	Search,
+	Trash2,
+	X,
+} from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useParams, useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useDebouncedValue } from "@/hooks/use-debounced-value";
+import {
+	deleteThread,
+	fetchThreads,
+	searchThreads,
+	type ThreadListItem,
+	updateThread,
+} from "@/lib/chat/thread-persistence";
+import { cn } from "@/lib/utils";
+
+interface AllChatsSidebarProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	searchSpaceId: string;
+	onCloseMobileSidebar?: () => void;
+}
+
+export function AllChatsSidebar({
+	open,
+	onOpenChange,
+	searchSpaceId,
+	onCloseMobileSidebar,
+}: AllChatsSidebarProps) {
+	const t = useTranslations("sidebar");
+	const router = useRouter();
+	const params = useParams();
+	const queryClient = useQueryClient();
+
+	// Get the current chat ID from URL to check if user is deleting the currently open chat
+	const currentChatId = Array.isArray(params.chat_id)
+		? Number(params.chat_id[0])
+		: params.chat_id
+			? Number(params.chat_id)
+			: null;
+	const [deletingThreadId, setDeletingThreadId] = useState<number | null>(null);
+	const [archivingThreadId, setArchivingThreadId] = useState<number | null>(null);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [showArchived, setShowArchived] = useState(false);
+	const [mounted, setMounted] = useState(false);
+	const [openDropdownId, setOpenDropdownId] = useState<number | null>(null);
+	const debouncedSearchQuery = useDebouncedValue(searchQuery, 300);
+
+	const isSearchMode = !!debouncedSearchQuery.trim();
+
+	// Handle mounting for portal
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	// Handle escape key
+	useEffect(() => {
+		const handleEscape = (e: KeyboardEvent) => {
+			if (e.key === "Escape" && open) {
+				onOpenChange(false);
+			}
+		};
+		document.addEventListener("keydown", handleEscape);
+		return () => document.removeEventListener("keydown", handleEscape);
+	}, [open, onOpenChange]);
+
+	// Lock body scroll when open
+	useEffect(() => {
+		if (open) {
+			document.body.style.overflow = "hidden";
+		} else {
+			document.body.style.overflow = "";
+		}
+		return () => {
+			document.body.style.overflow = "";
+		};
+	}, [open]);
+
+	// Fetch all threads (when not searching)
+	const {
+		data: threadsData,
+		error: threadsError,
+		isLoading: isLoadingThreads,
+	} = useQuery({
+		queryKey: ["all-threads", searchSpaceId],
+		queryFn: () => fetchThreads(Number(searchSpaceId)),
+		enabled: !!searchSpaceId && open && !isSearchMode,
+	});
+
+	// Search threads (when searching)
+	const {
+		data: searchData,
+		error: searchError,
+		isLoading: isLoadingSearch,
+	} = useQuery({
+		queryKey: ["search-threads", searchSpaceId, debouncedSearchQuery],
+		queryFn: () => searchThreads(Number(searchSpaceId), debouncedSearchQuery.trim()),
+		enabled: !!searchSpaceId && open && isSearchMode,
+	});
+
+	// Handle thread navigation
+	const handleThreadClick = useCallback(
+		(threadId: number) => {
+			router.push(`/dashboard/${searchSpaceId}/new-chat/${threadId}`);
+			onOpenChange(false);
+			// Also close the main sidebar on mobile
+			onCloseMobileSidebar?.();
+		},
+		[router, onOpenChange, searchSpaceId, onCloseMobileSidebar]
+	);
+
+	// Handle thread deletion
+	const handleDeleteThread = useCallback(
+		async (threadId: number) => {
+			setDeletingThreadId(threadId);
+			try {
+				await deleteThread(threadId);
+				toast.success(t("chat_deleted") || "Chat deleted successfully");
+				queryClient.invalidateQueries({ queryKey: ["all-threads", searchSpaceId] });
+				queryClient.invalidateQueries({ queryKey: ["search-threads", searchSpaceId] });
+				queryClient.invalidateQueries({ queryKey: ["threads", searchSpaceId] });
+
+				// If the deleted chat is currently open, close sidebar first then redirect
+				if (currentChatId === threadId) {
+					onOpenChange(false);
+					// Wait for sidebar close animation to complete before navigating
+					setTimeout(() => {
+						router.push(`/dashboard/${searchSpaceId}/new-chat`);
+					}, 250);
+				}
+			} catch (error) {
+				console.error("Error deleting thread:", error);
+				toast.error(t("error_deleting_chat") || "Failed to delete chat");
+			} finally {
+				setDeletingThreadId(null);
+			}
+		},
+		[queryClient, searchSpaceId, t, currentChatId, router, onOpenChange]
+	);
+
+	// Handle thread archive/unarchive
+	const handleToggleArchive = useCallback(
+		async (threadId: number, currentlyArchived: boolean) => {
+			setArchivingThreadId(threadId);
+			try {
+				await updateThread(threadId, { archived: !currentlyArchived });
+				toast.success(
+					currentlyArchived
+						? t("chat_unarchived") || "Chat restored"
+						: t("chat_archived") || "Chat archived"
+				);
+				queryClient.invalidateQueries({ queryKey: ["all-threads", searchSpaceId] });
+				queryClient.invalidateQueries({ queryKey: ["search-threads", searchSpaceId] });
+				queryClient.invalidateQueries({ queryKey: ["threads", searchSpaceId] });
+			} catch (error) {
+				console.error("Error archiving thread:", error);
+				toast.error(t("error_archiving_chat") || "Failed to archive chat");
+			} finally {
+				setArchivingThreadId(null);
+			}
+		},
+		[queryClient, searchSpaceId, t]
+	);
+
+	// Clear search
+	const handleClearSearch = useCallback(() => {
+		setSearchQuery("");
+	}, []);
+
+	// Determine which data source to use
+	let threads: ThreadListItem[] = [];
+	if (isSearchMode) {
+		threads = searchData ?? [];
+	} else if (threadsData) {
+		threads = showArchived ? threadsData.archived_threads : threadsData.threads;
+	}
+
+	const isLoading = isSearchMode ? isLoadingSearch : isLoadingThreads;
+	const error = isSearchMode ? searchError : threadsError;
+
+	// Get counts for tabs
+	const activeCount = threadsData?.threads.length ?? 0;
+	const archivedCount = threadsData?.archived_threads.length ?? 0;
+
+	if (!mounted) return null;
+
+	return createPortal(
+		<AnimatePresence>
+			{open && (
+				<>
+					{/* Backdrop */}
+					<motion.div
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.2 }}
+						className="fixed inset-0 z-[70] bg-black/50"
+						onClick={() => onOpenChange(false)}
+						aria-hidden="true"
+					/>
+
+					{/* Panel */}
+					<motion.div
+						initial={{ x: "-100%" }}
+						animate={{ x: 0 }}
+						exit={{ x: "-100%" }}
+						transition={{ type: "spring", damping: 25, stiffness: 300 }}
+						className="fixed inset-y-0 left-0 z-[70] w-80 bg-background shadow-xl flex flex-col pointer-events-auto isolate"
+						role="dialog"
+						aria-modal="true"
+						aria-label={t("all_chats") || "All Chats"}
+					>
+						{/* Header */}
+						<div className="flex-shrink-0 p-4 pb-2 space-y-3">
+							<div className="flex items-center justify-between">
+								<h2 className="text-lg font-semibold">{t("all_chats") || "All Chats"}</h2>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="h-8 w-8 rounded-full"
+									onClick={() => onOpenChange(false)}
+								>
+									<X className="h-4 w-4" />
+									<span className="sr-only">Close</span>
+								</Button>
+							</div>
+
+							{/* Search Input */}
+							<div className="relative">
+								<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+								<Input
+									type="text"
+									placeholder={t("search_chats") || "Search chats..."}
+									value={searchQuery}
+									onChange={(e) => setSearchQuery(e.target.value)}
+									className="pl-9 pr-8 h-9"
+								/>
+								{searchQuery && (
+									<Button
+										variant="ghost"
+										size="icon"
+										className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6"
+										onClick={handleClearSearch}
+									>
+										<X className="h-3.5 w-3.5" />
+										<span className="sr-only">{t("clear_search") || "Clear search"}</span>
+									</Button>
+								)}
+							</div>
+						</div>
+
+						{/* Tab toggle for active/archived (only show when not searching) */}
+						{!isSearchMode && (
+							<div className="flex-shrink-0 flex border-b mx-4">
+								<button
+									type="button"
+									onClick={() => setShowArchived(false)}
+									className={cn(
+										"flex-1 px-3 py-2 text-center text-xs font-medium transition-colors",
+										!showArchived
+											? "border-b-2 border-primary text-primary"
+											: "text-muted-foreground hover:text-foreground"
+									)}
+								>
+									Active ({activeCount})
+								</button>
+								<button
+									type="button"
+									onClick={() => setShowArchived(true)}
+									className={cn(
+										"flex-1 px-3 py-2 text-center text-xs font-medium transition-colors",
+										showArchived
+											? "border-b-2 border-primary text-primary"
+											: "text-muted-foreground hover:text-foreground"
+									)}
+								>
+									Archived ({archivedCount})
+								</button>
+							</div>
+						)}
+
+						{/* Scrollable Content */}
+						<div className="flex-1 overflow-y-auto overflow-x-hidden p-2">
+							{isLoading ? (
+								<div className="flex items-center justify-center py-8">
+									<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+								</div>
+							) : error ? (
+								<div className="text-center py-8 text-sm text-destructive">
+									{t("error_loading_chats") || "Error loading chats"}
+								</div>
+							) : threads.length > 0 ? (
+								<div className="space-y-1">
+									{threads.map((thread) => {
+										const isDeleting = deletingThreadId === thread.id;
+										const isArchiving = archivingThreadId === thread.id;
+										const isBusy = isDeleting || isArchiving;
+										const isActive = currentChatId === thread.id;
+
+										return (
+											<div
+												key={thread.id}
+												className={cn(
+													"group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+													"hover:bg-accent hover:text-accent-foreground",
+													"transition-colors cursor-pointer",
+													isActive && "bg-accent text-accent-foreground",
+													isBusy && "opacity-50 pointer-events-none"
+												)}
+											>
+												{/* Main clickable area for navigation */}
+												<Tooltip>
+													<TooltipTrigger asChild>
+														<button
+															type="button"
+															onClick={() => handleThreadClick(thread.id)}
+															disabled={isBusy}
+															className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
+														>
+															<MessageCircleMore className="h-4 w-4 shrink-0 text-muted-foreground" />
+															<span className="truncate">{thread.title || "New Chat"}</span>
+														</button>
+													</TooltipTrigger>
+													<TooltipContent side="bottom" align="start">
+														<p>
+															{t("updated") || "Updated"}:{" "}
+															{format(new Date(thread.updatedAt), "MMM d, yyyy 'at' h:mm a")}
+														</p>
+													</TooltipContent>
+												</Tooltip>
+
+												{/* Actions dropdown */}
+												<DropdownMenu
+													open={openDropdownId === thread.id}
+													onOpenChange={(isOpen) => setOpenDropdownId(isOpen ? thread.id : null)}
+												>
+													<DropdownMenuTrigger asChild>
+														<Button
+															variant="ghost"
+															size="icon"
+															className={cn(
+																"h-6 w-6 shrink-0",
+																"md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
+																"transition-opacity"
+															)}
+															disabled={isBusy}
+														>
+															{isDeleting ? (
+																<Loader2 className="h-3.5 w-3.5 animate-spin" />
+															) : (
+																<MoreHorizontal className="h-3.5 w-3.5" />
+															)}
+															<span className="sr-only">{t("more_options") || "More options"}</span>
+														</Button>
+													</DropdownMenuTrigger>
+													<DropdownMenuContent align="end" className="w-40 z-[80]">
+														<DropdownMenuItem
+															onClick={() => handleToggleArchive(thread.id, thread.archived)}
+															disabled={isArchiving}
+														>
+															{thread.archived ? (
+																<>
+																	<RotateCcwIcon className="mr-2 h-4 w-4" />
+																	<span>{t("unarchive") || "Restore"}</span>
+																</>
+															) : (
+																<>
+																	<ArchiveIcon className="mr-2 h-4 w-4" />
+																	<span>{t("archive") || "Archive"}</span>
+																</>
+															)}
+														</DropdownMenuItem>
+														<DropdownMenuSeparator />
+														<DropdownMenuItem
+															onClick={() => handleDeleteThread(thread.id)}
+															className="text-destructive focus:text-destructive"
+														>
+															<Trash2 className="mr-2 h-4 w-4" />
+															<span>{t("delete") || "Delete"}</span>
+														</DropdownMenuItem>
+													</DropdownMenuContent>
+												</DropdownMenu>
+											</div>
+										);
+									})}
+								</div>
+							) : isSearchMode ? (
+								<div className="text-center py-8">
+									<Search className="h-12 w-12 mx-auto text-muted-foreground/50 mb-3" />
+									<p className="text-sm text-muted-foreground">
+										{t("no_chats_found") || "No chats found"}
+									</p>
+									<p className="text-xs text-muted-foreground/70 mt-1">
+										{t("try_different_search") || "Try a different search term"}
+									</p>
+								</div>
+							) : (
+								<div className="text-center py-8">
+									<MessageCircleMore className="h-12 w-12 mx-auto text-muted-foreground/50 mb-3" />
+									<p className="text-sm text-muted-foreground">
+										{showArchived
+											? t("no_archived_chats") || "No archived chats"
+											: t("no_chats") || "No chats yet"}
+									</p>
+									{!showArchived && (
+										<p className="text-xs text-muted-foreground/70 mt-1">
+											{t("start_new_chat_hint") || "Start a new chat from the chat page"}
+										</p>
+									)}
+								</div>
+							)}
+						</div>
+					</motion.div>
+				</>
+			)}
+		</AnimatePresence>,
+		document.body
+	);
+}
diff --git a/surfsense_web/components/layout/ui/sidebar/AllNotesSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllNotesSidebar.tsx
new file mode 100644
index 000000000..67d1b4ba6
--- /dev/null
+++ b/surfsense_web/components/layout/ui/sidebar/AllNotesSidebar.tsx
@@ -0,0 +1,407 @@
+"use client";
+
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { format } from "date-fns";
+import { FileText, Loader2, MoreHorizontal, Plus, Search, Trash2, X } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useParams, useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useDebouncedValue } from "@/hooks/use-debounced-value";
+import { documentsApiService } from "@/lib/apis/documents-api.service";
+import { notesApiService } from "@/lib/apis/notes-api.service";
+import { cn } from "@/lib/utils";
+
+interface AllNotesSidebarProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	searchSpaceId: string;
+	onAddNote?: () => void;
+	onCloseMobileSidebar?: () => void;
+}
+
+export function AllNotesSidebar({
+	open,
+	onOpenChange,
+	searchSpaceId,
+	onAddNote,
+	onCloseMobileSidebar,
+}: AllNotesSidebarProps) {
+	const t = useTranslations("sidebar");
+	const router = useRouter();
+	const params = useParams();
+	const queryClient = useQueryClient();
+
+	// Get the current note ID from URL to highlight the open note
+	const currentNoteId = params.note_id ? Number(params.note_id) : null;
+	const [deletingNoteId, setDeletingNoteId] = useState<number | null>(null);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [mounted, setMounted] = useState(false);
+	const [openDropdownId, setOpenDropdownId] = useState<number | null>(null);
+	const debouncedSearchQuery = useDebouncedValue(searchQuery, 300);
+
+	// Handle mounting for portal
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	// Handle escape key
+	useEffect(() => {
+		const handleEscape = (e: KeyboardEvent) => {
+			if (e.key === "Escape" && open) {
+				onOpenChange(false);
+			}
+		};
+		document.addEventListener("keydown", handleEscape);
+		return () => document.removeEventListener("keydown", handleEscape);
+	}, [open, onOpenChange]);
+
+	// Lock body scroll when open
+	useEffect(() => {
+		if (open) {
+			document.body.style.overflow = "hidden";
+		} else {
+			document.body.style.overflow = "";
+		}
+		return () => {
+			document.body.style.overflow = "";
+		};
+	}, [open]);
+
+	// Fetch all notes (when no search query)
+	const {
+		data: notesData,
+		error: notesError,
+		isLoading: isLoadingNotes,
+	} = useQuery({
+		queryKey: ["all-notes", searchSpaceId],
+		queryFn: () =>
+			notesApiService.getNotes({
+				search_space_id: Number(searchSpaceId),
+				page_size: 1000,
+			}),
+		enabled: !!searchSpaceId && open && !debouncedSearchQuery,
+	});
+
+	// Search notes (when there's a search query)
+	const {
+		data: searchData,
+		error: searchError,
+		isLoading: isSearching,
+	} = useQuery({
+		queryKey: ["search-notes", searchSpaceId, debouncedSearchQuery],
+		queryFn: () =>
+			documentsApiService.searchDocuments({
+				queryParams: {
+					search_space_id: Number(searchSpaceId),
+					document_types: ["NOTE"],
+					title: debouncedSearchQuery,
+					page_size: 100,
+				},
+			}),
+		enabled: !!searchSpaceId && open && !!debouncedSearchQuery,
+	});
+
+	// Handle note navigation
+	const handleNoteClick = useCallback(
+		(noteId: number, noteSearchSpaceId: number) => {
+			router.push(`/dashboard/${noteSearchSpaceId}/editor/${noteId}`);
+			onOpenChange(false);
+			// Also close the main sidebar on mobile
+			onCloseMobileSidebar?.();
+		},
+		[router, onOpenChange, onCloseMobileSidebar]
+	);
+
+	// Handle note deletion
+	const handleDeleteNote = useCallback(
+		async (noteId: number, noteSearchSpaceId: number) => {
+			setDeletingNoteId(noteId);
+			try {
+				await notesApiService.deleteNote({
+					search_space_id: noteSearchSpaceId,
+					note_id: noteId,
+				});
+				queryClient.invalidateQueries({ queryKey: ["all-notes", searchSpaceId] });
+				queryClient.invalidateQueries({ queryKey: ["notes", searchSpaceId] });
+				queryClient.invalidateQueries({ queryKey: ["search-notes", searchSpaceId] });
+			} catch (error) {
+				console.error("Error deleting note:", error);
+			} finally {
+				setDeletingNoteId(null);
+			}
+		},
+		[queryClient, searchSpaceId]
+	);
+
+	// Clear search
+	const handleClearSearch = useCallback(() => {
+		setSearchQuery("");
+	}, []);
+
+	// Determine which data to show
+	const isSearchMode = !!debouncedSearchQuery;
+	const isLoading = isSearchMode ? isSearching : isLoadingNotes;
+	const error = isSearchMode ? searchError : notesError;
+
+	// Transform and sort notes data - handle both regular notes and search results
+	const notes = useMemo(() => {
+		let notesList: {
+			id: number;
+			title: string;
+			search_space_id: number;
+			created_at: string;
+			updated_at?: string | null;
+		}[];
+
+		if (isSearchMode && searchData?.items) {
+			notesList = searchData.items.map((doc) => ({
+				id: doc.id,
+				title: doc.title,
+				search_space_id: doc.search_space_id,
+				created_at: doc.created_at,
+				updated_at: doc.updated_at,
+			}));
+		} else {
+			notesList = notesData?.items ?? [];
+		}
+
+		// Sort notes by updated_at (most recent first), fallback to created_at
+		return [...notesList].sort((a, b) => {
+			const dateA = a.updated_at
+				? new Date(a.updated_at).getTime()
+				: new Date(a.created_at).getTime();
+			const dateB = b.updated_at
+				? new Date(b.updated_at).getTime()
+				: new Date(b.created_at).getTime();
+			return dateB - dateA; // Descending order (most recent first)
+		});
+	}, [isSearchMode, searchData, notesData]);
+
+	if (!mounted) return null;
+
+	return createPortal(
+		<AnimatePresence>
+			{open && (
+				<>
+					{/* Backdrop */}
+					<motion.div
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.2 }}
+						className="fixed inset-0 z-[70] bg-black/50"
+						onClick={() => onOpenChange(false)}
+						aria-hidden="true"
+					/>
+
+					{/* Panel */}
+					<motion.div
+						initial={{ x: "-100%" }}
+						animate={{ x: 0 }}
+						exit={{ x: "-100%" }}
+						transition={{ type: "spring", damping: 25, stiffness: 300 }}
+						className="fixed inset-y-0 left-0 z-[70] w-80 bg-background shadow-xl flex flex-col pointer-events-auto isolate"
+						role="dialog"
+						aria-modal="true"
+						aria-label={t("all_notes") || "All Notes"}
+					>
+						{/* Header */}
+						<div className="flex-shrink-0 p-4 pb-3 space-y-3">
+							<div className="flex items-center justify-between">
+								<h2 className="text-lg font-semibold">{t("all_notes") || "All Notes"}</h2>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="h-8 w-8 rounded-full"
+									onClick={() => onOpenChange(false)}
+								>
+									<X className="h-4 w-4" />
+									<span className="sr-only">Close</span>
+								</Button>
+							</div>
+
+							{/* Search Input */}
+							<div className="relative">
+								<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+								<Input
+									type="text"
+									placeholder={t("search_notes") || "Search notes..."}
+									value={searchQuery}
+									onChange={(e) => setSearchQuery(e.target.value)}
+									className="pl-9 pr-8 h-9"
+								/>
+								{searchQuery && (
+									<Button
+										variant="ghost"
+										size="icon"
+										className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6"
+										onClick={handleClearSearch}
+									>
+										<X className="h-3.5 w-3.5" />
+										<span className="sr-only">{t("clear_search") || "Clear search"}</span>
+									</Button>
+								)}
+							</div>
+						</div>
+
+						{/* Scrollable Content */}
+						<div className="flex-1 overflow-y-auto overflow-x-hidden p-2">
+							{isLoading ? (
+								<div className="flex items-center justify-center py-8">
+									<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+								</div>
+							) : error ? (
+								<div className="text-center py-8 text-sm text-destructive">
+									{t("error_loading_notes") || "Error loading notes"}
+								</div>
+							) : notes.length > 0 ? (
+								<div className="space-y-1">
+									{notes.map((note) => {
+										const isDeleting = deletingNoteId === note.id;
+										const isActive = currentNoteId === note.id;
+
+										return (
+											<div
+												key={note.id}
+												className={cn(
+													"group flex items-center gap-2 rounded-md px-2 py-1.5 text-sm",
+													"hover:bg-accent hover:text-accent-foreground",
+													"transition-colors cursor-pointer",
+													isActive && "bg-accent text-accent-foreground",
+													isDeleting && "opacity-50 pointer-events-none"
+												)}
+											>
+												{/* Main clickable area for navigation */}
+												<Tooltip>
+													<TooltipTrigger asChild>
+														<button
+															type="button"
+															onClick={() => handleNoteClick(note.id, note.search_space_id)}
+															disabled={isDeleting}
+															className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
+														>
+															<FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
+															<span className="truncate">{note.title}</span>
+														</button>
+													</TooltipTrigger>
+													<TooltipContent side="bottom" align="start">
+														<div className="space-y-1">
+															<p>
+																{t("created") || "Created"}:{" "}
+																{format(new Date(note.created_at), "MMM d, yyyy 'at' h:mm a")}
+															</p>
+															{note.updated_at && (
+																<p>
+																	{t("updated") || "Updated"}:{" "}
+																	{format(new Date(note.updated_at), "MMM d, yyyy 'at' h:mm a")}
+																</p>
+															)}
+														</div>
+													</TooltipContent>
+												</Tooltip>
+
+												{/* Actions dropdown - separate from main click area */}
+												<DropdownMenu
+													open={openDropdownId === note.id}
+													onOpenChange={(isOpen) => setOpenDropdownId(isOpen ? note.id : null)}
+												>
+													<DropdownMenuTrigger asChild>
+														<Button
+															variant="ghost"
+															size="icon"
+															className={cn(
+																"h-6 w-6 shrink-0",
+																"md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
+																"transition-opacity"
+															)}
+															disabled={isDeleting}
+														>
+															{isDeleting ? (
+																<Loader2 className="h-3.5 w-3.5 animate-spin" />
+															) : (
+																<MoreHorizontal className="h-3.5 w-3.5" />
+															)}
+															<span className="sr-only">{t("more_options") || "More options"}</span>
+														</Button>
+													</DropdownMenuTrigger>
+													<DropdownMenuContent align="end" className="w-40 z-[80]">
+														<DropdownMenuItem
+															onClick={() => handleDeleteNote(note.id, note.search_space_id)}
+															className="text-destructive focus:text-destructive"
+														>
+															<Trash2 className="mr-2 h-4 w-4" />
+															<span>{t("delete") || "Delete"}</span>
+														</DropdownMenuItem>
+													</DropdownMenuContent>
+												</DropdownMenu>
+											</div>
+										);
+									})}
+								</div>
+							) : isSearchMode ? (
+								<div className="text-center py-8">
+									<Search className="h-12 w-12 mx-auto text-muted-foreground/50 mb-3" />
+									<p className="text-sm text-muted-foreground">
+										{t("no_results_found") || "No notes found"}
+									</p>
+									<p className="text-xs text-muted-foreground/70 mt-1">
+										{t("try_different_search") || "Try a different search term"}
+									</p>
+								</div>
+							) : (
+								<div className="text-center py-8">
+									<FileText className="h-12 w-12 mx-auto text-muted-foreground/50 mb-3" />
+									<p className="text-sm text-muted-foreground mb-4">
+										{t("no_notes") || "No notes yet"}
+									</p>
+									{onAddNote && (
+										<Button
+											variant="outline"
+											size="sm"
+											onClick={() => {
+												onAddNote();
+												onOpenChange(false);
+											}}
+										>
+											<Plus className="mr-2 h-4 w-4" />
+											{t("create_new_note") || "Create a note"}
+										</Button>
+									)}
+								</div>
+							)}
+						</div>
+
+						{/* Footer with Add Note button */}
+						{onAddNote && notes.length > 0 && (
+							<div className="flex-shrink-0 p-3">
+								<Button
+									onClick={() => {
+										onAddNote();
+										onOpenChange(false);
+									}}
+									className="w-full"
+									size="sm"
+								>
+									<Plus className="mr-2 h-4 w-4" />
+									{t("create_new_note") || "Create a new note"}
+								</Button>
+							</div>
+						)}
+					</motion.div>
+				</>
+			)}
+		</AnimatePresence>,
+		document.body
+	);
+}
diff --git a/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx b/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
new file mode 100644
index 000000000..7f5ede04c
--- /dev/null
+++ b/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { MessageSquare, MoreHorizontal } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+
+interface ChatListItemProps {
+	name: string;
+	isActive?: boolean;
+	onClick?: () => void;
+	onDelete?: () => void;
+}
+
+export function ChatListItem({ name, isActive, onClick, onDelete }: ChatListItemProps) {
+	const t = useTranslations("sidebar");
+
+	return (
+		<div className="group/item relative w-full">
+			<button
+				type="button"
+				onClick={onClick}
+				className={cn(
+					"flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-sm text-left transition-colors",
+					"[&>span:last-child]:truncate",
+					"hover:bg-accent hover:text-accent-foreground",
+					"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+					isActive && "bg-accent text-accent-foreground"
+				)}
+			>
+				<MessageSquare className="h-4 w-4 shrink-0 text-muted-foreground" />
+				<span className="w-[calc(100%-3rem)] ">{name}</span>
+			</button>
+
+			{/* Actions dropdown */}
+			<div className="absolute right-1 top-1/2 -translate-y-1/2 opacity-0 group-hover/item:opacity-100 transition-opacity">
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="ghost" size="icon" className="h-6 w-6">
+							<MoreHorizontal className="h-3.5 w-3.5" />
+							<span className="sr-only">{t("more_options")}</span>
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end" side="right">
+						<DropdownMenuItem
+							onClick={(e) => {
+								e.stopPropagation();
+								onDelete?.();
+							}}
+							className="text-destructive focus:text-destructive"
+						>
+							{t("delete")}
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+		</div>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx
new file mode 100644
index 000000000..8429d6671
--- /dev/null
+++ b/surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import { Menu } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
+import type {
+	ChatItem,
+	NavItem,
+	NoteItem,
+	PageUsage,
+	User,
+	Workspace,
+} from "../../types/layout.types";
+import { IconRail } from "../icon-rail";
+import { Sidebar } from "./Sidebar";
+
+interface MobileSidebarProps {
+	isOpen: boolean;
+	onOpenChange: (open: boolean) => void;
+	workspaces: Workspace[];
+	activeWorkspaceId: number | null;
+	onWorkspaceSelect: (id: number) => void;
+	onAddWorkspace: () => void;
+	workspace: Workspace | null;
+	navItems: NavItem[];
+	onNavItemClick?: (item: NavItem) => void;
+	chats: ChatItem[];
+	activeChatId?: number | null;
+	onNewChat: () => void;
+	onChatSelect: (chat: ChatItem) => void;
+	onChatDelete?: (chat: ChatItem) => void;
+	onViewAllChats?: () => void;
+	notes: NoteItem[];
+	activeNoteId?: number | null;
+	onNoteSelect: (note: NoteItem) => void;
+	onNoteDelete?: (note: NoteItem) => void;
+	onAddNote?: () => void;
+	onViewAllNotes?: () => void;
+	user: User;
+	onSettings?: () => void;
+	onInviteMembers?: () => void;
+	onSeeAllWorkspaces?: () => void;
+	onLogout?: () => void;
+	pageUsage?: PageUsage;
+}
+
+export function MobileSidebarTrigger({ onClick }: { onClick: () => void }) {
+	return (
+		<Button variant="ghost" size="icon" className="md:hidden h-8 w-8" onClick={onClick}>
+			<Menu className="h-5 w-5" />
+			<span className="sr-only">Open menu</span>
+		</Button>
+	);
+}
+
+export function MobileSidebar({
+	isOpen,
+	onOpenChange,
+	workspaces,
+	activeWorkspaceId,
+	onWorkspaceSelect,
+	onAddWorkspace,
+	workspace,
+	navItems,
+	onNavItemClick,
+	chats,
+	activeChatId,
+	onNewChat,
+	onChatSelect,
+	onChatDelete,
+	onViewAllChats,
+	notes,
+	activeNoteId,
+	onNoteSelect,
+	onNoteDelete,
+	onAddNote,
+	onViewAllNotes,
+	user,
+	onSettings,
+	onInviteMembers,
+	onSeeAllWorkspaces,
+	onLogout,
+	pageUsage,
+}: MobileSidebarProps) {
+	const handleWorkspaceSelect = (id: number) => {
+		onWorkspaceSelect(id);
+	};
+
+	const handleNavItemClick = (item: NavItem) => {
+		onNavItemClick?.(item);
+		onOpenChange(false);
+	};
+
+	const handleChatSelect = (chat: ChatItem) => {
+		onChatSelect(chat);
+		onOpenChange(false);
+	};
+
+	const handleNoteSelect = (note: NoteItem) => {
+		onNoteSelect(note);
+		onOpenChange(false);
+	};
+
+	return (
+		<Sheet open={isOpen} onOpenChange={onOpenChange}>
+			<SheetContent side="left" className="w-[320px] p-0 flex">
+				<SheetTitle className="sr-only">Navigation</SheetTitle>
+
+				<div className="shrink-0 border-r bg-muted/40">
+					<ScrollArea className="h-full">
+						<IconRail
+							workspaces={workspaces}
+							activeWorkspaceId={activeWorkspaceId}
+							onWorkspaceSelect={handleWorkspaceSelect}
+							onAddWorkspace={onAddWorkspace}
+						/>
+					</ScrollArea>
+				</div>
+
+				<div className="flex-1 overflow-hidden">
+					<Sidebar
+						workspace={workspace}
+						isCollapsed={false}
+						navItems={navItems}
+						onNavItemClick={handleNavItemClick}
+						chats={chats}
+						activeChatId={activeChatId}
+						onNewChat={() => {
+							onNewChat();
+							onOpenChange(false);
+						}}
+						onChatSelect={handleChatSelect}
+						onChatDelete={onChatDelete}
+						onViewAllChats={onViewAllChats}
+						notes={notes}
+						activeNoteId={activeNoteId}
+						onNoteSelect={handleNoteSelect}
+						onNoteDelete={onNoteDelete}
+						onAddNote={onAddNote}
+						onViewAllNotes={onViewAllNotes}
+						user={user}
+						onSettings={onSettings}
+						onInviteMembers={onInviteMembers}
+						onSeeAllWorkspaces={onSeeAllWorkspaces}
+						onLogout={onLogout}
+						pageUsage={pageUsage}
+						className="w-full border-none"
+					/>
+				</div>
+			</SheetContent>
+		</Sheet>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/sidebar/NavSection.tsx b/surfsense_web/components/layout/ui/sidebar/NavSection.tsx
new file mode 100644
index 000000000..7b694055b
--- /dev/null
+++ b/surfsense_web/components/layout/ui/sidebar/NavSection.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import type { NavItem } from "../../types/layout.types";
+
+interface NavSectionProps {
+	items: NavItem[];
+	onItemClick?: (item: NavItem) => void;
+	isCollapsed?: boolean;
+}
+
+export function NavSection({ items, onItemClick, isCollapsed = false }: NavSectionProps) {
+	return (
+		<div className={cn("flex flex-col gap-0.5 py-2", isCollapsed && "items-center")}>
+			{items.map((item) => {
+				const Icon = item.icon;
+
+				// Add data-joyride for onboarding tour
+				const joyrideAttr =
+					item.title === "Documents" || item.title.toLowerCase().includes("documents")
+						? { "data-joyride": "documents-sidebar" }
+						: {};
+
+				if (isCollapsed) {
+					return (
+						<Tooltip key={item.url}>
+							<TooltipTrigger asChild>
+								<button
+									type="button"
+									onClick={() => onItemClick?.(item)}
+									className={cn(
+										"flex h-10 w-10 items-center justify-center rounded-md transition-colors",
+										"hover:bg-accent hover:text-accent-foreground",
+										"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+										item.isActive && "bg-accent text-accent-foreground"
+									)}
+									{...joyrideAttr}
+								>
+									<Icon className="h-4 w-4" />
+									<span className="sr-only">{item.title}</span>
+								</button>
+							</TooltipTrigger>
+							<TooltipContent side="right">
+								{item.title}
+								{item.badge && ` (${item.badge})`}
+							</TooltipContent>
+						</Tooltip>
+					);
+				}
+
+				return (
+					<button
+						key={item.url}
+						type="button"
+						onClick={() => onItemClick?.(item)}
+						className={cn(
+							"flex items-center gap-2 rounded-md mx-2 px-2 py-1.5 text-sm transition-colors text-left",
+							"hover:bg-accent hover:text-accent-foreground",
+							"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+							item.isActive && "bg-accent text-accent-foreground"
+						)}
+						{...joyrideAttr}
+					>
+						<Icon className="h-4 w-4 shrink-0" />
+						<span className="flex-1 truncate">{item.title}</span>
+						{item.badge && <span className="text-xs text-muted-foreground">{item.badge}</span>}
+					</button>
+				);
+			})}
+		</div>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/sidebar/NoteListItem.tsx b/surfsense_web/components/layout/ui/sidebar/NoteListItem.tsx
new file mode 100644
index 000000000..0491ebcca
--- /dev/null
+++ b/surfsense_web/components/layout/ui/sidebar/NoteListItem.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import { FileText, Loader2, MoreHorizontal } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+
+interface NoteListItemProps {
+	name: string;
+	isActive?: boolean;
+	isReindexing?: boolean;
+	onClick?: () => void;
+	onDelete?: () => void;
+}
+
+export function NoteListItem({
+	name,
+	isActive,
+	isReindexing,
+	onClick,
+	onDelete,
+}: NoteListItemProps) {
+	const t = useTranslations("sidebar");
+
+	return (
+		<div className="group/item relative">
+			<button
+				type="button"
+				onClick={onClick}
+				className={cn(
+					"flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-sm text-left transition-colors",
+					"[&>span:last-child]:truncate",
+					"hover:bg-accent hover:text-accent-foreground",
+					"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+					isActive && "bg-accent text-accent-foreground"
+				)}
+			>
+				{isReindexing ? (
+					<Loader2 className="h-4 w-4 shrink-0 animate-spin text-primary" />
+				) : (
+					<FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
+				)}
+				<span>{name}</span>
+			</button>
+
+			{/* Actions dropdown */}
+			<div className="absolute right-1 top-1/2 -translate-y-1/2 opacity-0 group-hover/item:opacity-100 transition-opacity">
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="ghost" size="icon" className="h-6 w-6">
+							<MoreHorizontal className="h-3.5 w-3.5" />
+							<span className="sr-only">{t("more_options")}</span>
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end" side="right">
+						<DropdownMenuItem
+							onClick={(e) => {
+								e.stopPropagation();
+								onDelete?.();
+							}}
+							className="text-destructive focus:text-destructive"
+						>
+							{t("delete")}
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+		</div>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/sidebar/PageUsageDisplay.tsx b/surfsense_web/components/layout/ui/sidebar/PageUsageDisplay.tsx
new file mode 100644
index 000000000..85abae19b
--- /dev/null
+++ b/surfsense_web/components/layout/ui/sidebar/PageUsageDisplay.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { Mail } from "lucide-react";
+import { Progress } from "@/components/ui/progress";
+
+interface PageUsageDisplayProps {
+	pagesUsed: number;
+	pagesLimit: number;
+}
+
+export function PageUsageDisplay({ pagesUsed, pagesLimit }: PageUsageDisplayProps) {
+	const usagePercentage = (pagesUsed / pagesLimit) * 100;
+
+	return (
+		<div className="px-3 py-3 border-t">
+			<div className="space-y-2">
+				<div className="flex justify-between items-center text-xs">
+					<span className="text-muted-foreground">
+						{pagesUsed.toLocaleString()} / {pagesLimit.toLocaleString()} pages
+					</span>
+					<span className="font-medium">{usagePercentage.toFixed(0)}%</span>
+				</div>
+				<Progress value={usagePercentage} className="h-1.5" />
+				<a
+					href="mailto:rohan@surfsense.com?subject=Request%20to%20Increase%20Page%20Limits"
+					className="flex items-center gap-1.5 text-[10px] text-muted-foreground hover:text-primary transition-colors"
+				>
+					<Mail className="h-3 w-3 shrink-0" />
+					<span>Contact to increase limits</span>
+				</a>
+			</div>
+		</div>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
new file mode 100644
index 000000000..5031b08b5
--- /dev/null
+++ b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
@@ -0,0 +1,294 @@
+"use client";
+
+import { FileText, FolderOpen, MessageSquare, PenSquare, Plus } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import type {
+	ChatItem,
+	NavItem,
+	NoteItem,
+	PageUsage,
+	User,
+	Workspace,
+} from "../../types/layout.types";
+import { ChatListItem } from "./ChatListItem";
+import { NavSection } from "./NavSection";
+import { NoteListItem } from "./NoteListItem";
+import { PageUsageDisplay } from "./PageUsageDisplay";
+import { SidebarCollapseButton } from "./SidebarCollapseButton";
+import { SidebarHeader } from "./SidebarHeader";
+import { SidebarSection } from "./SidebarSection";
+import { SidebarUserProfile } from "./SidebarUserProfile";
+
+interface SidebarProps {
+	workspace: Workspace | null;
+	isCollapsed?: boolean;
+	onToggleCollapse?: () => void;
+	navItems: NavItem[];
+	onNavItemClick?: (item: NavItem) => void;
+	chats: ChatItem[];
+	activeChatId?: number | null;
+	onNewChat: () => void;
+	onChatSelect: (chat: ChatItem) => void;
+	onChatDelete?: (chat: ChatItem) => void;
+	onViewAllChats?: () => void;
+	notes: NoteItem[];
+	activeNoteId?: number | null;
+	onNoteSelect: (note: NoteItem) => void;
+	onNoteDelete?: (note: NoteItem) => void;
+	onAddNote?: () => void;
+	onViewAllNotes?: () => void;
+	user: User;
+	onSettings?: () => void;
+	onInviteMembers?: () => void;
+	onSeeAllWorkspaces?: () => void;
+	onLogout?: () => void;
+	pageUsage?: PageUsage;
+	className?: string;
+}
+
+export function Sidebar({
+	workspace,
+	isCollapsed = false,
+	onToggleCollapse,
+	navItems,
+	onNavItemClick,
+	chats,
+	activeChatId,
+	onNewChat,
+	onChatSelect,
+	onChatDelete,
+	onViewAllChats,
+	notes,
+	activeNoteId,
+	onNoteSelect,
+	onNoteDelete,
+	onAddNote,
+	onViewAllNotes,
+	user,
+	onSettings,
+	onInviteMembers,
+	onSeeAllWorkspaces,
+	onLogout,
+	pageUsage,
+	className,
+}: SidebarProps) {
+	const t = useTranslations("sidebar");
+
+	return (
+		<div
+			className={cn(
+				"flex h-full flex-col bg-sidebar text-sidebar-foreground transition-all duration-200 overflow-hidden",
+				isCollapsed ? "w-[60px]" : "w-[240px]",
+				className
+			)}
+		>
+			{/* Header - workspace name or collapse button when collapsed */}
+			{isCollapsed ? (
+				<div className="flex h-14 shrink-0 items-center justify-center border-b">
+					<SidebarCollapseButton
+						isCollapsed={isCollapsed}
+						onToggle={onToggleCollapse ?? (() => {})}
+					/>
+				</div>
+			) : (
+				<div className="flex h-14 shrink-0 items-center justify-between px-1 border-b">
+					<SidebarHeader
+						workspace={workspace}
+						isCollapsed={isCollapsed}
+						onSettings={onSettings}
+						onInviteMembers={onInviteMembers}
+						onSeeAllWorkspaces={onSeeAllWorkspaces}
+					/>
+					<div className="">
+						<SidebarCollapseButton
+							isCollapsed={isCollapsed}
+							onToggle={onToggleCollapse ?? (() => {})}
+						/>
+					</div>
+				</div>
+			)}
+
+			{/* New chat button */}
+			<div className="p-2">
+				{isCollapsed ? (
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button variant="outline" size="icon" className="w-full h-10" onClick={onNewChat}>
+								<PenSquare className="h-4 w-4" />
+								<span className="sr-only">{t("new_chat")}</span>
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent side="right">{t("new_chat")}</TooltipContent>
+					</Tooltip>
+				) : (
+					<Button variant="outline" className="w-full justify-start gap-2" onClick={onNewChat}>
+						<PenSquare className="h-4 w-4" />
+						{t("new_chat")}
+					</Button>
+				)}
+			</div>
+
+			{/* Platform navigation */}
+			{navItems.length > 0 && (
+				<NavSection items={navItems} onItemClick={onNavItemClick} isCollapsed={isCollapsed} />
+			)}
+
+			{/* Scrollable content */}
+			<ScrollArea className="flex-1">
+				{isCollapsed ? (
+					<div className="flex flex-col items-center gap-2 py-2 w-[60px]">
+						{chats.length > 0 && (
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<Button
+										variant="ghost"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() => onToggleCollapse?.()}
+									>
+										<MessageSquare className="h-4 w-4" />
+										<span className="sr-only">{t("recent_chats")}</span>
+									</Button>
+								</TooltipTrigger>
+								<TooltipContent side="right">
+									{t("recent_chats")} ({chats.length})
+								</TooltipContent>
+							</Tooltip>
+						)}
+						{notes.length > 0 && (
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<Button
+										variant="ghost"
+										size="icon"
+										className="h-10 w-10"
+										onClick={() => onToggleCollapse?.()}
+									>
+										<FileText className="h-4 w-4" />
+										<span className="sr-only">{t("notes")}</span>
+									</Button>
+								</TooltipTrigger>
+								<TooltipContent side="right">
+									{t("notes")} ({notes.length})
+								</TooltipContent>
+							</Tooltip>
+						)}
+					</div>
+				) : (
+					<div className="flex flex-col gap-1 py-2 w-[240px]">
+						<SidebarSection
+							title={t("recent_chats")}
+							defaultOpen={true}
+							action={
+								onViewAllChats && chats.length > 0 ? (
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<Button
+												variant="ghost"
+												size="icon"
+												className="h-5 w-5"
+												onClick={onViewAllChats}
+											>
+												<FolderOpen className="h-3.5 w-3.5" />
+											</Button>
+										</TooltipTrigger>
+										<TooltipContent side="top">{t("view_all_chats")}</TooltipContent>
+									</Tooltip>
+								) : undefined
+							}
+						>
+							{chats.length > 0 ? (
+								<div className="flex flex-col gap-0.5">
+									{chats.map((chat) => (
+										<ChatListItem
+											key={chat.id}
+											name={chat.name}
+											isActive={chat.id === activeChatId}
+											onClick={() => onChatSelect(chat)}
+											onDelete={() => onChatDelete?.(chat)}
+										/>
+									))}
+								</div>
+							) : (
+								<p className="px-2 py-1 text-xs text-muted-foreground">{t("no_recent_chats")}</p>
+							)}
+						</SidebarSection>
+
+						<SidebarSection
+							title={t("notes")}
+							defaultOpen={true}
+							action={
+								onViewAllNotes && notes.length > 0 ? (
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<Button
+												variant="ghost"
+												size="icon"
+												className="h-5 w-5"
+												onClick={onViewAllNotes}
+											>
+												<FolderOpen className="h-3.5 w-3.5" />
+											</Button>
+										</TooltipTrigger>
+										<TooltipContent side="top">{t("view_all_notes")}</TooltipContent>
+									</Tooltip>
+								) : undefined
+							}
+							persistentAction={
+								onAddNote && notes.length > 0 ? (
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<Button variant="ghost" size="icon" className="h-5 w-5" onClick={onAddNote}>
+												<Plus className="h-3.5 w-3.5" />
+											</Button>
+										</TooltipTrigger>
+										<TooltipContent side="top">{t("add_note")}</TooltipContent>
+									</Tooltip>
+								) : undefined
+							}
+						>
+							{notes.length > 0 ? (
+								<div className="flex flex-col gap-0.5">
+									{notes.map((note) => (
+										<NoteListItem
+											key={note.id}
+											name={note.name}
+											isActive={note.id === activeNoteId}
+											isReindexing={note.isReindexing}
+											onClick={() => onNoteSelect(note)}
+											onDelete={() => onNoteDelete?.(note)}
+										/>
+									))}
+								</div>
+							) : onAddNote ? (
+								<button
+									type="button"
+									onClick={onAddNote}
+									className="flex items-center gap-2 px-2 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+								>
+									<Plus className="h-3.5 w-3.5" />
+									{t("create_new_note")}
+								</button>
+							) : (
+								<p className="px-2 py-1 text-xs text-muted-foreground">{t("no_notes")}</p>
+							)}
+						</SidebarSection>
+					</div>
+				)}
+			</ScrollArea>
+
+			{/* Footer */}
+			<div className="mt-auto">
+				{pageUsage && !isCollapsed && (
+					<PageUsageDisplay pagesUsed={pageUsage.pagesUsed} pagesLimit={pageUsage.pagesLimit} />
+				)}
+
+				<SidebarUserProfile user={user} onLogout={onLogout} isCollapsed={isCollapsed} />
+			</div>
+		</div>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarCollapseButton.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarCollapseButton.tsx
new file mode 100644
index 000000000..3eaa87070
--- /dev/null
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarCollapseButton.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { PanelLeft, PanelLeftClose } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+interface SidebarCollapseButtonProps {
+	isCollapsed: boolean;
+	onToggle: () => void;
+}
+
+export function SidebarCollapseButton({ isCollapsed, onToggle }: SidebarCollapseButtonProps) {
+	const t = useTranslations("sidebar");
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button variant="ghost" size="icon" onClick={onToggle} className="h-8 w-8 shrink-0">
+					{isCollapsed ? <PanelLeft className="h-4 w-4" /> : <PanelLeftClose className="h-4 w-4" />}
+					<span className="sr-only">
+						{isCollapsed ? t("expand_sidebar") : t("collapse_sidebar")}
+					</span>
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent side={isCollapsed ? "right" : "bottom"}>
+				{isCollapsed ? `${t("expand_sidebar")} (⌘B)` : `${t("collapse_sidebar")} (⌘B)`}
+			</TooltipContent>
+		</Tooltip>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx
new file mode 100644
index 000000000..cf15a367e
--- /dev/null
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { ChevronsUpDown, LayoutGrid, Settings, UserPlus } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import type { Workspace } from "../../types/layout.types";
+
+interface SidebarHeaderProps {
+	workspace: Workspace | null;
+	isCollapsed?: boolean;
+	onSettings?: () => void;
+	onInviteMembers?: () => void;
+	onSeeAllWorkspaces?: () => void;
+	className?: string;
+}
+
+export function SidebarHeader({
+	workspace,
+	isCollapsed,
+	onSettings,
+	onInviteMembers,
+	onSeeAllWorkspaces,
+	className,
+}: SidebarHeaderProps) {
+	const t = useTranslations("sidebar");
+
+	return (
+		<div className={cn("flex shrink-0 items-center", className)}>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button
+						variant="ghost"
+						className={cn(
+							"flex h-auto items-center justify-between gap-2 overflow-hidden py-1.5 font-semibold",
+							isCollapsed ? "w-10" : "w-50"
+						)}
+					>
+						<span className="truncate text-base">{workspace?.name ?? t("select_workspace")}</span>
+						<ChevronsUpDown className="h-4 w-4 shrink-0 text-muted-foreground" />
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="start" className="w-56">
+					<DropdownMenuItem onClick={onInviteMembers}>
+						<UserPlus className="mr-2 h-4 w-4" />
+						{t("invite_members")}
+					</DropdownMenuItem>
+					<DropdownMenuSeparator />
+					<DropdownMenuItem onClick={onSettings}>
+						<Settings className="mr-2 h-4 w-4" />
+						{t("workspace_settings")}
+					</DropdownMenuItem>
+					<DropdownMenuSeparator />
+					<DropdownMenuItem onClick={onSeeAllWorkspaces}>
+						<LayoutGrid className="mr-2 h-4 w-4" />
+						{t("see_all_workspaces")}
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</div>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
new file mode 100644
index 000000000..4d161e3fa
--- /dev/null
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+
+interface SidebarSectionProps {
+	title: string;
+	defaultOpen?: boolean;
+	children: React.ReactNode;
+	action?: React.ReactNode;
+	persistentAction?: React.ReactNode;
+}
+
+export function SidebarSection({
+	title,
+	defaultOpen = true,
+	children,
+	action,
+	persistentAction,
+}: SidebarSectionProps) {
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+
+	return (
+		<Collapsible open={isOpen} onOpenChange={setIsOpen} className="overflow-hidden">
+			<div className="flex items-center group/section">
+				<CollapsibleTrigger className="flex flex-1 items-center gap-1.5 px-2 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0">
+					<ChevronRight
+						className={cn(
+							"h-3.5 w-3.5 shrink-0 transition-transform duration-200",
+							isOpen && "rotate-90"
+						)}
+					/>
+					<span className="uppercase tracking-wider truncate">{title}</span>
+				</CollapsibleTrigger>
+
+				{/* Action button - visible on hover (always visible on mobile) */}
+				{action && (
+					<div className="shrink-0 opacity-0 group-hover/section:opacity-100 transition-opacity pr-1 flex items-center gap-0.5">
+						{action}
+					</div>
+				)}
+
+				{/* Persistent action - always visible */}
+				{persistentAction && (
+					<div className="shrink-0 pr-1 flex items-center gap-0.5">{persistentAction}</div>
+				)}
+			</div>
+
+			<CollapsibleContent className="overflow-hidden">
+				<div className="px-2 pb-2">{children}</div>
+			</CollapsibleContent>
+		</Collapsible>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
new file mode 100644
index 000000000..29b35b9a9
--- /dev/null
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import { ChevronUp, LogOut } from "lucide-react";
+import { useTranslations } from "next-intl";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import type { User } from "../../types/layout.types";
+
+interface SidebarUserProfileProps {
+	user: User;
+	onLogout?: () => void;
+	isCollapsed?: boolean;
+}
+
+/**
+ * Generates a consistent color based on email
+ */
+function stringToColor(str: string): string {
+	let hash = 0;
+	for (let i = 0; i < str.length; i++) {
+		hash = str.charCodeAt(i) + ((hash << 5) - hash);
+	}
+	const colors = [
+		"#6366f1",
+		"#8b5cf6",
+		"#a855f7",
+		"#d946ef",
+		"#ec4899",
+		"#f43f5e",
+		"#ef4444",
+		"#f97316",
+		"#eab308",
+		"#84cc16",
+		"#22c55e",
+		"#14b8a6",
+		"#06b6d4",
+		"#0ea5e9",
+		"#3b82f6",
+	];
+	return colors[Math.abs(hash) % colors.length];
+}
+
+/**
+ * Gets initials from email
+ */
+function getInitials(email: string): string {
+	const name = email.split("@")[0];
+	const parts = name.split(/[._-]/);
+	if (parts.length >= 2) {
+		return (parts[0][0] + parts[1][0]).toUpperCase();
+	}
+	return name.slice(0, 2).toUpperCase();
+}
+
+export function SidebarUserProfile({
+	user,
+	onLogout,
+	isCollapsed = false,
+}: SidebarUserProfileProps) {
+	const t = useTranslations("sidebar");
+	const bgColor = stringToColor(user.email);
+	const initials = getInitials(user.email);
+	const displayName = user.name || user.email.split("@")[0];
+
+	// Collapsed view - just show avatar with dropdown
+	if (isCollapsed) {
+		return (
+			<div className="border-t p-2">
+				<DropdownMenu>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<DropdownMenuTrigger asChild>
+								<button
+									type="button"
+									className={cn(
+										"flex h-10 w-full items-center justify-center rounded-md",
+										"hover:bg-accent transition-colors",
+										"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+									)}
+								>
+									<div
+										className="flex h-8 w-8 items-center justify-center rounded-lg text-xs font-semibold text-white"
+										style={{ backgroundColor: bgColor }}
+									>
+										{initials}
+									</div>
+									<span className="sr-only">{displayName}</span>
+								</button>
+							</DropdownMenuTrigger>
+						</TooltipTrigger>
+						<TooltipContent side="right">{displayName}</TooltipContent>
+					</Tooltip>
+
+					<DropdownMenuContent className="w-56" side="right" align="end" sideOffset={8}>
+						<DropdownMenuLabel className="font-normal">
+							<div className="flex items-center gap-2">
+								<div
+									className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-semibold text-white"
+									style={{ backgroundColor: bgColor }}
+								>
+									{initials}
+								</div>
+								<div className="flex-1 min-w-0">
+									<p className="truncate text-sm font-medium">{displayName}</p>
+									<p className="truncate text-xs text-muted-foreground">{user.email}</p>
+								</div>
+							</div>
+						</DropdownMenuLabel>
+
+						<DropdownMenuSeparator />
+
+						<DropdownMenuItem onClick={onLogout}>
+							<LogOut className="mr-2 h-4 w-4" />
+							{t("logout")}
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+		);
+	}
+
+	// Expanded view
+	return (
+		<div className="border-t">
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<button
+						type="button"
+						className={cn(
+							"flex w-full items-center gap-2 px-2 py-3 text-left",
+							"hover:bg-accent transition-colors",
+							"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+						)}
+					>
+						{/* Avatar */}
+						<div
+							className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-semibold text-white"
+							style={{ backgroundColor: bgColor }}
+						>
+							{initials}
+						</div>
+
+						{/* Name and email */}
+						<div className="flex-1 min-w-0">
+							<p className="truncate text-sm font-medium">{displayName}</p>
+							<p className="truncate text-xs text-muted-foreground">{user.email}</p>
+						</div>
+
+						{/* Chevron icon */}
+						<ChevronUp className="h-4 w-4 shrink-0 text-muted-foreground" />
+					</button>
+				</DropdownMenuTrigger>
+
+				<DropdownMenuContent className="w-56" side="top" align="start" sideOffset={4}>
+					<DropdownMenuLabel className="font-normal">
+						<div className="flex items-center gap-2">
+							<div
+								className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-xs font-semibold text-white"
+								style={{ backgroundColor: bgColor }}
+							>
+								{initials}
+							</div>
+							<div className="flex-1 min-w-0">
+								<p className="truncate text-sm font-medium">{displayName}</p>
+								<p className="truncate text-xs text-muted-foreground">{user.email}</p>
+							</div>
+						</div>
+					</DropdownMenuLabel>
+
+					<DropdownMenuSeparator />
+
+					<DropdownMenuItem onClick={onLogout}>
+						<LogOut className="mr-2 h-4 w-4" />
+						{t("logout")}
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</div>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/sidebar/index.ts b/surfsense_web/components/layout/ui/sidebar/index.ts
new file mode 100644
index 000000000..d98b45ca5
--- /dev/null
+++ b/surfsense_web/components/layout/ui/sidebar/index.ts
@@ -0,0 +1,12 @@
+export { AllChatsSidebar } from "./AllChatsSidebar";
+export { AllNotesSidebar } from "./AllNotesSidebar";
+export { ChatListItem } from "./ChatListItem";
+export { MobileSidebar, MobileSidebarTrigger } from "./MobileSidebar";
+export { NavSection } from "./NavSection";
+export { NoteListItem } from "./NoteListItem";
+export { PageUsageDisplay } from "./PageUsageDisplay";
+export { Sidebar } from "./Sidebar";
+export { SidebarCollapseButton } from "./SidebarCollapseButton";
+export { SidebarHeader } from "./SidebarHeader";
+export { SidebarSection } from "./SidebarSection";
+export { SidebarUserProfile } from "./SidebarUserProfile";