diff --git a/src/components/HeadMenu.astro b/src/components/HeadMenu.astro
index 466b04a..ebf7ac4 100644
--- a/src/components/HeadMenu.astro
+++ b/src/components/HeadMenu.astro
@@ -13,10 +13,8 @@
 
 <script is:inline>
   const updateSelected = () => {
-    let rawPathname = window.location.pathname;
-    const regex = /^\/([^\/]+)(?:\/|$)/;
-    let pathname = rawPathname.match(regex)?.[1]; //获取第一个捕获组
-    pathname = !pathname ? "index" : pathname;
+    let pathname = location.pathname.split("/")[1];
+    pathname ||= "index";
     const e = document.getElementById(pathname);
     if (!e) {
       return;
@@ -37,6 +35,9 @@
     justify-content: space-around;
     height: 3.5rem;
     width: 38rem;
+    max-width: 100dvw;
+    overflow-x: auto;
+    overflow-y: hidden;
     background-color: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(4px);
     border: 1px solid rgba(0, 0, 0, 0.2); /* 添加黑色的边框，宽度为 2px */
@@ -53,6 +54,7 @@
     transition:
       background-color 0.2s ease-in-out,
       color 0.2s ease-in-out;
+    flex-shrink: 0;
   }
 
   .menu > a:hover {
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index dad6acd..8c282fe 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -16,6 +16,7 @@ const { description, keywords ,selected} = Astro.props;
     <meta name="description" content={description} />
     <meta name="keywords" content={keywords} />
     <meta name="author" content="LingLambda" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <title>Ling的小窝</title>
   </head>
   <body>
@@ -45,27 +46,28 @@ const { description, keywords ,selected} = Astro.props;
 </html>
 
 <script>
-  let lastScrollTop = 0;
-  window.addEventListener("scroll", () => {
-    const menu = document.getElementById("menu");
-    if (!menu || !(menu instanceof HTMLElement)) {
-      return;
-    }
-    const scrollTop = window.scrollY;
-    menu.style.top = scrollTop > lastScrollTop ? "-5.5rem" : "0.2rem";
-    lastScrollTop = scrollTop;
-  });
+  const menu = document.getElementById("menu");
+  if (menu instanceof HTMLElement) {
+    let lastScrollTop = 0;
+    addEventListener("scroll", () => {
+      const scrollTop = window.scrollY;
+      menu.style.top = scrollTop > lastScrollTop ? "-5.5rem" : "0.2rem";
+      lastScrollTop = scrollTop;
+    }, { passive: true });
+  }
 </script>
 
 <style>
   * {
     box-sizing: border-box; /* 确保所有元素的宽高包含 padding 和 border */
   }
+
   html {
     background-color: rgb(250, 252, 254);
     /* scrollbar-gutter: stable; */ /* 防止滚动条导致页面宽度不一致 */
     overflow-y: scroll;  /*总是显示滚动条*/
   }
+
   html,
   body {
     margin: 0;
@@ -76,13 +78,14 @@ const { description, keywords ,selected} = Astro.props;
 
   #menu {
     top: 0.2rem;
-    position: fixed;
+    position: sticky;
     transition: top 0.2s ease-in-out;
-    padding: 2rem
+    margin: 2rem;
   }
 
   #container {
-    height: 100%;
+    height: fit-content;
+    min-height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -101,7 +104,6 @@ const { description, keywords ,selected} = Astro.props;
 
   main {
     flex-grow: 1; /* 使 main 占据剩余空间 */
-    margin-top: 8rem;
   }
 
   footer {
@@ -109,12 +111,13 @@ const { description, keywords ,selected} = Astro.props;
     border-top: 1px solid rgb(227, 232, 247); 顶部边框线
     height: auto; /* 让 footer 根据内容自适应高度 */
     width: 100%;
-    background-color: rgb(247, 247, 249);;
+    background-color: rgb(247, 247, 249);
     color: #808080;
     display: flex;
     flex-direction: row;
     justify-content: center;
     padding: 1rem;
+    flex-wrap: wrap;
   }
 
   footer > * {
@@ -124,7 +127,12 @@ const { description, keywords ,selected} = Astro.props;
   h1 {
     font-size: 2rem;
   }
+
   img {
     max-width: 36rem;
   }
+  
+  section {
+    padding: 8%;
+  }
 </style>
diff --git a/src/layouts/FriendsLayout.astro b/src/layouts/FriendsLayout.astro
index 92382f6..d1c1ec1 100644
--- a/src/layouts/FriendsLayout.astro
+++ b/src/layouts/FriendsLayout.astro
@@ -10,7 +10,9 @@ import BaseLayout from "./BaseLayout.astro";
 
 <style>
   #cards {
-    display: grid;
-    grid: auto-flow auto / repeat(2, auto);
+    /* display: grid;
+    grid: auto-flow auto / repeat(2, auto); */
+    display: flex;
+    flex-wrap: wrap;
   }
 </style>
