- - New ThemeConfigContext provider that fetches theme on app load and applies it to the DOM (title, meta description, favicon, CSS variables,

theme-color)/- - Admin Theme settings page under Settings > Theme tab/- All logo references (5 components) now pull from the theme config with fallback to default

src/layouts/SettingsLayout.js

@@ -1,12 +1,27 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
-import SettingsSidebar from '../components/SettingsSidebar';
+import SettingsTabs from '../components/SettingsSidebar';
+import { Settings } from 'lucide-react';
 
 const SettingsLayout = () => {
   return (
-    <div className="flex flex-col gap-6 lg:flex-row">
-      <SettingsSidebar />
-      <div className="flex-1 min-w-0">
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
+          <Settings className="h-6 w-6" />
+          Settings
+        </h1>
+        <p className="text-muted-foreground mt-1">
+          Manage your platform configuration and preferences
+        </p>
+      </div>
+
+      {/* Tabs Navigation */}
+      <SettingsTabs />
+
+      {/* Content Area */}
+      <div className="min-w-0">
         <Outlet />
       </div>
     </div>