diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 29f33c93..6a2c0909 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,7 +9,9 @@ import ProxyHosts from './pages/ProxyHosts'
 import RemoteServers from './pages/RemoteServers'
 import ImportCaddy from './pages/ImportCaddy'
 import Certificates from './pages/Certificates'
-import Settings from './pages/Settings'
+import SettingsLayout from './pages/SettingsLayout'
+import Security from './pages/Security'
+import Backups from './pages/Backups'
 import Logs from './pages/Logs'
 import Login from './pages/Login'
 import Setup from './pages/Setup'
@@ -35,8 +37,16 @@ export default function App() {
             <Route path="remote-servers" element={<RemoteServers />} />
             <Route path="certificates" element={<Certificates />} />
             <Route path="import" element={<ImportCaddy />} />
-            <Route path="logs" element={<Logs />} />
-            <Route path="settings" element={<Settings />} />
+
+            {/* Settings Routes */}
+            <Route path="settings" element={<SettingsLayout />}>
+              <Route index element={<Security />} /> {/* Default to Security */}
+              <Route path="security" element={<Security />} />
+              <Route path="tasks">
+                <Route path="backups" element={<Backups />} />
+                <Route path="logs" element={<Logs />} />
+              </Route>
+            </Route>
           </Route>
         </Routes>
         <ToastContainer />
diff --git a/frontend/src/api/settings.ts b/frontend/src/api/settings.ts
new file mode 100644
index 00000000..97fff86c
--- /dev/null
+++ b/frontend/src/api/settings.ts
@@ -0,0 +1,14 @@
+import client from './client'
+
+export interface SettingsMap {
+  [key: string]: string
+}
+
+export const getSettings = async (): Promise<SettingsMap> => {
+  const response = await client.get('/settings')
+  return response.data
+}
+
+export const updateSetting = async (key: string, value: string, category?: string, type?: string): Promise<void> => {
+  await client.post('/settings', { key, value, category, type })
+}
diff --git a/frontend/src/api/system.ts b/frontend/src/api/system.ts
new file mode 100644
index 00000000..43636412
--- /dev/null
+++ b/frontend/src/api/system.ts
@@ -0,0 +1,34 @@
+import client from './client';
+
+export interface UpdateInfo {
+  available: boolean;
+  latest_version: string;
+  changelog_url: string;
+}
+
+export interface Notification {
+  id: string;
+  type: 'info' | 'success' | 'warning' | 'error';
+  title: string;
+  message: string;
+  read: boolean;
+  created_at: string;
+}
+
+export const checkUpdates = async (): Promise<UpdateInfo> => {
+  const response = await client.get('/system/updates');
+  return response.data;
+};
+
+export const getNotifications = async (unreadOnly = false): Promise<Notification[]> => {
+  const response = await client.get('/notifications', { params: { unread: unreadOnly } });
+  return response.data;
+};
+
+export const markNotificationRead = async (id: string): Promise<void> => {
+  await client.post(`/notifications/${id}/read`);
+};
+
+export const markAllNotificationsRead = async (): Promise<void> => {
+  await client.post('/notifications/read-all');
+};
diff --git a/frontend/src/api/user.ts b/frontend/src/api/user.ts
new file mode 100644
index 00000000..b27e5d75
--- /dev/null
+++ b/frontend/src/api/user.ts
@@ -0,0 +1,19 @@
+import client from './client'
+
+export interface UserProfile {
+  id: number
+  email: string
+  name: string
+  role: string
+  api_key: string
+}
+
+export const getProfile = async (): Promise<UserProfile> => {
+  const response = await client.get('/user/profile')
+  return response.data
+}
+
+export const regenerateApiKey = async (): Promise<{ api_key: string }> => {
+  const response = await client.post('/user/api-key')
+  return response.data
+}