diff --git a/src/components/menu.module.scss b/src/components/menu.module.scss
index a2e6d14..77f47d3 100644
--- a/src/components/menu.module.scss
+++ b/src/components/menu.module.scss
@@ -1,7 +1,7 @@
 @reference "../index.scss";
 
 .menu_container {
-  @apply fixed bottom-0 flex min-h-8 min-w-screen flex-row items-center gap-1 border-t border-t-gray-500 bg-white px-1 py-5 md:relative md:min-h-screen md:min-w-[300px] md:flex-col md:gap-4 md:border-t-0 md:border-l md:border-l-gray-500 md:px-5;
+  @apply fixed right-0 bottom-0 left-0 flex min-h-auto flex-row items-center gap-1 border-t border-t-gray-500 bg-white px-1 py-5 md:sticky md:top-0 md:right-0 md:bottom-auto md:left-auto md:min-h-screen md:w-auto md:flex-col md:gap-4 md:border-t-0 md:border-l md:border-l-gray-500 md:px-5 md:py-5;
 }
 
 .menu_item {
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
index c4b7e82..91c0c90 100644
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -5,8 +5,8 @@ import { Route, Router, useLocation } from "preact-iso";
 const ProfilePage: FunctionComponent = () => {
   const { route } = useLocation();
   return (
-    <div class="flex min-w-screen flex-row justify-between">
-      <div class="w-full overflow-x-hidden overflow-y-auto px-3 pb-20 break-all md:pb-0">
+    <div class="flex h-screen flex-col md:flex-row">
+      <div class="flex-1 overflow-y-auto px-3 pb-20 break-all md:pb-0">
         <Router>
           <Route
             path="/settings"
@@ -92,7 +92,9 @@ const ProfilePage: FunctionComponent = () => {
           />
         </Router>
       </div>
-      <Menu />
+      <div className="md:sticky md:top-0 md:h-screen">
+        <Menu />
+      </div>
     </div>
   );
 };