diff --git a/app/javascript/src/components/SideNav.tsx b/app/javascript/src/components/SideNav.tsx
index 68917e9..8068009 100644
--- a/app/javascript/src/components/SideNav.tsx
+++ b/app/javascript/src/components/SideNav.tsx
@@ -37,32 +37,33 @@ export const SideNav = () => {
     <>
       <Transition
         show={sideNavExpanded}
-        enter="transition-opacity duration-500 z-30"
-        enterFrom="opacity-0 z-30"
-        enterTo="opacity-100 z-30"
-        leave="transition-opacity duration-500 z-30"
-        leaveFrom="opacity-100 z-30"
-        leaveTo="opacity-0 z-30"
+        className="z-30"
+        enter="transition-opacity duration-500"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity duration-500"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
       >
         <div
           role="none"
           onKeyPress={handleKeyPress}
           onClick={() => handleCloseSideNav()}
-          className="xl:hidden absolute w-full h-full bg-black bg-opacity-60 z-30"
+          className="xl:hidden absolute w-full h-full bg-black bg-opacity-60"
         />
       </Transition>
 
       <Transition
-        className="h-full"
-        show={sideNavExpanded || window.screenY >= 1280}
-        enter="transition-opacity duration-500 z-40"
-        enterFrom="opacity-0 z-40"
-        enterTo="opacity-100 z-40"
-        leave="transition-opacity duration-500 z-40"
+        className="z-40"
+        show={sideNavExpanded || window.screen.width >= 1280}
+        enter="transition-opacity duration-500"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity duration-500"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
       >
-        <aside className="bg-white w-5/6 md:w-2/6 overflow-hidden absolute h-full drop-shadow-xl drop border-r border-gray-200 z-40 xl:transition-none xl:mx-0 xl:static xl:w-full mx-0">
+        <aside className="bg-white w-5/6 md:w-2/6 overflow-hidden absolute xl:static h-full drop-shadow-xl drop border-r border-gray-200 z-40 xl:transition-none xl:mx-0 xl:w-64 mx-0">
           <ul>
             {MenuItems.map((item) => (
               <Link to={item.path} key={item.label} role="menuitem">