diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 9c5de77f..9882ca9c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -33,13 +33,13 @@ function MainLayout() {
   const [navOpen, setNavOpen] = useState(!(isMobile || isTablet));
 
   return (
-    <div className="relative h-screen overflow-hidden dark:bg-raisin-black">
+    <div className="dark:bg-raisin-black relative h-screen overflow-hidden">
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
       <ActionButtons showNewChat={true} showShare={true} />
       <div
-        className={`h-[calc(100dvh-64px)] overflow-auto lg:h-screen ${
+        className={`h-[calc(100dvh-64px)] overflow-auto transition-all duration-300 ease-in-out lg:h-screen ${
           !(isMobile || isTablet)
-            ? `ml-0 ${!navOpen ? 'lg:mx-auto' : 'lg:ml-72'}`
+            ? `${navOpen ? 'lg:ml-72' : 'lg:ml-0'}`
             : 'ml-0 lg:ml-16'
         }`}
       >
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index aed38181..f3850da9 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -292,20 +292,26 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   useDefaultDocument();
   return (
     <>
-      {!navOpen && (
-        <div className="absolute top-3 left-3 z-20 hidden transition-all duration-25 lg:block">
+      {(isMobile || isTablet) && navOpen && (
+        <div
+          className="fixed inset-0 z-10 bg-black opacity-50 transition-opacity duration-300"
+          onClick={() => setNavOpen(false)}
+        />
+      )}
+
+      {
+        <div className="absolute top-3 left-3 z-20 hidden transition-all duration-300 ease-in-out lg:block">
           <div className="flex items-center gap-3">
             <button
               onClick={() => {
                 setNavOpen(!navOpen);
               }}
+              className="transition-transform duration-200 hover:scale-110"
             >
               <img
                 src={Expand}
                 alt="Toggle navigation menu"
-                className={`${
-                  !navOpen ? 'rotate-180' : 'rotate-0'
-                } m-auto transition-all duration-200`}
+                className="m-auto transition-all duration-300 ease-in-out"
               />
             </button>
             {queries?.length > 0 && (
@@ -313,6 +319,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 onClick={() => {
                   newChat();
                 }}
+                className="transition-transform duration-200 hover:scale-110"
               >
                 <img
                   src={openNewChat}
@@ -326,12 +333,12 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             </div>
           </div>
         </div>
-      )}
+      }
       <div
         ref={navRef}
         className={`${
           !navOpen && '-ml-96 md:-ml-72'
-        } bg-lotion dark:border-r-purple-taupe dark:bg-chinese-black fixed top-0 z-20 flex h-full w-72 flex-col border-r border-b-0 transition-all duration-20 dark:text-white`}
+        } bg-lotion dark:border-r-purple-taupe dark:bg-chinese-black fixed top-0 z-20 flex h-full w-72 flex-col border-r border-b-0 transition-all duration-300 ease-in-out dark:text-white`}
       >
         <div
           className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
@@ -358,9 +365,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <img
               src={Expand}
               alt="Toggle navigation menu"
-              className={`${
-                !navOpen ? 'rotate-180' : 'rotate-0'
-              } m-auto transition-all duration-200`}
+              className="m-auto transition-all duration-300 ease-in-out hover:scale-110"
             />
           </button>
         </div>