diff --git a/src/components/ui/Sidebar.module.css b/src/components/ui/Sidebar.module.css
index e85e6b8..ac10c15 100644
--- a/src/components/ui/Sidebar.module.css
+++ b/src/components/ui/Sidebar.module.css
@@ -8,6 +8,7 @@
   flex-shrink: 0;
 }
 
+
 .Menu {
   display: flex;
   flex-direction: column;
@@ -34,9 +35,41 @@
   background-color: var(--color-text);
   border-radius: 1rem;
 
-  transition: height 0.2s ease;
+  transition: height 0.2s ease, width 0.2s ease;
 }
 
 .Menu li:hover::after, .Menu li.Active::after {
   height: 100%;
 }
+
+
+@media (max-width: 600px) {
+  .Sidebar {
+    width: 100%;
+    height: 100px;
+  }
+
+  .Menu {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: .5rem;
+  }
+
+  .Menu li {
+    padding: .5rem 1rem;
+  }
+
+  .Menu li::after {
+    left: 0;
+    bottom: 1px;
+    width: 0;
+    height: 3px;
+  }
+
+  .Menu li:hover::after, .Menu li.Active::after {
+    width: 100%;
+    height: 3px;
+  }
+}
diff --git a/src/routes/index.module.css b/src/routes/index.module.css
index ac85ca7..f6a411d 100644
--- a/src/routes/index.module.css
+++ b/src/routes/index.module.css
@@ -2,6 +2,12 @@
   display: flex;
 }
 
+@media (max-width: 600px) {
+  .SidebarPage {
+    flex-direction: column;
+  }
+}
+
 .ContentWrapper {
   height: 100vh;
   width: 100%;