diff --git a/index.html b/index.html
index e57b7cf..804373c 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Habit Tracker App</title>
     <meta name="description" content="Track your habits and visualize your progress with HabitGrid." />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/assets/fav.png" />
     <link rel="stylesheet" href="/src/index.css" />
   </head>
   <body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100">
diff --git a/public/assets/fav.png b/public/assets/fav.png
new file mode 100644
index 0000000..9ed4f30
Binary files /dev/null and b/public/assets/fav.png differ
diff --git a/public/assets/logo.png b/public/assets/logo.png
new file mode 100644
index 0000000..91770b7
Binary files /dev/null and b/public/assets/logo.png differ
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 4e87fe8..33ab1c7 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Plus, Settings, TrendingUp, Flame, Calendar } from 'lucide-react';
+import { Plus, Settings, TrendingUp, Flame, Calendar, Moon, Sun } from 'lucide-react';
 import { Button } from '../components/ui/button';
 import { useToast } from '../components/ui/use-toast';
 import HabitCard from '../components/HabitCard';
@@ -12,11 +12,24 @@ const HomePage = () => {
   const { toast } = useToast();
   const [habits, setHabits] = useState([]);
   const [isPremium] = useState(false);
+  const [darkMode, setDarkMode] = useState(() => {
+    return localStorage.getItem('theme') === 'dark';
+  });
 
   useEffect(() => {
     loadHabits();
   }, []);
 
+  useEffect(() => {
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    }
+  }, [darkMode]);
+
   const loadHabits = () => {
     const loadedHabits = getHabits();
     setHabits(loadedHabits);
@@ -44,13 +57,7 @@ const HomePage = () => {
           className="flex items-center justify-between mb-8"
         >
           <div className="flex items-center gap-3">
-            <div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg">
-              <div className="grid grid-cols-4 gap-0.5">
-                {[...Array(11)].map((_, i) => (
-                  <div key={i} className="w-1.5 h-1.5 bg-white rounded-sm opacity-90" />
-                ))}
-              </div>
-            </div>
+            <img src="/assets/logo.png" alt="HabitGrid Logo" className="w-12 h-12 rounded-xl shadow-lg object-cover" />
             <div>
               <h1 className="text-3xl font-bold bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">
                 HabitGrid
@@ -58,14 +65,25 @@ const HomePage = () => {
               <p className="text-sm text-muted-foreground">Commit to yourself, one square at a time</p>
             </div>
           </div>
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => navigate('/settings')}
-            className="rounded-full"
-          >
-            <Settings className="w-5 h-5" />
-          </Button>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setDarkMode((prev) => !prev)}
+              className="rounded-full"
+              aria-label="Toggle dark mode"
+            >
+              {darkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => navigate('/settings')}
+              className="rounded-full"
+            >
+              <Settings className="w-5 h-5" />
+            </Button>
+          </div>
         </motion.div>
 
         {/* Stats Overview */}
diff --git a/src/pages/SettingsPage.jsx b/src/pages/SettingsPage.jsx
index f7a5350..a0a5b76 100644
--- a/src/pages/SettingsPage.jsx
+++ b/src/pages/SettingsPage.jsx
@@ -11,23 +11,23 @@ import { exportData, importData, clearAllData } from '../lib/storage';
 const SettingsPage = () => {
   const navigate = useNavigate();
   const { toast } = useToast();
-  const [darkMode, setDarkMode] = useState(false);
+  const [darkMode, setDarkMode] = useState(() => {
+    return localStorage.getItem('theme') === 'dark';
+  });
   const [notifications, setNotifications] = useState(false);
 
   useEffect(() => {
-    const isDark = document.documentElement.classList.contains('dark');
-    setDarkMode(isDark);
-  }, []);
-
-  const toggleDarkMode = (enabled) => {
-    setDarkMode(enabled);
-    if (enabled) {
+    if (darkMode) {
       document.documentElement.classList.add('dark');
       localStorage.setItem('theme', 'dark');
     } else {
       document.documentElement.classList.remove('dark');
       localStorage.setItem('theme', 'light');
     }
+  }, [darkMode]);
+
+  const toggleDarkMode = (enabled) => {
+    setDarkMode(enabled);
   };
 
   const handleExport = () => {
