diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index 35386ec..cf5e055 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -17,9 +17,9 @@ const Sidebar = () => {
   const isMobile = useWindowSize();
   const router = useRouter();
   const [active, setActive] = useState(isMobile);
-  const { maps, isLoading, isError }:{ maps: ReadyOrNotMap[], isLoading: boolean, isError: boolean} = useNavbar();
+  const { maps, isLoading, isError }: { maps: ReadyOrNotMap[], isLoading: boolean, isError: boolean } = useNavbar();
 
-  if(typeof(isMobile) === "boolean" && typeof(active) === "undefined") {
+  if (typeof (isMobile) === "boolean" && typeof (active) === "undefined") {
     setActive(!isMobile);
   }
 
@@ -47,13 +47,15 @@ const Sidebar = () => {
     return (
       <>
         <div className={styles.sidebar} onClick={() => setActive(!active)}>
-          <nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
-            {maps.map((item) => (
-              <Link key={item.name} href={item.href}>
-                <a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active : styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
-              </Link>
-            ))}
-          </nav>
+          <div className={[styles.sl_wrapper, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
+            <nav className={styles.sidebarList}>
+              {maps.map((item) => (
+                <Link key={item.name} href={item.href}>
+                  <a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active : styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
+                </Link>
+              ))}
+            </nav>
+          </div>
           <div className={styles.sidebarArrow}>
             <Image src={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<"} />
           </div>
diff --git a/styles/ReadyOrNot.module.css b/styles/ReadyOrNot.module.css
index 2577839..9c46365 100644
--- a/styles/ReadyOrNot.module.css
+++ b/styles/ReadyOrNot.module.css
@@ -174,15 +174,16 @@
 
 .sidebarList {
   overflow-y: scroll;
+  overflow-x: hidden;
   scrollbar-width: none;
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: 2rem;
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: flex-start;
   background-color: var(--background_grey_opaque);
+  padding: 2rem;
 }
 
 .sidebar::-webkit-scrollbar {
@@ -190,15 +191,28 @@
   background: transparent;
 }
 
+.sl_wrapper {
+  height: 100%;
+  overflow: hidden;
+  transition-property: width, visibility;
+  transition-timing-function: ease-in-out, linear;
+  transition-duration: 0.3s, 0s;
+}
+
 .sl_active  {
-  display: flex;
+  visibility: visible;
+  width: 97%;
+  transition-delay: 0s, 0s;
 }
 
 .sl_inactive {
-  display: none;
+  visibility: hidden;
+  width: 0;
+  transition-delay: 0s, 0.3s;
 }
 
 .navElem {
+  white-space:nowrap;
   font-size: 14pt;
   width: auto;
   border-radius: 5px;