diff --git a/packages/app/src/components/AboutApp/index.jsx b/packages/app/src/components/AboutApp/index.jsx
deleted file mode 100755
index 56be60cd..00000000
--- a/packages/app/src/components/AboutApp/index.jsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React from "react"
-import ReactDOM from "react-dom"
-import * as antd from "antd"
-import { Card as ACard, Mask as AMask } from "antd-mobile"
-
-import { Icons } from "components/Icons"
-
-import config from "config"
-
-import "./index.less"
-
-export const Card = (props) => {
-	const isProduction = import.meta.env.PROD
-
-	const [serverManifest, setServerManifest] = React.useState(null)
-
-	const checkServerVersion = async () => {
-		const serverManifest = await app.api.customRequest("main")
-
-		setServerManifest(serverManifest.data)
-	}
-
-	React.useEffect(() => {
-		checkServerVersion()
-	}, [])
-
-	return <ACard
-		bodyClassName="aboutApp_card"
-		headerClassName="aboutApp_card_header"
-		title={
-			<div className="content">
-				<div className="branding">
-					<h2>{config.app.siteName}</h2>
-					<span>{config.author}</span>
-					<span> Licensed with {config.package?.license ?? "unlicensed"} </span>
-				</div>
-				<div>
-					<antd.Tag><Icons.Tag />v{window.app.version ?? "experimental"}</antd.Tag>
-					<antd.Tag color={isProduction ? "green" : "magenta"}>
-						{isProduction ? <Icons.CheckCircle /> : <Icons.Triangle />}
-						{String(import.meta.env.MODE)}
-					</antd.Tag>
-				</div>
-			</div>
-		}
-	>
-		<div className="group">
-			<h3><Icons.GitMerge />Versions</h3>
-			<div>
-				<antd.Tag>Linebridge {serverManifest?.LINEBRIDGE_SERVER_VERSION ?? "Unknown"}</antd.Tag>
-				<antd.Tag color="blue">React {React.version}</antd.Tag>
-				<antd.Tag color="#ffec3d">eVite v{window.app.__eviteVersion ?? "experimental"}</antd.Tag>
-			</div>
-		</div>
-
-		<div className="group">
-			<h3><Icons.GitMerge />Server info</h3>
-			<div>
-				Server Time: {serverManifest?.requestTime ?? "Unknown"}
-			</div>
-			<div>
-				Origin: {app.api.namespaces.main.origin ?? "Unknown"}
-			</div>
-		</div>
-	</ACard>
-}
-
-export const ModalCard = (props) => {
-	const [visible, setVisible] = React.useState(false)
-
-	React.useEffect(() => {
-		setVisible(true)
-	}, [])
-
-	const close = () => {
-		setVisible(false)
-		setTimeout(() => {
-			props.onClose()
-		}, 150)
-	}
-
-	return <AMask visible={visible} onMaskClick={() => close()}>
-		<div className="aboutApp_wrapper">
-			<Card />
-		</div>
-	</AMask >
-}
-
-export function openModal() {
-	const component = document.createElement("div")
-	document.body.appendChild(component)
-
-	const onClose = () => {
-		ReactDOM.unmountComponentAtNode(component)
-		document.body.removeChild(component)
-	}
-
-	ReactDOM.render(<ModalCard onClose={onClose} />, component)
-}
\ No newline at end of file
diff --git a/packages/app/src/components/AboutApp/index.less b/packages/app/src/components/AboutApp/index.less
deleted file mode 100755
index 977132e5..00000000
--- a/packages/app/src/components/AboutApp/index.less
+++ /dev/null
@@ -1,118 +0,0 @@
-.adm-card {
-    background-color: var(--background-color-accent);
-    color: var(--text-color);
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    span,
-    p {
-        color: var(--text-color);
-    }
-
-    .ant-tag {
-        color: #1f1f1f;
-
-        svg {
-            color: #1f1f1f;
-        }
-    }
-}
-
-.adm-card-header:not(:last-child) {
-    border-bottom: 1px solid var(--border-color);
-}
-
-.aboutApp_wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    width: 100vw;
-    height: 100vh;
-
-    background-color: var(--background-color-primary);
-    color: var(--text-color);
-}
-
-.aboutApp_card {
-    height: fit-content;
-    width: 80vw;
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    span,
-    p {
-        color: var(--text-color);
-    }
-
-    svg {
-        margin: 0;
-    }
-
-    .ant-tag {
-        display: inline-flex;
-        align-items: center;
-    }
-
-    .group {
-        width: 100%;
-        display: inline-flex;
-        flex-direction: column;
-        justify-content: center;
-
-        >div {
-            display: inline-flex;
-            margin-left: 10px;
-        }
-
-        margin-bottom: 10px;
-    }
-}
-
-.aboutApp_card_header {
-    .adm-card-header-title {
-        width: 100%;
-    }
-
-    .content {
-        width: 100%;
-
-        display: inline-flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-
-        h1,
-        h2,
-        h3 {
-            margin: 0;
-        }
-
-        .branding {
-            display: flex;
-            flex-direction: column;
-
-            h1,
-            h2,
-            h3 {
-                height: fit-content;
-                line-height: 24px;
-            }
-
-            span {
-                height: fit-content;
-                color: var(--background-color-contrast);
-                font-size: 10px;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/packages/app/src/components/index.js b/packages/app/src/components/index.js
index ae27f27f..f016e84c 100755
--- a/packages/app/src/components/index.js
+++ b/packages/app/src/components/index.js
@@ -56,7 +56,6 @@ export { default as ConnectedFriends } from "./ConnectedFriends"
 
 // OTHERS
 export * as AdminTools from "./AdminTools"
-export * as AboutApp from "./AboutApp"
 export * as Window from "./RenderWindow"
 
 export { Layout }
\ No newline at end of file
diff --git a/packages/app/src/pages/about/index.jsx b/packages/app/src/pages/about/index.jsx
index 6c4f7739..a113c288 100755
--- a/packages/app/src/pages/about/index.jsx
+++ b/packages/app/src/pages/about/index.jsx
@@ -1,10 +1,80 @@
 import React from "react"
-import { AboutApp } from "components"
+import * as antd from "antd"
+import moment from "moment"
+
+import { Icons } from "components/Icons"
+
+import config from "config"
 
 import "./index.less"
 
 export default (props) => {
-    return <div className="app_about">
-        <AboutApp.Card />
+    const isProduction = import.meta.env.PROD
+
+    const [serverManifest, setServerManifest] = React.useState(null)
+
+    const checkServerVersion = async () => {
+        const serverManifest = await app.api.customRequest("main")
+
+        setServerManifest(serverManifest.data)
+    }
+
+    React.useEffect(() => {
+        checkServerVersion()
+    }, [])
+
+    return <div className="about_app">
+        <div className="header">
+            <div className="branding">
+                <div className="logo">
+                    <img
+                        src={config.logo.alt}
+                        alt="Logo"
+                    />
+                </div>
+                <div className="texts">
+                    <h2>{config.app.siteName}</h2>
+                    <span>{config.author}</span>
+                    <span> Licensed with {config.package?.license ?? "unlicensed"} </span>
+                </div>
+            </div>
+            <div className="versions">
+                <antd.Tag><Icons.Tag />v{window.app.version ?? "experimental"}</antd.Tag>
+                <antd.Tag color={isProduction ? "green" : "magenta"}>
+                    {isProduction ? <Icons.CheckCircle /> : <Icons.Triangle />}
+                    {String(import.meta.env.MODE)}
+                </antd.Tag>
+            </div>
+        </div>
+
+        <div className="group">
+            <h3><Icons.Server />Server info</h3>
+
+            <div className="field">
+                Powered by Linebridge™
+
+                <div className="value">
+                    <antd.Tag>v{serverManifest?.LINEBRIDGE_SERVER_VERSION ?? "Unknown"}</antd.Tag>
+                </div>
+            </div>
+            <div className="field">
+                <span>
+                    <Icons.Globe /> Origin address
+                </span>
+
+                <div className="value">
+                    {app.api?.namespaces.main.origin ?? "Unknown"}
+                </div>
+            </div>
+            <div className="field">
+                <span>
+                    <Icons.Clock /> Server Time
+                </span>
+
+                <div className="value">
+                    {moment(serverManifest?.requestTime).format("YYYY-MM-DD HH:mm:ss")}
+                </div>
+            </div>
+        </div>
     </div>
 }
\ No newline at end of file
diff --git a/packages/app/src/pages/about/index.less b/packages/app/src/pages/about/index.less
index e69de29b..3af67a79 100755
--- a/packages/app/src/pages/about/index.less
+++ b/packages/app/src/pages/about/index.less
@@ -0,0 +1,93 @@
+.about_app {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+
+    padding: 0 20px 20px 20px;
+
+    background-color: var(--background-color-accent);
+    color: var(--text-color);
+
+    border-radius: 12px;
+
+    .header {
+        display: flex;
+        flex-direction: row;
+
+        justify-content: space-between;
+        align-self: center;
+
+        width: 100%;
+
+        margin-bottom: 20px;
+
+        padding: 20px 0;
+        border-bottom: 1px solid var(--border-color);
+
+        .branding {
+            display: flex;
+            flex-direction: row;
+
+            align-items: center;
+
+            .logo {
+                width: 60px;
+                height: 100%;
+
+                margin-right: 20px;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .texts {
+                display: flex;
+                flex-direction: column;
+
+            }
+
+            h1,
+            h2,
+            h3 {
+                height: fit-content;
+                line-height: 24px;
+            }
+
+            span {
+                height: fit-content;
+                color: var(--background-color-contrast);
+                font-size: 10px;
+            }
+        }
+    }
+
+    .group {
+        display: inline-flex;
+
+        flex-direction: column;
+        justify-content: center;
+
+        margin-bottom: 10px;
+
+        .field {
+            display: inline-flex;
+            flex-direction: column;
+
+            margin-bottom: 10px;
+
+            font-size: 0.9rem;
+
+            .value {
+                font-size: 0.8rem;
+
+                display: inline-flex;
+                flex-direction: row;
+
+                margin-left: 10px;
+            }
+        }
+    }
+}
\ No newline at end of file