diff --git a/src/pages/about/about.hbs b/src/pages/about/about.hbs
index 4da7b1fd7..a39e5b9b9 100644
--- a/src/pages/about/about.hbs
+++ b/src/pages/about/about.hbs
@@ -1,60 +1,75 @@
-<div id='about-page' class='main scroll'>
-  <span class='logo' style='background-image: url(./res/logo/logo.png);'></span>
-  <div class='list'>
-    <span class='list-item'>
-      <span class='icon no-icon'></span>
-      <div class='container'>
-        <h2 class='text'>Acode editor {{version}} ({{versionCode}})</h2>
-      </div>
-    </span>
-    {{#webview}}
-      <a
-        class='list-item no-transform'
-        href='https://play.google.com/store/apps/details?id={{packageName}}'
-      >
-        <span class='icon googlechrome'></span>
-        <div class='container'>
-          <span class='text'>Webview {{versionName}}</span>
-          <span class='value'>{{packageName}}</span>
-        </div>
-      </a>
-    {{/webview}}
-    <a class='list-item' href='https://acode.app'>
-      <span class='icon acode'></span>
-      <div class='container'>
-        <span class='text'>Official webpage</span>
-      </div>
-    </a>
-    <a class='list-item' href='https://foxdebug.com'>
-      <span class='icon foxdebug'></span>
-      <div class='container'>
-        <span class='text'>foxdebug.com</span>
-      </div>
-    </a>
-    <a class='list-item' href='mailto:apps@foxdebug.com'>
-      <span class='icon gmail'></span>
-      <div class='container'>
-        <span class='text'>Mail</span>
-      </div>
-    </a>
-    <a class='list-item' href='https://twitter.com/foxdebug'>
-      <span class='icon twitter'></span>
-      <div class='container'>
-        <span class='text'>Twitter</span>
-      </div>
-    </a>
-    <a class='list-item' href='https://www.instagram.com/foxdebug_com/'>
-      <span class='icon instagram'></span>
-      <div class='container'>
-        <span class='text'>Instagram</span>
-      </div>
-    </a>
-    <a class='list-item' href='https://github.com/deadlyjack/acode'>
-      <span class='icon github'></span>
-      <div class='container'>
-        <span class='text'>GitHub</span>
-      </div>
-    </a>
+<main id='about-page' class='main'>
+    <div class="logo">
+        <img src='./res/logo/logo.png'/>
+    </div>
 
-  <div style='height: 30vh; width: 10vw'></div>
-</div>
\ No newline at end of file
+    <div class="version-info">
+        <h1 class="version-title">Acode editor</h1>
+        <div class="version-number">Version {{version}} ({{versionCode}})</div>
+    </div>
+
+    <div class="info-section">
+        {{#webview}}
+        <a href="https://play.google.com/store/apps/details?id={{packageName}}" class="info-item">
+            <div class="info-item-icon">
+                <span class="icon googlechrome"></span>
+            </div>
+            <div class="info-item-text">
+                Webview {{versionName}}
+                <div class="info-item-subtext">{{packageName}}</div>
+            </div>
+        </a>
+        {{/webview}}
+        <a href="https://acode.app" class="info-item">
+            <div class="info-item-icon">
+                <span class="icon acode"></span>
+            </div>
+            <div class="info-item-text">Official webpage</div>
+        </a>
+        <a href="https://foxbiz.io" class="info-item">
+            <div class="info-item-icon">
+                <span class='icon public'></span>
+            </div>
+            <div class="info-item-text">foxbiz.io</div>
+        </a>
+    </div>
+
+    <div class="social-links">
+        <a href="mailto:apps@foxdebug.com" class="social-link">
+            <div class="social-icon">
+                <span class="icon gmail"></span>
+            </div>
+            Mail
+        </a>
+        <a href="https://twitter.com/foxdebug" class="social-link">
+            <div class="social-icon">
+                <span class="icon twitter"></span>
+            </div>
+            Twitter
+        </a>
+        <a href="https://www.instagram.com/foxdebug_com/" class="social-link">
+            <div class="social-icon">
+                <span class="icon instagram"></span>
+            </div>
+            Instagram
+        </a>
+        <a href="https://github.com/Acode-Foundation/Acode" class="social-link">
+            <div class="social-icon">
+                <span class="icon github"></span>
+            </div>
+            GitHub
+        </a>
+        <a href="https://t.me/foxdebug_acode" class="social-link">
+            <div class="social-icon">
+                <span class="icon telegram"></span>
+            </div>
+            Telegram
+        </a>
+        <a href="https://discord.gg/V9HZeK5N" class="social-link">
+            <div class="social-icon">
+                <span class="icon public"></span>
+            </div>
+            Discord
+        </a>
+    </div>
+</main>
diff --git a/src/pages/about/about.scss b/src/pages/about/about.scss
index bb6ce2dbb..e2e25c787 100644
--- a/src/pages/about/about.scss
+++ b/src/pages/about/about.scss
@@ -1,20 +1,132 @@
 #about-page {
-  overflow: auto;
+  padding: 32px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
 
   .logo {
-    display: block;
-    height: 250px;
-    width: 250px;
-    border-radius: 50%;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
-    box-shadow: 0 0 8px 2px (--box-shadow-color);
-    margin: 15px auto;
+    width: 120px;
+    height: 120px;
+    border-radius: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 8px;
+    background: color-mix(
+      in srgb,
+      var(--popup-background-color) 20%,
+      transparent
+    );
+    overflow: hidden;
+    padding: 8px;
+    img {
+      width: auto;
+      max-width: 100%;
+      height: auto;
+      max-height: 100%;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+    }
+  }
+  .version-info {
+    text-align: center;
+    margin-bottom: 32px;
+    .version-title {
+      font-size: 24px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+    .version-number {
+      color: color-mix(in srgb, var(--primary-text-color) 60%, transparent);
+      font-size: 14px;
+    }
+  }
+  .info-section {
+    width: 100%;
+    max-width: 400px;
+    background: color-mix(
+      in srgb,
+      var(--popup-background-color) 20%,
+      transparent
+    );
+    border-radius: 12px;
+    overflow: hidden;
+    margin-bottom: 16px;
+    .info-item {
+      display: flex;
+      align-items: center;
+      padding: 16px;
+      color: var(--secondary-text-color);
+      text-decoration: none;
+      border-bottom: 1px solid var(--border-color);
+      transition: background 0.2s ease;
+      &:last-child {
+        border-bottom: none;
+      }
+      &:hover {
+        background: color-mix(
+          in srgb,
+          var(--popup-background-color) 40%,
+          transparent
+        );
+      }
+      .info-item-icon {
+        width: 24px;
+        height: 24px;
+        margin-right: 12px;
+        display: flex;
+        align-items: center;
+        font-size: 24px;
+      }
+      .info-item-text {
+        flex: 1;
+        font-size: 15px;
+        .info-item-subtext {
+          color: color-mix(in srgb, var(--primary-text-color) 60%, transparent);
+          font-size: 13px;
+          margin-top: 2px;
+        }
+      }
+    }
   }
 
-  .file {
-    background-position: center;
+  .social-links {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+    width: 100%;
+    max-width: 400px;
+    .social-link {
+      display: inline-flex;
+      align-items: center;
+      padding: 12px;
+      background: color-mix(
+        in srgb,
+        var(--popup-background-color) 20%,
+        transparent
+      );
+      border-radius: 12px;
+      color: var(--secondary-text-color);
+      text-decoration: none;
+      transition: all 0.2s ease;
+      &:hover {
+        background: color-mix(
+          in srgb,
+          var(--popup-background-color) 40%,
+          transparent
+        );
+        transform: translateY(-1px);
+      }
+      .social-icon {
+        width: 24px;
+        height: 24px;
+        margin-right: 12px;
+        font-size: 24px;
+        display: flex;
+        align-items: center;
+      }
+    }
   }
 }
diff --git a/www/index.html b/www/index.html
index aa1ce8cea..4387ddc52 100644
--- a/www/index.html
+++ b/www/index.html
@@ -164,11 +164,11 @@
 
     <title>Acode</title>
       <!--styles-->
-<link rel="stylesheet" href="./css/build/218.css">
-<link rel="stylesheet" href="./css/build/32.css">
-<link rel="stylesheet" href="./css/build/383.css">
-<link rel="stylesheet" href="./css/build/53.css">
-<link rel="stylesheet" href="./css/build/609.css">
+<link rel="stylesheet" href="./css/build/100.css">
+<link rel="stylesheet" href="./css/build/138.css">
+<link rel="stylesheet" href="./css/build/543.css">
+<link rel="stylesheet" href="./css/build/879.css">
+<link rel="stylesheet" href="./css/build/922.css">
 <link rel="stylesheet" href="./css/build/about.css">
 <link rel="stylesheet" href="./css/build/customTheme.css">
 <link rel="stylesheet" href="./css/build/donate.css">