diff --git a/public/service-worker.js b/public/service-worker.js
new file mode 100644
index 0000000..b80ccfd
--- /dev/null
+++ b/public/service-worker.js
@@ -0,0 +1,30 @@
+// public/service-worker.js
+
+self.addEventListener('install', function(event) {
+    console.log('Service Worker 安装成功');
+    self.skipWaiting(); // 跳过等待，强制立即激活
+  });
+  
+  self.addEventListener('activate', function(event) {
+    console.log('Service Worker 激活成功');
+    event.waitUntil(
+      self.clients.claim() // 让新的 Service Worker 立即接管所有页面
+    );
+  });
+  
+  self.addEventListener('fetch', function(event) {
+    const url = event.request.url;
+    
+    // 拦截包含 'adsense' 的请求
+    if (url.includes('adsense')) {
+      console.log('拦截到广告请求:', url);
+      
+      // 拦截请求并返回空响应
+      event.respondWith(new Response(null, { status: 204 }));
+      return;
+    }
+  
+    // 正常处理其他请求
+    event.respondWith(fetch(event.request));
+  });
+  
\ No newline at end of file
diff --git a/src/assets/base.css b/src/assets/base.css
index c14278e..76713e5 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -80,7 +80,6 @@
 *::after {
   box-sizing: border-box;
   margin: 0;
-  font-weight: normal;
 }
 
 body {
@@ -109,3 +108,19 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.root {
+  --center-abs-margin: 180px;
+}
+
+@media (min-width: 1124px) and (max-width: 1300px) {
+  .root {
+      --center-abs-margin: calc((100vw - 1068px) / 2);
+  }
+}
+
+@media (min-width: 1475px) and (max-width: 1675px) {
+  .root {
+      --center-abs-margin: calc(25vw + -188.75px);
+  }
+}
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index 9ccec36..9888cb8 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,7 +1,5 @@
 @import './base.css';
 
-
-
 a,
 .green {
   text-decoration: none;
@@ -68,6 +66,45 @@ a,
   border: none !important;
 }
 
+.gsc-search-box.gsc-search-box-tools {
+  display: flex;
+  z-index: 3;
+  position: relative;
+  min-height: 44px;
+  border: 1px solid transparent;
+  background: #fff;
+  box-shadow: 0 2px 5px 1px rgba(64, 60, 67, .16);
+  border-radius: 24px;
+  margin: 0 auto;
+  padding-left: 12px;
+  padding-right: 12px;
+  width: 692px;
+  height: 46px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .gsc-search-box.gsc-search-box-tools {
+    background: #333333;
+    /* 改为深色背景 */
+    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, .3);
+    /* 调整阴影颜色，适配深色背景 */
+    border: 1px solid #555555;
+    /* 使用深灰色边框来代替透明 */
+  }
+
+  .gsc-input-box .gsc-input,
+  .gsc-input-box .gsc-input:focus {
+    color: #ffffff !important;
+    /* 将文本颜色设为白色以适配深色背景 */
+  }
+
+  .gsc-search-button-v2 {
+    background-color: #444444 !important;
+    /* 按钮背景设为深灰色或其他深色 */
+  }
+}
+
+
 /* 修改搜索结果样式 */
 .gsc-result {
   background-color: transparent !important;
@@ -94,7 +131,7 @@ a,
   font-family: var(--fr-font-family), var(--fr-font-basefont) !important;
   text-shadow: var(--fr-font-shadow) !important;
   -webkit-text-stroke: var(--fr-font-stroke) !important;
-  font-size: 22px !important;
+  font-size: 1.35rem !important;
   line-height: 28px !important;
   font-weight: 400 !important;
   margin-bottom: 5px !important;
@@ -121,22 +158,6 @@ a,
   font-size: 14px !important;
 }
 
