diff --git a/packages/app/src/components/AboutApp/index.jsx b/packages/app/src/components/AboutApp/index.jsx
index c6f4de5d..cf20e562 100644
--- a/packages/app/src/components/AboutApp/index.jsx
+++ b/packages/app/src/components/AboutApp/index.jsx
@@ -1,7 +1,7 @@
 import React from "react"
 import ReactDOM from "react-dom"
 import * as antd from "antd"
-import { Card, Mask } from "antd-mobile"
+import { Card as ACard, Mask as AMask } from "antd-mobile"
 
 import { Icons } from "components/Icons"
 import { DiReact } from "react-icons/di"
@@ -10,7 +10,48 @@ import config from "config"
 
 import "./index.less"
 
-export const AboutCard = (props) => {
+export const Card = (props) => {
+	const isProduction = import.meta.env.PROD
+	const isWSMainConnected = window.app.ws.mainSocketConnected
+	const WSMainOrigin = app.ws.sockets.main.io.uri
+
+	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.Globe />Server information</h3>
+			<div>
+				<antd.Tag color={isWSMainConnected ? "green" : "red"}><Icons.Cpu />{WSMainOrigin}</antd.Tag>
+			</div>
+		</div>
+		<div className="group">
+			<h3><Icons.GitMerge />Versions</h3>
+			<div>
+				<antd.Tag color="#ffec3d">eVite v{window.app.__eviteVersion ?? "experimental"}</antd.Tag>
+				<antd.Tag color="#61DBFB"><DiReact /> v{React.version ?? "experimental"}</antd.Tag>
+			</div>
+		</div>
+	</ACard>
+}
+
+export const ModalCard = (props) => {
 	const [visible, setVisible] = React.useState(false)
 
 	React.useEffect(() => {
@@ -24,45 +65,9 @@ export const AboutCard = (props) => {
 		}, 150)
 	}
 
-	const isProduction = import.meta.env.PROD
-	const isWSMainConnected = window.app.ws.mainSocketConnected
-	const WSMainOrigin = app.ws.sockets.main.io.uri
-
 	return <Mask visible={visible} onMaskClick={() => close()}>
 		<div className="aboutApp_wrapper">
-			<Card
-				bodyClassName="aboutApp_card"
-				headerClassName="aboutApp_card_header"
-				title={
-					<div className="content">
-						<div className="branding">
-							<h2>{config.app.siteName}</h2>
-							<span>{config.author}</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.Globe />Server information</h3>
-					<div>
-						<antd.Tag color={isWSMainConnected ? "green" : "red"}><Icons.Cpu />{WSMainOrigin}</antd.Tag>
-					</div>
-				</div>
-				<div className="group">
-					<h3><Icons.GitMerge />Versions</h3>
-					<div>
-						<antd.Tag color="#ffec3d">eVite v{window.app.__eviteVersion ?? "experimental"}</antd.Tag>
-						<antd.Tag color="#61DBFB"><DiReact /> v{React.version ?? "experimental"}</antd.Tag>
-					</div>
-				</div>
-			</Card>
+			<Card />
 		</div>
 	</Mask >
 }
@@ -76,5 +81,5 @@ export function openModal() {
 		document.body.removeChild(component)
 	}
 
-	ReactDOM.render(<AboutCard onClose={onClose} />, component)
+	ReactDOM.render(<ModalCard onClose={onClose} />, component)
 }
\ No newline at end of file