diff --git a/web/default/src/pages/About/index.js b/web/default/src/pages/About/index.js
index 4cda2880..8fe9b683 100644
--- a/web/default/src/pages/About/index.js
+++ b/web/default/src/pages/About/index.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Card } from 'semantic-ui-react';
+import { Card, Header, Segment } from 'semantic-ui-react';
 import { API, showError } from '../../helpers';
 import { marked } from 'marked';
 
@@ -7,39 +7,58 @@ const About = () => {
   const [about, setAbout] = useState('');
   const [aboutLoaded, setAboutLoaded] = useState(false);
 
-  // ... 其他函数保持不变 ...
+  const displayAbout = async () => {
+    setAbout(localStorage.getItem('about') || '');
+    const res = await API.get('/api/about');
+    const { success, message, data } = res.data;
+    if (success) {
+      let aboutContent = data;
+      if (!data.startsWith('https://')) {
+        aboutContent = marked.parse(data);
+      }
+      setAbout(aboutContent);
+      localStorage.setItem('about', aboutContent);
+    } else {
+      showError(message);
+      setAbout('加载关于内容失败...');
+    }
+    setAboutLoaded(true);
+  };
 
+  useEffect(() => {
+    displayAbout().then();
+  }, []);
   return (
-    <div className='dashboard-container'>
-      <Card fluid className='chart-card'>
-        <Card.Content>
-          <Card.Header className='header'>关于系统</Card.Header>
-          {aboutLoaded && about === '' ? (
-            <>
+    <>
+      {aboutLoaded && about === '' ? (
+        <div className='dashboard-container'>
+          <Card fluid className='chart-card'>
+            <Card.Content>
+              <Card.Header className='header'>关于系统</Card.Header>
               <p>可在设置页面设置关于内容，支持 HTML & Markdown</p>
               项目仓库地址：
               <a href='https://github.com/songquanpeng/one-api'>
                 https://github.com/songquanpeng/one-api
               </a>
-            </>
+            </Card.Content>
+          </Card>
+        </div>
+      ) : (
+        <>
+          {about.startsWith('https://') ? (
+            <iframe
+              src={about}
+              style={{ width: '100%', height: '100vh', border: 'none' }}
+            />
           ) : (
-            <>
-              {about.startsWith('https://') ? (
-                <iframe
-                  src={about}
-                  style={{ width: '100%', height: '100vh', border: 'none' }}
-                />
-              ) : (
-                <div
-                  style={{ fontSize: 'larger' }}
-                  dangerouslySetInnerHTML={{ __html: about }}
-                ></div>
-              )}
-            </>
+            <div
+              style={{ fontSize: 'larger' }}
+              dangerouslySetInnerHTML={{ __html: about }}
+            ></div>
           )}
-        </Card.Content>
-      </Card>
-    </div>
+        </>
+      )}
+    </>
   );
 };