diff --git a/.husky/pre-commit b/.husky/pre-commit
index 23c736d1de..70fef90065 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,2 +1,3 @@
+#!/bin/sh
 [ -n "$CI" ] && exit 0
 npx lint-staged --config ./.husky/lint-staged.config.js
diff --git a/client/src/Providers/ActivePanelContext.tsx b/client/src/Providers/ActivePanelContext.tsx
index 4a8d6ccfc4..9d6082d4e4 100644
--- a/client/src/Providers/ActivePanelContext.tsx
+++ b/client/src/Providers/ActivePanelContext.tsx
@@ -1,31 +1,31 @@
-import { createContext, useContext, useState, ReactNode } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState, ReactNode } from 'react';
+
+const STORAGE_KEY = 'side:active-panel';
+const DEFAULT_PANEL = 'conversations';
+
+function getInitialActivePanel(): string {
+  const saved = localStorage.getItem(STORAGE_KEY);
+  return saved ? saved : DEFAULT_PANEL;
+}
 
 interface ActivePanelContextType {
-  active: string | undefined;
+  active: string;
   setActive: (id: string) => void;
 }
 
 const ActivePanelContext = createContext<ActivePanelContextType | undefined>(undefined);
 
-export function ActivePanelProvider({
-  children,
-  defaultActive,
-}: {
-  children: ReactNode;
-  defaultActive?: string;
-}) {
-  const [active, _setActive] = useState<string | undefined>(defaultActive);
+export function ActivePanelProvider({ children }: { children: ReactNode }) {
+  const [active, _setActive] = useState<string>(getInitialActivePanel);
 
-  const setActive = (id: string) => {
-    localStorage.setItem('side:active-panel', id);
+  const setActive = useCallback((id: string) => {
+    localStorage.setItem(STORAGE_KEY, id);
     _setActive(id);
-  };
+  }, []);
 
-  return (
-    <ActivePanelContext.Provider value={{ active, setActive }}>
-      {children}
-    </ActivePanelContext.Provider>
-  );
+  const value = useMemo(() => ({ active, setActive }), [active, setActive]);
+
+  return <ActivePanelContext.Provider value={value}>{children}</ActivePanelContext.Provider>;
 }
 
 export function useActivePanel() {
diff --git a/client/src/Providers/ChatContext.tsx b/client/src/Providers/ChatContext.tsx
index 3d3acbcc42..8af75f90c0 100644
--- a/client/src/Providers/ChatContext.tsx
+++ b/client/src/Providers/ChatContext.tsx
@@ -2,5 +2,11 @@ import { createContext, useContext } from 'react';
 import useChatHelpers from '~/hooks/Chat/useChatHelpers';
 type TChatContext = ReturnType<typeof useChatHelpers>;
 
-export const ChatContext = createContext<TChatContext>({} as TChatContext);
-export const useChatContext = () => useContext(ChatContext);
+export const ChatContext = createContext<TChatContext | null>(null);
+export const useChatContext = () => {
+  const ctx = useContext(ChatContext);
+  if (!ctx) {
+    throw new Error('useChatContext must be used within a ChatContext.Provider');
+  }
+  return ctx;
+};
diff --git a/client/src/Providers/SidePanelContext.tsx b/client/src/Providers/SidePanelContext.tsx
deleted file mode 100644
index 3ce7834ccc..0000000000
--- a/client/src/Providers/SidePanelContext.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { createContext, useContext, useMemo } from 'react';
-import type { EModelEndpoint } from 'librechat-data-provider';
-import { useChatContext } from './ChatContext';
-
-interface SidePanelContextValue {
-  endpoint?: EModelEndpoint | null;
-}
-
-const SidePanelContext = createContext<SidePanelContextValue | undefined>(undefined);
-
-export function SidePanelProvider({ children }: { children: React.ReactNode }) {
-  const { conversation } = useChatContext();
-
-  /** Context value only created when endpoint changes */
-  const contextValue = useMemo<SidePanelContextValue>(
-    () => ({
-      endpoint: conversation?.endpoint,
-    }),
-    [conversation?.endpoint],
-  );
-
-  return <SidePanelContext.Provider value={contextValue}>{children}</SidePanelContext.Provider>;
-}
-
-export function useSidePanelContext() {
-  const context = useContext(SidePanelContext);
-  if (!context) {
-    throw new Error('useSidePanelContext must be used within SidePanelProvider');
-  }
-  return context;
-}
diff --git a/client/src/Providers/__tests__/ActivePanelContext.spec.tsx b/client/src/Providers/__tests__/ActivePanelContext.spec.tsx
new file mode 100644
index 0000000000..6a6059c9b4
--- /dev/null
+++ b/client/src/Providers/__tests__/ActivePanelContext.spec.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { ActivePanelProvider, useActivePanel } from '~/Providers/ActivePanelContext';
+
+const STORAGE_KEY = 'side:active-panel';
+
+function TestConsumer() {
+  const { active, setActive } = useActivePanel();
+  return (
+    <div>
+      <span data-testid="active">{active}</span>
+      <button data-testid="switch-btn" onClick={() => setActive('bookmarks')} />
+    </div>
+  );
+}
+
+describe('ActivePanelContext', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('defaults to conversations when no localStorage value exists', () => {
+    render(
+      <ActivePanelProvider>
+        <TestConsumer />
+      </ActivePanelProvider>,
+    );
+    expect(screen.getByTestId('active')).toHaveTextContent('conversations');
+  });
+
+  it('reads initial value from localStorage', () => {
+    localStorage.setItem(STORAGE_KEY, 'memories');
+    render(
+      <ActivePanelProvider>
+        <TestConsumer />
+      </ActivePanelProvider>,
+    );
+    expect(screen.getByTestId('active')).toHaveTextContent('memories');
+  });
+
+  it('setActive updates state and writes to localStorage', () => {
+    render(
+      <ActivePanelProvider>
+        <TestConsumer />
+      </ActivePanelProvider>,
+    );
+    fireEvent.click(screen.getByTestId('switch-btn'));
+    expect(screen.getByTestId('active')).toHaveTextContent('bookmarks');
+    expect(localStorage.getItem(STORAGE_KEY)).toBe('bookmarks');
+  });
+
+  it('throws when useActivePanel is called outside provider', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => render(<TestConsumer />)).toThrow(
+      'useActivePanel must be used within an ActivePanelProvider',
+    );
+    spy.mockRestore();
+  });
+});
diff --git a/client/src/Providers/__tests__/ChatContext.spec.tsx b/client/src/Providers/__tests__/ChatContext.spec.tsx
new file mode 100644
index 0000000000..0ed00bf580
--- /dev/null
+++ b/client/src/Providers/__tests__/ChatContext.spec.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { ChatContext, useChatContext } from '~/Providers/ChatContext';
+
+function TestConsumer() {
+  const ctx = useChatContext();
+  return <span data-testid="index">{ctx.index}</span>;
+}
+
+describe('ChatContext', () => {
+  it('throws when useChatContext is called outside a provider', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => render(<TestConsumer />)).toThrow(
+      'useChatContext must be used within a ChatContext.Provider',
+    );
+    spy.mockRestore();
+  });
+
+  it('provides context value when wrapped in provider', () => {
+    const mockHelpers = { index: 0 } as ReturnType<
+      typeof import('~/hooks/Chat/useChatHelpers').default
+    >;
+    render(
+      <ChatContext.Provider value={mockHelpers}>
+        <TestConsumer />
+      </ChatContext.Provider>,
+    );
+    expect(screen.getByTestId('index')).toHaveTextContent('0');
+  });
+});
diff --git a/client/src/Providers/index.ts b/client/src/Providers/index.ts
index 43a16fa976..3ae90e189c 100644
--- a/client/src/Providers/index.ts
+++ b/client/src/Providers/index.ts
@@ -22,7 +22,6 @@ export * from './ToolCallsMapContext';
 export * from './SetConvoContext';
 export * from './SearchContext';
 export * from './BadgeRowContext';
-export * from './SidePanelContext';
 export * from './DragDropContext';
 export * from './ArtifactsContext';
 export * from './PromptGroupsContext';
diff --git a/client/src/common/types.ts b/client/src/common/types.ts
index d47ff02bd8..85044bb2bc 100644
--- a/client/src/common/types.ts
+++ b/client/src/common/types.ts
@@ -132,13 +132,6 @@ export type NavLink = {
   id: string;
 };
 
