diff --git a/client/package-lock.json b/client/package-lock.json
index 4ac9c7a..b69e7d5 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -11,8 +11,7 @@
         "axios": "^1.8.4",
         "cors": "^2.8.5",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "react-icon": "^1.0.0",
+
         "react-icons": "^5.5.0",
         "react-router-dom": "^7.4.0"
       },
@@ -2746,16 +2745,7 @@
         "react": "^19.0.0"
       }
     },
-    "node_modules/react-icon": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/react-icon/-/react-icon-1.0.0.tgz",
-      "integrity": "sha512-VzSlpBHnLanVw79mOxyq98hWDi6DlxK9qPiZ1bAK6bLurMBCaxO/jjyYUrRx9+JGLc/NbnwOmyE/W5Qglbb2QA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "babel-runtime": "^5.3.3",
-        "react": ">=0.12.0"
-      }
-    },
+
     "node_modules/react-icons": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
diff --git a/client/package.json b/client/package.json
index 0792886..66788b4 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,7 +14,7 @@
     "cors": "^2.8.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-icon": "^1.0.0",
+
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.4.0"
   },
diff --git a/client/public/logo-footer.png b/client/public/logo-footer.png
new file mode 100644
index 0000000..3d3dd23
Binary files /dev/null and b/client/public/logo-footer.png differ
diff --git a/client/src/App.jsx b/client/src/App.jsx
index c631248..4978315 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,3 +1,4 @@
+
 import React, { useEffect, useState, createContext } from "react"
 import {
   BrowserRouter as Router,
@@ -16,6 +17,7 @@ function App() {
   const [userFullName, setUserFullName] = useState("")
   const navigate = useNavigate()
 
+
   async function checkUser() {
     try {
       const token = localStorage.getItem("token")
@@ -56,6 +58,7 @@ function App() {
     // getFullname()
   }, [])
   return (
+
     <AppState.Provider value={{ user, setUser }}>
       <Routes>
         <Route path="/" element={<Landing />} />
@@ -66,6 +69,7 @@ function App() {
       </Routes>
     </AppState.Provider>
   )
+
 }
 
 export default App
diff --git a/client/src/Component/Footer/Footer.jsx b/client/src/Component/Footer/Footer.jsx
new file mode 100644
index 0000000..344c283
--- /dev/null
+++ b/client/src/Component/Footer/Footer.jsx
@@ -0,0 +1,57 @@
+import React from "react";
+import styles from "./Footer.module.css"; 
+import logo from "../Footer/Image/logo-footer.png"; 
+import { FaFacebook, FaInstagram, FaYoutube } from "react-icons/fa"; 
+
+const Footer = () => {
+  return (
+    <footer className={styles.footer}>
+      {/* Logo and Socials */}
+      <div className={styles.logoSection}>
+        <img src={logo} alt="Evangadi Logo" className={styles.logo} />
+        <div className={styles.iconsWrapper}>
+          <a href="https://www.facebook.com" aria-label="Facebook">
+            <FaFacebook className={styles.icon} />
+          </a>
+          <a href="https://www.instagram.com" aria-label="Instagram">
+            <FaInstagram className={styles.icon} />
+          </a>
+          <a href="https://www.youtube.com" aria-label="YouTube">
+            <FaYoutube className={styles.icon} />
+          </a>
+        </div>
+      </div>
+
+      {/* Useful Links */}
+      <div className={styles.linksSection}>
+        <h3>Useful Links</h3>
+        <ul>
+            <li>
+                <a href="#">How it works</a>
+            </li>
+          <li>
+            <a href="#">Terms of Service</a>
+          </li>
+          <li>
+            <a href="#">Privacy Policy</a>
+          </li>
+        </ul>
+      </div>
+
+      {/* Contact Info */}
+      <div className={styles.contactSection}>
+        <h3>Contact Info</h3>
+        <ul>
+          <li>
+            <a href="mailto:support@evangadi.com">support@evangadi.com</a>
+          </li>
+          <li>
+            <a href="tel:+12023862702">+1-202-386-2702</a>
+          </li>
+        </ul>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/client/src/Component/Footer/Footer.module.css b/client/src/Component/Footer/Footer.module.css
new file mode 100644
index 0000000..2ca7dde
--- /dev/null
+++ b/client/src/Component/Footer/Footer.module.css
@@ -0,0 +1,65 @@
+.footer {
+  background-color: #222;
+  color: white;
+  padding: 40px 20px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  text-align: center;
+}
+
+.logoSection {
+  flex: 1;
+  min-width: 250px;
+}
+
+.logo {
+  width: 150px;
+  margin-bottom: 10px;
+}
+
+.iconsWrapper {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+}
+
+.icon {
+  color: white;
+  font-size: 24px;
+  transition: 0.3s;
+}
+
+.icon:hover {
+  color: #f4a261;
+}
+
+.linksSection,
+.contactSection {
+  flex: 1;
+  min-width: 250px;
+}
+
+h3 {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+ul li {
+  margin: 5px 0;
+}
+
+ul li a {
+  color:#5F7888;
+  text-decoration: none;
+  transition: 0.3s;
+}
+
+ul li a:hover {
+  color: #f4a261;
+}
diff --git a/client/src/Component/Footer/Image/logo-footer.png b/client/src/Component/Footer/Image/logo-footer.png
new file mode 100644
index 0000000..3d3dd23
Binary files /dev/null and b/client/src/Component/Footer/Image/logo-footer.png differ
diff --git a/client/src/Component/Header/Header.jsx b/client/src/Component/Header/Header.jsx
index cf5af29..8af6f5b 100644
--- a/client/src/Component/Header/Header.jsx
+++ b/client/src/Component/Header/Header.jsx
@@ -1,3 +1,4 @@
+
 import React, { useContext, useState } from "react"
 import { Link, useNavigate } from "react-router-dom"
 import style from "./Header.module.css"
@@ -28,6 +29,7 @@ function Header() {
           {" "}
           {user.username ? "LOG OUT" : "SIGN IN"}
           {console.log(user.username ? "yes" : "no")}
+
         </button>
       </div>
     </header>