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 34fa09b5e81372e6dd5900a576d3c6431c825d11..419233ccfbe277748e818dc366df7b5cf04eb37f 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 52d5f6116b675175385a7d6f2941317fb98bbcc0..e2da3300046a335e5e5b42c6e9a632fee898813e 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 5a4da19779ab453d2885f70d9ac855f6dd9a043c..8fd17fcd55c248cbb32cfcf4798afd8a3b838152 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 7f22de6a573101fc2d5e23c1c462fe88448aef29..76ea37bdbf7150528b3e6d27c79bc740de98bc7b 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 9f6f4b06404689893eed16125920048230507a80..6962189b48dd17cb1f08bfdada21e29923909335 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 90675a0a12de6d1b9d2546d0895b1038152a3f0e..395eab4975bd9af18d5655c3f41f8cc33e25a5dd 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 adbe99f3601b84b99ef3855f7fdeb6c8803aa43c..4970de5f3857ae07668c2946b298082d0dc2a246 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 98bb8d3133d7ba72c6551701ae2129fa796391cc..603f1504af7f0d8d9eb2d844fa09a69b5979636c 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 c7a4a7e24cd41b22a9b03d055b6e0738e1cbe77d..882248e2a7c13479edbbc6c5efcd607ac2576b29 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 d9d5d21e3b4ae567324049cc28c721f54245c729..adb1892fe0805cc63a5e6539c0f7baae783477b6 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 844b8cb77bab0092c074e84ba526d9df35318fe7..a7aea421a9e6959831d809e6997b74edf165c8cb 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) => {