diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7e7ff45f..1a29c33f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -11,7 +11,9 @@ import ImportCaddy from './pages/ImportCaddy'
 import Certificates from './pages/Certificates'
 import SystemSettings from './pages/SystemSettings'
 import Account from './pages/Account'
+import Settings from './pages/Settings'
 import Backups from './pages/Backups'
+import Tasks from './pages/Tasks'
 import Logs from './pages/Logs'
 import Domains from './pages/Domains'
 import Login from './pages/Login'
@@ -41,14 +43,14 @@ export default function App() {
             <Route path="import" element={<ImportCaddy />} />
 
             {/* Settings Routes */}
-            <Route path="settings">
+            <Route path="settings" element={<Settings />}>
               <Route index element={<SystemSettings />} />
               <Route path="system" element={<SystemSettings />} />
               <Route path="account" element={<Account />} />
             </Route>
 
             {/* Tasks Routes */}
-            <Route path="tasks">
+            <Route path="tasks" element={<Tasks />}>
               <Route index element={<Backups />} />
               <Route path="backups" element={<Backups />} />
               <Route path="logs" element={<Logs />} />
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
new file mode 100644
index 00000000..c1d6af5e
--- /dev/null
+++ b/frontend/src/pages/Settings.tsx
@@ -0,0 +1,44 @@
+import { Link, Outlet, useLocation } from 'react-router-dom'
+
+export default function Settings() {
+  const location = useLocation()
+
+  const isActive = (path: string) => location.pathname === path
+
+  return (
+    <div className="">
+      <div className="mb-6">
+        <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">Settings</h2>
+        <p className="text-sm text-gray-500 dark:text-gray-400">Manage system and account settings</p>
+      </div>
+
+      <div className="flex items-center gap-4 mb-6">
+        <Link
+          to="/settings/system"
+          className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+            isActive('/settings/system')
+              ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300'
+              : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+          }`}
+        >
+          System
+        </Link>
+
+        <Link
+          to="/settings/account"
+          className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+            isActive('/settings/account')
+              ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300'
+              : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+          }`}
+        >
+          Account
+        </Link>
+      </div>
+
+      <div className="bg-white dark:bg-dark-card border border-gray-200 dark:border-gray-800 rounded-md p-6">
+        <Outlet />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/Tasks.tsx b/frontend/src/pages/Tasks.tsx
new file mode 100644
index 00000000..bc0411b2
--- /dev/null
+++ b/frontend/src/pages/Tasks.tsx
@@ -0,0 +1,44 @@
+import { Link, Outlet, useLocation } from 'react-router-dom'
+
+export default function Tasks() {
+  const location = useLocation()
+
+  const isActive = (path: string) => location.pathname === path
+
+  return (
+    <div className="">
+      <div className="mb-6">
+        <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">Tasks</h2>
+        <p className="text-sm text-gray-500 dark:text-gray-400">Manage system tasks and view logs</p>
+      </div>
+
+      <div className="flex items-center gap-4 mb-6">
+        <Link
+          to="/tasks/backups"
+          className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+            isActive('/tasks/backups')
+              ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300'
+              : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+          }`}
+        >
+          Backups
+        </Link>
+
+        <Link
+          to="/tasks/logs"
+          className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+            isActive('/tasks/logs')
+              ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300'
+              : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+          }`}
+        >
+          Logs
+        </Link>
+      </div>
+
+      <div className="bg-white dark:bg-dark-card border border-gray-200 dark:border-gray-800 rounded-md p-6">
+        <Outlet />
+      </div>
+    </div>
+  )
+}