diff --git a/pub/index.html b/pub/index.html
index 7eb5320..d4a44d7 100644
--- a/pub/index.html
+++ b/pub/index.html
@@ -4,61 +4,64 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FMHY SafeGuard</title>
-	<link rel="preconnect" href="https://fonts.googleapis.com">
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-	<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
 
     <style>
         body {
             text-align: center;
-            padding-bottom: 10px;
-            color: #848a94;
             background-color: rgb(26, 26, 26);
             font-family: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-        }
-
-        a {
-            color: #E8E8E8;
-            text-decoration: none;
-        }
-
-        a:hover {
-            color: #D04343;
+            color: #848a94;
+            margin: 0;
+            padding: 10px;
+            max-width: 320px; /* Limit the width to make it more compact */
         }
 
         .title h1 {
-            font-size: 36px;
+            font-size: 24px;
             background: -webkit-linear-gradient(120deg, #c4b5fd 30%, #7bc5e4);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            background-clip: text;
-            text-fill-color: transparent;
-			margin-left: 25px;
-			margin-right: 25px;
+            margin: 0;
+            padding: 10px;
         }
 
         #status-container {
-            margin-top: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin-top: 10px;
         }
 
         .status-image {
-            width: 100px;
-            height: 100px;
+            width: 60px; /* Reduced icon size */
+            height: 60px;
+            transition: transform 0.3s ease;
         }
 
         #status-message {
-            font-size: 18px;
+            font-size: 14px; /* Smaller text for compact design */
             margin-top: 10px;
             color: #E8E8E8;
+            line-height: 1.3;
+            padding: 0 10px;
+        }
+
+        #status-message strong {
+            color: #c4b5fd;
         }
 
         #error-message {
             color: red;
+            margin-top: 10px;
         }
-		
-		#footer {
-            font-size: 12px;
-            margin-top: 20px;
+
+        #footer {
+            font-size: 11px; /* Smaller footer text */
+            margin-top: 10px;
             color: #848a94;
         }
 
@@ -68,8 +71,12 @@
         }
 
         #footer a:hover {
-            color: #78b3e2;
-			text-decoration: underline;
+            text-decoration: underline;
+        }
+
+        /* Animation for status change */
+        .status-image.active {
+            transform: scale(1.1);
         }
     </style>
 </head>
@@ -87,9 +94,9 @@
 
     <!-- An area for error messages, if necessary -->
     <p id="error-message"></p>
-	
-	<div id="footer">
-        <p>Created using <a href="https://github.com/fmhy/FMHYFilterlist" target="_blank">FMHY Filterlist</a></p>
+
+    <div id="footer">
+        <p>Powered by <a href="https://github.com/fmhy/FMHYFilterlist" target="_blank">FMHY Filterlist</a></p>
     </div>
 
     <script src="index.js"></script>