diff --git a/surfsense_web/components/layout/hooks/SidebarContext.tsx b/surfsense_web/components/layout/hooks/SidebarContext.tsx
index 35f76929d..bfb5b5aeb 100644
--- a/surfsense_web/components/layout/hooks/SidebarContext.tsx
+++ b/surfsense_web/components/layout/hooks/SidebarContext.tsx
@@ -6,6 +6,7 @@ interface SidebarContextValue {
 	isCollapsed: boolean;
 	setIsCollapsed: (collapsed: boolean) => void;
 	toggleCollapsed: () => void;
+	sidebarWidth: number;
 }
 
 const SidebarContext = createContext<SidebarContextValue | null>(null);
diff --git a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
index 3a8255e7a..58f407494 100644
--- a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
+++ b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
@@ -6,6 +6,7 @@ import type { InboxItem } from "@/hooks/use-inbox";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import { SidebarProvider, useSidebarState } from "../../hooks";
+import { useSidebarResize } from "../../hooks/useSidebarResize";
 import type { ChatItem, NavItem, PageUsage, SearchSpace, User } from "../../types/layout.types";
 import { Header } from "../header";
 import { IconRail } from "../icon-rail";
@@ -116,11 +117,12 @@ export function LayoutShell({
 	const isMobile = useIsMobile();
 	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 	const { isCollapsed, setIsCollapsed, toggleCollapsed } = useSidebarState(defaultCollapsed);
+	const { sidebarWidth, handleMouseDown: onResizeMouseDown, isDragging: isResizing } = useSidebarResize();
 
 	// Memoize context value to prevent unnecessary re-renders
 	const sidebarContextValue = useMemo(
-		() => ({ isCollapsed, setIsCollapsed, toggleCollapsed }),
-		[isCollapsed, setIsCollapsed, toggleCollapsed]
+		() => ({ isCollapsed, setIsCollapsed, toggleCollapsed, sidebarWidth }),
+		[isCollapsed, setIsCollapsed, toggleCollapsed, sidebarWidth]
 	);
 
 	// Mobile layout
@@ -236,6 +238,9 @@ export function LayoutShell({
 							setTheme={setTheme}
 							className="hidden md:flex border-r shrink-0"
 							isLoadingChats={isLoadingChats}
+							sidebarWidth={sidebarWidth}
+							onResizeMouseDown={onResizeMouseDown}
+							isResizing={isResizing}
 						/>
 
 						{/* Docked Inbox Sidebar - renders as flex sibling between sidebar and content */}
diff --git a/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
index b6caed330..5a709a8dd 100644
--- a/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
@@ -61,9 +61,8 @@ import { cacheKeys } from "@/lib/query-client/cache-keys";
 import { cn } from "@/lib/utils";
 import { useSidebarContextSafe } from "../../hooks";
 
-// Sidebar width constants
+// Sidebar width constant for collapsed state
 const SIDEBAR_COLLAPSED_WIDTH = 60;
-const SIDEBAR_EXPANDED_WIDTH = 240;
 
 /**
  * Get initials from name or email for avatar fallback
@@ -566,7 +565,8 @@ export function InboxSidebar({
 	const isCollapsed = sidebarContext?.isCollapsed ?? false;
 
 	// Calculate the left position for the inbox panel (relative to sidebar)
-	const sidebarWidth = isCollapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_EXPANDED_WIDTH;
+	// Use dynamic width from context (tracks resize) for expanded state
+	const sidebarWidth = isCollapsed ? SIDEBAR_COLLAPSED_WIDTH : (sidebarContext?.sidebarWidth ?? 240);
 
 	if (!mounted) return null;
 
diff --git a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
index 6b0c9fe7a..f5589ba1c 100644
--- a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
@@ -7,7 +7,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import type { ChatItem, NavItem, PageUsage, SearchSpace, User } from "../../types/layout.types";
-import { useSidebarResize } from "../../hooks/useSidebarResize";
+import { SIDEBAR_MIN_WIDTH } from "../../hooks/useSidebarResize";
 import { ChatListItem } from "./ChatListItem";
 import { NavSection } from "./NavSection";
 import { PageUsageDisplay } from "./PageUsageDisplay";
@@ -52,6 +52,9 @@ interface SidebarProps {
 	className?: string;
 	isLoadingChats?: boolean;
 	disableTooltips?: boolean;
+	sidebarWidth?: number;
+	onResizeMouseDown?: (e: React.MouseEvent) => void;
+	isResizing?: boolean;
 }
 
 export function Sidebar({
@@ -81,24 +84,26 @@ export function Sidebar({
 	className,
 	isLoadingChats = false,
 	disableTooltips = false,
+	sidebarWidth = SIDEBAR_MIN_WIDTH,
+	onResizeMouseDown,
+	isResizing = false,
 }: SidebarProps) {
 	const t = useTranslations("sidebar");
-	const { sidebarWidth, handleMouseDown, isDragging } = useSidebarResize();
 
 	return (
 		<div
 			className={cn(
 				"relative flex h-full flex-col bg-sidebar text-sidebar-foreground overflow-hidden",
 				isCollapsed ? "w-[60px] transition-all duration-200" : "",
-				!isCollapsed && !isDragging ? "transition-all duration-200" : "",
+				!isCollapsed && !isResizing ? "transition-all duration-200" : "",
 				className
 			)}
 			style={!isCollapsed ? { width: sidebarWidth } : undefined}
 		>
 			{/* Resize handle on right border */}
-			{!isCollapsed && (
+			{!isCollapsed && onResizeMouseDown && (
 				<div
-					onMouseDown={handleMouseDown}
+					onMouseDown={onResizeMouseDown}
 					className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-border active:bg-border z-10"
 				/>
 			)}