diff --git a/web/src/components/Footer.js b/web/src/components/Footer.js
index 9d5c9ac..1eb77c9 100644
--- a/web/src/components/Footer.js
+++ b/web/src/components/Footer.js
@@ -11,7 +11,7 @@ const Footer = () => {
   });
 
   return (
-    <Segment vertical>
+    <Segment vertical basic>
       <Container textAlign='center'>
         {Footer === '' ? (
           <div className='custom-footer'>
diff --git a/web/src/components/Header.js b/web/src/components/Header.js
index bb2a61c..159f260 100644
--- a/web/src/components/Header.js
+++ b/web/src/components/Header.js
@@ -168,7 +168,7 @@ const Header = () => {
 
   return (
     <>
-      <Menu borderless style={{ borderTop: 'none' }}>
+      <Menu borderless fixed='top' style={{ borderTop: 'none' }}>
         <Container>
           <Menu.Item as={Link} to='/' className={'hide-on-mobile'}>
             <img src='/logo.png' alt='logo' style={{ marginRight: '0.75em' }} />
diff --git a/web/src/index.css b/web/src/index.css
index 344e1be..10b7841 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -13,7 +13,7 @@
 
 body {
   margin: 0;
-  padding-top: 55px;
+  padding-top: 70px; /* Increased for better header separation */
   overflow-y: scroll;
   font-family: Lato, 'Helvetica Neue', Arial, Helvetica, "Microsoft YaHei", sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -32,7 +32,9 @@ code {
 }
 
 .main-content {
-  padding: 4px;
+  padding: 24px; /* Increased padding */
+  max-width: 1200px; /* Limit width for better readability */
+  margin: 0 auto;
 }
 
 .small-icon .icon {
@@ -87,6 +89,13 @@ a:hover {
   border-radius: 50% !important;
 }
 
+/* New Helper to remove shadow */
+.neu-no-shadow {
+    box-shadow: none !important;
+    background: transparent !important;
+    border: none !important;
+}
+
 /* Semantic UI Overrides */
 
 /* Segments, Cards, Messages */
@@ -101,6 +110,13 @@ a:hover {
   color: var(--neu-text) !important;
 }
 
+/* Special class for transparent segments */
+.ui.basic.segment {
+    box-shadow: none !important;
+    background: transparent !important;
+    border: none !important;
+}
+
 .ui.card > .content > .header,
 .ui.cards > .card > .content > .header,
 .ui.header {
@@ -126,6 +142,7 @@ a:hover {
   border-radius: 10px !important;
   transition: all 0.2s ease !important;
   font-weight: 600 !important;
+  margin-right: 8px !important; /* Add spacing between buttons */
 }
 
 .ui.button:hover {
@@ -191,24 +208,33 @@ a:hover {
   box-shadow: none !important;
 }
 
+/* Fixed Header Style */
 .ui.menu.fixed {
     box-shadow: 0px 4px 10px var(--neu-shadow-dark) !important;
+    z-index: 1000;
 }
 
 .ui.menu .item {
     color: var(--neu-text) !important;
+    margin: 0 4px !important;
+    border-radius: 8px !important;
+    transition: all 0.2s ease;
 }
 
 .ui.menu .item:before {
     background: transparent !important;
 }
 
+.ui.menu .item:hover {
+    background: transparent !important;
+    box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light) !important;
+}
+
 .ui.menu .active.item {
     background: transparent !important;
     color: var(--neu-accent) !important;
     font-weight: bold !important;
     box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light) !important;
-    border-radius: 8px !important;
 }
 
 /* Dropdown */
diff --git a/web/src/pages/Home/index.js b/web/src/pages/Home/index.js
index b760e9b..3f78c6d 100644
--- a/web/src/pages/Home/index.js
+++ b/web/src/pages/Home/index.js
@@ -40,7 +40,7 @@ const Home = () => {
         </>
       ) : (
         <>
-          <Segment>
+          <Segment basic>
             <Header as='h3'>系统状况</Header>
             <Grid columns={2} stackable>
               <Grid.Column>