diff --git a/client/src/components/Chat/Header.tsx b/client/src/components/Chat/Header.tsx
index 8a9bd80c23..93a265f4a2 100644
--- a/client/src/components/Chat/Header.tsx
+++ b/client/src/components/Chat/Header.tsx
@@ -39,7 +39,7 @@ export default function Header() {
         <div className="mx-1 flex items-center gap-2">
           <div
             className={`flex items-center gap-2 ${
-              !isSmallScreen ? 'transition-all duration-500 ease-in-out' : ''
+              !isSmallScreen ? 'transition-all duration-200 ease-in-out' : ''
             } ${
               !navVisible
                 ? 'translate-x-0 opacity-100'
@@ -51,7 +51,7 @@ export default function Header() {
           </div>
           <div
             className={`flex items-center gap-2 ${
-              !isSmallScreen ? 'transition-all duration-500 ease-in-out' : ''
+              !isSmallScreen ? 'transition-all duration-200 ease-in-out' : ''
             } ${!navVisible ? 'translate-x-0' : 'translate-x-[-100px]'}`}
           >
             <ModelSelector startupConfig={startupConfig} />
diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx
index d425468ca6..a692274719 100644
--- a/client/src/components/Nav/Nav.tsx
+++ b/client/src/components/Nav/Nav.tsx
@@ -30,7 +30,7 @@ const NavMask = memo(
       id="mobile-nav-mask-toggle"
       role="button"
       tabIndex={0}
-      className={`nav-mask transition-opacity duration-500 ease-in-out ${navVisible ? 'active opacity-100' : 'opacity-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 === ' ') {
@@ -186,7 +186,7 @@ const Nav = memo(
         <div
           data-testid="nav"
           className={cn(
-            'nav active max-w-[320px] flex-shrink-0 transform overflow-x-hidden bg-surface-primary-alt transition-all duration-500 ease-in-out',
+            'nav active max-w-[320px] flex-shrink-0 transform overflow-x-hidden bg-surface-primary-alt transition-all duration-200 ease-in-out',
             'md:max-w-[260px]',
           )}
           style={{
@@ -197,7 +197,7 @@ const Nav = memo(
           <div className="h-full w-[320px] md:w-[260px]">
             <div className="flex h-full flex-col">
               <div
-                className={`flex h-full flex-col transition-opacity duration-500 ease-in-out ${navVisible ? 'opacity-100' : 'opacity-0'}`}
+                className={`flex h-full flex-col transition-opacity duration-200 ease-in-out ${navVisible ? 'opacity-100' : 'opacity-0'}`}
               >
                 <div className="flex h-full flex-col">
                   <nav