diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx
index 340932a0..06cabff9 100644
--- a/frontend/src/routes.tsx
+++ b/frontend/src/routes.tsx
@@ -1,5 +1,6 @@
 import { Navigate } from "react-router-dom";
 import AppLayout from "src/components/layouts/AppLayout";
+import SettingsLayout from "src/components/layouts/SettingsLayout";
 import TwoColumnFullScreenLayout from "src/components/layouts/TwoColumnFullScreenLayout";
 import { DefaultRedirect } from "src/components/redirects/DefaultRedirect";
 import { HomeRedirect } from "src/components/redirects/HomeRedirect";
@@ -105,22 +106,28 @@ const routes = [
         handle: { crumb: () => "Settings" },
         children: [
           {
-            index: true,
-            element: <Settings />,
-          },
-          {
-            path: "change-unlock-password",
-            element: <ChangeUnlockPassword />,
-            handle: { crumb: () => "Unlock Password" },
-          },
-          {
-            path: "key-backup",
-            element: <BackupMnemonic />,
-            handle: { crumb: () => "Key Backup" },
-          },
-          {
-            path: "node-backup",
-            element: <BackupNode />,
+            path: "",
+            element: <SettingsLayout />,
+            children: [
+              {
+                index: true,
+                element: <Settings />,
+              },
+              {
+                path: "change-unlock-password",
+                element: <ChangeUnlockPassword />,
+                handle: { crumb: () => "Unlock Password" },
+              },
+              {
+                path: "key-backup",
+                element: <BackupMnemonic />,
+                handle: { crumb: () => "Key Backup" },
+              },
+              {
+                path: "node-backup",
+                element: <BackupNode />,
+              },
+            ],
           },
         ],
       },