diff --git a/src/components/notice.tsx b/src/components/base/base-notice.tsx
similarity index 100%
rename from src/components/notice.tsx
rename to src/components/base/base-notice.tsx
diff --git a/src/components/base-page.tsx b/src/components/base/base-page.tsx
similarity index 100%
rename from src/components/base-page.tsx
rename to src/components/base/base-page.tsx
diff --git a/src/components/connection-item.tsx b/src/components/connection/connection-item.tsx
similarity index 83%
rename from src/components/connection-item.tsx
rename to src/components/connection/connection-item.tsx
index 34fa09b..419233c 100644
--- a/src/components/connection-item.tsx
+++ b/src/components/connection/connection-item.tsx
@@ -1,4 +1,4 @@
-import { ApiType } from "../services/types";
+import { ApiType } from "../../services/types";
 
 interface Props {
   value: ApiType.ConnectionsItem;
diff --git a/src/components/layout-control.tsx b/src/components/layout/layout-control.tsx
similarity index 100%
rename from src/components/layout-control.tsx
rename to src/components/layout/layout-control.tsx
diff --git a/src/components/layout-item.tsx b/src/components/layout/layout-item.tsx
similarity index 100%
rename from src/components/layout-item.tsx
rename to src/components/layout/layout-item.tsx
diff --git a/src/components/traffic.tsx b/src/components/layout/layout-traffic.tsx
similarity index 87%
rename from src/components/traffic.tsx
rename to src/components/layout/layout-traffic.tsx
index 52d5f61..e2da330 100644
--- a/src/components/traffic.tsx
+++ b/src/components/layout/layout-traffic.tsx
@@ -2,12 +2,12 @@ import { useEffect, useState } from "react";
 import { useRecoilValue } from "recoil";
 import { Box, Typography } from "@mui/material";
 import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
-import { getInfomation } from "../services/api";
-import { ApiType } from "../services/types";
-import { atomClashPort } from "../states/setting";
-import parseTraffic from "../utils/parse-traffic";
+import { getInfomation } from "../../services/api";
+import { ApiType } from "../../services/types";
+import { atomClashPort } from "../../states/setting";
+import parseTraffic from "../../utils/parse-traffic";
 
-const Traffic = () => {
+const LayoutTraffic = () => {
   const portValue = useRecoilValue(atomClashPort);
   const [traffic, setTraffic] = useState({ up: 0, down: 0 });
 
@@ -66,4 +66,4 @@ const Traffic = () => {
   );
 };
 
-export default Traffic;
+export default LayoutTraffic;
diff --git a/src/components/update-button.tsx b/src/components/layout/update-button.tsx
similarity index 100%
rename from src/components/update-button.tsx
rename to src/components/layout/update-button.tsx
diff --git a/src/components/update-dialog.tsx b/src/components/layout/update-dialog.tsx
similarity index 100%
rename from src/components/update-dialog.tsx
rename to src/components/layout/update-dialog.tsx
diff --git a/src/components/log-item.tsx b/src/components/log/log-item.tsx
similarity index 93%
rename from src/components/log-item.tsx
rename to src/components/log/log-item.tsx
index 5a4da19..8fd17fc 100644
--- a/src/components/log-item.tsx
+++ b/src/components/log/log-item.tsx
@@ -1,5 +1,5 @@
 import { styled, Box } from "@mui/material";
-import { ApiType } from "../services/types";
+import { ApiType } from "../../services/types";
 
 const Item = styled(Box)(({ theme }) => ({
   padding: "8px 0",
diff --git a/src/components/profile-item.tsx b/src/components/profile/profile-item.tsx
similarity index 96%
rename from src/components/profile-item.tsx
rename to src/components/profile/profile-item.tsx
index 7f22de6..76ea37b 100644
--- a/src/components/profile-item.tsx
+++ b/src/components/profile/profile-item.tsx
@@ -13,10 +13,10 @@ import {
 } from "@mui/material";
 import { useSWRConfig } from "swr";
 import { RefreshRounded } from "@mui/icons-material";
-import { CmdType } from "../services/types";
-import { updateProfile, deleteProfile, viewProfile } from "../services/cmds";
-import Notice from "./notice";
-import parseTraffic from "../utils/parse-traffic";
+import { CmdType } from "../../services/types";
+import { updateProfile, deleteProfile, viewProfile } from "../../services/cmds";
+import Notice from "../base/base-notice";
+import parseTraffic from "../../utils/parse-traffic";
 import relativeTime from "dayjs/plugin/relativeTime";
 
 dayjs.extend(relativeTime);
diff --git a/src/components/proxy-group.tsx b/src/components/proxy/proxy-group.tsx
similarity index 95%
rename from src/components/proxy-group.tsx
rename to src/components/proxy/proxy-group.tsx
index 9f6f4b0..6962189 100644
--- a/src/components/proxy-group.tsx
+++ b/src/components/proxy/proxy-group.tsx
@@ -16,9 +16,9 @@ import {
   MyLocationRounded,
   NetworkCheckRounded,
 } from "@mui/icons-material";
-import { updateProxy } from "../services/api";
-import { ApiType } from "../services/types";
-import { getProfiles, patchProfile } from "../services/cmds";
+import { updateProxy } from "../../services/api";
+import { ApiType } from "../../services/types";
+import { getProfiles, patchProfile } from "../../services/cmds";
 import ProxyItem from "./proxy-item";
 
 interface Props {
diff --git a/src/components/proxy-item.tsx b/src/components/proxy/proxy-item.tsx
similarity index 100%
rename from src/components/proxy-item.tsx
rename to src/components/proxy/proxy-item.tsx
diff --git a/src/components/setting/setting-clash.tsx b/src/components/setting/setting-clash.tsx
index 90675a0..395eab4 100644
--- a/src/components/setting/setting-clash.tsx
+++ b/src/components/setting/setting-clash.tsx
@@ -15,8 +15,8 @@ import { atomClashPort } from "../../states/setting";
 import { patchClashConfig } from "../../services/cmds";
 import { SettingList, SettingItem } from "./setting";
 import { getClashConfig, getVersion, updateConfigs } from "../../services/api";
+import Notice from "../base/base-notice";
 import GuardState from "./guard-state";
-import Notice from "../notice";
 
 interface Props {
   onError: (err: Error) => void;
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index adbe99f..4970de5 100644
--- a/src/pages/_layout.tsx
+++ b/src/pages/_layout.tsx
@@ -10,10 +10,10 @@ import { getVergeConfig } from "../services/cmds";
 import { getAxios } from "../services/api";
 import { routers } from "./_routers";
 import LogoSvg from "../assets/image/logo.svg";
-import Traffic from "../components/traffic";
-import LayoutItem from "../components/layout-item";
-import UpdateButton from "../components/update-button";
-import LayoutControl from "../components/layout-control";
+import LayoutItem from "../components/layout/layout-item";
+import LayoutControl from "../components/layout/layout-control";
+import LayoutTraffic from "../components/layout/layout-traffic";
+import UpdateButton from "../components/layout/update-button";
 
 const Layout = () => {
   const { mutate } = useSWRConfig();
@@ -98,7 +98,7 @@ const Layout = () => {
             </List>
 
             <div className="the-traffic" data-windrag>
-              <Traffic />
+              <LayoutTraffic />
             </div>
           </div>
 
diff --git a/src/pages/connections.tsx b/src/pages/connections.tsx
index 98bb8d3..603f150 100644
--- a/src/pages/connections.tsx
+++ b/src/pages/connections.tsx
@@ -3,8 +3,8 @@ import { Paper } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
 import { ApiType } from "../services/types";
 import { getInfomation } from "../services/api";
-import BasePage from "../components/base-page";
-import ConnectionItem from "../components/connection-item";
+import BasePage from "../components/base/base-page";
+import ConnectionItem from "../components/connection/connection-item";
 
 const ConnectionsPage = () => {
   const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
diff --git a/src/pages/logs.tsx b/src/pages/logs.tsx
index c7a4a7e..882248e 100644
--- a/src/pages/logs.tsx
+++ b/src/pages/logs.tsx
@@ -4,8 +4,8 @@ import { Button, Paper } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
 import { ApiType } from "../services/types";
 import { getInfomation } from "../services/api";
-import BasePage from "../components/base-page";
-import LogItem from "../components/log-item";
+import BasePage from "../components/base/base-page";
+import LogItem from "../components/log/log-item";
 
 let logCache: ApiType.LogItem[] = [];
 
diff --git a/src/pages/proxies.tsx b/src/pages/proxies.tsx
index d9d5d21..adb1892 100644
--- a/src/pages/proxies.tsx
+++ b/src/pages/proxies.tsx
@@ -5,9 +5,9 @@ import { Button, ButtonGroup, List, Paper } from "@mui/material";
 import { getClashConfig, updateConfigs, updateProxy } from "../services/api";
 import { patchClashConfig } from "../services/cmds";
 import { getProxies } from "../services/api";
-import BasePage from "../components/base-page";
-import ProxyItem from "../components/proxy-item";
-import ProxyGroup from "../components/proxy-group";
+import BasePage from "../components/base/base-page";
+import ProxyItem from "../components/proxy/proxy-item";
+import ProxyGroup from "../components/proxy/proxy-group";
 
 const ProxyPage = () => {
   const { mutate } = useSWRConfig();
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 844b8cb..a7aea42 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -1,9 +1,9 @@
 import { Paper } from "@mui/material";
-import BasePage from "../components/base-page";
+import Notice from "../components/base/base-notice";
+import BasePage from "../components/base/base-page";
 import SettingVerge from "../components/setting/setting-verge";
 import SettingClash from "../components/setting/setting-clash";
 import SettingSystem from "../components/setting/setting-system";
-import Notice from "../components/notice";
 
 const SettingPage = () => {
   const onError = (error: any) => {