diff --git a/client/src/App.jsx b/client/src/App.jsx
index 150821d..556c1ec 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Navigate, BrowserRouter } from 'react-router-dom';
 import Layout from './Layout';
 import Home from './pages/Home';
 import ContactUs from './pages/ContactUs';
@@ -56,7 +56,7 @@ function App() {
   }
   return (
 
-    <Router>
+    <BrowserRouter>
       <ToastContainer autoClose={2000} position="top-center" newestOnTop />
 
       <Layout setLoggedIn={setLoggedIn}>
@@ -90,7 +90,7 @@ function App() {
           <Route path='*' element={ <Error/>} />
         </Routes>
       </Layout>
-    </Router>
+    </BrowserRouter>
   );
 }
 
diff --git a/client/src/components/Footer2.jsx b/client/src/components/Footer2.jsx
index bc20554..c87a4c9 100644
--- a/client/src/components/Footer2.jsx
+++ b/client/src/components/Footer2.jsx
@@ -9,31 +9,23 @@ const Footer2 = () =>{
     <footer className="bg-gray-900 shadow ">
       <div className="w-full max-w-screen-xl mx-auto p-4 md:py-8">
         <div className="sm:flex sm:items-center sm:justify-between">
-          <a href="#" className="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
+          <Link to="/" className="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
        
             <img src={logo2} className="h-16" alt="Logo" />
             
-          </a>
+          </Link>
           <ul className="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
-          <Link to="/aboutUs">
-            <li>
-              <a href="#" className="hover:underline me-4 md:me-6">About</a>
-            </li>
+            <Link to="/aboutUs" className="hover:underline me-4 md:me-6">
+              <li>About</li>
             </Link>
-            <Link to="/calculator">
-            <li>
-              <a href="#" className="hover:underline me-4 md:me-6">Calculator</a>
-            </li>
+            <Link to="/calculator" className="hover:underline me-4 md:me-6">
+              <li>Calculator</li>
             </Link>
-            <Link to="/information">
-            <li>
-              <a href="#" className="hover:underline me-4 md:me-6">Information</a>
-            </li>
+            <Link to="/information" className="hover:underline me-4 md:me-6">
+              <li>Information</li>
             </Link>
-            <Link to="/contactUs">
-            <li>
-              <a href="#" className="hover:underline">Contact</a>
-            </li>
+            <Link to="/contactUs" className="hover:underline">
+              <li>Contact</li>
             </Link>
           </ul>
         </div>
diff --git a/client/src/components/Header.jsx b/client/src/components/Header.jsx
index 06cca91..abe6524 100644
--- a/client/src/components/Header.jsx
+++ b/client/src/components/Header.jsx
@@ -254,12 +254,12 @@ const handleMenuClick = () => {
             className={` flex flex-wrap items-center justify-between  p-2 `}
           >
             <div className="logo flex space-x-2 items-center ">
-              <a href="#">
-                <img className="h-12" src={leaf} />
-              </a>
-              <a href="#">
-                <img className="h-7" src={logo} />
-              </a>
+              <Link to="/">
+                  <img className="h-12" src={leaf} />
+              </Link>
+              <Link to="/">
+                  <img className="h-7" src={logo} />
+              </Link>
             </div>
 
             <div className=" md:hidden flex items-center justify-center">
diff --git a/client/src/components/Hero.jsx b/client/src/components/Hero.jsx
index f64c3d1..dd23854 100644
--- a/client/src/components/Hero.jsx
+++ b/client/src/components/Hero.jsx
@@ -23,9 +23,9 @@ function Hero() {
             calculate their environmental impact accurately with easy-to-use
             tools and insightful data. 
           </div>
-          <div className="btn w-fit bg-green-500 font-Rubik p-2 md:py-3 px-3 rounded-2xl  hover:bg-green-600">
-            <Link to="/calculator">Track Your Carbon Footprint</Link>
-          </div>
+          <Link to="/calculator"><div className="btn w-fit bg-green-500 font-Rubik p-2 md:py-3 px-3 rounded-2xl  hover:bg-green-600">
+            Track Your Carbon Footprint
+          </div></Link>
         </div>
         <div className="gif">
           <img className="rounded-lg hidden sm:block md:max-w-sm" src={giffy} data-aos="fade-left"/>
diff --git a/client/src/pages/Information.jsx b/client/src/pages/Information.jsx
index 11decbc..1798498 100644
--- a/client/src/pages/Information.jsx
+++ b/client/src/pages/Information.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 const Information = () => {
     return (
@@ -42,7 +43,7 @@ const Information = () => {
                 <p className="text-gray-700 mb-4">
                     Take the first step towards a sustainable future with PrithWe. Empower your business to make informed decisions, reduce your carbon footprint, and contribute to a greener and more resilient world.
                 </p>
-                <a href='#'><button className="bg-green-500 text-white py-2 px-6 rounded-lg hover:bg-green-600">Get Started with PrithWe</button></a>
+                <Link to='/'><button className="bg-green-500 text-white py-2 px-6 rounded-lg hover:bg-green-600">Get Started with PrithWe</button></Link>
             </section>
         </div>
     );