diff --git a/front-end/src/pages/Home.jsx b/front-end/src/pages/Home.jsx
index 665c4c21..4a442ccf 100644
--- a/front-end/src/pages/Home.jsx
+++ b/front-end/src/pages/Home.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Heart, MessageCircle, Share2, MapPin, Calendar, Users, DollarSign, Star, Verified, Plus, Filter,ArrowRight, TrendingUp,TentTree} from 'lucide-react';
+import { Heart, MessageCircle, Share2, MapPin, Calendar, Users, DollarSign, Star, Verified, Plus, Filter,ArrowRight, TrendingUp,TentTree, Moon, Sun} from 'lucide-react';
 import useUsers from '../auth/useUser.jsx';
 import '../styles/Home.css'
 import {Link} from 'react-router-dom'
@@ -35,6 +35,7 @@ const TripFeed = () => {
     const [showSuccessMessage, setShowSuccessMessage] = useState(false);
     const [showErrorMessage, setShowErrorMessage] = useState(false);
     const [createTrip, setCreateTrip] = useState([]);
+    const [darkMode, setDarkMode] = useState(false);
 
     const [result, setResult] = useState("");
     const [isLoading, setIsLoading] = useState(false);
@@ -49,6 +50,28 @@ const TripFeed = () => {
     const value3= info?.age
     const value4= info?.budget
 
+    // Load dark mode preference from localStorage on component mount
+    useEffect(() => {
+        const savedDarkMode = localStorage.getItem('darkMode') === 'true';
+        setDarkMode(savedDarkMode);
+        if (savedDarkMode) {
+            document.documentElement.classList.add('dark');
+        }
+    }, []);
+
+    // Toggle dark mode and save preference
+    const toggleDarkMode = () => {
+        const newDarkMode = !darkMode;
+        setDarkMode(newDarkMode);
+        localStorage.setItem('darkMode', newDarkMode.toString());
+
+        if (newDarkMode) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    };
+
     useEffect(() => {
         if (showSuccessMessage || showErrorMessage) {
             const timer = setTimeout(() => {
@@ -128,25 +151,25 @@ const TripFeed = () => {
     }
 
 
-        const handleInputChange = (e) => {
-            const {name, value} = e.target;
-            setFilters((prev) => ({...prev, [name]: value}));
-        };
-        // const CreateTripModal = () => (
-        //
-        // );
-
-        const handleCreateTrip = () => {
-            setShowCreateTrip(true);
-        };
-
-        // const handleLike = (tripId) => {
-        //     setTrips(trips.map(trip =>
-        //         trip.id === tripId
-        //             ? {...trip, likes: trip.likes + 1}
-        //             : trip
-        //     ));
-        // };
+    const handleInputChange = (e) => {
+        const {name, value} = e.target;
+        setFilters((prev) => ({...prev, [name]: value}));
+    };
+    // const CreateTripModal = () => (
+    //
+    // );
+
+    const handleCreateTrip = () => {
+        setShowCreateTrip(true);
+    };
+
+    // const handleLike = (tripId) => {
+    //     setTrips(trips.map(trip =>
+    //         trip.id === tripId
+    //             ? {...trip, likes: trip.likes + 1}
+    //             : trip
+    //     ));
+    // };
     const predict = async () => {
         const inputData = {
             Language: value1,
@@ -203,7 +226,16 @@ const TripFeed = () => {
 
 
     return (
-        <div className="trip-feed-container">
+        <div className={`trip-feed-container ${darkMode ? 'dark-theme' : ''}`}>
+            {/* Dark Mode Toggle Button */}
+            <button
+                onClick={toggleDarkMode}
+                className="dark-mode-toggle"
+                aria-label="Toggle dark mode"
+            >
+                {darkMode ? <Sun size={20} /> : <Moon size={20} />}
+            </button>
+
             <div className="feed-header">
                 <div className="header-content-home">
                     {user && <p className='hi'>Hi</p>}
@@ -213,11 +245,11 @@ const TripFeed = () => {
                         Lanka</p>
                 </div>
 
-            <div className='image-row'>
-                <img className='back_images' src={mountain}></img>
-                <img className='back_images' src={temple}></img>
-                <img className='back_images' src={beach}></img>
-            </div>
+                <div className='image-row'>
+                    <img className='back_images' src={mountain}></img>
+                    <img className='back_images' src={temple}></img>
+                    <img className='back_images' src={beach}></img>
+                </div>
             </div>
             {}
             {/*{user &&<div><br/><br/><br/><br/></div>}*/}
@@ -238,53 +270,53 @@ const TripFeed = () => {
             {user&&<div className='predict-section'>
                 <h2>Having troubles deciding where to go .........</h2>
                 <p>Let us decide it for you</p>
-            <button className='predict-button' onClick={predict}>Suggest Destination</button><br/><br/><br/>
-            <p className={`pred ${isLoading ? 'loading' : result ? 'show' : ''}`}>
-                {result}
-            </p>
+                <button className='predict-button' onClick={predict}>Suggest Destination</button><br/><br/><br/>
+                <p className={`pred ${isLoading ? 'loading' : result ? 'show' : ''}`}>
+                    {result}
+                </p>
             </div>
             }
             {!user&&
-            <section className="section-container">
-                <div className="section-wrapper">
-                    <div className="section-header">
-                        <h2 className="section-title">Why Choose Travago?</h2>
-                        <p className="section-subtitle">Your perfect travel companion</p>
-                    </div>
+                <section className="section-container">
+                    <div className="section-wrapper">
+                        <div className="section-header">
+                            <h2 className="section-title">Why Choose Travago?</h2>
+                            <p className="section-subtitle">Your perfect travel companion</p>
+                        </div>
 
-                    <div className="feature-grid">
-                        <div className="feature-item">
-                            <div className="feature-icon-container bg-location">
-                                <TentTree className="text-white" size={24}/>
+                        <div className="feature-grid">
+                            <div className="feature-item">
+                                <div className="feature-icon-container bg-location">
+                                    <TentTree className="text-white" size={24}/>
+                                </div>
+                                <h3 className="feature-title">Fast Trip Creation</h3>
+                                <p className="feature-description">
+                                    You can create your own trip based on your preferences.
+                                </p>
                             </div>
-                            <h3 className="feature-title">Fast Trip Creation</h3>
-                            <p className="feature-description">
-                                You can create your own trip based on your preferences.
-                            </p>
-                        </div>
 
-                        <div className="feature-item" style={{animationDelay: '0.5s'}}>
-                            <div className="feature-icon-container bg-booking">
-                                <Calendar className="text-white" size={24}/>
+                            <div className="feature-item" style={{animationDelay: '0.5s'}}>
+                                <div className="feature-icon-container bg-booking">
+                                    <Calendar className="text-white" size={24}/>
+                                </div>
+                                <h3 className="feature-title">Easy Joining</h3>
+                                <p className="feature-description">
+                                    With just a few clicks, can join a trip.
+                                </p>
                             </div>
-                            <h3 className="feature-title">Easy Joining</h3>
-                            <p className="feature-description">
-                                With just a few clicks, can join a trip.
-                            </p>
-                        </div>
 
-                        <div className="feature-item" style={{animationDelay: '1s'}}>
-                            <div className="feature-icon-container bg-support">
-                                <Users className="text-white" size={24}/>
+                            <div className="feature-item" style={{animationDelay: '1s'}}>
+                                <div className="feature-icon-container bg-support">
+                                    <Users className="text-white" size={24}/>
+                                </div>
+                                <h3 className="feature-title">24/7 Support</h3>
+                                <p className="feature-description">
+                                    Our dedicated team is always ready to help you have the best travel experience.
+                                </p>
                             </div>
-                            <h3 className="feature-title">24/7 Support</h3>
-                            <p className="feature-description">
-                                Our dedicated team is always ready to help you have the best travel experience.
-                            </p>
                         </div>
                     </div>
-                </div>
-            </section>
+                </section>
             }
             <br/>
             {!user && <section className="hero-section">
@@ -340,7 +372,7 @@ const TripFeed = () => {
                                     <option value="Horton Plains">Horton Plains</option>
                                     <option value="Knuckles">Knuckles</option>
                                     <option value="Bentota">Bentota</option>
-                                    <option value="Adam’s Peak">Adam’s Peak</option>
+                                    <option value="Adam's Peak">Adam's Peak</option>
                                     <option value="Pigeon Island">Pigeon Island</option>
                                     <option value="Unawatuna">Unawatuna</option>
                                     <option value="Hikkaduwa">Hikkaduwa</option>
diff --git a/front-end/src/styles/Home.css b/front-end/src/styles/Home.css
index f0e5e743..8a343ad6 100644
--- a/front-end/src/styles/Home.css
+++ b/front-end/src/styles/Home.css
@@ -1493,4 +1493,294 @@
     .predict-section p {
         font-size: 1.1rem;
     }
+}
+/* Dark Mode Toggle Button */
+.dark-mode-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    background: var(--toggle-bg, #fff);
+    border: 2px solid var(--toggle-border, #e1e5e9);
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.dark-mode-toggle:hover {
+    transform: scale(1.1);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.dark-mode-toggle svg {
+    color: var(--toggle-icon, #333);
+    transition: color 0.3s ease;
+}
+
+/* Dark Theme Styles */
+.dark-theme {
+    --bg-primary: #1a1a2e;
+    --bg-secondary: #16213e;
+    --bg-tertiary: #0f3460;
+    --text-primary: #ffffff;
+    --text-secondary: #b8c5d6;
+    --text-muted: #8892a6;
+    --border-color: #2a3441;
+    --card-bg: #16213e;
+    --modal-bg: #1a1a2e;
+    --input-bg: #0f3460;
+    --button-primary: #4f46e5;
+    --button-secondary: #374151;
+    --toggle-bg: #16213e;
+    --toggle-border: #2a3441;
+    --toggle-icon: #ffffff;
+}
+
+.dark-theme,
+.dark-theme * {
+    color: var(--text-primary);
+}
+
+/* Container backgrounds */
+.dark-theme .trip-feed-container {
+    background: var(--bg-primary);
+    min-height: 100vh;
+}
+
+/*.dark-theme .feed-header {*/
+/*    background: var(--bg-secondary);*/
+/*}*/
+
+.dark-theme .header-content-home {
+    color: var(--text-primary);
+}
+
+.dark-theme .hi,
+.dark-theme .name,
+.dark-theme .description {
+    color: var(--text-primary);
+}
+
+/* Cards and sections */
+.dark-theme .card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+/*.dark-theme .section-container {*/
+/*    background: var(--bg-secondary);*/
+/*}*/
+
+.dark-theme .section-title,
+.dark-theme .section-subtitle {
+    color: var(--text-primary);
+}
+
+.dark-theme .feature-title {
+    color: var(--text-primary);
+}
+
+.dark-theme .feature-description {
+    color: var(--text-secondary);
+}
+
+/*.dark-theme .hero-section {*/
+/*    background: var(--bg-tertiary);*/
+/*}*/
+
+.dark-theme .hero-title,
+.dark-theme .hero-description {
+    color: var(--text-primary);
+}
+
+/* Buttons */
+.dark-theme .join,
+.dark-theme .create-button,
+.dark-theme .predict-button,
+.dark-theme .cta-button {
+    background: var(--button-primary);
+    color: white;
+    border: none;
+}
+
+.dark-theme .join:hover,
+.dark-theme .create-button:hover,
+.dark-theme .predict-button:hover,
+.dark-theme .cta-button:hover {
+    background: #3730a3;
+    transform: translateY(-2px);
+}
+
+.dark-theme .cancel-button {
+    background: var(--button-secondary);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+}
+
+.dark-theme .cancel-button:hover {
+    background: #4b5563;
+}
+
+/* Trip creation sections */
+.dark-theme .join_create_trips {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+}
+
+.dark-theme .join-trip,
+.dark-theme .create-trip {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+}
+
+.dark-theme .join-trip p,
+.dark-theme .create-trip p {
+    color: var(--text-primary);
+}
+
+.dark-theme .predict-section {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+}
+
+.dark-theme .predict-section h2,
+.dark-theme .predict-section p {
+    color: var(--text-primary);
+}
+
+/* Modal styles */
+.dark-theme .modal-overlay {
+    background: rgba(0, 0, 0, 0.8);
+}
+
+.dark-theme .modal-content {
+    background: var(--modal-bg);
+    border: 1px solid var(--border-color);
+}
+
+.dark-theme .modal-header h2 {
+    color: var(--text-primary);
+}
+
+.dark-theme .close-button {
+    color: var(--text-primary);
+    background: transparent;
+    border: none;
+}
+
+.dark-theme .close-button:hover {
+    background: var(--bg-tertiary);
+}
+
+/* Form elements */
+.dark-theme .form-group label {
+    color: var(--text-primary);
+}
+
+.dark-theme .form-group input,
+.dark-theme .form-group select,
+.dark-theme .form-group textarea {
+    background: var(--input-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
+}
+
+.dark-theme .form-group input::placeholder,
+.dark-theme .form-group textarea::placeholder {
+    color: var(--text-muted);
+}
+
+.dark-theme .form-group input:focus,
+.dark-theme .form-group select:focus,
+.dark-theme .form-group textarea:focus {
+    border-color: var(--button-primary);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+/* Trip details */
+.dark-theme .trip-details {
+    color: var(--text-secondary);
+}
+
+.dark-theme .trip-detail span {
+    color: var(--text-secondary);
+}
+
+.dark-theme .card-location,
+.dark-theme .card-title {
+    color: var(--text-primary);
+}
+
+.dark-theme .view-btn {
+    color: var(--button-primary);
+}
+
+.dark-theme .view-btn:hover {
+    color: #3730a3;
+}
+
+/* Prediction result */
+.dark-theme .pred {
+    color: var(--text-primary);
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+}
+
+/* Success/Error messages */
+.dark-theme .success-message {
+    background: #065f46;
+    color: #d1fae5;
+    border: 1px solid #059669;
+}
+
+.dark-theme .error-message {
+    background: #7f1d1d;
+    color: #fecaca;
+    border: 1px solid #dc2626;
+}
+
+/* Scrollbar for dark mode */
+.dark-theme ::-webkit-scrollbar {
+    width: 8px;
+}
+
+.dark-theme ::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+}
+
+.dark-theme ::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 4px;
+}
+
+.dark-theme ::-webkit-scrollbar-thumb:hover {
+    background: #4b5563;
+}
+
+/* Smooth transitions for theme switching */
+.trip-feed-container,
+.trip-feed-container * {
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+/* Media queries for mobile */
+@media (max-width: 768px) {
+    .dark-mode-toggle {
+        top: 15px;
+        right: 15px;
+        width: 45px;
+        height: 45px;
+    }
+
+    .dark-mode-toggle svg {
+        width: 18px;
+        height: 18px;
+    }
 }
\ No newline at end of file