-.gsc-search-box.gsc-search-box-tools {
-  display: flex;
-  z-index: 3;
-  position: relative;
-  min-height: 44px;
-  border: 1px solid transparent;
-  background: #fff;
-  box-shadow: 0 2px 5px 1px rgba(64, 60, 67, .16);
-  border-radius: 24px;
-  margin: 0 auto;
-  padding-left: 12px;
-  padding-right: 12px;
-  width: 692px;
-  height: 46px;
-}
-
 /* 隐藏图片 */
 .gs-image-box {
   display: none;
@@ -144,7 +165,7 @@ a,
 
 .gsc-above-wrapper-area {
   /* border-bottom: 1px solid #e9e9e9; */
-  padding: 5px 0 0 0;
+  padding: 0 0 0 0 !important;
   border: none !important;
 }
 
@@ -180,9 +201,72 @@ a,
 
 .gsc-cursor-page {
   background-color: transparent !important;
+
   color: var(--color-text);
+  font-size: 1.2rem;
 }
 
 .gsc-results .gsc-cursor-box {
   margin: 5px !important;
+}
+
+
+/* 表格容器样式 */
+table.gsc-completion-container {
+  width: 601px; /* 保持原有宽度 */
+  position: absolute; /* 保持绝对定位 */
+  left: 203px; /* 保持原有左边距 */
+  top: 69px; /* 保持原有顶部距离 */
+  background-color: #ffffff; /* 默认背景色 */
+  border-radius: 4px; /* 边角圆润 */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
+  overflow: hidden;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加轻微阴影效果 */
+  border: 1px solid transparent; /* 设置透明边框，以避免默认边框影响 */
+}
+
+/* 单元格样式 */
+table.gsc-completion-container td {
+  padding: 12px; /* 内边距 */
+  transition: background-color 0.3s, color 0.3s; /* 背景和文字色变换效果 */
+}
+
+/* 字体样式 */
+table.gsc-completion-container span {
+  color: #333; /* 默认文字颜色 */
+  font-size: 16px; /* 字体大小 */
+}
+
+/* 黑暗模式样式 */
+@media (prefers-color-scheme: dark) {
+  table.gsc-completion-container {
+      background-color: #1e1e1e; /* 黑暗模式背景色 */
+  }
+
+  table.gsc-completion-container td { 
+      background-color: #1e1e1e; /* 黑暗模式单元格背景色 */
+      color: #f0f0f0; /* 黑暗模式文字色 */
+  }
+
+  table.gsc-completion-container span {
+      color: #f0f0f0; /* 黑暗模式文字色 */
+  }
+}
+
+/* 标签字体大小设置 */
+.gsc-refinementHeader.gsc-inline-block {
+  font-size: 16px;
+}
+
+.gsc-result-info {
+  color: #676767;
+  font-size: 13px;
+  margin: 0;
+  padding: 4px 4px 4px 4px;
+  text-align: left;
+}
+
+/* 把原生的X删了 */
+a.gsst_a {
+  display: none;
 }
\ No newline at end of file
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 162a7f6..5b3d00d 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,6 +1,14 @@
 <template>
   <div class="home">
-    <div class="gcse-searchbox-only" data-resultsUrl="search"></div>
+    <div class="about">
+      <a href="#about">关于</a>
+    </div>
+    <div class="logo">
+      Luxirty Search
+    </div>
+    <div class="search-container">
+      <div class="gcse-searchbox-only" data-resultsUrl="search"></div>
+    </div>
   </div>
 </template>
 
@@ -16,11 +24,39 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .home {
+  position: relative;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo {
+  position: absolute;
+  top: 35vh; /* 从 30vh 增加到 35vh */
+  font-size: 48px;
+  font-weight: bold;
+}
+
+.search-container {
+  position: absolute;
+  top: calc(35vh + 100px); /* 相应地调整，保持与 logo 的相对位置 */
+  width: 100%;
   display: flex;
   justify-content: center;
-  align-items: center;
-  height: 100vh;
+}
+
+.about {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+
+.about a {
+  text-decoration: none;
+  font-size: 16px;
+  color: var(--uv-styles-color-text-default);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Results.vue b/src/components/Results.vue
index bbbb2e7..703d043 100644
--- a/src/components/Results.vue
+++ b/src/components/Results.vue
@@ -1,20 +1,16 @@
 <template>
-  <div>
-    <div class="my-container">
-      <div class="search-container" id="searchContainer">
-        <h1 class="search-title">Luxirty search</h1>
-        <div class="gcse-searchbox"></div>
-      </div>
-      <div class="search-result-zone">
-        <div class="gcse-searchresults"></div>
-      </div>
+  <div class="my-container">
+    <div class="search-container" id="searchContainer">
+      <h1 class="search-title">Luxirty Search</h1>
+      <div class="gcse-searchbox"></div>
+    </div>
+    <div class="search-result-zone">
+      <div class="gcse-searchresults"></div>
     </div>
-
     <footer>
       <p>
-        &copy; made by <a href="https://your-website.com">Luxirty</a> |
+        &copy; Create by <a href="https://your-website.com">Luxirty</a> with love |
         <a href="https://github.com/your-username" target="_blank">
-          <img :src="githubIcon" alt="GitHub">
           GitHub
         </a>
       </p>
@@ -63,12 +59,14 @@ export default {
 </script>
 
 <style scoped>
-
 .my-container {
-  width: 100%;
+  display: flex;
+  flex-direction: column;
+  /* 让子元素垂直排列 */
+  min-height: 100vh;
+  /* 让容器占满整个视窗高度 */
   max-width: var(--center-width);
   min-width: 320px;
-  flex-grow: 1;
   box-sizing: border-box;
 }
 
@@ -78,6 +76,7 @@ export default {
   margin-bottom: 20px;
   margin-top: 26px;
   margin-left: 28px;
+  min-height: 48px;
 }
 
 .search-title {
@@ -87,6 +86,18 @@ export default {
   white-space: nowrap;
 }
 
+/* 黑暗模式样式 */
+@media (prefers-color-scheme: dark) {
+  .search-title {
+    color: #d1d5db; /* 黑暗模式下的颜色 */
+  }
+}
+
+.search-result-zone {
+  flex-grow: 1;
+  /* 让搜索结果区占据剩余空间 */
+}
+
 /* Footer styles */
 footer {
   background-color: #f8f9fa;
@@ -102,7 +113,6 @@ footer a {
   color: #345a80;
   text-decoration: none;
   transition: color 0.3s ease;
-  margin: 0 5px;
 }
 
 footer a:hover {
@@ -118,4 +128,23 @@ footer img {
   opacity: 0.8;
 }
 
+@media (prefers-color-scheme: dark) {
+  footer {
+    background-color: #222222; /* 深色背景 */
+    color: #cccccc; /* 浅灰色字体，确保可读性 */
+    border-top: 1px solid #444444; /* 深色边框 */
+  }
+
+  footer a {
+    color: #80a0c2; /* 链接颜色改为浅色 */
+  }
+
+  footer a:hover {
+    color: #a0c3e0; /* 悬停时的链接颜色略微加亮 */
+  }
+
+  footer img {
+    opacity: 0.9; /* 提高图像的亮度，适应深色背景 */
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 5a5dbdb..325d65b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,4 +8,19 @@ const app = createApp(App)
 
 app.use(router)
 
-app.mount('#app')
+// 注册 Service Worker
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/service-worker.js').then((registration) => {
+      console.log('Service Worker 注册成功，作用域为: ', registration.scope);
+      return registration.update();  // 立即更新 Service Worker
+    }).then(() => {
+      app.mount('#app');  // 确保在 Service Worker 注册后再挂载 Vue 实例
+    }).catch((err) => {
+      console.error('Service Worker 注册失败: ', err);
+      app.mount('#app');  // 即使注册失败，也要确保 Vue 挂载
+    });
+  });
+} else {
+  app.mount('#app');  // 如果浏览器不支持 Service Worker，继续正常挂载
+}