diff --git a/packages/app/src/Pages/settings/Menu.tsx b/packages/app/src/Pages/settings/Menu/Menu.tsx
similarity index 74%
rename from packages/app/src/Pages/settings/Menu.tsx
rename to packages/app/src/Pages/settings/Menu/Menu.tsx
index 9729650d..6d70a9e1 100644
--- a/packages/app/src/Pages/settings/Menu.tsx
+++ b/packages/app/src/Pages/settings/Menu/Menu.tsx
@@ -1,12 +1,10 @@
-import classNames from "classnames";
-import { ReactNode, useCallback } from "react";
-import { FormattedMessage } from "react-intl";
-import { Link, useNavigate } from "react-router-dom";
-
-import Icon from "@/Components/Icons/Icon";
+import {ReactNode, useCallback} from "react";
+import {FormattedMessage} from "react-intl";
+import {useNavigate} from "react-router-dom";
 import useLogin from "@/Hooks/useLogin";
-import { LoginStore, logout } from "@/Utils/Login";
-import { getCurrentSubscription } from "@/Utils/Subscription";
+import {LoginStore, logout} from "@/Utils/Login";
+import {getCurrentSubscription} from "@/Utils/Subscription";
+import {SettingsMenuComponent} from "@/Pages/settings/Menu/SettingsMenuComponent";
 
 export type SettingsMenuItems = Array<{
   title: ReactNode;
@@ -175,35 +173,4 @@ const SettingsIndex = () => {
   return <SettingsMenuComponent menu={settingsGroups} />;
 };
 
-export function SettingsMenuComponent({ menu }: { menu: SettingsMenuItems }) {
-  return (
-    <div className="flex flex-col">
-      {menu.map((group, groupIndex) => (
-        <div key={groupIndex} className="mb-4">
-          <div className="p-2 font-bold uppercase text-secondary text-xs tracking-wide">{group.title}</div>
-          {group.items.map(({ icon, iconBg, message, path, action }, index) => (
-            <Link
-              to={path || "#"}
-              onClick={action}
-              key={path || index}
-              className={classNames("px-2.5 py-1.5 flex justify-between items-center border border-border-color", {
-                "rounded-t-xl": index === 0,
-                "rounded-b-xl": index === group.items.length - 1,
-                "border-t-0": index !== 0,
-              })}>
-              <div className="flex items-center gap-3">
-                <div className={`p-1 ${iconBg} rounded-lg flex justify-center items-center text-white`}>
-                  <Icon name={icon} size={18} className="relative" />
-                </div>
-                <span className="text-base font-semibold flex-grow">{message}</span>
-              </div>
-              <Icon name="arrowFront" size={12} className="text-secondary" />
-            </Link>
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-}
-
 export default SettingsIndex;
diff --git a/packages/app/src/Pages/settings/Menu/SettingsMenuComponent.tsx b/packages/app/src/Pages/settings/Menu/SettingsMenuComponent.tsx
new file mode 100644
index 00000000..052a6b86
--- /dev/null
+++ b/packages/app/src/Pages/settings/Menu/SettingsMenuComponent.tsx
@@ -0,0 +1,35 @@
+import {Link} from "react-router-dom";
+import classNames from "classnames";
+import Icon from "@/Components/Icons/Icon";
+import {SettingsMenuItems} from "@/Pages/settings/Menu/Menu";
+
+export function SettingsMenuComponent({menu}: { menu: SettingsMenuItems }) {
+  return (
+    <div className="flex flex-col">
+      {menu.map((group, groupIndex) => (
+        <div key={groupIndex} className="mb-4">
+          <div className="p-2 font-bold uppercase text-secondary text-xs tracking-wide">{group.title}</div>
+          {group.items.map(({icon, iconBg, message, path, action}, index) => (
+            <Link
+              to={path || "#"}
+              onClick={action}
+              key={path || index}
+              className={classNames("px-2.5 py-1.5 flex justify-between items-center border border-border-color", {
+                "rounded-t-xl": index === 0,
+                "rounded-b-xl": index === group.items.length - 1,
+                "border-t-0": index !== 0,
+              })}>
+              <div className="flex items-center gap-3">
+                <div className={`p-1 ${iconBg} rounded-lg flex justify-center items-center text-white`}>
+                  <Icon name={icon} size={18} className="relative"/>
+                </div>
+                <span className="text-base font-semibold flex-grow">{message}</span>
+              </div>
+              <Icon name="arrowFront" size={12} className="text-secondary"/>
+            </Link>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/app/src/Pages/settings/Routes.tsx b/packages/app/src/Pages/settings/Routes.tsx
index e2bfea00..4d814275 100644
--- a/packages/app/src/Pages/settings/Routes.tsx
+++ b/packages/app/src/Pages/settings/Routes.tsx
@@ -4,7 +4,7 @@ import AccountsPage from "@/Pages/settings/Accounts";
 import { CacheSettings } from "@/Pages/settings/Cache";
 import { ManageHandleRoutes } from "@/Pages/settings/handle";
 import ExportKeys from "@/Pages/settings/Keys";
-import Menu from "@/Pages/settings/Menu";
+import Menu from "@/Pages/settings/Menu/Menu";
 import ModerationSettings from "@/Pages/settings/Moderation";
 import Notifications from "@/Pages/settings/Notifications";
 import Preferences from "@/Pages/settings/Preferences";
diff --git a/packages/app/src/Pages/settings/tools/index.tsx b/packages/app/src/Pages/settings/tools/index.tsx
index 448dfc80..8837091d 100644
--- a/packages/app/src/Pages/settings/tools/index.tsx
+++ b/packages/app/src/Pages/settings/tools/index.tsx
@@ -1,9 +1,10 @@
 import { FormattedMessage } from "react-intl";
 import { Outlet, RouteObject } from "react-router-dom";
 
-import { SettingsMenuComponent, SettingsMenuItems } from "../Menu";
+import { SettingsMenuItems } from "../Menu/Menu";
 import { FollowsRelayHealth } from "./follows-relay-health";
 import { PruneFollowList } from "./prune-follows";
+import {SettingsMenuComponent} from "@/Pages/settings/Menu/SettingsMenuComponent";
 
 const ToolMenuItems = [
   {