diff --git a/client/webui/frontend/src/lib/components/chat/RecentChatsList.tsx b/client/webui/frontend/src/lib/components/chat/RecentChatsList.tsx
index fac131cb8..6f9e7b6f5 100644
--- a/client/webui/frontend/src/lib/components/chat/RecentChatsList.tsx
+++ b/client/webui/frontend/src/lib/components/chat/RecentChatsList.tsx
@@ -133,7 +133,7 @@ export function RecentChatsList({ maxItems = MAX_RECENT_CHATS }: RecentChatsList
 
     if (sessions.length === 0) {
         return (
-            <div className="text-muted-foreground flex flex-col items-center justify-center py-4 text-xs">
+            <div className="text-muted-foreground flex h-full flex-col items-center pt-[25%] text-xs">
                 <MessageCircle className="mb-2 h-6 w-6" />
                 No recent chats
             </div>
diff --git a/client/webui/frontend/src/lib/components/navigation/CollapsibleNavigationSidebar.tsx b/client/webui/frontend/src/lib/components/navigation/CollapsibleNavigationSidebar.tsx
index 77766ce31..f0ad82ff4 100644
--- a/client/webui/frontend/src/lib/components/navigation/CollapsibleNavigationSidebar.tsx
+++ b/client/webui/frontend/src/lib/components/navigation/CollapsibleNavigationSidebar.tsx
@@ -62,7 +62,7 @@ export const CollapsibleNavigationSidebar: React.FC<CollapsibleNavigationSidebar
         onCollapseChange?.(value);
     };
 
-    const [internalActiveItem, setInternalActiveItem] = useState<string>("chats");
+    const [internalActiveItem, setInternalActiveItem] = useState<string>("");
     const activeItem = controlledActiveItemId ?? internalActiveItem;
     const setActiveItem = (value: string) => {
         if (controlledActiveItemId === undefined) {
@@ -122,7 +122,7 @@ export const CollapsibleNavigationSidebar: React.FC<CollapsibleNavigationSidebar
                 }
             });
         } else {
-            setInternalActiveItem("chats");
+            setInternalActiveItem("");
         }
     }, [location.pathname, items, controlledActiveItemId, findActiveItemId]);
 
@@ -225,8 +225,8 @@ export const CollapsibleNavigationSidebar: React.FC<CollapsibleNavigationSidebar
                             <Tooltip>
                                 <TooltipTrigger asChild>
                                     <button onClick={handleNewChatClickResolved} className={navButtonStyles({ variant: "collapsed" })}>
-                                        <div className={iconWrapperStyles({ active: activeItem === "chats" })}>
-                                            <NewChatIcon className={iconStyles({ active: activeItem === "chats" })} />
+                                        <div className={iconWrapperStyles({ active: false })}>
+                                            <NewChatIcon className={iconStyles({ active: false })} />
                                         </div>
                                     </button>
                                 </TooltipTrigger>
@@ -299,13 +299,13 @@ export const CollapsibleNavigationSidebar: React.FC<CollapsibleNavigationSidebar
                         )}
                     </div>
 
-                    <div className="flex-1 overflow-y-auto py-3">
+                    <div className="flex-shrink-0 py-3">
                         {showNewChatButton && (
                             <button onClick={handleNewChatClickResolved} className={navButtonStyles()}>
-                                <div className={iconWrapperStyles({ active: activeItem === "chats", withMargin: true })}>
-                                    <NewChatIcon className={iconStyles({ active: activeItem === "chats" })} />
+                                <div className={iconWrapperStyles({ active: false, withMargin: true })}>
+                                    <NewChatIcon className={iconStyles({ active: false })} />
                                 </div>
-                                <span className={navTextStyles({ active: activeItem === "chats" })}>{newChatLabel}</span>
+                                <span className={navTextStyles({ active: false })}>{newChatLabel}</span>
                             </button>
                         )}
 
@@ -339,24 +339,24 @@ export const CollapsibleNavigationSidebar: React.FC<CollapsibleNavigationSidebar
                                 );
                             })}
                         </div>
-
-                        {showRecentChats && (
-                            <>
-                                <div className="my-4 border-t border-[var(--color-secondary-w70)]" />
-                                <div className="mb-2 flex items-center justify-between pr-4 pl-6">
-                                    <span className="text-sm font-bold text-[var(--color-secondary-text-wMain)]">Recent Chats</span>
-                                    <button onClick={() => navigate("/chat", { state: { openSessionsPanel: true } })} className="cursor-pointer text-sm font-normal text-[var(--color-primary-w60)] hover:text-[var(--color-primary-text-w10)]">
-                                        View All
-                                    </button>
-                                </div>
-                                <div className="flex-1">
-                                    <RecentChatsList maxItems={MAX_RECENT_CHATS} />
-                                </div>
-                            </>
-                        )}
                     </div>
 
-                    <div className="mt-2 border-t border-[var(--color-secondary-w70)] pt-2">
+                    {showRecentChats && (
+                        <div className="flex min-h-0 flex-1 flex-col">
+                            <div className="border-t border-[var(--color-secondary-w70)]" />
+                            <div className="mb-2 flex items-center justify-between pt-4 pr-6 pl-6">
+                                <span className="text-sm font-bold text-[var(--color-secondary-text-wMain)]">Recent Chats</span>
+                                <button onClick={() => navigate("/chat", { state: { openSessionsPanel: true } })} className="cursor-pointer text-sm text-[var(--color-primary-w60)] hover:text-[var(--color-primary-text-w10)]">
+                                    View All
+                                </button>
+                            </div>
+                            <div className="scrollbar-subtle min-h-[120px] flex-1 overflow-y-auto">
+                                <RecentChatsList maxItems={MAX_RECENT_CHATS} />
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="relative z-10 border-t border-[var(--color-secondary-w70)] bg-[var(--color-background-wMain)] pt-2">
                         {bottomItems.map(item => (
                             <button key={item.id} onClick={() => handleBottomItemClick(item)} className={navButtonStyles()} disabled={item.disabled}>
                                 <div className={iconWrapperStyles({ withMargin: true })}>
diff --git a/client/webui/frontend/src/lib/constants/ui.ts b/client/webui/frontend/src/lib/constants/ui.ts
index 91acb0687..3ad5e9c7d 100644
--- a/client/webui/frontend/src/lib/constants/ui.ts
+++ b/client/webui/frontend/src/lib/constants/ui.ts
@@ -5,4 +5,4 @@
 /**
  * Maximum number of recent chats to display in the navigation sidebar
  */
-export const MAX_RECENT_CHATS = 6;
+export const MAX_RECENT_CHATS = 15;
diff --git a/client/webui/frontend/src/lib/index.css b/client/webui/frontend/src/lib/index.css
index 624820115..0b38ad8bb 100644
--- a/client/webui/frontend/src/lib/index.css
+++ b/client/webui/frontend/src/lib/index.css
@@ -212,6 +212,15 @@
     animation: halo-pulse-dark 2s ease-in-out infinite;
 }
 
+.scrollbar-subtle {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+}
+
+.scrollbar-subtle:hover {
+    scrollbar-color: var(--color-secondary-w70) transparent;
+}
+
 @layer base {
     * {
         @apply border-border focus-visible:outline-ring focus-visible:border-0 focus-visible:ring-0 focus-visible:outline-1;