diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..a0251f5191d1e8880a82b30743835275ce6ba4b2
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/images/Bali.jpeg b/public/images/Bali.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..188bdb47f5fb52cab7111398d60440976b768c71
Binary files /dev/null and b/public/images/Bali.jpeg differ
diff --git a/public/images/Paris.jpeg b/public/images/Paris.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..e494cea1161f447adf878cecafe219247682e07b
Binary files /dev/null and b/public/images/Paris.jpeg differ
diff --git a/public/images/bali.jpeg b/public/images/bali.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..188bdb47f5fb52cab7111398d60440976b768c71
Binary files /dev/null and b/public/images/bali.jpeg differ
diff --git a/public/images/dubai.jpeg b/public/images/dubai.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..99bb18391914d244090c80677d6a0d6c77a50c8a
Binary files /dev/null and b/public/images/dubai.jpeg differ
diff --git a/public/images/paris.jpeg b/public/images/paris.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..e494cea1161f447adf878cecafe219247682e07b
Binary files /dev/null and b/public/images/paris.jpeg differ
diff --git a/src/App.js b/src/App.js
index 9a23a6e097a6311492059b8955f81bb63549cd4d..2a297e21d13a0da4d0c2d1e90592d8c2d9da5830 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,7 @@ import Packages from "./pages/Packages.js";
 import Navbar from "./components/Navbar.js";
 import Footer from "./components/Footer.js";
 import FlightsResults from "./pages/FlightsResults.js"; //  results page
+import AppRouter from "./components/router/index.js"
 
 
 
@@ -27,13 +28,14 @@ function App() {
       </Helmet>
       <Navbar />
       <div className="container mt-5">
-        <Routes>
+        <AppRouter />
+        {/* <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/flights" element={<Flights />} />
           <Route path="/hotels" element={<Hotels />} />
           <Route path="/packages" element={<Packages />} />
           <Route path="/flights/results" element={<FlightsResults />} />
-        </Routes>
+        </Routes> */}
       </div>
       <Footer />
     </>
diff --git a/src/components/common/flight/TopRoutes.js b/src/components/common/flight/TopRoutes.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/components/router/index.js b/src/components/router/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..bd5d6ee407c943ab7200e9a975abc41ad45d9b52
--- /dev/null
+++ b/src/components/router/index.js
@@ -0,0 +1,30 @@
+import React, { lazy, Suspense, useEffect } from "react";
+import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from "react-router-dom";
+
+const Home = lazy(()=>import('../../pages/Home.js'));
+const Flights = lazy(()=>import('../../pages/Flights.js'));
+const Hotels = lazy(()=>import('../../pages/Hotels.js'));
+const Packages = lazy(()=>import('../../pages/Packages.js'));
+const FlightsResults = lazy(()=>import('../../pages/FlightsResults.js'));
+
+
+
+// Main Router Component
+const AppRouter = () => {
+    return (
+        // <Router>
+            <Suspense fallback={<div>Loading...</div>}>
+                {/* <LanguageRedirect /> */}
+                <Routes>
+                    <Route path="/" element={<Home />} />
+                    <Route path="/flights" element={<Flights />} />
+                    <Route path="/hotels" element={<Hotels />} />
+                    <Route path="/packages" element={<Packages />} />
+                    <Route path="/flights/results" element={<FlightsResults />} />
+                </Routes>
+            </Suspense>
+        // </Router>
+
+    );
+};
+export default AppRouter;
\ No newline at end of file
diff --git a/src/pages/Home.js b/src/pages/Home.js
index daa62be0081cb06da9ca602b3a7fda6ef6bef1dd..73bee54fb95c00a9fd53fcd7010a3ed5947eaf1c 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -26,6 +26,8 @@ const Home = () => {
       <Helmet>
         <title>hlafly - Home</title>
         <meta name="description" content="Explore the best travel deals and vacation packages." />
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
       </Helmet>
 
       {/* Hero Section */}
@@ -96,15 +98,15 @@ const Home = () => {
         <h2 className="text-center mb-4">Popular Destinations</h2>
         <div className="row">
           <div className="col-md-4">
-            <img src="/images/dubai.jpg" className="img-fluid rounded" alt="Dubai" />
+            <img src="/images/dubai.jpeg" className="img-fluid rounded" alt="Dubai" />
             <h5 className="mt-2 text-center">Dubai</h5>
           </div>
           <div className="col-md-4">
-            <img src="/images/paris.jpg" className="img-fluid rounded" alt="Paris" />
+            <img src="/images/Paris.jpeg" className="img-fluid rounded" alt="Paris" />
             <h5 className="mt-2 text-center">Paris</h5>
           </div>
           <div className="col-md-4">
-            <img src="/images/bali.jpg" className="img-fluid rounded" alt="Bali" />
+            <img src="/images/Bali.jpeg" className="img-fluid rounded" alt="Bali" />
             <h5 className="mt-2 text-center">Bali</h5>
           </div>
         </div>