diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 2a5c231..40052dc 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -1,7 +1,7 @@
+import { MainPage } from "@/pages/main"
+
 function App() {
-  return <div className="text-6xl">
-    Test
-  </div>
+  return <><MainPage /></>
 }
 
 export default App
diff --git a/ui/src/pages/main/index.tsx b/ui/src/pages/main/index.tsx
new file mode 100644
index 0000000..f69130a
--- /dev/null
+++ b/ui/src/pages/main/index.tsx
@@ -0,0 +1,32 @@
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { SelectNet } from "./select"
+
+
+
+export const MainPage: React.FC = () => {
+  return <>
+    <Tabs defaultValue="overview" className="max-w-[1024px] mx-auto">
+      <TabsList className="grid w-full grid-cols-3">
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="select">Select</TabsTrigger>
+        <TabsTrigger value="connection">Connection</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <Card>
+          <CardHeader>
+            <CardTitle>选择网络</CardTitle>
+            <CardDescription>你可以在这里更改代理节点</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <SelectNet />
+          </CardContent>
+        </Card>
+      </TabsContent>
+      <TabsContent value="select">
+      </TabsContent>
+      <TabsContent value="connection">
+      </TabsContent>
+    </Tabs>
+  </>
+}
diff --git a/ui/src/pages/main/select.tsx b/ui/src/pages/main/select.tsx
new file mode 100644
index 0000000..4b77c12
--- /dev/null
+++ b/ui/src/pages/main/select.tsx
@@ -0,0 +1,8 @@
+import useSWR from 'swr'
+
+export const SelectNet: React.FC = () => {
+
+  return <>
+
+  </>
+}