diff --git a/frontend/src/app/home/layout.tsx b/frontend/src/app/home/layout.tsx
new file mode 100644
index 00000000..91b796d1
--- /dev/null
+++ b/frontend/src/app/home/layout.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from '../providers/ThemeProvider';
+
+export default function HomeLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <div className="min-h-screen w-full bg-white dark:bg-gray-900 transition-colors">
+      <nav className="w-full p-4 bg-white dark:bg-gray-800 shadow-sm">
+        <div className="max-w-7xl mx-auto flex justify-between items-center">
+          <Link href="/" className="flex items-center space-x-2">
+            <Image
+              src="/codefox.svg"
+              alt="CodeFox Logo"
+              width={40}
+              height={40}
+              className="h-10 w-auto"
+            />
+            <span className="text-2xl font-bold text-indigo-600 dark:text-indigo-400">
+              CodeFox
+            </span>
+          </Link>
+
+          <div className="flex items-center space-x-4">
+            <button
+              onClick={toggleTheme}
+              className="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+              aria-label="Toggle theme"
+            >
+              {theme === 'dark' ? (
+                <Sun className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+              ) : (
+                <Moon className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+              )}
+            </button>
+            <Link
+              href="/login"
+              className="px-4 py-2 rounded-md bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 border border-gray-200 dark:border-gray-600 transition-colors"
+            >
+              Sign In
+            </Link>
+            <Link
+              href="/register"
+              className="px-4 py-2 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 transition-colors"
+            >
+              Sign Up
+            </Link>
+          </div>
+        </div>
+      </nav>
+      <main className="container mx-auto px-4 pt-8">{children}</main>
+    </div>
+  );
+}
diff --git a/frontend/src/app/home/page.tsx b/frontend/src/app/home/page.tsx
new file mode 100644
index 00000000..8905a6e9
--- /dev/null
+++ b/frontend/src/app/home/page.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { useState } from 'react';
+import { SendIcon } from 'lucide-react';
+
+export default function HomePage() {
+  const [message, setMessage] = useState('');
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-4rem)]">
+      <div className="w-full max-w-3xl bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
+        <div className="h-[400px] p-4 overflow-y-auto bg-gray-50 dark:bg-gray-900">
+          <div className="space-y-4">
+            <div className="flex items-start">
+              <div className="bg-indigo-100 dark:bg-indigo-900 rounded-lg p-3 max-w-[80%]">
+                <p className="text-gray-800 dark:text-gray-200">
+                  Hello! How can I help you today?
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="p-4 border-t dark:border-gray-700">
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              placeholder="Type your message..."
+              className="flex-1 p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400"
+            />
+            <button className="p-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
+              <SendIcon size={20} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 8e217411..fe890099 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata, Viewport } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import { BaseProviders } from './providers/BaseProvider';
+import { ThemeProvider } from './providers/ThemeProvider';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -25,7 +26,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
-        <BaseProviders>{children}</BaseProviders>
+        <ThemeProvider>{children}</ThemeProvider>
       </body>
     </html>
   );
diff --git a/frontend/src/app/providers/ThemeProvider.tsx b/frontend/src/app/providers/ThemeProvider.tsx
new file mode 100644
index 00000000..f09103e6
--- /dev/null
+++ b/frontend/src/app/providers/ThemeProvider.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'dark' | 'light';
+
+const ThemeContext = createContext<{
+  theme: Theme;
+  toggleTheme: () => void;
+}>({ theme: 'light', toggleTheme: () => {} });
+
+export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
+  const [theme, setTheme] = useState<Theme>('light');
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('theme') as Theme;
+    if (savedTheme) {
+      setTheme(savedTheme);
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('theme', theme);
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => useContext(ThemeContext);
\ No newline at end of file
diff --git a/frontend/src/components/user-settings.tsx b/frontend/src/components/user-settings.tsx
index a6179a66..b73b284c 100644
--- a/frontend/src/components/user-settings.tsx
+++ b/frontend/src/components/user-settings.tsx
@@ -35,8 +35,10 @@ export const UserSettings = ({ isSimple }: UserSettingsProps) => {
 
   const handleLogout = useMemo(() => {
     return () => {
+      router.push('/');
+      // router.push('/login');
       logout();
-      router.push('/login');
+      
     };
   }, [logout, router]);