diff --git a/src/app/(main)/preference/general/page.tsx b/src/app/(main)/preference/general/page.tsx
new file mode 100644
index 0000000..93750e4
--- /dev/null
+++ b/src/app/(main)/preference/general/page.tsx
@@ -0,0 +1,12 @@
+"use client"
+import useAppStore from "@/store/app"
+
+export default function Page () {
+  const { version } = useAppStore()
+
+  return (
+    <div className="flex flex-col items-start gap-3">
+      <button>版本号：{version}</button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/app/(main)/preference/layout.tsx b/src/app/(main)/preference/layout.tsx
new file mode 100644
index 0000000..c49dc8b
--- /dev/null
+++ b/src/app/(main)/preference/layout.tsx
@@ -0,0 +1,37 @@
+"use client"
+import { Card, CardHeader, CardIcon, CardTool, CardBody } from "@/components/window/Card"
+import { ToolButton } from "@/components/window/ToolButton"
+import { SettingConfig, UploadOne, HardDisk } from "@icon-park/react"
+import { useRouter } from "next/navigation"
+// import { platform } from "@tauri-apps/plugin-os"
+
+export default function PreferenceLayout({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+  return (
+    <Card className="max-w-full overflow-y-scroll">
+      <CardHeader>
+        <CardIcon onClick={() => router.push("/preference/general")}>
+          <SettingConfig /> 通用
+        </CardIcon>
+        <CardIcon onClick={() => router.push("/preference/path")}>
+          <SettingConfig /> 路径
+        </CardIcon>
+        <CardIcon onClick={() => router.push("/preference/replay")}>
+          <SettingConfig /> 录像
+        </CardIcon>
+
+        <CardTool>
+          <ToolButton>
+            <UploadOne />
+            云同步
+          </ToolButton>
+          <ToolButton>
+            <HardDisk />
+            保存
+          </ToolButton>
+        </CardTool>
+      </CardHeader>
+      <CardBody>{children}</CardBody>
+    </Card>
+  )
+}
diff --git a/src/app/(main)/preference/page.tsx b/src/app/(main)/preference/page.tsx
index 38e9d1d..c8d1871 100644
--- a/src/app/(main)/preference/page.tsx
+++ b/src/app/(main)/preference/page.tsx
@@ -1,3 +1,6 @@
+"use client"
+import { redirect } from "next/navigation"
+
 export default function Page() {
-  return <div>Preference</div>;
+  redirect("/preference/general")
 }
diff --git a/src/app/(main)/preference/path/page.tsx b/src/app/(main)/preference/path/page.tsx
new file mode 100644
index 0000000..2190a30
--- /dev/null
+++ b/src/app/(main)/preference/path/page.tsx
@@ -0,0 +1,4 @@
+"use client"
+export default function Page() {
+  return <>Path</>
+}
diff --git a/src/app/(main)/preference/replay/page.tsx b/src/app/(main)/preference/replay/page.tsx
new file mode 100644
index 0000000..a337332
--- /dev/null
+++ b/src/app/(main)/preference/replay/page.tsx
@@ -0,0 +1,4 @@
+"use client"
+export default function Page() {
+  return <>Replay</>
+}
diff --git a/src/components/window/Card.tsx b/src/components/window/Card.tsx
index 5b086fb..7c6396b 100644
--- a/src/components/window/Card.tsx
+++ b/src/components/window/Card.tsx
@@ -1,8 +1,9 @@
-import { ReactNode } from "react";
+import { ReactNode } from "react"
 
 interface CardProps {
-  children?: ReactNode;
-  className?: string;
+  children?: ReactNode
+  className?: string
+  onClick?: () => void
 }
 
 const Card = ({ children }: CardProps) => {
@@ -13,31 +14,27 @@ const Card = ({ children }: CardProps) => {
     >
       {children}
     </div>
-  );
-};
+  )
+}
 
 const CardHeader = ({ children }: CardProps) => {
-  return (
-    <div className="flex items-center gap-2.5 tracking-wide">{children}</div>
-  );
-};
+  return <div className="flex items-center gap-2.5 tracking-wide">{children}</div>
+}
 
-const CardIcon = ({ children }: CardProps) => {
+const CardIcon = ({ children, ...rest }: CardProps) => {
   return (
-    <div className="flex gap-1.5 items-center font-semibold">{children}</div>
-  );
-};
-
-const CardTool = ({ children }: CardProps) => {
-  return (
-    <div className="flex items-center justify-end flex-grow gap-2">
+    <div className="flex gap-1.5 items-center font-semibold" {...rest}>
       {children}
     </div>
-  );
-};
+  )
+}
+
+const CardTool = ({ children }: CardProps) => {
+  return <div className="flex items-center justify-end flex-grow gap-2">{children}</div>
+}
 
 const CardBody = ({ children }: CardProps) => {
-  return <div className="w-full h-full text-sm tracking-wide text-zinc-800">{children}</div>;
-};
+  return <div className="w-full h-full text-sm tracking-wide text-zinc-800">{children}</div>
+}
 
-export { Card, CardHeader, CardIcon, CardTool, CardBody };
+export { Card, CardHeader, CardIcon, CardTool, CardBody }