diff --git a/templates/book.html b/templates/book.html
index 32452fa..f500658 100644
--- a/templates/book.html
+++ b/templates/book.html
@@ -76,14 +76,14 @@
         <div class="header">
             <div class="movie-poster">
                 <!-- 封面 -->
-                <img src="/api/img/{{ id }}/1?mini=yes" alt="封面" style="max-width: 100%;">
+                <img class="img-thumbnail" src="/api/img/{{ id }}/1?mini=yes" alt="封面" style="max-width: 100%;">
             </div>
             <div class="movie-details">
                 <!-- 详细信息 -->
                 <h1>{{ data[0][2] }}</h1>
                 <h2>时间: {{time}}</h2>
                 <h2>暂无评价</h2>
-                <button onclick="window.location.href='/view/{{ id }}'">在线浏览</button>
+                <button class="btn btn-primary" onclick="window.location.href='/view/{{ id }}'">在线浏览</button>
             </div>
         </div>
         <div class="comments-section">
diff --git a/templates/overview.html b/templates/overview.html
index 771d5dc..5b120ec 100644
--- a/templates/overview.html
+++ b/templates/overview.html
@@ -39,28 +39,23 @@
       }
     }
 
-    .image {
-      max-width: 100%;
-      height: auto;
-      cursor: pointer;
-    }
-
-    #imageContainer {
-      display: none;
-      justify-content: center;
-      align-items: center;
+    #global-blur {
+      background-color: rgba(255, 255, 255, 0.5);
       position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      z-index: 9999;
-      max-height: 90%;
-      max-width: 90%;
-    }
-
-    #imageContainer img {
-      max-width: 100%;
-      height: auto;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      /* 模糊度可以根据需要调整 */
+      transition: display;
+      z-index: 1;
+      /* 保证遮罩在页面上方 */
+      pointer-events: none;
+      /* 确保遮罩不影响下方元素的交互 */
+      opacity: 0;
+      transition: opacity 0.1s ease
     }
   </style>
 </head>
@@ -68,33 +63,41 @@
 <body>
   <div class="input-group">
     <input type="text" class="form-control" id="search_text" placeholder="键入以搜索">
-    <button class="btn btn-secondary" type="button" onclick="window.location.href='/overview/1?search='+document.getElementById('search_text').value">Search</button>
+    <button class="btn btn-secondary" type="button"
+      onclick="window.location.href='/overview/1?search='+document.getElementById('search_text').value">Search</button>
   </div>
-  <hr/>
+  <hr />
   <div id="gallery">
     {% for item in list %}
-    <div class="image-container">
-      <img src="/api/img/{{ item[1] }}/1?mini=yes" class="image" onclick="linkjump('{{ item[1] }}')" />
-      <span>{{ item[2] }}</span>
+    <div class="card">
+      <img src="/api/img/{{ item[1] }}/1?mini=yes" class="img-thumbnail card-img-top"
+        onclick="linkjump('{{ item[1] }}')" />
+      <div class="card-body">
+        <p class="card-text">{{ item[2] }}</p>
+      </div>
     </div>
     {% endfor %}
   </div>
-  <div style="display:flex;justify-content: center; align-items:center;">
-    <div class="btn-group" role=" toolbar" aria-label="Toolbar with button groups">
+  <hr />
+  <div style=display:flex;justify-content:center;align-items:center;>
+    <ul class="pagination">
+      <li class="page-item">
+        <a class="page-link">Page</a>
+      </li>
       {% for item in lastPageList %}
-      <button type="button" class="btn btn-primary" onclick="switchPage('{{item}}')">{{item}}</button>
+      <li class="page-item"><a class="page-link" onclick="switchPage('{{item}}')">{{item}}</a></li>
       {% endfor %}
-    </div>
-    <div class="btn-group" role=" group" aria-label="Second group">
-      <button type="button" class="btn btn-info">{{pagenow}}</button>
-    </div>
-    <div class="btn-group" role="group" aria-label="Third group">
+      <li class="page-item active" aria-current="page">
+        <a class="page-link">{{pagenow}}</a>
+      </li>
       {% for item in nextPageList %}