-export interface NavProps {
-  isCollapsed: boolean;
-  links: NavLink[];
-  resize?: (size: number) => void;
-  defaultActive?: string;
-}
-
 export interface DataColumnMeta {
   meta:
     | {
@@ -561,11 +554,6 @@ export interface ModelItemProps {
   className?: string;
 }
 
-export type ContextType = {
-  navVisible: boolean;
-  setNavVisible: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
 export interface SwitcherProps {
   endpoint?: t.EModelEndpoint | null;
   endpointKeyProvided: boolean;
diff --git a/client/src/components/Agents/Marketplace.tsx b/client/src/components/Agents/Marketplace.tsx
index 69db9fc630..0c9c9fb4cc 100644
--- a/client/src/components/Agents/Marketplace.tsx
+++ b/client/src/components/Agents/Marketplace.tsx
@@ -1,23 +1,17 @@
 import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
-import { useRecoilState } from 'recoil';
-import { useOutletContext } from 'react-router-dom';
-import { useQueryClient } from '@tanstack/react-query';
 import { useSearchParams, useParams, useNavigate } from 'react-router-dom';
-import { TooltipAnchor, Button, NewChatIcon, useMediaQuery } from '@librechat/client';
-import { PermissionTypes, Permissions, QueryKeys } from 'librechat-data-provider';
+import { useMediaQuery } from '@librechat/client';
+import { PermissionTypes, Permissions } from 'librechat-data-provider';
 import type t from 'librechat-data-provider';
-import type { ContextType } from '~/common';
 import { useDocumentTitle, useHasAccess, useLocalize, TranslationKeys } from '~/hooks';
 import { useGetEndpointsQuery, useGetAgentCategoriesQuery } from '~/data-provider';
 import MarketplaceAdminSettings from './MarketplaceAdminSettings';
-import { SidePanelProvider, useChatContext } from '~/Providers';
 import { SidePanelGroup } from '~/components/SidePanel';
-import { OpenSidebar } from '~/components/Chat/Menus';
-import { cn, clearMessagesCache } from '~/utils';
+import { NewChat } from '~/components/Nav';
+import { cn } from '~/utils';
 import CategoryTabs from './CategoryTabs';
 import SearchBar from './SearchBar';
 import AgentGrid from './AgentGrid';
-import store from '~/store';
 
 interface AgentMarketplaceProps {
   className?: string;
@@ -34,13 +28,9 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
   const localize = useLocalize();
   const navigate = useNavigate();
   const { category } = useParams();
-  const queryClient = useQueryClient();
   const [searchParams, setSearchParams] = useSearchParams();
-  const { conversation, newConversation } = useChatContext();
 
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
-  const { navVisible, setNavVisible } = useOutletContext<ContextType>();
-  const [hideSidePanel, setHideSidePanel] = useRecoilState(store.hideSidePanel);
 
   // Get URL parameters
   const searchQuery = searchParams.get('q') || '';
@@ -59,15 +49,6 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
   // Set page title
   useDocumentTitle(`${localize('com_agents_marketplace')} | LibreChat`);
 
-  // Ensure right sidebar is always visible in marketplace
-  useEffect(() => {
-    setHideSidePanel(false);
-
-    // Also try to force expand via localStorage
-    localStorage.setItem('hideSidePanel', 'false');
-    localStorage.setItem('fullPanelCollapse', 'false');
-  }, [setHideSidePanel, hideSidePanel]);
-
   // Ensure endpoints config is loaded first (required for agent queries)
   useGetEndpointsQuery();
 
@@ -193,33 +174,6 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
     }
   };
 
-  /**
-   * Handle new chat button click
-   */
-
-  const handleNewChat = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (e.button === 0 && (e.ctrlKey || e.metaKey)) {
-      window.open('/c/new', '_blank');
-      return;
-    }
-    clearMessagesCache(queryClient, conversation?.conversationId);
-    queryClient.invalidateQueries([QueryKeys.messages]);
-    newConversation();
-  };
-
-  // Layout configuration for SidePanelGroup
-  const defaultLayout = useMemo(() => {
-    const resizableLayout = localStorage.getItem('react-resizable-panels:layout');
-    return typeof resizableLayout === 'string' ? JSON.parse(resizableLayout) : undefined;
-  }, []);
-
-  const defaultCollapsed = useMemo(() => {
-    const collapsedPanels = localStorage.getItem('react-resizable-panels:collapsed');
-    return typeof collapsedPanels === 'string' ? JSON.parse(collapsedPanels) : true;
-  }, []);
-
-  const fullCollapse = useMemo(() => localStorage.getItem('fullPanelCollapse') === 'true', []);
-
   const hasAccessToMarketplace = useHasAccess({
     permissionType: PermissionTypes.MARKETPLACE,
     permission: Permissions.USE,
@@ -241,99 +195,144 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
   }
   return (
     <div className={`relative flex w-full grow overflow-hidden bg-presentation ${className}`}>
-      <SidePanelProvider>
-        <SidePanelGroup
-          defaultLayout={defaultLayout}
-          fullPanelCollapse={fullCollapse}
-          defaultCollapsed={defaultCollapsed}
-        >
-          <main className="flex h-full flex-col overflow-hidden" role="main">
-            {/* Scrollable container */}
-            <div
-              ref={scrollContainerRef}
-              className="scrollbar-gutter-stable relative flex h-full flex-col overflow-y-auto overflow-x-hidden"
-            >
-              {/* Simplified header for agents marketplace - only show nav controls when needed */}
-              {!isSmallScreen && (
-                <div className="sticky top-0 z-20 flex items-center justify-between bg-surface-secondary p-2 font-semibold text-text-primary md:h-14">
-                  <div className="mx-1 flex items-center gap-2">
-                    {!navVisible ? (
-                      <>
-                        <OpenSidebar setNavVisible={setNavVisible} />
-                        <TooltipAnchor
-                          description={localize('com_ui_new_chat')}
-                          render={
-                            <Button
-                              size="icon"
-                              variant="outline"
-                              data-testid="agents-new-chat-button"
-                              aria-label={localize('com_ui_new_chat')}
-                              className="rounded-xl border border-border-light bg-surface-secondary p-2 hover:bg-surface-active-alt max-md:hidden"
-                              onClick={handleNewChat}
-                            >
-                              <NewChatIcon />
-                            </Button>
-                          }
-                        />
-                      </>
-                    ) : (
-                      // Invisible placeholder to maintain height
-                      <div className="h-10 w-10" />
-                    )}
-                  </div>
-                </div>
-              )}
-              {/* Hero Section - scrolls away */}
-              {!isSmallScreen && (
-                <div className="container mx-auto max-w-4xl">
-                  <div className={cn('mb-8 text-center', 'mt-12')}>
-                    <h1 className="mb-3 text-3xl font-bold tracking-tight text-text-primary md:text-5xl">
-                      {localize('com_agents_marketplace')}
-                    </h1>
-                    <p className="mx-auto mb-6 max-w-2xl text-lg text-text-secondary">
-                      {localize('com_agents_marketplace_subtitle')}
-                    </p>
-                  </div>
-                </div>
-              )}
-              {/* Sticky wrapper for search bar and categories */}
-              <div
-                className={cn(
-                  'sticky z-10 bg-presentation pb-4',
-                  isSmallScreen ? 'top-0' : 'top-14',
-                )}
-              >
-                <div className="container mx-auto max-w-4xl px-4">
-                  {/* Search bar */}
-                  <div className="mx-auto flex max-w-2xl gap-2 pb-6">
-                    <SearchBar value={searchQuery} onSearch={handleSearch} />
-                    {/* TODO: Remove this once we have a better way to handle admin settings */}
-                    {/* Admin Settings */}
-                    <MarketplaceAdminSettings />
-                  </div>
-
-                  {/* Category tabs */}
-                  <CategoryTabs
-                    categories={categoriesQuery.data || []}
-                    activeTab={displayCategory}
-                    isLoading={categoriesQuery.isLoading}
-                    onChange={handleTabChange}
-                  />
+      <SidePanelGroup>
+        <main className="flex h-full flex-col overflow-hidden" role="main">
+          {/* Scrollable container */}
+          <div
+            ref={scrollContainerRef}
+            className="scrollbar-gutter-stable relative flex h-full flex-col overflow-y-auto overflow-x-hidden"
+          >
+            {/* Simplified header for agents marketplace - only show nav controls when needed */}
+            {!isSmallScreen && (
+              <div className="sticky top-0 z-20 flex items-center justify-between bg-surface-secondary p-2 font-semibold text-text-primary md:h-14">
+                <NewChat className="border border-border-light bg-surface-secondary p-2" />
+              </div>
+            )}
+            {/* Hero Section - scrolls away */}
+            {!isSmallScreen && (
+              <div className="container mx-auto max-w-4xl">
+                <div className={cn('mb-8 text-center', 'mt-12')}>
+                  <h1 className="mb-3 text-3xl font-bold tracking-tight text-text-primary md:text-5xl">
+                    {localize('com_agents_marketplace')}
+                  </h1>
+                  <p className="mx-auto mb-6 max-w-2xl text-lg text-text-secondary">
+                    {localize('com_agents_marketplace_subtitle')}
+                  </p>
                 </div>
               </div>
-              {/* Scrollable content area */}
-              <div className="container mx-auto max-w-4xl px-4 pb-8">
-                {/* Two-pane animated container wrapping category header + grid */}
-                <div className="relative overflow-hidden">
-                  {/* Current content pane */}
+            )}
+            {/* Sticky wrapper for search bar and categories */}
+            <div
+              className={cn('sticky z-10 bg-presentation pb-4', isSmallScreen ? 'top-0' : 'top-14')}
+            >
+              <div className="container mx-auto max-w-4xl px-4">
+                {/* Search bar */}
+                <div className="mx-auto flex max-w-2xl gap-2 pb-6">
+                  <SearchBar value={searchQuery} onSearch={handleSearch} />
+                  {/* TODO: Remove this once we have a better way to handle admin settings */}
+                  {/* Admin Settings */}
+                  <MarketplaceAdminSettings />
+                </div>
+
+                {/* Category tabs */}
+                <CategoryTabs
+                  categories={categoriesQuery.data || []}
+                  activeTab={displayCategory}
+                  isLoading={categoriesQuery.isLoading}
+                  onChange={handleTabChange}
+                />
+              </div>
+            </div>
+            {/* Scrollable content area */}
+            <div className="container mx-auto max-w-4xl px-4 pb-8">
+              {/* Two-pane animated container wrapping category header + grid */}
+              <div className="relative overflow-hidden">
+                {/* Current content pane */}
+                <div
+                  className={cn(
+                    isTransitioning &&
+                      (animationDirection === 'right'
+                        ? 'motion-safe:animate-slide-out-left'
+                        : 'motion-safe:animate-slide-out-right'),
+                  )}
+                  key={`pane-current-${displayCategory}`}
+                >
+                  {/* Category header - only show when not searching */}
+                  {!searchQuery && (
+                    <div className="mb-6 mt-6">
+                      {(() => {
+                        // Get category data for display
+                        const getCategoryData = () => {
+                          if (displayCategory === 'promoted') {
+                            return {
+                              name: localize('com_agents_top_picks'),
+                              description: localize('com_agents_recommended'),
+                            };
+                          }
+                          if (displayCategory === 'all') {
+                            return {
+                              name: localize('com_agents_all'),
+                              description: localize('com_agents_all_description'),
+                            };
+                          }
+
+                          // Find the category in the API data
+                          const categoryData = categoriesQuery.data?.find(
+                            (cat) => cat.value === displayCategory,
+                          );
+                          if (categoryData) {
+                            return {
+                              name: categoryData.label?.startsWith('com_')
+                                ? localize(categoryData.label as TranslationKeys)
+                                : categoryData.label,
+                              description: categoryData.description?.startsWith('com_')
+                                ? localize(categoryData.description as TranslationKeys)
+                                : categoryData.description || '',
+                            };
+                          }
+
+                          // Fallback for unknown categories
+                          return {
+                            name:
+                              displayCategory.charAt(0).toUpperCase() + displayCategory.slice(1),
+                            description: '',
+                          };
+                        };
+
+                        const { name, description } = getCategoryData();
+
+                        return (
+                          <div className="text-left">
+                            <h2 className="text-2xl font-bold text-text-primary">{name}</h2>
+                            {description && (
+                              <p className="mt-2 text-text-secondary">{description}</p>
+                            )}
+                          </div>
+                        );
+                      })()}
+                    </div>
+                  )}
+
+                  {/* Agent grid */}
+                  <AgentGrid
+                    key={`grid-${displayCategory}`}
+                    category={displayCategory}
+                    searchQuery={searchQuery}
+                    onSelectAgent={handleAgentSelect}
+                    scrollElementRef={scrollContainerRef}
+                  />
+                </div>
+
+                {/* Next content pane, only during transition */}
+                {isTransitioning && nextCategory && (
                   <div
                     className={cn(
-                      isTransitioning &&
-                        (animationDirection === 'right'
-                          ? 'motion-safe:animate-slide-out-left'
-                          : 'motion-safe:animate-slide-out-right'),
+                      'absolute inset-0',
+                      animationDirection === 'right'
+                        ? 'motion-safe:animate-slide-in-right'
+                        : 'motion-safe:animate-slide-in-left',
                     )}
-                    key={`pane-current-${displayCategory}`}
+                    key={`pane-next-${nextCategory}-${animationDirection}`}
                   >
                     {/* Category header - only show when not searching */}
                     {!searchQuery && (
@@ -341,13 +340,13 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
                         {(() => {
                           // Get category data for display
                           const getCategoryData = () => {
-                            if (displayCategory === 'promoted') {
+                            if (nextCategory === 'promoted') {
                               return {
                                 name: localize('com_agents_top_picks'),
                                 description: localize('com_agents_recommended'),
                               };
                             }
-                            if (displayCategory === 'all') {
+                            if (nextCategory === 'all') {
                               return {
                                 name: localize('com_agents_all'),
                                 description: localize('com_agents_all_description'),
@@ -356,7 +355,7 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
 
                             // Find the category in the API data
                             const categoryData = categoriesQuery.data?.find(
-                              (cat) => cat.value === displayCategory,
+                              (cat) => cat.value === nextCategory,
                             );
                             if (categoryData) {
                               return {
@@ -364,7 +363,9 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
                                   ? localize(categoryData.label as TranslationKeys)
                                   : categoryData.label,
                                 description: categoryData.description?.startsWith('com_')
-                                  ? localize(categoryData.description as TranslationKeys)
+                                  ? localize(
+                                      categoryData.description as Parameters<typeof localize>[0],
+                                    )
                                   : categoryData.description || '',
                               };
                             }
@@ -372,7 +373,8 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
                             // Fallback for unknown categories
                             return {
                               name:
-                                displayCategory.charAt(0).toUpperCase() + displayCategory.slice(1),
+                                (nextCategory || '').charAt(0).toUpperCase() +
+                                (nextCategory || '').slice(1),
                               description: '',
                             };
                           };
@@ -393,102 +395,21 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
 
                     {/* Agent grid */}
                     <AgentGrid
-                      key={`grid-${displayCategory}`}
-                      category={displayCategory}
+                      key={`grid-${nextCategory}`}
+                      category={nextCategory}
                       searchQuery={searchQuery}
                       onSelectAgent={handleAgentSelect}
                       scrollElementRef={scrollContainerRef}
                     />
                   </div>
+                )}
 
-                  {/* Next content pane, only during transition */}
-                  {isTransitioning && nextCategory && (
-                    <div
-                      className={cn(
-                        'absolute inset-0',
-                        animationDirection === 'right'
-                          ? 'motion-safe:animate-slide-in-right'
-                          : 'motion-safe:animate-slide-in-left',
-                      )}
-                      key={`pane-next-${nextCategory}-${animationDirection}`}
-                    >
-                      {/* Category header - only show when not searching */}
-                      {!searchQuery && (
-                        <div className="mb-6 mt-6">
-                          {(() => {
-                            // Get category data for display
-                            const getCategoryData = () => {
-                              if (nextCategory === 'promoted') {
-                                return {
-                                  name: localize('com_agents_top_picks'),
-                                  description: localize('com_agents_recommended'),
-                                };
-                              }
-                              if (nextCategory === 'all') {
-                                return {
-                                  name: localize('com_agents_all'),
-                                  description: localize('com_agents_all_description'),
-                                };
-                              }
-
-                              // Find the category in the API data
-                              const categoryData = categoriesQuery.data?.find(
-                                (cat) => cat.value === nextCategory,
-                              );
-                              if (categoryData) {
-                                return {
-                                  name: categoryData.label?.startsWith('com_')
-                                    ? localize(categoryData.label as TranslationKeys)
-                                    : categoryData.label,
-                                  description: categoryData.description?.startsWith('com_')
-                                    ? localize(
-                                        categoryData.description as Parameters<typeof localize>[0],
-                                      )
-                                    : categoryData.description || '',
-                                };
-                              }
-
-                              // Fallback for unknown categories
-                              return {
-                                name:
-                                  (nextCategory || '').charAt(0).toUpperCase() +
-                                  (nextCategory || '').slice(1),
-                                description: '',
-                              };
-                            };
-
-                            const { name, description } = getCategoryData();
-
-                            return (
-                              <div className="text-left">
-                                <h2 className="text-2xl font-bold text-text-primary">{name}</h2>
-                                {description && (
-                                  <p className="mt-2 text-text-secondary">{description}</p>
-                                )}
-                              </div>
-                            );
-                          })()}
-                        </div>
-                      )}
-
-                      {/* Agent grid */}
-                      <AgentGrid
-                        key={`grid-${nextCategory}`}
-                        category={nextCategory}
-                        searchQuery={searchQuery}
-                        onSelectAgent={handleAgentSelect}
-                        scrollElementRef={scrollContainerRef}
-                      />
-                    </div>
-                  )}
-
-                  {/* Note: Using Tailwind keyframes for slide in/out animations */}
-                </div>
+                {/* Note: Using Tailwind keyframes for slide in/out animations */}
               </div>
             </div>
-          </main>
-        </SidePanelGroup>
-      </SidePanelProvider>
+          </div>
+        </main>
+      </SidePanelGroup>
     </div>
   );
 };
diff --git a/client/src/components/Agents/MarketplaceContext.tsx b/client/src/components/Agents/MarketplaceContext.tsx
index 09c88e3291..9193cbb82b 100644
--- a/client/src/components/Agents/MarketplaceContext.tsx
+++ b/client/src/components/Agents/MarketplaceContext.tsx
@@ -13,5 +13,5 @@ interface MarketplaceProviderProps {
 export const MarketplaceProvider: React.FC<MarketplaceProviderProps> = ({ children }) => {
   const chatHelpers = useChatHelpers(0, 'new');
 
-  return <ChatContext.Provider value={chatHelpers as any}>{children}</ChatContext.Provider>;
+  return <ChatContext.Provider value={chatHelpers}>{children}</ChatContext.Provider>;
 };
diff --git a/client/src/components/Chat/AddMultiConvo.tsx b/client/src/components/Chat/AddMultiConvo.tsx
index 48e9919092..101dbadd19 100644
--- a/client/src/components/Chat/AddMultiConvo.tsx
+++ b/client/src/components/Chat/AddMultiConvo.tsx
@@ -44,9 +44,9 @@ function AddMultiConvo() {
       aria-label={localize('com_ui_add_multi_conversation')}
       onClick={clickHandler}
       data-testid="add-multi-convo-button"
-      className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-presentation text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
+      className="inline-flex size-9 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-presentation text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
     >
-      <PlusCircle className="icon-lg" aria-hidden="true" />
+      <PlusCircle className="icon-sm" aria-hidden="true" />
     </TooltipAnchor>
   );
 }
diff --git a/client/src/components/Chat/ChatView.tsx b/client/src/components/Chat/ChatView.tsx
index 66dec68f64..d2bd7edf0d 100644
--- a/client/src/components/Chat/ChatView.tsx
+++ b/client/src/components/Chat/ChatView.tsx
@@ -6,7 +6,7 @@ import { useParams } from 'react-router-dom';
 import { Constants, buildTree } from 'librechat-data-provider';
 import type { TMessage } from 'librechat-data-provider';
 import type { ChatFormValues } from '~/common';
-import { ChatContext, AddedChatContext, useFileMapContext, ChatFormProvider } from '~/Providers';
+import { ChatContext, AddedChatContext, ChatFormProvider, useFileMapContext } from '~/Providers';
 import { useAddedResponse, useResumeOnLoad, useAdaptiveSSE, useChatHelpers } from '~/hooks';
 import ConversationStarters from './Input/ConversationStarters';
 import { useGetMessagesByConvoId } from '~/data-provider';
@@ -34,6 +34,10 @@ function ChatView({ index = 0 }: { index?: number }) {
   const rootSubmission = useRecoilValue(store.submissionByIndex(index));
   const centerFormOnLanding = useRecoilValue(store.centerFormOnLanding);
 
+  const methods = useForm<ChatFormValues>({
+    defaultValues: { text: '' },
+  });
+
   const fileMap = useFileMapContext();
 
   const { data: messagesTree = null, isLoading } = useGetMessagesByConvoId(conversationId ?? '', {
@@ -56,10 +60,6 @@ function ChatView({ index = 0 }: { index?: number }) {
   // Wait for messages to load before resuming to avoid race condition
   useResumeOnLoad(conversationId, chatHelpers.getMessages, index, !isLoading);
 
-  const methods = useForm<ChatFormValues>({
-    defaultValues: { text: '' },
-  });
-
   let content: JSX.Element | null | undefined;
   const isLandingPage =
     (!messagesTree || messagesTree.length === 0) &&
@@ -82,7 +82,7 @@ function ChatView({ index = 0 }: { index?: number }) {
         <AddedChatContext.Provider value={addedChatHelpers}>
           <Presentation>
             <div className="relative flex h-full w-full flex-col">
-              {!isLoading && <Header />}
+              <Header />
               <>
                 <div
                   className={cn(
diff --git a/client/src/components/Chat/ExportAndShareMenu.tsx b/client/src/components/Chat/ExportAndShareMenu.tsx
index 2d5c3cdb64..739f2c497b 100644
--- a/client/src/components/Chat/ExportAndShareMenu.tsx
+++ b/client/src/components/Chat/ExportAndShareMenu.tsx
@@ -81,10 +81,10 @@ export default function ExportAndShareMenu({
               <Ariakit.MenuButton
                 id="export-menu-button"
                 aria-label="Export options"
-                className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-presentation text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
+                className="inline-flex size-9 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-presentation text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
               >
                 <Share2
-                  className="icon-lg text-text-primary"
+                  className="icon-md text-text-primary"
                   aria-hidden="true"
                   focusable="false"
                 />
diff --git a/client/src/components/Chat/Header.tsx b/client/src/components/Chat/Header.tsx
index 9e44e804c9..31ff30ffce 100644
--- a/client/src/components/Chat/Header.tsx
+++ b/client/src/components/Chat/Header.tsx
@@ -1,24 +1,23 @@
 import { memo, useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
 import { useMediaQuery } from '@librechat/client';
-import { useOutletContext } from 'react-router-dom';
-import { AnimatePresence, motion } from 'framer-motion';
 import { getConfigDefaults, PermissionTypes, Permissions } from 'librechat-data-provider';
-import type { ContextType } from '~/common';
-import { PresetsMenu, HeaderNewChat, OpenSidebar } from './Menus';
 import ModelSelector from './Menus/Endpoints/ModelSelector';
 import { useGetStartupConfig } from '~/data-provider';
 import ExportAndShareMenu from './ExportAndShareMenu';
+import { OpenSidebar, PresetsMenu } from './Menus';
 import BookmarkMenu from './Menus/BookmarkMenu';
 import { TemporaryChat } from './TemporaryChat';
 import AddMultiConvo from './AddMultiConvo';
 import { useHasAccess } from '~/hooks';
 import { cn } from '~/utils';
+import store from '~/store';
 
 const defaultInterface = getConfigDefaults().interface;
 
 function Header() {
   const { data: startupConfig } = useGetStartupConfig();
-  const { navVisible, setNavVisible } = useOutletContext<ContextType>();
+  const navVisible = useRecoilValue(store.sidebarExpanded);
 
   const interfaceConfig = useMemo(
     () => startupConfig?.interface ?? defaultInterface,
@@ -43,30 +42,15 @@ function Header() {
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
 
   return (
-    <div className="via-presentation/70 md:from-presentation/80 md:via-presentation/50 2xl:from-presentation/0 absolute top-0 z-10 flex h-14 w-full items-center justify-between bg-gradient-to-b from-presentation to-transparent p-2 font-semibold text-text-primary 2xl:via-transparent">
+    <div className="via-presentation/70 md:from-presentation/80 md:via-presentation/50 2xl:from-presentation/0 absolute top-0 z-10 flex h-[52px] w-full items-center justify-between bg-gradient-to-b from-presentation to-transparent p-2 font-semibold text-text-primary 2xl:via-transparent">
       <div className="hide-scrollbar flex w-full items-center justify-between gap-2 overflow-x-auto">
         <div className="mx-1 flex items-center">
-          <AnimatePresence initial={false}>
-            {!navVisible && (
-              <motion.div
-                className="flex items-center gap-2"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.15 }}
-                key="header-buttons"
-              >
-                <OpenSidebar setNavVisible={setNavVisible} className="max-md:hidden" />
-                <HeaderNewChat />
-              </motion.div>
-            )}
-          </AnimatePresence>
+          <OpenSidebar className="md:hidden" />
           {!(navVisible && isSmallScreen) && (
             <div
               className={cn(
-                'flex items-center gap-2',
+                'flex items-center gap-2 pl-2',
                 !isSmallScreen ? 'transition-all duration-200 ease-in-out' : '',
-                !navVisible && !isSmallScreen ? 'pl-2' : '',
               )}
             >
               <ModelSelector startupConfig={startupConfig} />
diff --git a/client/src/components/Chat/Menus/BookmarkMenu.tsx b/client/src/components/Chat/Menus/BookmarkMenu.tsx
index ac7b17985e..d66fccd24b 100644
--- a/client/src/components/Chat/Menus/BookmarkMenu.tsx
+++ b/client/src/components/Chat/Menus/BookmarkMenu.tsx
@@ -157,9 +157,9 @@ const BookmarkMenu: FC = () => {
       return <Spinner aria-label="Spinner" />;
     }
     if (hasBookmarks) {
-      return <BookmarkFilledIcon className="icon-lg" aria-hidden="true" />;
+      return <BookmarkFilledIcon className="icon-md" aria-hidden="true" />;
     }
-    return <BookmarkIcon className="icon-lg" aria-hidden="true" />;
+    return <BookmarkIcon className="icon-md" aria-hidden="true" />;
   };
 
   return (
@@ -181,7 +181,7 @@ const BookmarkMenu: FC = () => {
                 aria-label={buttonAriaLabel}
                 aria-pressed={hasBookmarks}
                 className={cn(
-                  'mt-text-sm flex size-10 flex-shrink-0 items-center justify-center gap-2 rounded-xl border border-border-light bg-presentation text-sm transition-colors duration-200 hover:bg-surface-hover',
+                  'mt-text-sm flex size-9 flex-shrink-0 items-center justify-center gap-2 rounded-xl border border-border-light bg-presentation text-sm transition-colors duration-200 hover:bg-surface-hover',
                   isMenuOpen ? 'bg-surface-hover' : '',
                 )}
                 data-testid="bookmark-menu"
diff --git a/client/src/components/Chat/Menus/Endpoints/ModelSelector.tsx b/client/src/components/Chat/Menus/Endpoints/ModelSelector.tsx
index 050bec82a7..2c90f57598 100644
--- a/client/src/components/Chat/Menus/Endpoints/ModelSelector.tsx
+++ b/client/src/components/Chat/Menus/Endpoints/ModelSelector.tsx
@@ -65,7 +65,7 @@ function ModelSelectorContent() {
       description={localize('com_ui_select_model')}
       render={
         <button
-          className="my-1 flex h-10 w-full max-w-[70vw] items-center justify-center gap-2 rounded-xl border border-border-light bg-presentation px-3 py-2 text-sm text-text-primary hover:bg-surface-active-alt"
+          className="my-1 flex h-9 w-full max-w-[70vw] items-center justify-center gap-2 rounded-xl border border-border-light bg-presentation px-3 py-2 text-sm text-text-primary hover:bg-surface-active-alt"
           aria-label={localize('com_ui_select_model')}
         >
           {selectedIcon && React.isValidElement(selectedIcon) && (
diff --git a/client/src/components/Chat/Menus/HeaderNewChat.tsx b/client/src/components/Chat/Menus/HeaderNewChat.tsx
deleted file mode 100644
index a50d42af85..0000000000
--- a/client/src/components/Chat/Menus/HeaderNewChat.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { QueryKeys } from 'librechat-data-provider';
-import { useRecoilValue } from 'recoil';
-import { useQueryClient } from '@tanstack/react-query';
-import { TooltipAnchor, Button, NewChatIcon } from '@librechat/client';
-import { useNewConvo, useLocalize } from '~/hooks';
-import { clearMessagesCache } from '~/utils';
-import store from '~/store';
-
-export default function HeaderNewChat() {
-  const localize = useLocalize();
-  const queryClient = useQueryClient();
-  const { newConversation } = useNewConvo();
-  const conversation = useRecoilValue(store.conversationByIndex(0));
-
-  const clickHandler: React.MouseEventHandler<HTMLButtonElement> = (e) => {
-    if (e.button === 0 && (e.ctrlKey || e.metaKey)) {
-      window.open('/c/new', '_blank');
-      return;
-    }
-    clearMessagesCache(queryClient, conversation?.conversationId);
-    queryClient.invalidateQueries([QueryKeys.messages]);
-    newConversation();
-  };
-
-  return (
-    <TooltipAnchor
-      description={localize('com_ui_new_chat')}
-      render={
-        <Button
-          size="icon"
-          variant="outline"
-          data-testid="wide-header-new-chat-button"
-          aria-label={localize('com_ui_new_chat')}
-          className="rounded-xl bg-presentation duration-0 hover:bg-surface-active-alt max-md:hidden"
-          onClick={clickHandler}
-        >
-          <NewChatIcon />
-        </Button>
-      }
-    />
-  );
-}
diff --git a/client/src/components/Chat/Menus/OpenSidebar.tsx b/client/src/components/Chat/Menus/OpenSidebar.tsx
index f2519c15f7..0a932b2e44 100644
--- a/client/src/components/Chat/Menus/OpenSidebar.tsx
+++ b/client/src/components/Chat/Menus/OpenSidebar.tsx
@@ -1,32 +1,21 @@
 import { startTransition } from 'react';
+import { useSetRecoilState } from 'recoil';
 import { TooltipAnchor, Button, Sidebar } from '@librechat/client';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
+import store from '~/store';
 
-/** Element ID for the close sidebar button - used for focus management */
 export const CLOSE_SIDEBAR_ID = 'close-sidebar-button';
-/** Element ID for the open sidebar button - used for focus management */
 export const OPEN_SIDEBAR_ID = 'open-sidebar-button';
 
-export default function OpenSidebar({
-  setNavVisible,
-  className,
-}: {
-  setNavVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  className?: string;
-}) {
+export default function OpenSidebar({ className }: { className?: string }) {
   const localize = useLocalize();
+  const setSidebarExpanded = useSetRecoilState(store.sidebarExpanded);
 
   const handleClick = () => {
-    // Use startTransition to mark this as a non-urgent update
-    // This prevents blocking the main thread during the cascade of re-renders
     startTransition(() => {
-      setNavVisible((prev) => {
-        localStorage.setItem('navVisible', JSON.stringify(!prev));
-        return !prev;
-      });
+      setSidebarExpanded(true);
     });
-    // Delay focus until after the sidebar animation completes (200ms)
     setTimeout(() => {
       document.getElementById(CLOSE_SIDEBAR_ID)?.focus();
     }, 250);
@@ -50,7 +39,7 @@ export default function OpenSidebar({
           )}
           onClick={handleClick}
         >
-          <Sidebar aria-hidden="true" />
+          <Sidebar className="icon-md" aria-hidden="true" />
         </Button>
       }
     />
diff --git a/client/src/components/Chat/Menus/PresetsMenu.tsx b/client/src/components/Chat/Menus/PresetsMenu.tsx
index 0edd1635bc..8a9c7c02ca 100644
--- a/client/src/components/Chat/Menus/PresetsMenu.tsx
+++ b/client/src/components/Chat/Menus/PresetsMenu.tsx
@@ -59,10 +59,10 @@ const PresetsMenu: FC = () => {
               id="presets-button"
               data-testid="presets-button"
               aria-label={localize('com_endpoint_examples')}
-              className="rounded-xl bg-presentation p-2 duration-0 hover:bg-surface-active-alt"
+              className="h-9 w-9 shrink-0 rounded-xl bg-presentation duration-0 hover:bg-surface-active-alt"
               // className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
             >
-              <BookCopy className="icon-lg" aria-hidden="true" />
+              <BookCopy className="icon-md" aria-hidden="true" />
             </Button>
           }
         ></TooltipAnchor>
diff --git a/client/src/components/Chat/Menus/index.ts b/client/src/components/Chat/Menus/index.ts
index 79ae61315b..b55dfd846a 100644
--- a/client/src/components/Chat/Menus/index.ts
+++ b/client/src/components/Chat/Menus/index.ts
@@ -1,3 +1,2 @@
 export { default as PresetsMenu } from './PresetsMenu';
 export { default as OpenSidebar } from './OpenSidebar';
-export { default as HeaderNewChat } from './HeaderNewChat';
diff --git a/client/src/components/Chat/Presentation.tsx b/client/src/components/Chat/Presentation.tsx
index 30a61842c8..7daee0f18a 100644
--- a/client/src/components/Chat/Presentation.tsx
+++ b/client/src/components/Chat/Presentation.tsx
@@ -1,10 +1,10 @@
-import { useRecoilValue } from 'recoil';
 import { useEffect, useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
 import { FileSources, LocalStorageKeys } from 'librechat-data-provider';
 import type { ExtendedFile } from '~/common';
-import { useDeleteFilesMutation } from '~/data-provider';
 import DragDropWrapper from '~/components/Chat/Input/Files/DragDropWrapper';
-import { EditorProvider, SidePanelProvider, ArtifactsProvider } from '~/Providers';
+import { EditorProvider, ArtifactsProvider } from '~/Providers';
+import { useDeleteFilesMutation } from '~/data-provider';
 import Artifacts from '~/components/Artifacts/Artifacts';
 import { SidePanelGroup } from '~/components/SidePanel';
 import { useSetFilesToDelete } from '~/hooks';
@@ -47,20 +47,6 @@ export default function Presentation({ children }: { children: React.ReactNode }
     mutateAsync({ files });
   }, [mutateAsync]);
 
-  const defaultLayout = useMemo(() => {
-    const resizableLayout = localStorage.getItem('react-resizable-panels:layout');
-    return typeof resizableLayout === 'string' ? JSON.parse(resizableLayout) : undefined;
-  }, []);
-  const defaultCollapsed = useMemo(() => {
-    const collapsedPanels = localStorage.getItem('react-resizable-panels:collapsed');
-    return typeof collapsedPanels === 'string' ? JSON.parse(collapsedPanels) : true;
-  }, []);
-  const fullCollapse = useMemo(() => localStorage.getItem('fullPanelCollapse') === 'true', []);
-
-  /**
-   * Memoize artifacts JSX to prevent recreating it on every render
-   * This is critical for performance - prevents entire artifact tree from re-rendering
-   */
   const artifactsElement = useMemo(() => {
     if (artifactsVisibility === true && Object.keys(artifacts ?? {}).length > 0) {
       return (
@@ -76,18 +62,11 @@ export default function Presentation({ children }: { children: React.ReactNode }
 
   return (
     <DragDropWrapper className="relative flex w-full grow overflow-hidden bg-presentation">
-      <SidePanelProvider>
-        <SidePanelGroup
-          defaultLayout={defaultLayout}
-          fullPanelCollapse={fullCollapse}
-          defaultCollapsed={defaultCollapsed}
-          artifacts={artifactsElement}
-        >
-          <main className="flex h-full flex-col overflow-y-auto" role="main">
-            {children}
-          </main>
-        </SidePanelGroup>
-      </SidePanelProvider>
+      <SidePanelGroup artifacts={artifactsElement}>
+        <main className="flex h-full flex-col overflow-y-auto" role="main">
+          {children}
+        </main>
+      </SidePanelGroup>
     </DragDropWrapper>
   );
 }
diff --git a/client/src/components/Chat/TemporaryChat.tsx b/client/src/components/Chat/TemporaryChat.tsx
index a4d72d081e..b1acf1ba13 100644
--- a/client/src/components/Chat/TemporaryChat.tsx
+++ b/client/src/components/Chat/TemporaryChat.tsx
@@ -37,13 +37,13 @@ export function TemporaryChat() {
             aria-label={localize('com_ui_temporary')}
             aria-pressed={isTemporary}
             className={cn(
-              'inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light text-text-primary transition-all ease-in-out',
+              'inline-flex size-9 flex-shrink-0 items-center justify-center rounded-xl border border-border-light text-text-primary transition-all ease-in-out',
               isTemporary
                 ? 'bg-surface-active'
                 : 'bg-presentation shadow-sm hover:bg-surface-active-alt',
             )}
           >
-            <MessageCircleDashed className="icon-lg" aria-hidden="true" />
+            <MessageCircleDashed className="icon-md" aria-hidden="true" />
           </button>
         }
       />
diff --git a/client/src/components/Conversations/Conversations.tsx b/client/src/components/Conversations/Conversations.tsx
index f55af35f10..fee9e4fa82 100644
--- a/client/src/components/Conversations/Conversations.tsx
+++ b/client/src/components/Conversations/Conversations.tsx
@@ -48,7 +48,7 @@ const MeasuredRow: FC<MeasuredRowProps> = memo(
   ({ cache, rowKey, parent, index, style, children }) => (
     <CellMeasurer cache={cache} columnIndex={0} key={rowKey} parent={parent} rowIndex={index}>
       {({ registerChild }) => (
-        <div ref={registerChild as React.LegacyRef<HTMLDivElement>} style={style}>
+        <div ref={registerChild as React.LegacyRef<HTMLDivElement>} style={style} className="px-3">
           {children}
         </div>
       )}
@@ -386,7 +386,7 @@ const Conversations: FC<ConversationsProps> = ({
                 aria-label="Conversations"
                 onRowsRendered={handleRowsRendered}
                 tabIndex={-1}
-                style={{ outline: 'none', scrollbarGutter: 'stable' }}
+                style={{ outline: 'none' }}
                 containerRole="rowgroup"
               />
             )}
diff --git a/client/src/components/Nav/AccountSettings.tsx b/client/src/components/Nav/AccountSettings.tsx
index cf80f89ca2..01417ef362 100644
--- a/client/src/components/Nav/AccountSettings.tsx
+++ b/client/src/components/Nav/AccountSettings.tsx
@@ -8,7 +8,7 @@ import { useAuthContext } from '~/hooks/AuthContext';
 import { useLocalize } from '~/hooks';
 import Settings from './Settings';
 
-function AccountSettings() {
+function AccountSettings({ collapsed = false }: { collapsed?: boolean }) {
   const localize = useLocalize();
   const { user, isAuthenticated, logout } = useAuthContext();
   const { data: startupConfig } = useGetStartupConfig();
@@ -25,25 +25,35 @@ function AccountSettings() {
         ref={accountSettingsButtonRef}
         aria-label={localize('com_nav_account_settings')}
         data-testid="nav-user"
-        className="mt-text-sm flex h-auto w-full items-center gap-2 rounded-xl p-2 text-sm transition-all duration-200 ease-in-out hover:bg-surface-active-alt aria-[expanded=true]:bg-surface-active-alt"
+        className={
+          collapsed
+            ? 'flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:bg-surface-active-alt aria-[expanded=true]:bg-surface-active-alt'
+            : 'mt-text-sm flex h-auto w-full items-center gap-2 rounded-xl p-2 text-sm transition-all duration-200 ease-in-out hover:bg-surface-active-alt aria-[expanded=true]:bg-surface-active-alt'
+        }
       >
-        <div className="-ml-0.9 -mt-0.8 h-8 w-8 flex-shrink-0">
+        <div
+          className={collapsed ? 'size-7 flex-shrink-0' : '-ml-0.9 -mt-0.8 h-8 w-8 flex-shrink-0'}
+        >
           <div className="relative flex">
-            <Avatar user={user} size={32} />
+            <Avatar user={user} size={collapsed ? 28 : 32} />
           </div>
         </div>
-        <div
-          className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-text-primary"
-          style={{ marginTop: '0', marginLeft: '0' }}
-        >
-          {user?.name ?? user?.username ?? localize('com_nav_user')}
-        </div>
+        {!collapsed && (
+          <div
+            className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-text-primary"
+            style={{ marginTop: '0', marginLeft: '0' }}
+          >
+            {user?.name ?? user?.username ?? localize('com_nav_user')}
+          </div>
+        )}
       </Menu.MenuButton>
       <Menu.Menu
+        portal
         className="account-settings-popover popover-ui z-[125] w-[305px] rounded-lg md:w-[244px]"
+        placement={collapsed ? 'right-end' : undefined}
         style={{
-          transformOrigin: 'bottom',
-          translate: '0 -4px',
+          transformOrigin: collapsed ? 'left bottom' : 'bottom',
+          translate: collapsed ? '4px 0' : '0 -4px',
         }}
       >
         <div className="text-token-text-secondary ml-3 mr-2 py-2 text-sm" role="note">
diff --git a/client/src/components/Nav/Bookmarks/BookmarkNav.tsx b/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
index ea12fafe5b..16a64bb5e0 100644
--- a/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
+++ b/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
@@ -108,8 +108,8 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps)
               aria-pressed={tags.length > 0}
               className={cn(
                 'flex items-center justify-center',
-                'size-10 border-none text-text-primary hover:bg-accent hover:text-accent-foreground',
-                'rounded-full border-none p-2 hover:bg-surface-active-alt md:rounded-xl',
+                'size-9 border-none text-text-primary hover:bg-accent hover:text-accent-foreground',
+                'rounded-lg border-none p-2 hover:bg-surface-active-alt',
                 'outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-black dark:focus-visible:ring-white',
                 isMenuOpen ? 'bg-surface-hover' : '',
               )}
diff --git a/client/src/components/Nav/Favorites/FavoritesList.tsx b/client/src/components/Nav/Favorites/FavoritesList.tsx
index 0ca23f8853..e47e01fb87 100644
--- a/client/src/components/Nav/Favorites/FavoritesList.tsx
+++ b/client/src/components/Nav/Favorites/FavoritesList.tsx
@@ -137,7 +137,7 @@ export default function FavoritesList({
   const agentsMap = useAgentsMapContext();
   const { data: endpointsConfig = {} as t.TEndpointsConfig } = useGetEndpointsQuery();
 
-  const { onSelectEndpoint } = useSelectMention({
+  const { onSelectEndpoint: _onSelectEndpoint } = useSelectMention({
     modelSpecs: [],
     assistantsMap,
     endpointsConfig,
@@ -146,6 +146,16 @@ export default function FavoritesList({
     returnHandlers: true,
   });
 
+  const onSelectEndpoint = useCallback(
+    (...args: Parameters<NonNullable<typeof _onSelectEndpoint>>) => {
+      _onSelectEndpoint?.(...args);
+      if (isSmallScreen && toggleNav) {
+        toggleNav();
+      }
+    },
+    [_onSelectEndpoint, isSmallScreen, toggleNav],
+  );
+
   const marketplaceRef = useRef<HTMLDivElement>(null);
   const listContainerRef = useRef<HTMLDivElement>(null);
 
diff --git a/client/src/components/Nav/MobileNav.tsx b/client/src/components/Nav/MobileNav.tsx
deleted file mode 100644
index 4b2986fa01..0000000000
--- a/client/src/components/Nav/MobileNav.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from 'react';
-import { useRecoilValue } from 'recoil';
-import { QueryKeys } from 'librechat-data-provider';
-import { useQueryClient } from '@tanstack/react-query';
-import type { Dispatch, SetStateAction } from 'react';
-import { useLocalize, useNewConvo } from '~/hooks';
-import { clearMessagesCache } from '~/utils';
-import store from '~/store';
-
-export default function MobileNav({
-  setNavVisible,
-  navVisible,
-}: {
-  navVisible: boolean;
-  setNavVisible: Dispatch<SetStateAction<boolean>>;
-}) {
-  const localize = useLocalize();
-  const queryClient = useQueryClient();
-  const { newConversation } = useNewConvo();
-  const conversation = useRecoilValue(store.conversationByIndex(0));
-  const { title = 'New Chat' } = conversation || {};
-
-  return (
-    <div className="bg-token-main-surface-primary sticky top-0 z-10 flex min-h-[40px] items-center justify-center bg-presentation pl-1 dark:text-white md:hidden">
-      <button
-        type="button"
-        data-testid="mobile-header-new-chat-button"
-        aria-label={
-          navVisible ? localize('com_nav_close_sidebar') : localize('com_nav_open_sidebar')
-        }
-        aria-live="polite"
-        className="m-1 inline-flex size-10 items-center justify-center rounded-full hover:bg-surface-active-alt"
-        onClick={() =>
-          setNavVisible((prev) => {
-            localStorage.setItem('navVisible', JSON.stringify(!prev));
-            return !prev;
-          })
-        }
-      >
-        <span className="sr-only">
-          {navVisible ? localize('com_nav_close_sidebar') : localize('com_nav_open_sidebar')}
-        </span>
-        <svg
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className="icon-md"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M3 8C3 7.44772 3.44772 7 4 7H20C20.5523 7 21 7.44772 21 8C21 8.55228 20.5523 9 20 9H4C3.44772 9 3 8.55228 3 8ZM3 16C3 15.4477 3.44772 15 4 15H14C14.5523 15 15 15.4477 15 16C15 16.5523 14.5523 17 14 17H4C3.44772 17 3 16.5523 3 16Z"
-            fill="currentColor"
-          />
-        </svg>
-      </button>
-      <h1 className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-center text-sm font-normal">
-        {title ?? localize('com_ui_new_chat')}
-      </h1>
-      <button
-        type="button"
-        aria-label={localize('com_ui_new_chat')}
-        className="m-1 inline-flex size-10 items-center justify-center rounded-full hover:bg-surface-active-alt"
-        onClick={() => {
-          clearMessagesCache(queryClient, conversation?.conversationId);
-          queryClient.invalidateQueries([QueryKeys.messages]);
-          newConversation();
-        }}
-      >
-        <svg
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className="icon-md"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M16.7929 2.79289C18.0118 1.57394 19.9882 1.57394 21.2071 2.79289C22.4261 4.01184 22.4261 5.98815 21.2071 7.20711L12.7071 15.7071C12.5196 15.8946 12.2652 16 12 16H9C8.44772 16 8 15.5523 8 15V12C8 11.7348 8.10536 11.4804 8.29289 11.2929L16.7929 2.79289ZM19.7929 4.20711C19.355 3.7692 18.645 3.7692 18.2071 4.2071L10 12.4142V14H11.5858L19.7929 5.79289C20.2308 5.35499 20.2308 4.64501 19.7929 4.20711ZM6 5C5.44772 5 5 5.44771 5 6V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V14C19 13.4477 19.4477 13 20 13C20.5523 13 21 13.4477 21 14V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34314 4.34315 3 6 3H10C10.5523 3 11 3.44771 11 4C11 4.55228 10.5523 5 10 5H6Z"
-            fill="currentColor"
-          />
-        </svg>
-      </button>
-    </div>
-  );
-}
diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx
deleted file mode 100644
index cdee938663..0000000000
--- a/client/src/components/Nav/Nav.tsx
+++ /dev/null
@@ -1,307 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useState,
-  useMemo,
-  memo,
-  lazy,
-  Suspense,
-  useRef,
-  startTransition,
-} from 'react';
-import { useRecoilValue } from 'recoil';
-import { motion } from 'framer-motion';
-import { Skeleton, useMediaQuery } from '@librechat/client';
-import { PermissionTypes, Permissions } from 'librechat-data-provider';
-import type { InfiniteQueryObserverResult } from '@tanstack/react-query';
-import type { ConversationListResponse } from 'librechat-data-provider';
-import type { List } from 'react-virtualized';
-import {
-  useLocalize,
-  useHasAccess,
-  useAuthContext,
-  useLocalStorage,
-  useNavScrolling,
-} from '~/hooks';
-import { useConversationsInfiniteQuery, useTitleGeneration } from '~/data-provider';
-import { Conversations } from '~/components/Conversations';
-import SearchBar from './SearchBar';
-import NewChat from './NewChat';
-import { cn } from '~/utils';
-import store from '~/store';
-
-const BookmarkNav = lazy(() => import('./Bookmarks/BookmarkNav'));
-const AccountSettings = lazy(() => import('./AccountSettings'));
-
-export const NAV_WIDTH = {
-  MOBILE: 320,
-  DESKTOP: 260,
-} as const;
-
-const SearchBarSkeleton = memo(() => (
-  <div className={cn('flex h-10 items-center py-2')}>
-    <Skeleton className="h-10 w-full rounded-lg" />
-  </div>
-));
-
-SearchBarSkeleton.displayName = 'SearchBarSkeleton';
-
-const NavMask = memo(
-  ({ navVisible, toggleNavVisible }: { navVisible: boolean; toggleNavVisible: () => void }) => (
-    <div
-      id="mobile-nav-mask-toggle"
-      role="button"
-      tabIndex={0}
-      className={`nav-mask transition-opacity duration-200 ease-in-out ${navVisible ? 'active opacity-100' : 'opacity-0'}`}
-      onClick={toggleNavVisible}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          toggleNavVisible();
-        }
-      }}
-      aria-label="Toggle navigation"
-    />
-  ),
-);
-
-const MemoNewChat = memo(NewChat);
-
-const Nav = memo(
-  ({
-    navVisible,
-    setNavVisible,
-  }: {
-    navVisible: boolean;
-    setNavVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  }) => {
-    const localize = useLocalize();
-    const { isAuthenticated } = useAuthContext();
-    useTitleGeneration(isAuthenticated);
-
-    const isSmallScreen = useMediaQuery('(max-width: 768px)');
-    const [newUser, setNewUser] = useLocalStorage('newUser', true);
-    const [isChatsExpanded, setIsChatsExpanded] = useLocalStorage('chatsExpanded', true);
-    const [showLoading, setShowLoading] = useState(false);
-    const [tags, setTags] = useState<string[]>([]);
-
-    const hasAccessToBookmarks = useHasAccess({
-      permissionType: PermissionTypes.BOOKMARKS,
-      permission: Permissions.USE,
-    });
-
-    const search = useRecoilValue(store.search);
-
-    const { data, fetchNextPage, isFetchingNextPage, isLoading, isFetching, refetch } =
-      useConversationsInfiniteQuery(
-        {
-          tags: tags.length === 0 ? undefined : tags,
-          search: search.debouncedQuery || undefined,
-        },
-        {
-          enabled: isAuthenticated,
-          staleTime: 30000,
-          cacheTime: 300000,
-        },
-      );
-
-    const computedHasNextPage = useMemo(() => {
-      if (data?.pages && data.pages.length > 0) {
-        const lastPage: ConversationListResponse = data.pages[data.pages.length - 1];
-        return lastPage.nextCursor !== null;
-      }
-      return false;
-    }, [data?.pages]);
-
-    const outerContainerRef = useRef<HTMLDivElement>(null);
-    const conversationsRef = useRef<List | null>(null);
-
-    const { moveToTop } = useNavScrolling<ConversationListResponse>({
-      setShowLoading,
-      fetchNextPage: async (options?) => {
-        if (computedHasNextPage) {
-          return fetchNextPage(options);
-        }
-        return Promise.resolve(
-          {} as InfiniteQueryObserverResult<ConversationListResponse, unknown>,
-        );
-      },
-      isFetchingNext: isFetchingNextPage,
-    });
-
-    const conversations = useMemo(() => {
-      return data ? data.pages.flatMap((page) => page.conversations) : [];
-    }, [data]);
-
-    const toggleNavVisible = useCallback(() => {
-      // Use startTransition to mark this as a non-urgent update
-      // This prevents blocking the main thread during the cascade of re-renders
-      startTransition(() => {
-        setNavVisible((prev: boolean) => {
-          localStorage.setItem('navVisible', JSON.stringify(!prev));
-          return !prev;
-        });
-        if (newUser) {
-          setNewUser(false);
-        }
-      });
-    }, [newUser, setNavVisible, setNewUser]);
-
-    const itemToggleNav = useCallback(() => {
-      if (isSmallScreen) {
-        toggleNavVisible();
-      }
-    }, [isSmallScreen, toggleNavVisible]);
-
-    useEffect(() => {
-      if (isSmallScreen) {
-        const savedNavVisible = localStorage.getItem('navVisible');
-        if (savedNavVisible === null) {
-          toggleNavVisible();
-        }
-      }
-    }, [isSmallScreen, toggleNavVisible]);
-
-    useEffect(() => {
-      refetch();
-    }, [tags, refetch]);
-
-    const loadMoreConversations = useCallback(() => {
-      if (isFetchingNextPage || !computedHasNextPage) {
-        return;
-      }
-
-      fetchNextPage();
-    }, [isFetchingNextPage, computedHasNextPage, fetchNextPage]);
-
-    const subHeaders = useMemo(
-      () => (
-        <>
-          {search.enabled === null && <SearchBarSkeleton />}
-          {search.enabled === true && <SearchBar isSmallScreen={isSmallScreen} />}
-        </>
-      ),
-      [search.enabled, isSmallScreen],
-    );
-
-    const headerButtons = useMemo(
-      () => (
-        <>
-          {hasAccessToBookmarks && (
-            <>
-              <div className="mt-1.5" />
-              <Suspense fallback={null}>
-                <BookmarkNav tags={tags} setTags={setTags} />
-              </Suspense>
-            </>
-          )}
-        </>
-      ),
-      [hasAccessToBookmarks, tags],
-    );
-
-    const [isSearchLoading, setIsSearchLoading] = useState(
-      !!search.query && (search.isTyping || isLoading || isFetching),
-    );
-
-    useEffect(() => {
-      if (search.isTyping) {
-        setIsSearchLoading(true);
-      } else if (!isLoading && !isFetching) {
-        setIsSearchLoading(false);
-      } else if (!!search.query && (isLoading || isFetching)) {
-        setIsSearchLoading(true);
-      }
-    }, [search.query, search.isTyping, isLoading, isFetching]);
-
-    // Always render sidebar to avoid mount/unmount costs
-    // Use transform for GPU-accelerated animation (no layout thrashing)
-    const sidebarWidth = isSmallScreen ? NAV_WIDTH.MOBILE : NAV_WIDTH.DESKTOP;
-
-    // Sidebar content (shared between mobile and desktop)
-    const sidebarContent = (
-      <div className="flex h-full flex-col">
-        <nav
-          id="chat-history-nav"
-          aria-label={localize('com_ui_chat_history')}
-          className="flex h-full flex-col px-2 pb-3.5"
-          aria-hidden={!navVisible}
-          {...{ inert: !navVisible ? '' : undefined }}
-        >
-          <div className="flex flex-1 flex-col overflow-hidden" ref={outerContainerRef}>
-            <MemoNewChat
-              subHeaders={subHeaders}
-              toggleNav={toggleNavVisible}
-              headerButtons={headerButtons}
-              isSmallScreen={isSmallScreen}
-            />
-            <div className="flex min-h-0 flex-grow flex-col overflow-hidden">
-              <Conversations
-                conversations={conversations}
-                moveToTop={moveToTop}
-                toggleNav={itemToggleNav}
-                containerRef={conversationsRef}
-                loadMoreConversations={loadMoreConversations}
-                isLoading={isFetchingNextPage || showLoading || isLoading}
-                isSearchLoading={isSearchLoading}
-                isChatsExpanded={isChatsExpanded}
-                setIsChatsExpanded={setIsChatsExpanded}
-              />
-            </div>
-          </div>
-          <Suspense fallback={<Skeleton className="mt-1 h-12 w-full rounded-xl" />}>
-            <AccountSettings />
-          </Suspense>
-        </nav>
-      </div>
-    );
-
-    // Mobile: Fixed positioned sidebar that slides over content
-    // Uses CSS transitions (not Framer Motion) to sync perfectly with content animation
-    if (isSmallScreen) {
-      return (
-        <>
-          <div
-            data-testid="nav"
-            className={cn(
-              'nav fixed left-0 top-0 z-[110] h-full bg-surface-primary-alt',
-              navVisible && 'active',
-            )}
-            style={{
-              width: sidebarWidth,
-              transform: navVisible ? 'translateX(0)' : `translateX(-${sidebarWidth}px)`,
-              transition: 'transform 0.2s ease-out',
-            }}
-          >
-            {sidebarContent}
-          </div>
-          <NavMask navVisible={navVisible} toggleNavVisible={toggleNavVisible} />
-        </>
-      );
-    }
-
-    // Desktop: Inline sidebar with width transition
-    return (
-      <div
-        className="flex-shrink-0 overflow-hidden"
-        style={{ width: navVisible ? sidebarWidth : 0, transition: 'width 0.2s ease-out' }}
-      >
-        <motion.div
-          data-testid="nav"
-          className={cn('nav h-full bg-surface-primary-alt', navVisible && 'active')}
-          style={{ width: sidebarWidth }}
-          initial={false}
-          animate={{
-            x: navVisible ? 0 : -sidebarWidth,
-          }}
-          transition={{ duration: 0.2, ease: 'easeOut' }}
-        >
-          {sidebarContent}
-        </motion.div>
-      </div>
-    );
-  },
-);
-
-Nav.displayName = 'Nav';
-
-export default Nav;
diff --git a/client/src/components/Nav/NewChat.tsx b/client/src/components/Nav/NewChat.tsx
index af33799166..dc24be148f 100644
--- a/client/src/components/Nav/NewChat.tsx
+++ b/client/src/components/Nav/NewChat.tsx
@@ -1,105 +1,45 @@
-import React, { useCallback } from 'react';
-import { Link } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
 import { QueryKeys } from 'librechat-data-provider';
 import { useQueryClient } from '@tanstack/react-query';
-import { TooltipAnchor, NewChatIcon, MobileSidebar, Sidebar, Button } from '@librechat/client';
-import { CLOSE_SIDEBAR_ID, OPEN_SIDEBAR_ID } from '~/components/Chat/Menus/OpenSidebar';
+import { TooltipAnchor, Button, NewChatIcon } from '@librechat/client';
 import { useLocalize, useNewConvo } from '~/hooks';
-import { clearMessagesCache } from '~/utils';
+import { clearMessagesCache, cn } from '~/utils';
 import store from '~/store';
 
-export default function NewChat({
-  index = 0,
-  toggleNav,
-  subHeaders,
-  isSmallScreen,
-  headerButtons,
-}: {
-  index?: number;
-  toggleNav: () => void;
-  isSmallScreen?: boolean;
-  subHeaders?: React.ReactNode;
-  headerButtons?: React.ReactNode;
-}) {
-  const queryClient = useQueryClient();
-  /** Note: this component needs an explicit index passed if using more than one */
-  const { newConversation: newConvo } = useNewConvo(index);
+export default function NewChat({ className }: { className?: string }) {
   const localize = useLocalize();
-  const { conversation } = store.useCreateConversationAtom(index);
+  const queryClient = useQueryClient();
+  const { newConversation } = useNewConvo();
+  const conversation = useRecoilValue(store.conversationByIndex(0));
 
-  const handleToggleNav = useCallback(() => {
-    toggleNav();
-    // Delay focus until after the sidebar animation completes (200ms)
-    setTimeout(() => {
-      document.getElementById(OPEN_SIDEBAR_ID)?.focus();
-    }, 250);
-  }, [toggleNav]);
-
-  const clickHandler: React.MouseEventHandler<HTMLAnchorElement> = useCallback(
-    (e) => {
-      // Let browser handle modified/non-left clicks (new tab, context menu, etc.)
-      if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
-        return;
-      }
-
-      e.preventDefault();
-      clearMessagesCache(queryClient, conversation?.conversationId);
-      queryClient.invalidateQueries([QueryKeys.messages]);
-      newConvo();
-      if (isSmallScreen) {
-        toggleNav();
-      }
-    },
-    [queryClient, conversation, newConvo, toggleNav, isSmallScreen],
-  );
+  const clickHandler: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (e.button === 0 && (e.ctrlKey || e.metaKey)) {
+      window.open('/c/new', '_blank');
+      return;
+    }
+    clearMessagesCache(queryClient, conversation?.conversationId);
+    queryClient.invalidateQueries([QueryKeys.messages]);
+    newConversation();
+  };
 
   return (
-    <>
-      <div className="flex items-center justify-between px-0.5 py-[2px] md:py-2">
-        <TooltipAnchor
-          description={localize('com_nav_close_sidebar')}
-          render={
-            <Button
-              id={CLOSE_SIDEBAR_ID}
-              size="icon"
-              variant="outline"
-              data-testid="close-sidebar-button"
-              aria-label={localize('com_nav_close_sidebar')}
-              aria-expanded={true}
-              className="rounded-full border-none bg-transparent duration-0 hover:bg-surface-active-alt focus-visible:ring-inset focus-visible:ring-black focus-visible:ring-offset-0 dark:focus-visible:ring-white md:rounded-xl"
-              onClick={handleToggleNav}
-            >
-              <Sidebar aria-hidden="true" className="max-md:hidden" />
-              <MobileSidebar
-                aria-hidden="true"
-                className="icon-lg m-1 inline-flex items-center justify-center md:hidden"
-              />
-            </Button>
-          }
-        />
-        <div className="flex gap-0.5">
-          {headerButtons}
-
-          <TooltipAnchor
-            description={localize('com_ui_new_chat')}
-            render={
-              <Button
-                asChild
-                size="icon"
-                variant="outline"
-                data-testid="nav-new-chat-button"
-                aria-label={localize('com_ui_new_chat')}
-                className="rounded-full border-none bg-transparent duration-0 hover:bg-surface-active-alt focus-visible:ring-inset focus-visible:ring-black focus-visible:ring-offset-0 dark:focus-visible:ring-white md:rounded-xl"
-              >
-                <Link to="/c/new" state={{ focusChat: true }} onClick={clickHandler}>
-                  <NewChatIcon className="icon-lg text-text-primary" />
-                </Link>
-              </Button>
-            }
-          />
-        </div>
-      </div>
-      {subHeaders != null ? subHeaders : null}
-    </>
+    <TooltipAnchor
+      description={localize('com_ui_new_chat')}
+      render={
+        <Button
+          size="icon"
+          variant="outline"
+          data-testid="new-chat-button"
+          aria-label={localize('com_ui_new_chat')}
+          className={cn(
+            'size-9 rounded-xl bg-presentation duration-0 hover:bg-surface-active-alt max-md:hidden',
+            className,
+          )}
+          onClick={clickHandler}
+        >
+          <NewChatIcon />
+        </Button>
+      }
+    />
   );
 }
diff --git a/client/src/components/Nav/SearchBar.tsx b/client/src/components/Nav/SearchBar.tsx
index 924ccf8620..84648ac67d 100644
--- a/client/src/components/Nav/SearchBar.tsx
+++ b/client/src/components/Nav/SearchBar.tsx
@@ -109,7 +109,7 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: React.Ref<HTMLDivEleme
   return (
     <div
       ref={ref}
-      className="group relative my-1 flex h-10 cursor-pointer items-center gap-3 rounded-lg border-2 border-transparent px-3 py-2 text-text-primary focus-within:border-ring-primary focus-within:bg-surface-active-alt hover:bg-surface-active-alt"
+      className="group relative flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-3 rounded-lg border-2 border-transparent px-3 py-1.5 text-text-primary focus-within:border-ring-primary focus-within:bg-surface-active-alt hover:bg-surface-active-alt"
     >
       <Search
         aria-hidden="true"
diff --git a/client/src/components/Nav/SettingsTabs/General/General.tsx b/client/src/components/Nav/SettingsTabs/General/General.tsx
index 1570b2a0d3..f764357b5e 100644
--- a/client/src/components/Nav/SettingsTabs/General/General.tsx
+++ b/client/src/components/Nav/SettingsTabs/General/General.tsx
@@ -22,13 +22,6 @@ const toggleSwitchConfigs = [
     hoverCardText: undefined,
     key: 'autoScroll',
   },
-  {
-    stateAtom: store.hideSidePanel,
-    localizationKey: 'com_nav_hide_panel',
-    switchId: 'hideSidePanel',
-    hoverCardText: undefined,
-    key: 'hideSidePanel',
-  },
   {
     stateAtom: store.keepScreenAwake,
     localizationKey: 'com_nav_keep_screen_awake',
diff --git a/client/src/components/Nav/index.ts b/client/src/components/Nav/index.ts
index 2f38f7f49e..8a18285181 100644
--- a/client/src/components/Nav/index.ts
+++ b/client/src/components/Nav/index.ts
@@ -1,7 +1,5 @@
 export * from './ExportConversation';
 export * from './SettingsTabs/';
-export { default as MobileNav } from './MobileNav';
-export { default as Nav, NAV_WIDTH } from './Nav';
 export { default as NavLink } from './NavLink';
 export { default as NewChat } from './NewChat';
 export { default as SearchBar } from './SearchBar';
diff --git a/client/src/components/Prompts/PromptsAccordion.tsx b/client/src/components/Prompts/PromptsAccordion.tsx
index 1fc910b45b..67ece18cc2 100644
--- a/client/src/components/Prompts/PromptsAccordion.tsx
+++ b/client/src/components/Prompts/PromptsAccordion.tsx
@@ -6,9 +6,12 @@ import { usePromptGroupsContext } from '~/Providers';
 export default function PromptsAccordion() {
   const groupsNav = usePromptGroupsContext();
   return (
-    <div className="flex h-full w-full flex-col">
-      <PromptSidePanel className="mt-2 space-y-2 lg:w-full xl:w-full" {...groupsNav}>
-        <FilterPrompts className="items-center justify-center" />
+    <div className="flex h-auto w-full flex-col px-3 pb-3">
+      <PromptSidePanel
+        className="h-auto space-y-2 md:mr-0 md:min-w-0 lg:w-full xl:w-full"
+        {...groupsNav}
+      >
+        <FilterPrompts className="items-stretch" />
         <div className="flex w-full flex-row items-center justify-end">
           <AutoSendPrompt className="text-xs dark:text-white" />
         </div>
diff --git a/client/src/components/SidePanel/Agents/ActionsInput.tsx b/client/src/components/SidePanel/Agents/ActionsInput.tsx
index c6130d114a..d99b5e8672 100644
--- a/client/src/components/SidePanel/Agents/ActionsInput.tsx
+++ b/client/src/components/SidePanel/Agents/ActionsInput.tsx
@@ -206,7 +206,7 @@ export default function ActionsInput({
         <div className="mb-1 flex flex-wrap items-center justify-between gap-4">
           <label
             htmlFor="schemaInput"
-            className="text-token-text-primary whitespace-nowrap font-medium"
+            className="text-token-text-primary whitespace-nowrap text-sm font-medium"
           >
             {localize('com_ui_schema')}
           </label>
@@ -248,7 +248,7 @@ export default function ActionsInput({
       {!!data && (
         <div className="my-2">
           <div className="flex items-center">
-            <label className="text-token-text-primary block font-medium">
+            <label className="text-token-text-primary block text-sm font-medium">
               {localize('com_assistants_available_actions')}
             </label>
           </div>
@@ -258,7 +258,7 @@ export default function ActionsInput({
       <div className="relative my-1">
         <ActionCallback action_id={action?.action_id} />
         <div className="mb-1.5 flex items-center">
-          <label className="text-token-text-primary block font-medium">
+          <label className="text-token-text-primary block text-sm font-medium">
             {localize('com_ui_privacy_policy_url')}
           </label>
         </div>
diff --git a/client/src/components/SidePanel/Agents/Advanced/AgentChain.tsx b/client/src/components/SidePanel/Agents/Advanced/AgentChain.tsx
index a25998d175..7bbf194f7c 100644
--- a/client/src/components/SidePanel/Agents/Advanced/AgentChain.tsx
+++ b/client/src/components/SidePanel/Agents/Advanced/AgentChain.tsx
@@ -94,7 +94,7 @@ const AgentChain: React.FC<AgentChainProps> = ({ field, currentAgentId }) => {
       </div>
       <div className="space-y-1">
         {/* Current fixed agent */}
-        <div className="flex h-10 items-center justify-between rounded-md border border-border-medium bg-surface-primary-contrast px-3 py-2">
+        <div className="flex h-9 items-center justify-between rounded-md border border-border-medium bg-surface-primary-contrast px-3 py-2">
           <div className="flex items-center gap-2">
             <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
               <MessageIcon
@@ -115,7 +115,7 @@ const AgentChain: React.FC<AgentChainProps> = ({ field, currentAgentId }) => {
         {<Link2 className="mx-auto text-text-secondary" size={14} />}
         {agentIds.map((agentId, idx) => (
           <React.Fragment key={agentId}>
-            <div className="flex h-10 items-center gap-2 rounded-md border border-border-medium bg-surface-tertiary pr-2">
+            <div className="flex h-9 items-center gap-2 rounded-md border border-border-medium bg-surface-tertiary pr-2">
               <ControlCombobox
                 isCollapsed={false}
                 ariaLabel={localize('com_ui_agent_var', { 0: localize('com_ui_select') })}
@@ -170,7 +170,7 @@ const AgentChain: React.FC<AgentChainProps> = ({ field, currentAgentId }) => {
               selectPlaceholder={localize('com_ui_agent_var', { 0: localize('com_ui_add') })}
               searchPlaceholder={localize('com_ui_agent_var', { 0: localize('com_ui_search') })}
               items={selectableAgents}
-              className="h-10 w-full border-dashed border-border-heavy text-center text-text-secondary hover:text-text-primary"
+              className="h-9 w-full border-dashed border-border-heavy text-center text-text-secondary hover:text-text-primary"
               containerClassName="px-0"
               SelectIcon={<PlusCircle size={16} className="text-text-secondary" />}
             />
diff --git a/client/src/components/SidePanel/Agents/Advanced/AgentHandoffs.tsx b/client/src/components/SidePanel/Agents/Advanced/AgentHandoffs.tsx
index 1009454a31..0ff7ba7682 100644
--- a/client/src/components/SidePanel/Agents/Advanced/AgentHandoffs.tsx
+++ b/client/src/components/SidePanel/Agents/Advanced/AgentHandoffs.tsx
@@ -143,7 +143,7 @@ const AgentHandoffs: React.FC<AgentHandoffsProps> = ({ field, currentAgentId })
           return (
             <React.Fragment key={idx}>
               <div className="space-y-1">
-                <div className="flex h-10 items-center gap-2 rounded-md border border-border-medium bg-surface-tertiary pr-2">
+                <div className="flex h-9 items-center gap-2 rounded-md border border-border-medium bg-surface-tertiary pr-2">
                   <ControlCombobox
                     isCollapsed={false}
                     ariaLabel={localize('com_ui_agent_var', { 0: localize('com_ui_select') })}
@@ -268,7 +268,7 @@ const AgentHandoffs: React.FC<AgentHandoffsProps> = ({ field, currentAgentId })
               selectPlaceholder={localize('com_ui_agent_handoff_add')}
               searchPlaceholder={localize('com_ui_agent_var', { 0: localize('com_ui_search') })}
               items={selectableAgents}
-              className="h-10 w-full border-dashed border-border-heavy text-center text-text-secondary hover:text-text-primary"
+              className="h-9 w-full border-dashed border-border-heavy text-center text-text-secondary hover:text-text-primary"
               containerClassName="px-0"
               SelectIcon={<PlusCircle size={16} className="text-text-secondary" />}
             />
diff --git a/client/src/components/SidePanel/Agents/AgentConfig.tsx b/client/src/components/SidePanel/Agents/AgentConfig.tsx
index a81ef780a9..5b1a0595c5 100644
--- a/client/src/components/SidePanel/Agents/AgentConfig.tsx
+++ b/client/src/components/SidePanel/Agents/AgentConfig.tsx
@@ -30,7 +30,7 @@ import AgentTool from './AgentTool';
 import CodeForm from './Code/Form';
 import MCPTools from './MCPTools';
 
-const labelClass = 'mb-2 text-token-text-primary block font-medium';
+const labelClass = 'mb-2 text-token-text-primary block text-sm font-medium';
 const inputClass = cn(
   defaultTextProps,
   'flex w-full px-3 py-2 border-border-light bg-surface-secondary focus-visible:ring-2 focus-visible:ring-ring-primary',
@@ -180,7 +180,7 @@ export default function AgentConfig() {
 
   return (
     <>
-      <div className="h-auto bg-white px-4 pt-3 dark:bg-transparent">
+      <div className="h-auto pt-1">
         {/* Avatar & Name */}
         <div className="mb-4">
           <AgentAvatar avatar={agent?.['avatar'] ?? null} />
@@ -265,7 +265,7 @@ export default function AgentConfig() {
           <button
             type="button"
             onClick={() => setActivePanel(Panel.model)}
-            className="btn btn-neutral border-token-border-light relative h-10 w-full rounded-lg font-medium"
+            className="btn btn-neutral border-token-border-light relative h-9 w-full rounded-lg font-medium"
             aria-haspopup="true"
             aria-expanded="false"
           >
@@ -290,7 +290,7 @@ export default function AgentConfig() {
           contextEnabled ||
           webSearchEnabled) && (
           <div className="mb-4 flex w-full flex-col items-start gap-3">
-            <label className="text-token-text-primary block font-medium">
+            <label className="text-token-text-primary block text-sm font-medium">
               {localize('com_assistants_capabilities')}
             </label>
             {/* Code Execution */}
@@ -393,7 +393,7 @@ export default function AgentConfig() {
         <div className="mb-4">
           <div className="mb-1.5 flex items-center gap-2">
             <span>
-              <label className="text-token-text-primary block font-medium">
+              <label className="text-token-text-primary block text-sm font-medium">
                 {localize('com_ui_support_contact')}
               </label>
             </span>
diff --git a/client/src/components/SidePanel/Agents/AgentPanel.tsx b/client/src/components/SidePanel/Agents/AgentPanel.tsx
index 890488e88d..441f5fd6e6 100644
--- a/client/src/components/SidePanel/Agents/AgentPanel.tsx
+++ b/client/src/components/SidePanel/Agents/AgentPanel.tsx
@@ -480,10 +480,10 @@ export default function AgentPanel() {
     <FormProvider {...methods}>
       <form
         onSubmit={handleSubmit(onSubmit)}
-        className="scrollbar-gutter-stable h-auto w-full flex-shrink-0 overflow-y-hidden overflow-x-visible"
+        className="scrollbar-gutter-stable h-auto w-full flex-shrink-0 px-3 pb-3"
         aria-label="Agent configuration form"
       >
-        <div className="mx-1 mt-2 flex w-full flex-wrap gap-2">
+        <div className="flex w-full flex-wrap gap-2">
           <div className="w-full">
             <AgentSelect
               createMutation={create}
diff --git a/client/src/components/SidePanel/Agents/AgentPanelSkeleton.tsx b/client/src/components/SidePanel/Agents/AgentPanelSkeleton.tsx
index 8ecc13e0c4..743f01ae30 100644
--- a/client/src/components/SidePanel/Agents/AgentPanelSkeleton.tsx
+++ b/client/src/components/SidePanel/Agents/AgentPanelSkeleton.tsx
@@ -11,14 +11,14 @@ export default function AgentPanelSkeleton() {
         </div>
         {/* Name */}
         <Skeleton className="mb-2 h-5 w-1/5 rounded-lg" />
-        <Skeleton className="mb-1 h-[40px] w-full rounded-lg" />
+        <Skeleton className="mb-1 h-9 w-full rounded-lg" />
         <Skeleton className="h-3 w-1/4 rounded-lg" />
       </div>
 
       {/* Description */}
       <div className="mb-4">
         <Skeleton className="mb-2 h-5 w-1/4 rounded-lg" />
-        <Skeleton className="h-[40px] w-full rounded-lg" />
+        <Skeleton className="h-9 w-full rounded-lg" />
       </div>
 
       {/* Instructions */}
@@ -30,7 +30,7 @@ export default function AgentPanelSkeleton() {
       {/* Model and Provider */}
       <div className="mb-6">
         <Skeleton className="mb-2 h-5 w-1/4 rounded-lg" />
-        <Skeleton className="h-[40px] w-full rounded-lg" />
+        <Skeleton className="h-9 w-full rounded-lg" />
       </div>
 
       {/* Capabilities */}
diff --git a/client/src/components/SidePanel/Agents/AgentSelect.tsx b/client/src/components/SidePanel/Agents/AgentSelect.tsx
index 323136340e..8655780a9c 100644
--- a/client/src/components/SidePanel/Agents/AgentSelect.tsx
+++ b/client/src/components/SidePanel/Agents/AgentSelect.tsx
@@ -215,7 +215,7 @@ function AgentSelect({
             ]
           }
           className={cn(
-            'z-50 flex h-[40px] w-full flex-none items-center justify-center truncate rounded-md bg-transparent font-bold',
+            'z-50 flex h-9 w-full flex-none items-center justify-center truncate rounded-md bg-transparent font-bold',
           )}
           ariaLabel={localize('com_ui_agent')}
           isCollapsed={false}
diff --git a/client/src/components/SidePanel/Agents/Artifacts.tsx b/client/src/components/SidePanel/Agents/Artifacts.tsx
index 4ca5baf389..d985e8730d 100644
--- a/client/src/components/SidePanel/Agents/Artifacts.tsx
+++ b/client/src/components/SidePanel/Agents/Artifacts.tsx
@@ -45,7 +45,7 @@ export default function Artifacts() {
     <div className="w-full">
       <div className="mb-1.5 flex items-center gap-2">
         <span>
-          <label className="text-token-text-primary block font-medium">
+          <label className="text-token-text-primary block text-sm font-medium">
             {localize('com_ui_artifacts')}
           </label>
         </span>
@@ -98,7 +98,7 @@ function SwitchItem({
     <HoverCard openDelay={50}>
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-2">
-          <div className={disabled ? 'text-text-tertiary' : ''}>{label}</div>
+          <div className={disabled ? 'text-sm text-text-tertiary' : 'text-sm'}>{label}</div>
           <HoverCardTrigger>
             <CircleHelpIcon className="h-4 w-4 text-text-tertiary" />
           </HoverCardTrigger>
diff --git a/client/src/components/SidePanel/Agents/Code/Action.tsx b/client/src/components/SidePanel/Agents/Code/Action.tsx
index 6919ab1339..f6ca3ca1aa 100644
--- a/client/src/components/SidePanel/Agents/Code/Action.tsx
+++ b/client/src/components/SidePanel/Agents/Code/Action.tsx
@@ -75,7 +75,7 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
             id="execute-code-label"
             htmlFor="execute-code-checkbox"
             className={cn(
-              'form-check-label text-token-text-primary',
+              'form-check-label text-token-text-primary text-sm',
               (runCodeIsEnabled || isToolAuthenticated) && 'cursor-pointer',
             )}
           >
diff --git a/client/src/components/SidePanel/Agents/Code/Files.tsx b/client/src/components/SidePanel/Agents/Code/Files.tsx
index 16360a7a0b..10302aac99 100644
--- a/client/src/components/SidePanel/Agents/Code/Files.tsx
+++ b/client/src/components/SidePanel/Agents/Code/Files.tsx
@@ -77,7 +77,7 @@ function Files({
           <button
             type="button"
             disabled={isEphemeralAgent(agent_id) || codeChecked === false}
-            className="btn btn-neutral border-token-border-light relative h-9 w-full rounded-lg font-medium"
+            className="btn btn-neutral border-token-border-light relative h-9 w-full rounded-lg text-sm font-medium"
             onClick={handleButtonClick}
           >
             <div className="flex w-full items-center justify-center gap-1">
diff --git a/client/src/components/SidePanel/Agents/Code/Form.tsx b/client/src/components/SidePanel/Agents/Code/Form.tsx
index 8375983056..735dfa4537 100644
--- a/client/src/components/SidePanel/Agents/Code/Form.tsx
+++ b/client/src/components/SidePanel/Agents/Code/Form.tsx
@@ -20,7 +20,7 @@ export default function CodeForm({
       <div className="mb-1.5 flex items-center gap-2">
         <div className="flex flex-row items-center gap-1">
           <div className="flex items-center gap-1">
-            <span className="text-token-text-primary block font-medium">
+            <span className="text-token-text-primary block text-sm font-medium">
               {localize('com_agents_code_interpreter_title')}
             </span>
             <span className="text-xs text-text-secondary">
diff --git a/client/src/components/SidePanel/Agents/FileContext.tsx b/client/src/components/SidePanel/Agents/FileContext.tsx
index 906d742127..b216ab3404 100644
--- a/client/src/components/SidePanel/Agents/FileContext.tsx
+++ b/client/src/components/SidePanel/Agents/FileContext.tsx
@@ -100,7 +100,7 @@ function FileContext({
     },
   ];
   const menuTrigger = (
-    <Ariakit.MenuButton className="btn btn-neutral border-token-border-light relative h-9 w-full rounded-lg font-medium">
+    <Ariakit.MenuButton className="btn btn-neutral border-token-border-light relative h-9 w-full rounded-lg text-sm font-medium">
       <div className="flex w-full items-center justify-center gap-1">
         <AttachmentIcon className="text-token-text-primary h-4 w-4" />
         {localize('com_ui_upload_file_context')}
@@ -113,7 +113,7 @@ function FileContext({
         <div className="mb-2 flex items-center gap-2">
           <HoverCardTrigger asChild>
             <span className="flex items-center gap-2">
-              <label className="text-token-text-primary block font-medium">
+              <label className="text-token-text-primary block text-sm font-medium">
                 {localize('com_agents_file_context_label')}
               </label>
               <CircleHelpIcon className="h-4 w-4 text-text-tertiary" />
@@ -157,7 +157,7 @@ function FileContext({
             <button
               type="button"
               disabled={isEphemeralAgent(agent_id)}
-              className="btn btn-neutral border-token-border-light relative h-9 w-full rounded-lg font-medium"
+              className="btn btn-neutral border-token-border-light relative h-9 w-full rounded-lg text-sm font-medium"
               onClick={handleLocalFileClick}
             >
               <div className="flex w-full items-center justify-center gap-1">
diff --git a/client/src/components/SidePanel/Agents/FileSearch.tsx b/client/src/components/SidePanel/Agents/FileSearch.tsx
index 79a08de0ed..d4917c492d 100644
--- a/client/src/components/SidePanel/Agents/FileSearch.tsx
+++ b/client/src/components/SidePanel/Agents/FileSearch.tsx
@@ -114,7 +114,7 @@ function FileSearch({
   const menuTrigger = (
     <Ariakit.MenuButton
       disabled={disabledUploadButton}
-      className="btn btn-neutral border-token-border-light relative h-9 w-full rounded-lg font-medium"
+      className="btn btn-neutral border-token-border-light relative h-9 w-full rounded-lg text-sm font-medium"
     >
       <div className="flex w-full items-center justify-center gap-1">
         <AttachmentIcon className="text-token-text-primary h-4 w-4" />
@@ -127,7 +127,7 @@ function FileSearch({
     <div className="w-full">
       <div className="mb-1.5 flex items-center gap-2">
         <span>
-          <label className="text-token-text-primary block font-medium">
+          <label className="text-token-text-primary block text-sm font-medium">
             {localize('com_assistants_file_search')}
           </label>
         </span>
@@ -158,7 +158,7 @@ function FileSearch({
             <button
               type="button"
               disabled={disabledUploadButton}
-              className="btn btn-neutral border-token-border-light relative h-9 w-full rounded-lg font-medium"
+              className="btn btn-neutral border-token-border-light relative h-9 w-full rounded-lg text-sm font-medium"
               onClick={handleButtonClick}
             >
               <div className="flex w-full items-center justify-center gap-1">
diff --git a/client/src/components/SidePanel/Agents/FileSearchCheckbox.tsx b/client/src/components/SidePanel/Agents/FileSearchCheckbox.tsx
index ad025d893a..e7c1d1171e 100644
--- a/client/src/components/SidePanel/Agents/FileSearchCheckbox.tsx
+++ b/client/src/components/SidePanel/Agents/FileSearchCheckbox.tsx
@@ -40,7 +40,7 @@ function FileSearchCheckbox() {
           <label
             id="file-search-label"
             htmlFor="file-search-checkbox"
-            className="form-check-label text-token-text-primary cursor-pointer"
+            className="form-check-label text-token-text-primary cursor-pointer text-sm"
           >
             {localize('com_agents_enable_file_search')}
           </label>
diff --git a/client/src/components/SidePanel/Agents/Instructions.tsx b/client/src/components/SidePanel/Agents/Instructions.tsx
index bcaa1b8879..6dff669376 100644
--- a/client/src/components/SidePanel/Agents/Instructions.tsx
+++ b/client/src/components/SidePanel/Agents/Instructions.tsx
@@ -44,7 +44,10 @@ export default function Instructions() {
   return (
     <div className="mb-4">
       <div className="mb-2 flex items-center">
-        <label className="text-token-text-primary flex-grow font-medium" htmlFor="instructions">
+        <label
+          className="text-token-text-primary flex-grow text-sm font-medium"
+          htmlFor="instructions"
+        >
           {localize('com_ui_instructions')}
         </label>
         <div className="ml-auto" title="Add variables to instructions">
diff --git a/client/src/components/SidePanel/Agents/MCPTools.tsx b/client/src/components/SidePanel/Agents/MCPTools.tsx
index 3dc9a19d6a..1d5059889d 100644
--- a/client/src/components/SidePanel/Agents/MCPTools.tsx
+++ b/client/src/components/SidePanel/Agents/MCPTools.tsx
@@ -26,7 +26,7 @@ export default function MCPTools({
   }
   return (
     <div className="mb-4">
-      <label className="text-token-text-primary mb-2 block font-medium">
+      <label className="text-token-text-primary mb-2 block text-sm font-medium">
         {localize('com_ui_mcp_servers')}
       </label>
       <div>
diff --git a/client/src/components/SidePanel/Agents/ModelPanel.tsx b/client/src/components/SidePanel/Agents/ModelPanel.tsx
index cec4041947..009fffa0a1 100644
--- a/client/src/components/SidePanel/Agents/ModelPanel.tsx
+++ b/client/src/components/SidePanel/Agents/ModelPanel.tsx
@@ -97,7 +97,7 @@ export default function ModelPanel({
   };
 
   return (
-    <div className="mx-1 mb-1 flex h-full min-h-[50vh] w-full flex-col gap-2 text-sm">
+    <div className="mb-1 flex h-full min-h-[50vh] w-full flex-col gap-2 text-sm">
       <div className="model-panel relative flex flex-col items-center px-16 py-4 text-center">
         <div className="absolute left-0 top-4">
           <button
@@ -116,12 +116,12 @@ export default function ModelPanel({
 
         <div className="mb-2 mt-2 text-xl font-medium">{localize('com_ui_model_parameters')}</div>
       </div>
-      <div className="p-2">
+      <div>
         {/* Endpoint aka Provider for Agents */}
         <div className="mb-4">
           <label
             id="provider-label"
-            className="text-token-text-primary model-panel-label mb-2 block font-medium"
+            className="text-token-text-primary model-panel-label mb-2 block text-sm font-medium"
             htmlFor="provider"
           >
             {localize('com_ui_provider')} <span className="text-red-500">*</span>
@@ -172,7 +172,7 @@ export default function ModelPanel({
           <label
             id="model-label"
             className={cn(
-              'text-token-text-primary model-panel-label mb-2 block font-medium',
+              'text-token-text-primary model-panel-label mb-2 block text-sm font-medium',
               !provider && 'text-gray-500 dark:text-gray-400',
             )}
             htmlFor="model"
@@ -218,7 +218,7 @@ export default function ModelPanel({
       </div>
       {/* Model Parameters */}
       {parameters && (
-        <div className="h-auto max-w-full overflow-x-hidden p-2">
+        <div className="h-auto max-w-full">
           <div className="grid grid-cols-2 gap-4">
             {/* This is the parent element containing all settings */}
             {/* Below is an example of an applied dynamic setting, each be contained by a div with the column span specified */}
diff --git a/client/src/components/SidePanel/Agents/Search/Action.tsx b/client/src/components/SidePanel/Agents/Search/Action.tsx
index 79019e28b7..b79a188814 100644
--- a/client/src/components/SidePanel/Agents/Search/Action.tsx
+++ b/client/src/components/SidePanel/Agents/Search/Action.tsx
@@ -83,7 +83,7 @@ export default function Action({
             id="web-search-label"
             htmlFor="web-search-checkbox"
             className={cn(
-              'form-check-label text-token-text-primary',
+              'form-check-label text-token-text-primary text-sm',
               (webSearchIsEnabled || isToolAuthenticated) && 'cursor-pointer',
             )}
           >
diff --git a/client/src/components/SidePanel/Agents/Search/Form.tsx b/client/src/components/SidePanel/Agents/Search/Form.tsx
index cc844ffcc8..b25eb13258 100644
--- a/client/src/components/SidePanel/Agents/Search/Form.tsx
+++ b/client/src/components/SidePanel/Agents/Search/Form.tsx
@@ -17,7 +17,7 @@ export default function SearchForm() {
       <div className="mb-1.5 flex items-center gap-2">
         <div className="flex flex-row items-center gap-1">
           <div className="flex items-center gap-1">
-            <span className="text-token-text-primary block font-medium">
+            <span className="text-token-text-primary block text-sm font-medium">
               {localize('com_ui_web_search')}
             </span>
           </div>
diff --git a/client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx b/client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx
index 834639c5cc..1320e859a2 100644
--- a/client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx
+++ b/client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx
@@ -55,7 +55,7 @@ const BookmarkTable = () => {
 
   return (
     <BookmarkContext.Provider value={{ bookmarks }}>
-      <div role="region" aria-label={localize('com_ui_bookmarks')} className="mt-2 space-y-3">
+      <div role="region" aria-label={localize('com_ui_bookmarks')} className="space-y-2 px-3 pb-3">
         {/* Header: Filter + Create Button */}
         <div className="flex items-center gap-2">
           <FilterInput
@@ -74,7 +74,7 @@ const BookmarkTable = () => {
                   <Button
                     variant="outline"
                     size="icon"
-                    className="shrink-0 bg-transparent"
+                    className="size-9 shrink-0 bg-transparent"
                     aria-label={localize('com_ui_bookmarks_new')}
                     onClick={() => setCreateOpen(true)}
                   >
diff --git a/client/src/components/SidePanel/Files/Panel.tsx b/client/src/components/SidePanel/Files/Panel.tsx
index 9039d9800e..530be3fe4d 100644
--- a/client/src/components/SidePanel/Files/Panel.tsx
+++ b/client/src/components/SidePanel/Files/Panel.tsx
@@ -7,7 +7,7 @@ export default function FilesPanel() {
   const { data: files = [] } = useGetFiles<TFile[]>();
 
   return (
-    <div className="h-auto max-w-full overflow-x-visible">
+    <div className="h-auto w-full px-3 pb-3">
       <DataTable columns={columns} data={files} />
     </div>
   );
diff --git a/client/src/components/SidePanel/Files/PanelColumns.tsx b/client/src/components/SidePanel/Files/PanelColumns.tsx
index b0eec70886..ee72015c2b 100644
--- a/client/src/components/SidePanel/Files/PanelColumns.tsx
+++ b/client/src/components/SidePanel/Files/PanelColumns.tsx
@@ -39,12 +39,13 @@ export const columns: ColumnDef<TFile | undefined>[] = [
       return (
         <Button
           variant="ghost"
-          className="hover:bg-surface-hover"
+          size="sm"
+          className="h-auto px-1 py-0.5 hover:bg-surface-hover"
           onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
           aria-label={localize('com_ui_date')}
         >
           {localize('com_ui_date')}
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <ArrowUpDown className="ml-1 h-3 w-3" />
         </Button>
       );
     },
diff --git a/client/src/components/SidePanel/Files/PanelFileCell.tsx b/client/src/components/SidePanel/Files/PanelFileCell.tsx
index bc1736f388..f48778506d 100644
--- a/client/src/components/SidePanel/Files/PanelFileCell.tsx
+++ b/client/src/components/SidePanel/Files/PanelFileCell.tsx
@@ -11,7 +11,7 @@ export default function PanelFileCell({ row }: { row: Row<TFile | undefined> })
       {file?.type?.startsWith('image') === true ? (
         <ImagePreview
           url={file.filepath}
-          className="h-10 w-10 flex-shrink-0"
+          className="h-8 w-8 flex-shrink-0"
           source={file.source}
           alt={file.filename}
         />
diff --git a/client/src/components/SidePanel/Files/PanelTable.tsx b/client/src/components/SidePanel/Files/PanelTable.tsx
index e67e16abdd..c46d6ba257 100644
--- a/client/src/components/SidePanel/Files/PanelTable.tsx
+++ b/client/src/components/SidePanel/Files/PanelTable.tsx
@@ -205,7 +205,7 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
   const filenameFilter = table.getColumn('filename')?.getFilterValue() as string;
 
   return (
-    <div role="region" aria-label={localize('com_files_table')} className="mt-2 space-y-2">
+    <div role="region" aria-label={localize('com_files_table')} className="space-y-2">
       <FilterInput
         inputId="filename-filter"
         label={localize('com_files_filter')}
@@ -214,8 +214,8 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
       />
 
       <div className="rounded-lg border border-border-light bg-transparent shadow-sm transition-colors">
-        <div className="overflow-x-auto">
-          <Table>
+        <div className="overflow-hidden">
+          <Table className="table-fixed">
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (
                 <TableRow key={headerGroup.id} className="border-b border-border-light">
@@ -223,9 +223,9 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
                     <TableHead
                       key={header.id}
                       style={{ width: index === 0 ? '75%' : '25%' }}
-                      className="bg-surface-secondary py-3 text-left text-sm font-medium text-text-secondary"
+                      className="bg-surface-secondary py-2 text-sm font-medium text-text-secondary"
                     >
-                      <div className="px-4">
+                      <div className={index === 0 ? 'px-2' : 'flex justify-end px-1'}>
                         {header.isPlaceholder
                           ? null
                           : flexRender(header.column.columnDef.header, header.getContext())}
@@ -249,8 +249,8 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
                       return (
                         <TableCell
                           style={{
-                            width: '150px',
-                            maxWidth: '150px',
+                            width: isFilenameCell ? '75%' : '25%',
+                            maxWidth: 0,
                             overflow: 'hidden',
                             textOverflow: 'ellipsis',
                             whiteSpace: 'nowrap',
@@ -313,11 +313,12 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
         </div>
       </div>
 
-      <div className="flex items-center justify-between">
+      <div className="space-y-2">
         <Button
           ref={manageFilesRef}
           variant="outline"
           size="sm"
+          className="w-full"
           onClick={() => setShowFilesModal(true)}
           aria-label={localize('com_sidepanel_manage_files')}
         >
@@ -325,7 +326,11 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
           <span className="ml-2">{localize('com_sidepanel_manage_files')}</span>
         </Button>
 
-        <div className="flex items-center gap-2" role="navigation" aria-label="Pagination">
+        <div
+          className="flex items-center justify-between"
+          role="navigation"
+          aria-label="Pagination"
+        >
           <Button
             variant="outline"
             size="sm"
diff --git a/client/src/components/SidePanel/MCPBuilder/MCPBuilderPanel.tsx b/client/src/components/SidePanel/MCPBuilder/MCPBuilderPanel.tsx
index 681732dd3e..3dd5a70814 100644
--- a/client/src/components/SidePanel/MCPBuilder/MCPBuilderPanel.tsx
+++ b/client/src/components/SidePanel/MCPBuilder/MCPBuilderPanel.tsx
@@ -36,8 +36,8 @@ export default function MCPBuilderPanel() {
   }, [availableMCPServers, searchQuery]);
 
   return (
-    <div className="flex h-full w-full flex-col overflow-visible">
-      <div role="region" aria-label={localize('com_ui_mcp_servers')} className="mt-2 space-y-2">
+    <div className="flex h-auto w-full flex-col px-3 pb-3">
+      <div role="region" aria-label={localize('com_ui_mcp_servers')} className="space-y-2">
         {/* Toolbar: Search + Add Button */}
         <div className="flex items-center gap-2">
           <FilterInput
@@ -62,7 +62,7 @@ export default function MCPBuilderPanel() {
                       ref={addButtonRef}
                       variant="outline"
                       size="icon"
-                      className="shrink-0 bg-transparent"
+                      className="size-9 shrink-0 bg-transparent"
                       onClick={() => setShowDialog(true)}
                       aria-label={localize('com_ui_add_mcp')}
                     >
diff --git a/client/src/components/SidePanel/Memories/MemoryPanel.tsx b/client/src/components/SidePanel/Memories/MemoryPanel.tsx
index 726cfeabca..3a48753fce 100644
--- a/client/src/components/SidePanel/Memories/MemoryPanel.tsx
+++ b/client/src/components/SidePanel/Memories/MemoryPanel.tsx
@@ -121,8 +121,8 @@ export default function MemoryPanel() {
   const totalPages = Math.ceil(filteredMemories.length / pageSize);
 
   return (
-    <div className="flex h-full w-full flex-col">
-      <div role="region" aria-label={localize('com_ui_memories')} className="mt-2 space-y-3">
+    <div className="flex h-auto w-full flex-col px-3 pb-3">
+      <div role="region" aria-label={localize('com_ui_memories')} className="space-y-2">
         {/* Header: Filter + Create Button */}
         <div className="flex items-center gap-2">
           <FilterInput
@@ -142,7 +142,7 @@ export default function MemoryPanel() {
                     <Button
                       variant="outline"
                       size="icon"
-                      className="shrink-0 bg-transparent"
+                      className="size-9 shrink-0 bg-transparent"
                       aria-label={localize('com_ui_create_memory')}
                       onClick={() => setCreateDialogOpen(true)}
                     >
@@ -169,7 +169,7 @@ export default function MemoryPanel() {
 
             {/* Memory Toggle */}
             {hasOptOutAccess && (
-              <div className="flex items-center gap-2 text-xs">
+              <div className="ml-auto flex items-center gap-2 text-xs">
                 <span className="text-text-secondary">{localize('com_ui_use_memory')}</span>
                 <Switch
                   checked={referenceSavedMemories}
diff --git a/client/src/components/SidePanel/Nav.tsx b/client/src/components/SidePanel/Nav.tsx
index 993ce95172..5db5b3f5bb 100644
--- a/client/src/components/SidePanel/Nav.tsx
+++ b/client/src/components/SidePanel/Nav.tsx
@@ -1,115 +1,13 @@
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import {
-  AccordionContent,
-  AccordionItem,
-  TooltipAnchor,
-  Accordion,
-  Button,
-} from '@librechat/client';
-import type { NavLink, NavProps } from '~/common';
-import { ActivePanelProvider, useActivePanel } from '~/Providers';
-import { useLocalize } from '~/hooks';
-import { cn } from '~/utils';
-
-function NavContent({ links, isCollapsed, resize }: Omit<NavProps, 'defaultActive'>) {
-  const localize = useLocalize();
-  const { active, setActive } = useActivePanel();
-  const getVariant = (link: NavLink) => (link.id === active ? 'default' : 'ghost');
+import type { NavLink } from '~/common';
+import { useActivePanel } from '~/Providers';
 
+export default function Nav({ links }: { links: NavLink[] }) {
+  const { active } = useActivePanel();
   return (
-    <div
-      data-collapsed={isCollapsed}
-      className="bg-token-sidebar-surface-primary hide-scrollbar group flex-shrink-0 overflow-x-hidden"
-    >
-      <div className="h-full">
-        <div className="flex h-full min-h-0 flex-col">
-          <div className="flex h-full min-h-0 flex-col opacity-100 transition-opacity">
-            <div className="scrollbar-trigger relative h-full w-full flex-1 items-start border-white/20">
-              <div className="flex h-full w-full flex-col gap-1 px-3 py-2.5 group-[[data-collapsed=true]]:items-center group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
-                {links.map((link, index) => {
-                  const variant = getVariant(link);
-                  return isCollapsed ? (
-                    <TooltipAnchor
-                      description={localize(link.title)}
-                      side="left"
-                      key={`nav-link-${index}`}
-                      render={
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={(e) => {
-                            if (link.onClick) {
-                              link.onClick(e);
-                              setActive('');
-                              return;
-                            }
-                            setActive(link.id);
-                            resize && resize(25);
-                          }}
-                        >
-                          <link.icon className="h-4 w-4 text-text-secondary" />
-                          <span className="sr-only">{localize(link.title)}</span>
-                        </Button>
-                      }
-                    />
-                  ) : (
-                    <Accordion
-                      key={index}
-                      type="single"
-                      value={active}
-                      onValueChange={setActive}
-                      collapsible
-                    >
-                      <AccordionItem value={link.id} className="w-full border-none">
-                        <AccordionPrimitive.Header asChild>
-                          <AccordionPrimitive.Trigger asChild>
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              className="w-full justify-start bg-transparent text-text-secondary data-[state=open]:bg-surface-secondary data-[state=open]:text-text-primary"
-                              onClick={(e) => {
-                                if (link.onClick) {
-                                  link.onClick(e);
-                                  setActive('');
-                                }
-                              }}
-                            >
-                              <link.icon className="mr-2 h-4 w-4" aria-hidden="true" />
-                              {localize(link.title)}
-                              {link.label != null && link.label && (
-                                <span
-                                  className={cn(
-                                    'ml-auto opacity-100 transition-all duration-300 ease-in-out',
-                                    variant === 'default' ? 'text-text-primary' : '',
-                                  )}
-                                >
-                                  {link.label}
-                                </span>
-                              )}
-                            </Button>
-                          </AccordionPrimitive.Trigger>
-                        </AccordionPrimitive.Header>
-
-                        <AccordionContent className="bg-token-sidebar-surface-primary w-full text-text-primary">
-                          {link.Component && <link.Component />}
-                        </AccordionContent>
-                      </AccordionItem>
-                    </Accordion>
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div className="flex h-full min-h-0 flex-col overflow-y-auto overflow-x-hidden pt-2 text-text-primary">
+      {links.map((link) =>
+        link.id === active && link.Component ? <link.Component key={link.id} /> : null,
+      )}
     </div>
   );
 }
-
-export default function Nav({ links, isCollapsed, resize, defaultActive }: NavProps) {
-  return (
-    <ActivePanelProvider defaultActive={defaultActive}>
-      <NavContent links={links} isCollapsed={isCollapsed} resize={resize} />
-    </ActivePanelProvider>
-  );
-}
diff --git a/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx b/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
index 543d6f3015..82305f7ee9 100644
--- a/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicCheckbox.tsx
@@ -60,7 +60,7 @@ function DynamicCheckbox({
           <div className="flex justify-start gap-4">
             <Label
               htmlFor={`${settingKey}-dynamic-checkbox`}
-              className="text-left text-sm font-medium"
+              className="text-left text-xs font-medium"
             >
               {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}{' '}
               {showDefault && (
diff --git a/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx b/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
index 7bc1a2b2d7..8dd352aff3 100644
--- a/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicCombobox.tsx
@@ -82,7 +82,7 @@ function DynamicCombobox({
             <div className="flex w-full justify-between">
               <Label
                 htmlFor={`${settingKey}-dynamic-combobox`}
-                className="text-left text-sm font-medium"
+                className="text-left text-xs font-medium"
               >
                 {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}
                 {showDefault && (
diff --git a/client/src/components/SidePanel/Parameters/DynamicDropdown.tsx b/client/src/components/SidePanel/Parameters/DynamicDropdown.tsx
index 4814241e23..47f81ea180 100644
--- a/client/src/components/SidePanel/Parameters/DynamicDropdown.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicDropdown.tsx
@@ -76,7 +76,7 @@ function DynamicDropdown({
             <div className="flex w-full justify-between">
               <Label
                 htmlFor={`${settingKey}-dynamic-dropdown`}
-                className="text-left text-sm font-medium"
+                className="text-left text-xs font-medium"
               >
                 {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}
                 {showDefault && (
@@ -95,6 +95,7 @@ function DynamicDropdown({
             setValue={handleChange}
             availableValues={options}
             containerClassName="w-full"
+            className="py-1.5"
             id={`${settingKey}-dynamic-dropdown`}
             placeholder={
               placeholderCode
diff --git a/client/src/components/SidePanel/Parameters/DynamicInput.tsx b/client/src/components/SidePanel/Parameters/DynamicInput.tsx
index f9d27dd86a..85ead9fc34 100644
--- a/client/src/components/SidePanel/Parameters/DynamicInput.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicInput.tsx
@@ -61,7 +61,7 @@ function DynamicInput({
           <div className="flex w-full justify-between">
             <Label
               htmlFor={`${settingKey}-dynamic-input`}
-              className="text-left text-sm font-medium"
+              className="text-left text-xs font-medium"
             >
               {labelCode ? localize(label as TranslationKeys) || label : label || settingKey}{' '}
               {showDefault && (
@@ -82,7 +82,7 @@ function DynamicInput({
             onChange={handleInputChange}
             placeholder={placeholderText}
             className={cn(
-              'flex h-10 max-h-10 w-full resize-none border-none bg-surface-secondary px-3 py-2',
+              'flex h-9 max-h-9 w-full resize-none rounded-lg border border-border-light bg-surface-secondary px-3 py-2',
             )}
           />
         </HoverCardTrigger>
diff --git a/client/src/components/SidePanel/Parameters/DynamicSlider.tsx b/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
index ee2ce44062..c753c0f89a 100644
--- a/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicSlider.tsx
@@ -160,7 +160,7 @@ function DynamicSlider({
           <div className="flex w-full items-center justify-between">
             <Label
               htmlFor={`${settingKey}-dynamic-setting`}
-              className="break-words text-left text-sm font-medium"
+              className="break-words text-left text-xs font-medium"
             >
               {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}{' '}
               {showDefault && (
diff --git a/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx b/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx
index 650b35fce2..99e7713a15 100644
--- a/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicSwitch.tsx
@@ -50,7 +50,7 @@ function DynamicSwitch({
           <div className="flex justify-between">
             <Label
               htmlFor={`${settingKey}-dynamic-switch`}
-              className="break-words text-left text-sm font-medium"
+              className="break-words text-left text-xs font-medium"
             >
               {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}{' '}
               {showDefault && (
diff --git a/client/src/components/SidePanel/Parameters/DynamicTags.tsx b/client/src/components/SidePanel/Parameters/DynamicTags.tsx
index e5c1f69c86..bda6176414 100644
--- a/client/src/components/SidePanel/Parameters/DynamicTags.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicTags.tsx
@@ -110,7 +110,7 @@ function DynamicTags({
           <div className="flex w-full justify-between">
             <Label
               htmlFor={`${settingKey}-dynamic-input`}
-              className="text-left text-sm font-medium"
+              className="text-left text-xs font-medium"
             >
               {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}{' '}
               {showDefault && (
@@ -125,7 +125,7 @@ function DynamicTags({
             </Label>
           </div>
           <div>
-            <div className="mb-2 flex flex-wrap break-all rounded-lg bg-surface-secondary">
+            <div className="mb-2 flex flex-wrap break-all rounded-lg border border-border-light bg-surface-secondary">
               {currentTags && currentTags.length > 0 && (
                 <div className="flex w-full gap-1 p-1">
                   {currentTags.map((tag: string, index: number) => (
@@ -165,7 +165,7 @@ function DynamicTags({
                     ? (localize(placeholder as TranslationKeys) ?? placeholder)
                     : placeholder
                 }
-                className={cn('flex h-10 max-h-10 border-none bg-surface-secondary px-3 py-2')}
+                className={cn('flex h-9 max-h-9 border-none bg-surface-secondary px-3 py-2')}
               />
             </div>
           </div>
diff --git a/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx b/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
index ad50ccb678..df4b342ae0 100644
--- a/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
+++ b/client/src/components/SidePanel/Parameters/DynamicTextarea.tsx
@@ -1,7 +1,7 @@
 import { OptionTypes } from 'librechat-data-provider';
+import { Label, TextareaAutosize, HoverCard, HoverCardTrigger } from '@librechat/client';
 import type { DynamicSettingProps } from 'librechat-data-provider';
 import { useLocalize, useDebouncedInput, useParameterEffects, TranslationKeys } from '~/hooks';
-import { Label, TextareaAutosize, HoverCard, HoverCardTrigger } from '@librechat/client';
 import { useChatContext } from '~/Providers';
 import OptionHover from './OptionHover';
 import { ESide } from '~/common';
@@ -56,7 +56,7 @@ function DynamicTextarea({
           <div className="flex w-full justify-between">
             <Label
               htmlFor={`${settingKey}-dynamic-textarea`}
-              className="text-left text-sm font-medium"
+              className="text-left text-xs font-medium"
             >
               {labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey}{' '}
               {showDefault && (
@@ -82,8 +82,7 @@ function DynamicTextarea({
                 : placeholder
             }
             className={cn(
-              // TODO: configurable max height
-              'flex max-h-[138px] min-h-[100px] w-full resize-none rounded-lg bg-surface-secondary px-3 py-2 focus:outline-none',
+              'flex max-h-[138px] min-h-[100px] w-full resize-none rounded-lg border border-border-light bg-surface-secondary px-3 py-2 text-sm focus:outline-none',
             )}
           />
         </HoverCardTrigger>
diff --git a/client/src/components/SidePanel/Parameters/Panel.tsx b/client/src/components/SidePanel/Parameters/Panel.tsx
index 7541f4f0e8..a62ca5834a 100644
--- a/client/src/components/SidePanel/Parameters/Panel.tsx
+++ b/client/src/components/SidePanel/Parameters/Panel.tsx
@@ -142,7 +142,7 @@ export default function Parameters() {
   }
 
   return (
-    <div className="h-auto max-w-full overflow-x-hidden p-3">
+    <div className="h-auto max-w-full px-3 pb-3 pt-2">
       <div className="grid grid-cols-2 gap-4">
         {' '}
         {/* This is the parent element containing all settings */}
diff --git a/client/src/components/SidePanel/SidePanel.tsx b/client/src/components/SidePanel/SidePanel.tsx
deleted file mode 100644
index 8a711ce9db..0000000000
--- a/client/src/components/SidePanel/SidePanel.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import { useState, useCallback, useMemo, memo } from 'react';
-import { getEndpointField } from 'librechat-data-provider';
-import { useUserKeyQuery } from 'librechat-data-provider/react-query';
-import { ResizableHandleAlt, ResizablePanel, useMediaQuery } from '@librechat/client';
-import type { TEndpointsConfig, TInterfaceConfig } from 'librechat-data-provider';
-import type { ImperativePanelHandle } from 'react-resizable-panels';
-import useSideNavLinks from '~/hooks/Nav/useSideNavLinks';
-import { useLocalStorage, useLocalize } from '~/hooks';
-import { useGetEndpointsQuery } from '~/data-provider';
-import NavToggle from '~/components/Nav/NavToggle';
-import { useSidePanelContext } from '~/Providers';
-import { cn } from '~/utils';
-import Nav from './Nav';
-
-const defaultMinSize = 20;
-
-const SidePanel = ({
-  defaultSize,
-  panelRef,
-  navCollapsedSize = 3,
-  hasArtifacts,
-  minSize,
-  setMinSize,
-  collapsedSize,
-  setCollapsedSize,
-  isCollapsed,
-  setIsCollapsed,
-  fullCollapse,
-  setFullCollapse,
-  interfaceConfig,
-}: {
-  defaultSize?: number;
-  hasArtifacts: boolean;
-  navCollapsedSize?: number;
-  minSize: number;
-  setMinSize: React.Dispatch<React.SetStateAction<number>>;
-  collapsedSize: number;
-  setCollapsedSize: React.Dispatch<React.SetStateAction<number>>;
-  isCollapsed: boolean;
-  setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
-  fullCollapse: boolean;
-  setFullCollapse: React.Dispatch<React.SetStateAction<boolean>>;
-  panelRef: React.RefObject<ImperativePanelHandle>;
-  interfaceConfig: TInterfaceConfig;
-}) => {
-  const localize = useLocalize();
-  const { endpoint } = useSidePanelContext();
-  const [isHovering, setIsHovering] = useState(false);
-  const [newUser, setNewUser] = useLocalStorage('newUser', true);
-  const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
-
-  const isSmallScreen = useMediaQuery('(max-width: 767px)');
-
-  const { data: keyExpiry = { expiresAt: undefined } } = useUserKeyQuery(endpoint ?? '');
-
-  const defaultActive = useMemo(() => {
-    const activePanel = localStorage.getItem('side:active-panel');
-    return typeof activePanel === 'string' ? activePanel : undefined;
-  }, []);
-
-  const endpointType = useMemo(
-    () => getEndpointField(endpointsConfig, endpoint, 'type'),
-    [endpoint, endpointsConfig],
-  );
-
-  const userProvidesKey = useMemo(
-    () => !!(endpointsConfig?.[endpoint ?? '']?.userProvide ?? false),
-    [endpointsConfig, endpoint],
-  );
-  const keyProvided = useMemo(
-    () => (userProvidesKey ? !!(keyExpiry.expiresAt ?? '') : true),
-    [keyExpiry.expiresAt, userProvidesKey],
-  );
-
-  const hidePanel = useCallback(() => {
-    setIsCollapsed(true);
-    setCollapsedSize(0);
-    setMinSize(defaultMinSize);
-    setFullCollapse(true);
-    localStorage.setItem('fullPanelCollapse', 'true');
-    panelRef.current?.collapse();
-  }, [panelRef, setMinSize, setIsCollapsed, setFullCollapse, setCollapsedSize]);
-
-  const Links = useSideNavLinks({
-    endpoint,
-    hidePanel,
-    keyProvided,
-    endpointType,
-    interfaceConfig,
-    endpointsConfig,
-  });
-
-  const toggleNavVisible = useCallback(() => {
-    if (newUser) {
-      setNewUser(false);
-    }
-    setIsCollapsed((prev: boolean) => {
-      if (prev) {
-        setMinSize(defaultMinSize);
-        setCollapsedSize(navCollapsedSize);
-        setFullCollapse(false);
-        localStorage.setItem('fullPanelCollapse', 'false');
-      }
-      return !prev;
-    });
-    if (!isCollapsed) {
-      panelRef.current?.collapse();
-    } else {
-      panelRef.current?.expand();
-    }
-  }, [
-    newUser,
-    panelRef,
-    setNewUser,
-    setMinSize,
-    isCollapsed,
-    setIsCollapsed,
-    setFullCollapse,
-    setCollapsedSize,
-    navCollapsedSize,
-  ]);
-
-  return (
-    <>
-      <div
-        onMouseEnter={() => setIsHovering(true)}
-        onMouseLeave={() => setIsHovering(false)}
-        className="relative flex w-px items-center justify-center"
-      >
-        <NavToggle
-          navVisible={!isCollapsed}
-          isHovering={isHovering}
-          onToggle={toggleNavVisible}
-          setIsHovering={setIsHovering}
-          className={cn(
-            'fixed top-1/2',
-            (isCollapsed && (minSize === 0 || collapsedSize === 0)) || fullCollapse
-              ? 'mr-9'
-              : 'mr-16',
-          )}
-          translateX={false}
-          side="right"
-        />
-      </div>
-      {(!isCollapsed || minSize > 0) && !isSmallScreen && !fullCollapse && (
-        <ResizableHandleAlt withHandle className="bg-transparent text-text-primary" />
-      )}
-      <ResizablePanel
-        tagName="nav"
-        id="controls-nav"
-        order={hasArtifacts ? 3 : 2}
-        aria-label={localize('com_ui_controls')}
-        role="navigation"
-        collapsedSize={collapsedSize}
-        defaultSize={defaultSize}
-        collapsible={true}
-        minSize={minSize}
-        maxSize={40}
-        ref={panelRef}
-        style={{
-          overflowY: 'auto',
-          transition: 'width 0.2s ease, visibility 0s linear 0.2s',
-        }}
-        onExpand={() => {
-          if (isCollapsed && (fullCollapse || collapsedSize === 0)) {
-            return;
-          }
-          setIsCollapsed(false);
-          localStorage.setItem('react-resizable-panels:collapsed', 'false');
-        }}
-        onCollapse={() => {
-          setIsCollapsed(true);
-          localStorage.setItem('react-resizable-panels:collapsed', 'true');
-        }}
-        className={cn(
-          'sidenav hide-scrollbar border-l border-border-light bg-background py-1 transition-opacity',
-          isCollapsed ? 'min-w-[50px]' : 'min-w-[340px] sm:min-w-[352px]',
-          (isSmallScreen && isCollapsed && (minSize === 0 || collapsedSize === 0)) || fullCollapse
-            ? 'hidden min-w-0'
-            : 'opacity-100',
-        )}
-      >
-        <Nav
-          resize={panelRef.current?.resize}
-          isCollapsed={isCollapsed}
-          defaultActive={defaultActive}
-          links={Links}
-        />
-      </ResizablePanel>
-    </>
-  );
-};
-
-export default memo(SidePanel);
diff --git a/client/src/components/SidePanel/SidePanelGroup.tsx b/client/src/components/SidePanel/SidePanelGroup.tsx
index 171947cd6b..dd7af6fbf1 100644
--- a/client/src/components/SidePanel/SidePanelGroup.tsx
+++ b/client/src/components/SidePanel/SidePanelGroup.tsx
@@ -1,163 +1,70 @@
-import { useState, useRef, useCallback, useEffect, useMemo, memo } from 'react';
+import { useState, useEffect, useMemo, memo } from 'react';
 import throttle from 'lodash/throttle';
-import { useRecoilValue } from 'recoil';
-import { getConfigDefaults } from 'librechat-data-provider';
 import { ResizablePanel, ResizablePanelGroup, useMediaQuery } from '@librechat/client';
-import type { ImperativePanelHandle } from 'react-resizable-panels';
-import { useGetStartupConfig } from '~/data-provider';
 import ArtifactsPanel from './ArtifactsPanel';
-import { normalizeLayout, cn } from '~/utils';
-import SidePanel from './SidePanel';
-import store from '~/store';
+import { normalizeLayout } from '~/utils';
 
 interface SidePanelProps {
-  defaultLayout?: number[] | undefined;
-  defaultCollapsed?: boolean;
-  navCollapsedSize?: number;
-  fullPanelCollapse?: boolean;
   artifacts?: React.ReactNode;
   children: React.ReactNode;
 }
 
-const defaultMinSize = 20;
-const defaultInterface = getConfigDefaults().interface;
+const SidePanelGroup = memo(({ artifacts, children }: SidePanelProps) => {
+  const [shouldRenderArtifacts, setShouldRenderArtifacts] = useState(artifacts != null);
+  const isSmallScreen = useMediaQuery('(max-width: 767px)');
 
-const SidePanelGroup = memo(
-  ({
-    defaultLayout = [97, 3],
-    defaultCollapsed = false,
-    fullPanelCollapse = false,
-    navCollapsedSize = 3,
-    artifacts,
-    children,
-  }: SidePanelProps) => {
-    const { data: startupConfig } = useGetStartupConfig();
-    const interfaceConfig = useMemo(
-      () => startupConfig?.interface ?? defaultInterface,
-      [startupConfig],
-    );
+  const currentLayout = useMemo(() => {
+    if (artifacts == null) {
+      return [100];
+    }
+    return normalizeLayout([50, 50]);
+  }, [artifacts]);
 
-    const panelRef = useRef<ImperativePanelHandle>(null);
-    const [minSize, setMinSize] = useState(defaultMinSize);
-    const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
-    const [fullCollapse, setFullCollapse] = useState(fullPanelCollapse);
-    const [collapsedSize, setCollapsedSize] = useState(navCollapsedSize);
-    const [shouldRenderArtifacts, setShouldRenderArtifacts] = useState(artifacts != null);
+  const throttledSaveLayout = useMemo(
+    () =>
+      throttle((sizes: number[]) => {
+        const normalizedSizes = normalizeLayout(sizes);
+        localStorage.setItem('react-resizable-panels:layout', JSON.stringify(normalizedSizes));
+      }, 350),
+    [],
+  );
 
-    const isSmallScreen = useMediaQuery('(max-width: 767px)');
-    const hideSidePanel = useRecoilValue(store.hideSidePanel);
+  useEffect(() => () => throttledSaveLayout.cancel(), [throttledSaveLayout]);
 
-    const calculateLayout = useCallback(() => {
-      if (artifacts == null) {
-        const navSize = defaultLayout.length === 2 ? defaultLayout[1] : defaultLayout[2];
-        return [100 - navSize, navSize];
-      } else {
-        const navSize = 0;
-        const remainingSpace = 100 - navSize;
-        const newMainSize = Math.floor(remainingSpace / 2);
-        const artifactsSize = remainingSpace - newMainSize;
-        return [newMainSize, artifactsSize, navSize];
-      }
-    }, [artifacts, defaultLayout]);
+  const minSizeMain = useMemo(() => (artifacts != null ? 15 : 30), [artifacts]);
 
-    const currentLayout = useMemo(() => normalizeLayout(calculateLayout()), [calculateLayout]);
-
-    const throttledSaveLayout = useMemo(
-      () =>
-        throttle((sizes: number[]) => {
-          const normalizedSizes = normalizeLayout(sizes);
-          localStorage.setItem('react-resizable-panels:layout', JSON.stringify(normalizedSizes));
-        }, 350),
-      [],
-    );
-
-    useEffect(() => {
-      if (isSmallScreen) {
-        setIsCollapsed(true);
-        setCollapsedSize(0);
-        setMinSize(defaultMinSize);
-        setFullCollapse(true);
-        localStorage.setItem('fullPanelCollapse', 'true');
-        panelRef.current?.collapse();
-        return;
-      } else {
-        setIsCollapsed(defaultCollapsed);
-        setCollapsedSize(navCollapsedSize);
-        setMinSize(defaultMinSize);
-      }
-    }, [isSmallScreen, defaultCollapsed, navCollapsedSize, fullPanelCollapse]);
-
-    const minSizeMain = useMemo(() => (artifacts != null ? 15 : 30), [artifacts]);
-
-    /** Memoized close button handler to prevent re-creating it */
-    const handleClosePanel = useCallback(() => {
-      setIsCollapsed(() => {
-        localStorage.setItem('fullPanelCollapse', 'true');
-        setFullCollapse(true);
-        setCollapsedSize(0);
-        setMinSize(0);
-        return false;
-      });
-      panelRef.current?.collapse();
-    }, []);
-
-    return (
-      <>
-        <ResizablePanelGroup
-          direction="horizontal"
-          onLayout={(sizes) => throttledSaveLayout(sizes)}
-          className="relative h-full w-full flex-1 overflow-auto bg-presentation"
+  return (
+    <>
+      <ResizablePanelGroup
+        direction="horizontal"
+        onLayout={(sizes) => throttledSaveLayout(sizes)}
+        className="relative h-full w-full flex-1 overflow-auto bg-presentation"
+      >
+        <ResizablePanel
+          defaultSize={currentLayout[0]}
+          minSize={minSizeMain}
+          order={1}
+          id="messages-view"
         >
-          <ResizablePanel
-            defaultSize={currentLayout[0]}
-            minSize={minSizeMain}
-            order={1}
-            id="messages-view"
-          >
-            {children}
-          </ResizablePanel>
+          {children}
+        </ResizablePanel>
 
-          {!isSmallScreen && (
-            <ArtifactsPanel
-              artifacts={artifacts}
-              currentLayout={currentLayout}
-              minSizeMain={minSizeMain}
-              shouldRender={shouldRenderArtifacts}
-              onRenderChange={setShouldRenderArtifacts}
-            />
-          )}
-
-          {!hideSidePanel && interfaceConfig.sidePanel === true && (
-            <SidePanel
-              panelRef={panelRef}
-              minSize={minSize}
-              setMinSize={setMinSize}
-              isCollapsed={isCollapsed}
-              setIsCollapsed={setIsCollapsed}
-              collapsedSize={collapsedSize}
-              setCollapsedSize={setCollapsedSize}
-              fullCollapse={fullCollapse}
-              setFullCollapse={setFullCollapse}
-              interfaceConfig={interfaceConfig}
-              hasArtifacts={shouldRenderArtifacts}
-              defaultSize={currentLayout[currentLayout.length - 1]}
-            />
-          )}
-        </ResizablePanelGroup>
-        {artifacts != null && isSmallScreen && (
-          <div className="fixed inset-0 z-[100]">{artifacts}</div>
-        )}
-        {!hideSidePanel && interfaceConfig.sidePanel === true && (
-          <button
-            onClick={handleClosePanel}
-            aria-label="Close right side panel"
-            className={cn('sidenav-mask', !isCollapsed ? 'active' : '')}
+        {!isSmallScreen && (
+          <ArtifactsPanel
+            artifacts={artifacts}
+            currentLayout={currentLayout}
+            minSizeMain={minSizeMain}
+            shouldRender={shouldRenderArtifacts}
+            onRenderChange={setShouldRenderArtifacts}
           />
         )}
-      </>
-    );
-  },
-);
+      </ResizablePanelGroup>
+      {artifacts != null && isSmallScreen && (
+        <div className="fixed inset-0 z-[100]">{artifacts}</div>
+      )}
+    </>
+  );
+});
 
 SidePanelGroup.displayName = 'SidePanelGroup';
 
diff --git a/client/src/components/SidePanel/index.ts b/client/src/components/SidePanel/index.ts
index c88b7abd89..95ae41a9d7 100644
--- a/client/src/components/SidePanel/index.ts
+++ b/client/src/components/SidePanel/index.ts
@@ -1,2 +1 @@
 export { default as SidePanelGroup } from './SidePanelGroup';
-export { default as SideNav } from './Nav';
diff --git a/client/src/components/UnifiedSidebar/ConversationsSection.tsx b/client/src/components/UnifiedSidebar/ConversationsSection.tsx
new file mode 100644
index 0000000000..c02741d038
--- /dev/null
+++ b/client/src/components/UnifiedSidebar/ConversationsSection.tsx
@@ -0,0 +1,170 @@
+import { useCallback, useEffect, useState, useMemo, memo, lazy, Suspense, useRef } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useSetRecoilState, useRecoilValue } from 'recoil';
+import { useMediaQuery, NewChatIcon } from '@librechat/client';
+import { PermissionTypes, Permissions, QueryKeys } from 'librechat-data-provider';
+import type { InfiniteQueryObserverResult } from '@tanstack/react-query';
+import type { ConversationListResponse } from 'librechat-data-provider';
+import type { List } from 'react-virtualized';
+import {
+  useLocalize,
+  useNewConvo,
+  useHasAccess,
+  useAuthContext,
+  useLocalStorage,
+  useNavScrolling,
+} from '~/hooks';
+import { useConversationsInfiniteQuery, useTitleGeneration } from '~/data-provider';
+import { Conversations } from '~/components/Conversations';
+import SearchBar from '~/components/Nav/SearchBar';
+import { clearMessagesCache } from '~/utils';
+import store from '~/store';
+
+const BookmarkNav = lazy(() => import('~/components/Nav/Bookmarks/BookmarkNav'));
+
+const ConversationsSection = memo(() => {
+  const localize = useLocalize();
+  const queryClient = useQueryClient();
+  const { newConversation } = useNewConvo();
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+  const setSidebarExpanded = useSetRecoilState(store.sidebarExpanded);
+  const conversation = useRecoilValue(store.conversationByIndex(0));
+  const { isAuthenticated } = useAuthContext();
+  useTitleGeneration(isAuthenticated);
+
+  const [isChatsExpanded, setIsChatsExpanded] = useLocalStorage('chatsExpanded', true);
+  const [showLoading, setShowLoading] = useState(false);
+  const [tags, setTags] = useState<string[]>([]);
+
+  const hasAccessToBookmarks = useHasAccess({
+    permissionType: PermissionTypes.BOOKMARKS,
+    permission: Permissions.USE,
+  });
+
+  const search = useRecoilValue(store.search);
+
+  const { data, fetchNextPage, isFetchingNextPage, isLoading, isFetching } =
+    useConversationsInfiniteQuery(
+      {
+        tags: tags.length === 0 ? undefined : tags,
+        search: search.debouncedQuery || undefined,
+      },
+      {
+        enabled: isAuthenticated,
+        staleTime: 30000,
+        cacheTime: 300000,
+      },
+    );
+
+  const computedHasNextPage = useMemo(() => {
+    if (data?.pages && data.pages.length > 0) {
+      const lastPage: ConversationListResponse = data.pages[data.pages.length - 1];
+      return lastPage.nextCursor !== null;
+    }
+    return false;
+  }, [data?.pages]);
+
+  const conversationsRef = useRef<List | null>(null);
+
+  const { moveToTop } = useNavScrolling<ConversationListResponse>({
+    setShowLoading,
+    fetchNextPage: async (options?) => {
+      if (computedHasNextPage) {
+        return fetchNextPage(options);
+      }
+      return Promise.resolve({} as InfiniteQueryObserverResult<ConversationListResponse, unknown>);
+    },
+    isFetchingNext: isFetchingNextPage,
+  });
+
+  const conversations = useMemo(() => {
+    return data ? data.pages.flatMap((page) => page.conversations) : [];
+  }, [data]);
+
+  const toggleNav = useCallback(() => {
+    if (isSmallScreen) {
+      setSidebarExpanded(false);
+    }
+  }, [isSmallScreen, setSidebarExpanded]);
+
+  const loadMoreConversations = useCallback(() => {
+    if (isFetchingNextPage || !computedHasNextPage) {
+      return;
+    }
+    fetchNextPage();
+  }, [isFetchingNextPage, computedHasNextPage, fetchNextPage]);
+
+  const [isSearchLoading, setIsSearchLoading] = useState(
+    !!search.query && (search.isTyping || isLoading || isFetching),
+  );
+
+  useEffect(() => {
+    if (search.isTyping) {
+      setIsSearchLoading(true);
+    } else if (!isLoading && !isFetching) {
+      setIsSearchLoading(false);
+    } else if (!!search.query && (isLoading || isFetching)) {
+      setIsSearchLoading(true);
+    }
+  }, [search.query, search.isTyping, isLoading, isFetching]);
+
+  return (
+    <div
+      className="flex h-full min-h-0 flex-col overflow-hidden pb-3"
+      role="region"
+      aria-label={localize('com_ui_chat_history')}
+    >
+      <div className="flex items-center gap-0.5 px-3">
+        {hasAccessToBookmarks && (
+          <Suspense fallback={null}>
+            <BookmarkNav tags={tags} setTags={setTags} />
+          </Suspense>
+        )}
+        <SearchBar isSmallScreen={isSmallScreen} />
+      </div>
+      {isSmallScreen && (
+        <div
+          role="button"
+          tabIndex={0}
+          aria-label={localize('com_ui_new_chat')}
+          className="flex w-full cursor-pointer items-center rounded-lg px-2.5 py-2 text-sm text-text-primary outline-none hover:bg-surface-active-alt focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-black dark:focus-visible:ring-white"
+          onClick={() => {
+            clearMessagesCache(queryClient, conversation?.conversationId);
+            queryClient.invalidateQueries([QueryKeys.messages]);
+            newConversation();
+            setSidebarExpanded(false);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              clearMessagesCache(queryClient, conversation?.conversationId);
+              queryClient.invalidateQueries([QueryKeys.messages]);
+              newConversation();
+              setSidebarExpanded(false);
+            }
+          }}
+        >
+          <NewChatIcon className="mr-2 h-5 w-5" />
+          <span className="truncate">{localize('com_ui_new_chat')}</span>
+        </div>
+      )}
+      <div className="flex min-h-0 flex-grow flex-col overflow-hidden">
+        <Conversations
+          conversations={conversations}
+          moveToTop={moveToTop}
+          toggleNav={toggleNav}
+          containerRef={conversationsRef}
+          loadMoreConversations={loadMoreConversations}
+          isLoading={isFetchingNextPage || showLoading || isLoading}
+          isSearchLoading={isSearchLoading}
+          isChatsExpanded={isChatsExpanded}
+          setIsChatsExpanded={setIsChatsExpanded}
+        />
+      </div>
+    </div>
+  );
+});
+
+ConversationsSection.displayName = 'ConversationsSection';
+
+export default ConversationsSection;
diff --git a/client/src/components/UnifiedSidebar/ExpandedPanel.tsx b/client/src/components/UnifiedSidebar/ExpandedPanel.tsx
new file mode 100644
index 0000000000..79adbf80a7
--- /dev/null
+++ b/client/src/components/UnifiedSidebar/ExpandedPanel.tsx
@@ -0,0 +1,169 @@
+import { memo, useCallback, lazy, Suspense } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useRecoilValue } from 'recoil';
+import { QueryKeys } from 'librechat-data-provider';
+import { Skeleton, Sidebar, Button, TooltipAnchor, NewChatIcon } from '@librechat/client';
+import type { NavLink } from '~/common';
+import { CLOSE_SIDEBAR_ID } from '~/components/Chat/Menus/OpenSidebar';
+import { useActivePanel } from '~/Providers';
+import { useLocalize, useNewConvo } from '~/hooks';
+import { clearMessagesCache, cn } from '~/utils';
+import store from '~/store';
+
+const AccountSettings = lazy(() => import('~/components/Nav/AccountSettings'));
+
+const NewChatButton = memo(function NewChatButton() {
+  const localize = useLocalize();
+  const queryClient = useQueryClient();
+  const { newConversation } = useNewConvo();
+  const conversation = useRecoilValue(store.conversationByIndex(0));
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>) => {
+      if (e.button === 0 && (e.ctrlKey || e.metaKey)) {
+        return;
+      }
+      e.preventDefault();
+      clearMessagesCache(queryClient, conversation?.conversationId);
+      queryClient.invalidateQueries([QueryKeys.messages]);
+      newConversation();
+    },
+    [queryClient, conversation?.conversationId, newConversation],
+  );
+
+  return (
+    <TooltipAnchor
+      side="right"
+      description={localize('com_ui_new_chat')}
+      render={
+        <a
+          href="/c/new"
+          data-testid="new-chat-button"
+          aria-label={localize('com_ui_new_chat')}
+          className="flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:bg-surface-hover"
+          onClick={handleClick}
+        >
+          <div className="flex size-6 items-center justify-center rounded-full bg-text-primary">
+            <NewChatIcon className="size-3.5 text-white dark:text-black" />
+          </div>
+        </a>
+      }
+    />
+  );
+});
+
+const NavIconButton = memo(function NavIconButton({
+  link,
+  isActive,
+  expanded,
+  setActive,
+  onExpand,
+}: {
+  link: NavLink;
+  isActive: boolean;
+  expanded: boolean;
+  setActive: (id: string) => void;
+  onExpand?: () => void;
+}) {
+  const localize = useLocalize();
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (link.onClick) {
+        link.onClick(e);
+        return;
+      }
+      if (!isActive) {
+        setActive(link.id);
+      }
+      if (!expanded) {
+        onExpand?.();
+      }
+    },
+    [link, isActive, setActive, expanded, onExpand],
+  );
+
+  return (
+    <TooltipAnchor
+      description={localize(link.title)}
+      side="right"
+      render={
+        <Button
+          size="icon"
+          variant="ghost"
+          aria-label={localize(link.title)}
+          aria-pressed={isActive}
+          className={cn(
+            'h-9 w-9 rounded-lg',
+            isActive ? 'bg-surface-active-alt text-text-primary' : 'text-text-secondary',
+          )}
+          onClick={handleClick}
+        >
+          <link.icon className="h-4 w-4" aria-hidden="true" />
+        </Button>
+      }
+    />
+  );
+});
+
+function ExpandedPanel({
+  links,
+  expanded = true,
+  onCollapse,
+  onExpand,
+}: {
+  links: NavLink[];
+  expanded?: boolean;
+  onCollapse?: () => void;
+  onExpand?: () => void;
+}) {
+  const localize = useLocalize();
+  const { active, setActive } = useActivePanel();
+
+  const toggleLabel = expanded ? 'com_nav_close_sidebar' : 'com_nav_open_sidebar';
+  const toggleClick = expanded ? onCollapse : onExpand;
+
+  return (
+    <div className="flex h-full flex-shrink-0 flex-col gap-2 border-r border-border-light bg-surface-primary-alt px-2 py-2">
+      <TooltipAnchor
+        side="right"
+        description={localize(toggleLabel)}
+        render={
+          <Button
+            id={expanded ? CLOSE_SIDEBAR_ID : undefined}
+            data-testid={expanded ? 'close-sidebar-button' : 'open-sidebar-button'}
+            size="icon"
+            variant="ghost"
+            aria-label={localize(toggleLabel)}
+            aria-expanded={expanded}
+            className="h-9 w-9 rounded-lg"
+            onClick={toggleClick}
+          >
+            <Sidebar aria-hidden="true" className="h-5 w-5 text-text-primary" />
+          </Button>
+        }
+      />
+      <NewChatButton />
+      <div className="flex flex-col gap-1 overflow-y-auto">
+        {links.map((link) => (
+          <NavIconButton
+            key={link.id}
+            link={link}
+            isActive={link.id === active}
+            expanded={expanded ?? true}
+            setActive={setActive}
+            onExpand={onExpand}
+          />
+        ))}
+      </div>
+
+      <div className="mt-auto">
+        <Suspense fallback={<Skeleton className="h-9 w-9 rounded-lg" />}>
+          <AccountSettings collapsed />
+        </Suspense>
+      </div>
+    </div>
+  );
+}
+
+export default memo(ExpandedPanel);
diff --git a/client/src/components/UnifiedSidebar/Sidebar.tsx b/client/src/components/UnifiedSidebar/Sidebar.tsx
new file mode 100644
index 0000000000..3f3064ac11
--- /dev/null
+++ b/client/src/components/UnifiedSidebar/Sidebar.tsx
@@ -0,0 +1,65 @@
+import { memo } from 'react';
+import type { NavLink } from '~/common';
+import SidePanelNav from '~/components/SidePanel/Nav';
+import ExpandedPanel from './ExpandedPanel';
+import { cn } from '~/utils';
+
+function Sidebar({
+  links,
+  expanded,
+  onCollapse,
+  onExpand,
+  onResizeStart,
+  onResizeKeyboard,
+}: {
+  links: NavLink[];
+  expanded: boolean;
+  onCollapse: () => void;
+  onExpand: () => void;
+  onResizeStart: (e: React.MouseEvent) => void;
+  onResizeKeyboard: (direction: 'shrink' | 'grow') => void;
+}) {
+  return (
+    <>
+      <div className="flex h-full w-full overflow-hidden">
+        <ExpandedPanel
+          links={links}
+          expanded={expanded}
+          onCollapse={onCollapse}
+          onExpand={onExpand}
+        />
+        <nav
+          className={cn(
+            'min-h-0 flex-1 overflow-hidden bg-surface-primary-alt',
+            expanded ? 'opacity-100' : 'pointer-events-none opacity-0',
+          )}
+          style={{ transition: expanded ? 'opacity 200ms ease 80ms' : 'opacity 150ms ease' }}
+          aria-hidden={!expanded}
+        >
+          <SidePanelNav links={links} />
+        </nav>
+      </div>
+      <div
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Resize sidebar"
+        tabIndex={expanded ? 0 : -1}
+        className={cn(
+          'absolute right-0 top-0 z-10 h-full w-1 cursor-col-resize transition-colors hover:bg-border-medium active:bg-border-heavy',
+          expanded ? 'opacity-100' : 'pointer-events-none opacity-0',
+        )}
+        style={{ transition: expanded ? 'opacity 200ms ease 80ms' : 'opacity 150ms ease' }}
+        onMouseDown={onResizeStart}
+        onKeyDown={(e) => {
+          if (e.key === 'ArrowLeft') {
+            onResizeKeyboard('shrink');
+          } else if (e.key === 'ArrowRight') {
+            onResizeKeyboard('grow');
+          }
+        }}
+      />
+    </>
+  );
+}
+
+export default memo(Sidebar);
diff --git a/client/src/components/UnifiedSidebar/UnifiedSidebar.tsx b/client/src/components/UnifiedSidebar/UnifiedSidebar.tsx
new file mode 100644
index 0000000000..7d2cf17937
--- /dev/null
+++ b/client/src/components/UnifiedSidebar/UnifiedSidebar.tsx
@@ -0,0 +1,206 @@
+import { useCallback, useState, useEffect, useRef, memo, startTransition } from 'react';
+import type { ReactNode } from 'react';
+import { useRecoilState } from 'recoil';
+import { useForm } from 'react-hook-form';
+import { useMediaQuery } from '@librechat/client';
+import type { ChatFormValues } from '~/common';
+import { ChatContext, ChatFormProvider, ActivePanelProvider } from '~/Providers';
+import useUnifiedSidebarLinks from '~/hooks/Nav/useUnifiedSidebarLinks';
+import { useChatHelpers, useLocalize } from '~/hooks';
+import SidePanelNav from '~/components/SidePanel/Nav';
+import ExpandedPanel from './ExpandedPanel';
+import Sidebar from './Sidebar';
+import { cn } from '~/utils';
+import store from '~/store';
+
+const COLLAPSED_WIDTH = 52;
+const EXPANDED_MIN = 360;
+const TRANSITION_MS = 300;
+const EASING = 'cubic-bezier(0.2, 0, 0, 1)';
+
+function getInitialWidth(): number {
+  const saved = localStorage.getItem('side:width');
+  return saved ? Math.max(Number(saved), EXPANDED_MIN) : EXPANDED_MIN;
+}
+
+/**
+ * Isolates useChatHelpers Recoil subscriptions from the sidebar layout.
+ * Atom changes (e.g. during streaming) only re-render this component
+ * and the active panel — not the sidebar shell, resize logic, or icon strip.
+ * This works because Recoil subscriptions don't propagate to parent components.
+ */
+function SidebarChatProvider({ children }: { children: ReactNode }) {
+  const chatHelpers = useChatHelpers(0);
+  const sidebarFormMethods = useForm<ChatFormValues>({ defaultValues: { text: '' } });
+  return (
+    <ChatFormProvider {...sidebarFormMethods}>
+      <ChatContext.Provider value={chatHelpers}>{children}</ChatContext.Provider>
+    </ChatFormProvider>
+  );
+}
+
+function UnifiedSidebar() {
+  const localize = useLocalize();
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+  const [expanded, setExpanded] = useRecoilState(store.sidebarExpanded);
+  const [sidebarWidth, setSidebarWidth] = useState(getInitialWidth);
+  const [isResizing, setIsResizing] = useState(false);
+  const resizeHandlers = useRef<{ move: (e: MouseEvent) => void; up: () => void } | null>(null);
+
+  const links = useUnifiedSidebarLinks();
+
+  const handleCollapse = useCallback(() => {
+    startTransition(() => {
+      setExpanded(false);
+    });
+  }, [setExpanded]);
+
+  const handleExpand = useCallback(() => {
+    startTransition(() => {
+      setExpanded(true);
+    });
+  }, [setExpanded]);
+
+  const handleResizeStart = useCallback(() => {
+    setIsResizing(true);
+    document.body.style.userSelect = 'none';
+    const maxWidth = window.innerWidth * 0.4;
+    let rafId: number | null = null;
+
+    const move = (e: MouseEvent) => {
+      if (rafId != null) {
+        return;
+      }
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        const next = Math.max(EXPANDED_MIN, Math.min(e.clientX, maxWidth));
+        setSidebarWidth(next);
+      });
+    };
+
+    const up = () => {
+      if (rafId != null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      document.body.style.userSelect = '';
+      setIsResizing(false);
+      resizeHandlers.current = null;
+      setSidebarWidth((w) => {
+        localStorage.setItem('side:width', String(Math.round(w)));
+        return w;
+      });
+      document.removeEventListener('mousemove', move);
+      document.removeEventListener('mouseup', up);
+    };
+
+    resizeHandlers.current = { move, up };
+    document.addEventListener('mousemove', move);
+    document.addEventListener('mouseup', up);
+  }, []);
+
+  const handleResizeKeyboard = useCallback((direction: 'shrink' | 'grow') => {
+    setSidebarWidth((w) => {
+      const next =
+        direction === 'shrink'
+          ? Math.max(w - 20, EXPANDED_MIN)
+          : Math.min(w + 20, window.innerWidth * 0.4);
+      localStorage.setItem('side:width', String(Math.round(next)));
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (resizeHandlers.current) {
+        document.removeEventListener('mousemove', resizeHandlers.current.move);
+        document.removeEventListener('mouseup', resizeHandlers.current.up);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isSmallScreen || !expanded) {
+      return;
+    }
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        handleCollapse();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [isSmallScreen, expanded, handleCollapse]);
+
+  if (isSmallScreen) {
+    return (
+      <>
+        <div
+          className={cn(
+            'fixed left-0 top-0 z-[110] flex h-full bg-surface-primary-alt',
+            expanded ? 'translate-x-0' : '-translate-x-full',
+          )}
+          style={{
+            width: 'min(85vw, 380px)',
+            transition: `transform ${TRANSITION_MS}ms ${EASING}`,
+          }}
+          {...{ inert: !expanded ? '' : undefined }}
+        >
+          <SidebarChatProvider>
+            <ActivePanelProvider>
+              <ExpandedPanel links={links} onCollapse={handleCollapse} />
+              <nav className="min-h-0 flex-1 overflow-hidden bg-surface-primary-alt">
+                <SidePanelNav links={links} />
+              </nav>
+            </ActivePanelProvider>
+          </SidebarChatProvider>
+        </div>
+        <div
+          className={cn(
+            'fixed inset-0 z-[109] bg-black/50',
+            expanded ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0',
+          )}
+          style={{ transition: `opacity ${TRANSITION_MS}ms ${EASING}` }}
+          role="presentation"
+        >
+          <button
+            className="h-full w-full"
+            onClick={handleCollapse}
+            aria-label={localize('com_nav_close_sidebar')}
+            tabIndex={expanded ? 0 : -1}
+          />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <SidebarChatProvider>
+      <ActivePanelProvider>
+        <aside
+          className="relative flex h-full flex-shrink-0 overflow-hidden"
+          style={{
+            width: expanded ? sidebarWidth : COLLAPSED_WIDTH,
+            minWidth: expanded ? EXPANDED_MIN : COLLAPSED_WIDTH,
+            maxWidth: expanded ? '40%' : COLLAPSED_WIDTH,
+            transition: isResizing
+              ? 'none'
+              : `width ${TRANSITION_MS}ms ${EASING}, min-width ${TRANSITION_MS}ms ${EASING}, max-width ${TRANSITION_MS}ms ${EASING}`,
+          }}
+          aria-label={localize('com_nav_control_panel')}
+        >
+          <Sidebar
+            links={links}
+            expanded={expanded}
+            onCollapse={handleCollapse}
+            onExpand={handleExpand}
+            onResizeStart={handleResizeStart}
+            onResizeKeyboard={handleResizeKeyboard}
+          />
+        </aside>
+      </ActivePanelProvider>
+    </SidebarChatProvider>
+  );
+}
+
+export default memo(UnifiedSidebar);
diff --git a/client/src/components/UnifiedSidebar/index.ts b/client/src/components/UnifiedSidebar/index.ts
new file mode 100644
index 0000000000..0a72fbaed1
--- /dev/null
+++ b/client/src/components/UnifiedSidebar/index.ts
@@ -0,0 +1,2 @@
+export { default as UnifiedSidebar } from './UnifiedSidebar';
+export { default as ConversationsSection } from './ConversationsSection';
diff --git a/client/src/hooks/Messages/useSubmitMessage.ts b/client/src/hooks/Messages/useSubmitMessage.ts
index d924e3b987..8fd06e6003 100644
--- a/client/src/hooks/Messages/useSubmitMessage.ts
+++ b/client/src/hooks/Messages/useSubmitMessage.ts
@@ -3,6 +3,7 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { replaceSpecialVars } from 'librechat-data-provider';
 import { useChatContext, useChatFormContext, useAddedChatContext } from '~/Providers';
 import { useAuthContext } from '~/hooks/AuthContext';
+import { mainTextareaId } from '~/common';
 import store from '~/store';
 
 export default function useSubmitMessage() {
@@ -49,7 +50,8 @@ export default function useSubmitMessage() {
         return;
       }
 
-      const currentText = methods.getValues('text');
+      const textarea = document.getElementById(mainTextareaId) as HTMLTextAreaElement | null;
+      const currentText = textarea?.value ?? methods.getValues('text');
       const newText = currentText.trim().length > 1 ? `\n${parsedText}` : parsedText;
       setActivePrompt(newText);
     },
diff --git a/client/src/hooks/Nav/useSideNavLinks.ts b/client/src/hooks/Nav/useSideNavLinks.ts
index 142784b517..07cc72dfcf 100644
--- a/client/src/hooks/Nav/useSideNavLinks.ts
+++ b/client/src/hooks/Nav/useSideNavLinks.ts
@@ -28,13 +28,15 @@ export default function useSideNavLinks({
   endpointType,
   interfaceConfig,
   endpointsConfig,
+  includeHidePanel = true,
 }: {
-  hidePanel: () => void;
+  hidePanel?: () => void;
   keyProvided: boolean;
   endpoint?: EModelEndpoint | null;
   endpointType?: EModelEndpoint | null;
   interfaceConfig: Partial<TInterfaceConfig>;
   endpointsConfig: TEndpointsConfig;
+  includeHidePanel?: boolean;
 }) {
   const hasAccessToPrompts = useHasAccess({
     permissionType: PermissionTypes.PROMPTS,
@@ -172,13 +174,15 @@ export default function useSideNavLinks({
       });
     }
 
-    links.push({
-      title: 'com_sidepanel_hide_panel',
-      label: '',
-      icon: ArrowRightToLine,
-      onClick: hidePanel,
-      id: 'hide-panel',
-    });
+    if (includeHidePanel && hidePanel) {
+      links.push({
+        title: 'com_sidepanel_hide_panel',
+        label: '',
+        icon: ArrowRightToLine,
+        onClick: hidePanel,
+        id: 'hide-panel',
+      });
+    }
 
     return links;
   }, [
@@ -196,6 +200,7 @@ export default function useSideNavLinks({
     availableMCPServers,
     hasAccessToUseMCPSettings,
     hasAccessToCreateMCP,
+    includeHidePanel,
     hidePanel,
   ]);
 
diff --git a/client/src/hooks/Nav/useUnifiedSidebarLinks.ts b/client/src/hooks/Nav/useUnifiedSidebarLinks.ts
new file mode 100644
index 0000000000..3f3f5bc439
--- /dev/null
+++ b/client/src/hooks/Nav/useUnifiedSidebarLinks.ts
@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
+import { MessageSquare } from 'lucide-react';
+import { useUserKeyQuery } from 'librechat-data-provider/react-query';
+import { getConfigDefaults, getEndpointField } from 'librechat-data-provider';
+import type { TEndpointsConfig } from 'librechat-data-provider';
+import type { NavLink } from '~/common';
+import ConversationsSection from '~/components/UnifiedSidebar/ConversationsSection';
+import { useGetEndpointsQuery, useGetStartupConfig } from '~/data-provider';
+import useSideNavLinks from '~/hooks/Nav/useSideNavLinks';
+import store from '~/store';
+
+const defaultInterface = getConfigDefaults().interface;
+
+export default function useUnifiedSidebarLinks() {
+  const conversation = useRecoilValue(store.conversationByIndex(0));
+  const endpoint = conversation?.endpoint;
+  const { data: startupConfig } = useGetStartupConfig();
+  const { data: endpointsConfig = {} as TEndpointsConfig } = useGetEndpointsQuery();
+
+  const interfaceConfig = useMemo(
+    () => startupConfig?.interface ?? defaultInterface,
+    [startupConfig],
+  );
+
+  const endpointType = useMemo(
+    () => getEndpointField(endpointsConfig, endpoint, 'type'),
+    [endpoint, endpointsConfig],
+  );
+
+  const userProvidesKey = useMemo(
+    () => !!(endpointsConfig?.[endpoint ?? '']?.userProvide ?? false),
+    [endpointsConfig, endpoint],
+  );
+
+  const { data: keyExpiry = { expiresAt: undefined } } = useUserKeyQuery(endpoint ?? '');
+
+  const keyProvided = useMemo(
+    () => (userProvidesKey ? !!(keyExpiry.expiresAt ?? '') : true),
+    [keyExpiry.expiresAt, userProvidesKey],
+  );
+
+  const sideNavLinks = useSideNavLinks({
+    keyProvided,
+    endpoint,
+    endpointType,
+    interfaceConfig,
+    endpointsConfig,
+    includeHidePanel: false,
+  });
+
+  const links = useMemo(() => {
+    const conversationLink: NavLink = {
+      title: 'com_ui_chat_history',
+      label: '',
+      icon: MessageSquare,
+      id: 'conversations',
+      Component: ConversationsSection,
+    };
+
+    return [conversationLink, ...sideNavLinks];
+  }, [sideNavLinks]);
+
+  return links;
+}
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 987ac314a9..7fe143dc22 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -486,7 +486,6 @@
   "com_nav_font_size_xl": "Extra Large",
   "com_nav_font_size_xs": "Extra Small",
   "com_nav_help_faq": "Help & FAQ",
-  "com_nav_hide_panel": "Hide right-most side panel",
   "com_nav_info_balance": "Balance shows how many token credits you have left to use. Token credits translate to monetary value (e.g., 1000 credits = $0.001 USD)",
   "com_nav_info_code_artifacts": "Enables the display of experimental code artifacts next to the chat",
   "com_nav_info_code_artifacts_agent": "Enables the use of code artifacts for this agent. By default, additional instructions specific to the use of artifacts are added, unless \"Custom Prompt Mode\" is enabled.",
@@ -852,7 +851,6 @@
   "com_ui_continue": "Continue",
   "com_ui_continue_oauth": "Continue with OAuth",
   "com_ui_control_bar": "Control bar",
-  "com_ui_controls": "Controls",
   "com_ui_conversation": "conversation",
   "com_ui_conversation_label": "{{title}} conversation",
   "com_ui_conversation_not_found": "Conversation not found",
diff --git a/client/src/mobile.css b/client/src/mobile.css
index 0d31b41134..a17b4dd88a 100644
--- a/client/src/mobile.css
+++ b/client/src/mobile.css
@@ -131,46 +131,6 @@
   width: 100px;
 }
 
-@media (max-width: 767px) {
-  .sidenav {
-    /* width: calc(100% - 10px)  ; */
-    transition: all 0.15s;
-    position: fixed;
-    z-index: 66;
-    top: 0;
-    max-width: 320px;
-
-    /* max-width: 260px; */
-
-    bottom: 0;
-    right: 0
-    /* opacity: 0; */
-  }
-  .sidenav-mask {
-    position: fixed;
-    z-index: 65;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background-color: rgba(7, 7, 7, 0.4);
-    padding-left: 420px;
-    padding-top: 12px;
-    opacity: 0;
-    transition: all 0.5s;
-    pointer-events: none;
-  }
-
-  .sidenav-mask.active {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .sidenav.active {
-    position: fixed;
-  }
-}
-
 @keyframes tuning {
   0% { transform: rotate(30deg); }
   25% { transform: rotate(110deg); }
diff --git a/client/src/routes/Root.tsx b/client/src/routes/Root.tsx
index b9adae032b..e7e08f6879 100644
--- a/client/src/routes/Root.tsx
+++ b/client/src/routes/Root.tsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
 import { Outlet } from 'react-router-dom';
 import { useMediaQuery } from '@librechat/client';
-import type { ContextType } from '~/common';
 import {
   useSearchEnabled,
   useAssistantsMap,
@@ -9,6 +9,7 @@ import {
   useAgentsMap,
   useFileMap,
 } from '~/hooks';
+import store from '~/store';
 import {
   PromptGroupsProvider,
   AssistantsMapContext,
@@ -17,7 +18,7 @@ import {
   FileMapContext,
 } from '~/Providers';
 import { useUserTermsQuery, useGetStartupConfig } from '~/data-provider';
-import { Nav, MobileNav, NAV_WIDTH } from '~/components/Nav';
+import { UnifiedSidebar } from '~/components/UnifiedSidebar';
 import { TermsAndConditionsModal } from '~/components/ui';
 import { useHealthCheck } from '~/data-provider';
 import { Banner } from '~/components/Banners';
@@ -25,15 +26,11 @@ import { Banner } from '~/components/Banners';
 export default function Root() {
   const [showTerms, setShowTerms] = useState(false);
   const [bannerHeight, setBannerHeight] = useState(0);
-  const [navVisible, setNavVisible] = useState(() => {
-    const savedNavVisible = localStorage.getItem('navVisible');
-    return savedNavVisible !== null ? JSON.parse(savedNavVisible) : true;
-  });
-
-  const { isAuthenticated, logout } = useAuthContext();
+  const sidebarExpanded = useRecoilValue(store.sidebarExpanded);
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
 
-  // Global health check - runs once per authenticated session
+  const { isAuthenticated, logout } = useAuthContext();
+
   useHealthCheck(isAuthenticated);
 
   const assistantsMap = useAssistantsMap({ isAuthenticated });
@@ -75,23 +72,17 @@ export default function Root() {
               <Banner onHeightChange={setBannerHeight} />
               <div className="flex" style={{ height: `calc(100dvh - ${bannerHeight}px)` }}>
                 <div className="relative z-0 flex h-full w-full overflow-hidden">
-                  <Nav navVisible={navVisible} setNavVisible={setNavVisible} />
+                  <UnifiedSidebar />
                   <div
                     className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden"
-                    style={
-                      isSmallScreen
-                        ? {
-                            transform: navVisible
-                              ? `translateX(${NAV_WIDTH.MOBILE}px)`
-                              : 'translateX(0)',
-                            transition: 'transform 0.2s ease-out',
-                          }
-                        : undefined
-                    }
-                    {...{ inert: navVisible && isSmallScreen ? '' : undefined }}
+                    style={{
+                      transform:
+                        isSmallScreen && sidebarExpanded ? 'translateX(min(85vw, 380px))' : 'none',
+                      transition: 'transform 300ms cubic-bezier(0.2, 0, 0, 1)',
+                    }}
+                    {...{ inert: isSmallScreen && sidebarExpanded ? '' : undefined }}
                   >
-                    <MobileNav navVisible={navVisible} setNavVisible={setNavVisible} />
-                    <Outlet context={{ navVisible, setNavVisible } satisfies ContextType} />
+                    <Outlet />
                   </div>
                 </div>
               </div>
diff --git a/client/src/store/settings.ts b/client/src/store/settings.ts
index ece96d119a..cad3b4a151 100644
--- a/client/src/store/settings.ts
+++ b/client/src/store/settings.ts
@@ -17,7 +17,10 @@ const staticAtoms = {
 const localStorageAtoms = {
   // General settings
   autoScroll: atomWithLocalStorage('autoScroll', false),
-  hideSidePanel: atomWithLocalStorage('hideSidePanel', false),
+  sidebarExpanded: atomWithLocalStorage(
+    'unifiedSidebarExpanded',
+    typeof window !== 'undefined' && window.matchMedia('(max-width: 768px)').matches ? false : true,
+  ),
   enableUserMsgMarkdown: atomWithLocalStorage<boolean>(
     LocalStorageKeys.ENABLE_USER_MSG_MARKDOWN,
     true,
diff --git a/packages/client/src/components/ControlCombobox.tsx b/packages/client/src/components/ControlCombobox.tsx
index 950708d0c0..f53fc0504e 100644
--- a/packages/client/src/components/ControlCombobox.tsx
+++ b/packages/client/src/components/ControlCombobox.tsx
@@ -108,7 +108,7 @@ function ControlCombobox({
           'flex items-center justify-center gap-2 rounded-full bg-surface-secondary',
           'text-text-primary hover:bg-surface-tertiary',
           'border border-border-light',
-          isCollapsed ? 'h-10 w-10' : 'h-10 w-full rounded-xl px-3 py-2 text-sm',
+          isCollapsed ? 'h-9 w-9' : 'h-9 w-full rounded-xl px-3 py-2 text-sm',
           className,
         )}
       >
diff --git a/packages/client/src/components/FilterInput.tsx b/packages/client/src/components/FilterInput.tsx
index b637654f3b..04f5fe33a1 100644
--- a/packages/client/src/components/FilterInput.tsx
+++ b/packages/client/src/components/FilterInput.tsx
@@ -33,7 +33,7 @@ const FilterInput = React.forwardRef<HTMLInputElement, FilterInputProps>(
           placeholder=" "
           aria-label={label}
           className={cn(
-            'peer flex h-10 w-full rounded-lg border border-border-light bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+            'peer flex h-9 w-full rounded-lg border border-border-light bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
             className,
           )}
           {...props}
diff --git a/packages/client/src/components/Tooltip.tsx b/packages/client/src/components/Tooltip.tsx
index ed42cd1c9e..ddcdeef6c9 100644
--- a/packages/client/src/components/Tooltip.tsx
+++ b/packages/client/src/components/Tooltip.tsx
@@ -1,6 +1,6 @@
 import DOMPurify from 'dompurify';
 import * as Ariakit from '@ariakit/react';
-import { forwardRef, useId, useMemo } from 'react';
+import { memo, forwardRef, useCallback, useMemo } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { cn } from '~/utils';
 import './Tooltip.css';
@@ -13,13 +13,21 @@ interface TooltipAnchorProps extends Ariakit.TooltipAnchorProps {
   side?: 'top' | 'bottom' | 'left' | 'right';
 }
 
-export const TooltipAnchor = forwardRef<HTMLDivElement, TooltipAnchorProps>(function TooltipAnchor(
-  { description, side = 'top', className, role, enableHTML = false, ...props },
-  ref,
-) {
-  const tooltip = Ariakit.useTooltipStore({ placement: side });
-  const mounted = Ariakit.useStoreState(tooltip, (state) => state.mounted);
-  const placement = Ariakit.useStoreState(tooltip, (state) => state.placement);
+/**
+ * Isolated component that subscribes to tooltip store state independently,
+ * so the anchor element never re-renders when the tooltip mounts/unmounts.
+ */
+const TooltipPopup = memo(function TooltipPopup({
+  store,
+  description,
+  enableHTML,
+}: {
+  store: Ariakit.TooltipStore;
+  description: string;
+  enableHTML: boolean;
+}) {
+  const mounted = Ariakit.useStoreState(store, (state) => state.mounted);
+  const placement = Ariakit.useStoreState(store, (state) => state.placement);
 
   const sanitizer = useMemo(() => {
     const instance = DOMPurify();
@@ -65,12 +73,52 @@ export const TooltipAnchor = forwardRef<HTMLDivElement, TooltipAnchorProps>(func
     }
   }, [placement]);
 
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (role === 'button' && event.key === 'Enter') {
-      event.preventDefault();
-      (event.target as HTMLDivElement).click();
-    }
-  };
+  return (
+    <AnimatePresence>
+      {mounted === true && (
+        <Ariakit.Tooltip
+          gutter={4}
+          alwaysVisible
+          className="tooltip"
+          render={
+            <motion.div
+              initial={{ opacity: 0, x, y }}
+              animate={{ opacity: 1, x: 0, y: 0 }}
+              exit={{ opacity: 0, x, y }}
+            />
+          }
+        >
+          <Ariakit.TooltipArrow />
+          {enableHTML ? (
+            <div
+              dangerouslySetInnerHTML={{
+                __html: sanitizedHTML,
+              }}
+            />
+          ) : (
+            description
+          )}
+        </Ariakit.Tooltip>
+      )}
+    </AnimatePresence>
+  );
+});
+
+export const TooltipAnchor = forwardRef<HTMLDivElement, TooltipAnchorProps>(function TooltipAnchor(
+  { description, side = 'top', className, role, enableHTML = false, ...props },
+  ref,
+) {
+  const tooltip = Ariakit.useTooltipStore({ placement: side });
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (role === 'button' && event.key === 'Enter') {
+        event.preventDefault();
+        (event.target as HTMLDivElement).click();
+      }
+    },
+    [role],
+  );
 
   return (
     <Ariakit.TooltipProvider store={tooltip} hideTimeout={0}>
@@ -81,33 +129,7 @@ export const TooltipAnchor = forwardRef<HTMLDivElement, TooltipAnchorProps>(func
         onKeyDown={handleKeyDown}
         className={cn('cursor-pointer', className)}
       />
-      <AnimatePresence>
-        {mounted === true && (
-          <Ariakit.Tooltip
-            gutter={4}
-            alwaysVisible
-            className="tooltip"
-            render={
-              <motion.div
-                initial={{ opacity: 0, x, y }}
-                animate={{ opacity: 1, x: 0, y: 0 }}
-                exit={{ opacity: 0, x, y }}
-              />
-            }
-          >
-            <Ariakit.TooltipArrow />
-            {enableHTML ? (
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: sanitizedHTML,
-                }}
-              />
-            ) : (
-              description
-            )}
-          </Ariakit.Tooltip>
-        )}
-      </AnimatePresence>
+      <TooltipPopup store={tooltip} description={description} enableHTML={enableHTML} />
     </Ariakit.TooltipProvider>
   );
 });
diff --git a/packages/client/src/svgs/NewChatIcon.tsx b/packages/client/src/svgs/NewChatIcon.tsx
index 52991e9043..20ae52863d 100644
--- a/packages/client/src/svgs/NewChatIcon.tsx
+++ b/packages/client/src/svgs/NewChatIcon.tsx
@@ -2,14 +2,13 @@ import { cn } from '~/utils';
 export default function NewChatIcon({ className = '' }: { className?: string }) {
   return (
     <svg
-      width="24"
-      height="24"
+      width="16"
+      height="16"
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={cn('text-black dark:text-white', className)}
       aria-hidden="true"
-      aria-hidden="true"
     >
       <path
         fillRule="evenodd"