diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b2f69c5b..b0c6cb2d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,13 +9,13 @@ export default function App() {
   const [navState, setNavState] = useState<ActiveState>('ACTIVE');
 
   return (
-    <div className="min-h-full min-w-full transition-all">
+    <div className="min-h-full min-w-full">
       <Navigation
         navState={navState}
         setNavState={(val: ActiveState) => setNavState(val)}
       />
       <div
-        className={`${
+        className={`transition-all duration-200 ${
           navState === 'ACTIVE' ? 'ml-0 md:ml-72 lg:ml-96' : ' ml-0 md:ml-16'
         }`}
       >
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 48563938..2b4fd23f 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -24,71 +24,62 @@ export default function Navigation({
   const [apiKeyModalState, setApiKeyModalState] = useState<ActiveState>(
     isApiKeySet ? 'INACTIVE' : 'ACTIVE',
   );
-  const openNav = (
-    <div className="fixed z-10 h-full w-72 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:visible md:flex lg:w-96">
-      <div className={'h-16 w-full border-b-2 border-gray-100'}>
-        <button
-          className="float-right mr-5 mt-5 h-5 w-5"
-          onClick={() => setNavState('INACTIVE')}
-        >
-          <img
-            src={Arrow1}
-            alt="menu toggle"
-            className={'m-auto w-3 rotate-0 transition-all'}
-          />
-        </button>
-      </div>
-      <div className="flex-grow border-b-2 border-gray-100"></div>
-
-      <div className="flex h-16 flex-col border-b-2 border-gray-100">
-        <div
-          className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
-          onClick={() => {
-            setApiKeyModalState('ACTIVE');
-          }}
-        >
-          <img src={Key} alt="key" className="ml-2 w-6" />
-          <p className="my-auto text-eerie-black">Reset Key</p>
-        </div>
-      </div>
-
-      <div className="flex h-48 flex-col border-b-2 border-gray-100">
-        <NavLink
-          to="/about"
-          className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
-        >
-          <img src={Info} alt="info" className="ml-2 w-5" />
-          <p className="my-auto text-eerie-black">About</p>
-        </NavLink>
-
-        <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
-          <img src={Link} alt="link" className="ml-2 w-5" />
-          <p className="my-auto text-eerie-black">Discord</p>
-        </div>
-
-        <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
-          <img src={Link} alt="link" className="ml-2 w-5" />
-          <p className="my-auto text-eerie-black">Github</p>
-        </div>
-      </div>
-    </div>
-  );
-
-  const closedNav = (
+  return (
     <>
-      <div className="fixed z-10 hidden h-full w-16 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all md:flex">
-        <div className={'h-16 w-16 border-b-2 border-gray-100'}>
+      <div
+        className={`${
+          navState === 'INACTIVE' && '-ml-96 md:-ml-60 lg:-ml-80'
+        } fixed z-10 flex h-full w-72 flex-col border-r-2 border-gray-100 bg-gray-50 transition-all duration-200 lg:w-96`}
+      >
+        <div className={'h-16 w-full border-b-2 border-gray-100'}>
           <button
             className="float-right mr-5 mt-5 h-5 w-5"
-            onClick={() => setNavState('ACTIVE')}
+            onClick={() =>
+              setNavState(navState === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE')
+            }
           >
             <img
               src={Arrow1}
               alt="menu toggle"
-              className={'m-auto w-3 rotate-180 transition-all'}
+              className={`${
+                navState === 'INACTIVE' ? 'rotate-180' : 'rotate-0'
+              }  m-auto w-3 transition-all duration-200`}
             />
           </button>
         </div>
+        <div className="flex-grow border-b-2 border-gray-100"></div>
+
+        <div className="flex h-16 flex-col border-b-2 border-gray-100">
+          <div
+            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
+            onClick={() => {
+              setApiKeyModalState('ACTIVE');
+            }}
+          >
+            <img src={Key} alt="key" className="ml-2 w-6" />
+            <p className="my-auto text-eerie-black">Reset Key</p>
+          </div>
+        </div>
+
+        <div className="flex h-48 flex-col border-b-2 border-gray-100">
+          <NavLink
+            to="/about"
+            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
+          >
+            <img src={Info} alt="info" className="ml-2 w-5" />
+            <p className="my-auto text-eerie-black">About</p>
+          </NavLink>
+
+          <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
+            <img src={Link} alt="link" className="ml-2 w-5" />
+            <p className="my-auto text-eerie-black">Discord</p>
+          </div>
+
+          <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
+            <img src={Link} alt="link" className="ml-2 w-5" />
+            <p className="my-auto text-eerie-black">Github</p>
+          </div>
+        </div>
       </div>
       <button
         className="fixed mt-5 ml-6 h-6 w-6 md:hidden"
@@ -96,12 +87,6 @@ export default function Navigation({
       >
         <img src={Hamburger} alt="menu toggle" className="w-7" />
       </button>
-    </>
-  );
-
-  return (
-    <>
-      {navState === 'ACTIVE' ? openNav : closedNav}
       <APIKeyModal
         modalState={apiKeyModalState}
         setModalState={setApiKeyModalState}