diff --git a/frontend/src/app/components/menu/menu.component.scss b/frontend/src/app/components/menu/menu.component.scss
index ab1dd5e7c..2a31bdb2c 100644
--- a/frontend/src/app/components/menu/menu.component.scss
+++ b/frontend/src/app/components/menu/menu.component.scss
@@ -2,13 +2,14 @@
   z-index: 10;
   background-color: #1d1f31;
   box-shadow: 0px 0px 15px 0px #000;
-  width: 0px;
+  width: 225px;
   height: calc(100vh - 65px);
   overflow-x: hidden;
   overflow-y: scroll;
   position: fixed;
-  left: 0;
+  left: -225px;
   top: 65px;
+  transition: 0.25s;
   @media (max-width: 991px) {
     height: calc(100vh - 65px - 55px);
   }
@@ -19,10 +20,7 @@
 }
 
 .sidenav.open {
-  width: 225px;
-}
-.sidenav.close {
-  width: 0px;
+  left: 0px;
 }
 
 .sidenav a, button{