-      <button type="button" class="btn btn-primary" onclick="switchPage('{{item}}')">{{item}}</button>
+      <li class="page-item"><a class="page-link" onclick="switchPage('{{item}}')">{{item}}</a></li>
       {% endfor %}
-    </div>
+      <ul>
   </div>
 
+  <div id="global-blur" onclick="unshow_global_blur()"></div>
+
   <script>
     function linkjump(url) {
       window.open("/book/" + url)
@@ -102,6 +105,25 @@
     function switchPage(pagemun) {
       window.location.replace("/overview/" + pagemun)
     }
+
+
+    document.addEventListener('visibilitychange', documentVisibilityChange)
+    global_blur = document.getElementById("global-blur")
+
+    function documentVisibilityChange() {
+      if (document.visibilityState === "hidden") {
+        global_blur.style.opacity = 1;
+        global_blur.style.pointerEvents = "auto";
+      }
+      if (document.visibilityState === "visible") {
+      }
+    }
+
+    function unshow_global_blur() {
+      global_blur.style.opacity = 0;
+      global_blur.style.pointerEvents = "none";
+    }
+
   </script>
 </body>
 
diff --git a/templates/upload.html b/templates/upload.html
index fe5fc45..3885e81 100644
--- a/templates/upload.html
+++ b/templates/upload.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="zh-cn">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -16,20 +17,20 @@
         }
     </style>
 </head>
+
 <body>
     <div class="container mt-5">
         <h2 class="text-center text-primary mb-4">文件上传</h2>
         <div class="row justify-content-center mb-4">
-            <div class="col-md-6">
+            <div class="input-group mb-3">
                 <input type="file" class="form-control" id="avatar" accept=".zip" multiple>
-            </div>
-            <div class="col-md-2">
                 <button class="btn btn-primary btn-block" onclick="to_upload_file()" id="upload_button">上传</button>
             </div>
         </div>
-        <div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+        <div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="0"
+            aria-valuemin="0" aria-valuemax="100">
             <div id="progress_bar" class="progress-bar progress-bar-striped progress-bar-animated"></div>
-          </div>
+        </div>
         <div class="text-center" id="loading">上传进度0%</div>
     </div>
 
@@ -86,4 +87,5 @@
         }
     </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/templates/view.html b/templates/view.html
index 705bd92..42341f5 100644
--- a/templates/view.html
+++ b/templates/view.html
@@ -28,19 +28,39 @@
         img {
             display: block;
             width: 100%;
-            min-height: 100px;
+            min-height: 300px;
             margin-top: 10px;
         }
+
+        #global-blur {
+            background-color: rgba(255, 255, 255, 0.8);
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            /* 模糊度可以根据需要调整 */
+            transition: display;
+            z-index: 1;
+            /* 保证遮罩在页面上方 */
+            pointer-events: none;
+            /* 确保遮罩不影响下方元素的交互 */
+            opacity: 0;
+            transition: opacity 0.1s ease
+        }
     </style>
 </head>
 
 <body>
     {% for i in index %}
-        <img data-src="/api/img/{{ id }}/{{ i }}" loading="lazy" alt="{{ i }}" class="imgs">
+    <img data-src="/api/img/{{ id }}/{{ i }}" loading="lazy" alt="{{ i }}" class="imgs">
     {% endfor %}
     <div style="display:flex;justify-content: center; align-items:center;">
         <img src="/static/loading.gif" id="loadingGIF">
     </div>
+    <div id="global-blur" onclick="unshow_global_blur()"></div>
     <script>
         var imgs = document.querySelectorAll('.imgs');
 
@@ -66,6 +86,23 @@
         window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发
             lazyLoad(imgs);
         }
+
+
+        document.addEventListener('visibilitychange', documentVisibilityChange)
+        global_blur = document.getElementById("global-blur")
+        function documentVisibilityChange() {
+            if (document.visibilityState === "hidden") {
+                global_blur.style.opacity = 1;
+                global_blur.style.pointerEvents = "auto";
+            }
+            if (document.visibilityState === "visible") {
+            }
+        }
+
+        function unshow_global_blur() {
+            global_blur.style.opacity = 0;
+            global_blur.style.pointerEvents = "none";
+        }
     </script>
 </body>
 
