diff --git a/src/App.css b/src/App.css
index be1ddf2..c28efea 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,12 +6,12 @@
 }
 
 .light-mode {
-  background-image: linear-gradient(to right, #FFffff 0%, #B4CEFF 100%);
+  background-image: linear-gradient(to right, #a7d7bc 0%, #d784b9 100%);
   /* Other light mode styles */
 }
 
 .dark-mode {
-  background-image: radial-gradient(black, rgb(9, 7, 43), rgb(3, 67, 67));
+  background-image: radial-gradient(rgb(102, 76, 76), rgb(9, 7, 43), rgb(3, 67, 67));
   /* Other dark mode styles */
 }
 
@@ -182,6 +182,6 @@ body {
 }
 .btn-hover:hover {
   background-color: white;
-  color: black !important; 
+  color: rgb(177, 189, 128) !important; 
 }
 
diff --git a/src/App.js b/src/App.js
index e5f88c4..4bdd1fc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Profile from "./pages/Profile";
 import Home from "./pages/Home";
 import ContactUs from "./pages/ContactUs";
+import Footer from "./footer/footer";
 
 function App() {
   return (
@@ -13,8 +14,11 @@ function App() {
           <Route exact path="/" element={<Home />} />
           <Route exact path="/tasty-tips" element={<Home />} />
           <Route exact path="/contactus" element={<ContactUs />} />
+       
         </Routes>
+        <Footer/>
       </div>
+    
     </BrowserRouter>
   );
 }
diff --git a/src/footer/footer.css b/src/footer/footer.css
new file mode 100644
index 0000000..64363c6
--- /dev/null
+++ b/src/footer/footer.css
@@ -0,0 +1,122 @@
+.scetion_padding{
+    padding: 4rem 4rem;
+}
+.footer{
+    background-color: #2d2d32;
+}
+.sb_footer{
+    display: flex;
+   
+}
+
+.sb_footer-links{
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+    text-align: left;
+    margin-bottom: 2rem;
+}
+.sb_footer-links_div{
+    width: 150px;
+    margin: 1rem;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    color: white;
+    margin-left: 120px;
+}
+
+a{
+    color: rgb(175, 175, 179);
+    text-decoration: none;
+}
+.socialmedia{
+    display: flex;
+    flex-direction: row;
+}
+.socialmedia img{
+   width: 80%;
+}
+.sb_footer-links_div h4{
+    font-size: 14px;
+    line-height: 17px;
+    margin-bottom: 0.9rem;
+}
+.sb_footer-links-div p{
+    font-size: 12px;
+    line-height: 15px;
+    margin: 0.5rem 0;
+    cursor: pointer;
+}
+.sb_footer-below{
+    display: flex;
+    flex-direction: row!important;
+    justify-content: space-between;
+    margin-top: 0.2rem;
+}
+.sb_footer-below-links{
+    display: flex;
+    flex-direction: row;
+   
+}
+.sb_footer-below-links p{
+    font-size: 13px;
+    line-height: 15px;
+    margin-left: 2rem;
+    margin-right: 2rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    color: white;
+    font-weight: 600;
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+    justify-content: space-evenly;
+    align-items: row;
+}
+hr{
+    color: white !important;
+    width: 100%;
+}
+.sb_footer-copyright p{
+    font-size: 13px;
+    line-height: 15px;
+    color:white;
+    font-weight: 600;
+}
+@media screen and (max-width: 850px) {
+    .sb_footer-heading h1{
+        font-size: 44px;
+        line-height: 50px;
+    }
+}
+@media screen and (max-width: 550px){
+    .sb_footer-heading h1{
+        font-size: 34px;
+        line-height: 42px;
+    }
+    .sb_footer-links div{
+        margin: 1rem 0;
+    }
+    .sb_footer-btn p{
+        font-size: 14px;
+        line-height: 20px;
+    }
+    .sb_footer-below{
+        flex-direction: column;
+        justify-content: left;
+    }
+    .sb_footer-below-links p{
+        margin-left: 0rem;
+        margin-top: 1rem;
+    }
+}
+@media screen and (max-width: 400px) {
+    .sb_footer-heading h1{
+        font-size: 27px;
+        line-height: 38px;
+    }
+}
diff --git a/src/footer/footer.jsx b/src/footer/footer.jsx
new file mode 100644
index 0000000..035ed5c
--- /dev/null
+++ b/src/footer/footer.jsx
@@ -0,0 +1,83 @@
+import React from "react";
+import './footer.css';
+
+const Footer=()=>{
+    return (
+        <div className="footer">
+           <div classNmae="Sb_footer section_padding">
+            <div className="sb_footer-links">
+                <div className="sb_footer-links_div">
+                    <h4>For Buisness</h4>
+                    <a href="/employer">
+                        <p>Employer</p>
+                    </a>
+                    <a href="/employer">
+                        <p>Collaborate</p>
+                    </a>
+                    <a href="/employer">
+                        <p>Indivisual</p>
+                    </a>
+                </div>
+                <div className="sb_footer-links_div">
+                    <h4>Explore</h4>
+                    <a href="/resource">
+                        <p>Healthy</p>
+                    </a>
+                    <a href="/resource">
+                        <p>Fast Food</p>
+                    </a>
+                    <a href="/resource">
+                        <p>Desserts</p>
+                    </a>
+                </div>
+                <div className="sb_footer-links_div">
+                    <h4>Cusines</h4>
+                    <a href="/employer">
+                        <p>Chineese</p>
+                    </a>
+                    <a href="/employer">
+                        <p>Thai</p>
+                    </a>
+                    <a href="/employer">
+                        <p>Mexican</p>
+                    </a>
+                </div>
+                <div className="sb_footer-links_div">
+                    <h4>Company</h4>
+                    <a href="/about">
+                        <p>About</p>
+                    </a>
+                    <a href="/press">
+                        <p>Press</p>
+                    </a>
+                    <a href="/career">
+                        <p>Career</p>
+                    </a>
+                    <a href="/contact">
+                        <p>Contact</p>
+                    </a>
+                </div>
+                <div className="socialmedia">
+                    <p></p>
+                </div>
+            </div>
+           </div>
+           <hr></hr>
+           <div className="sb_footer-below">
+        
+            <div className="sb_footer-copyright">
+                <p>
+                    @{new Date().getFullYear()} CodeInn. All right reserved.
+                </p>
+            </div>
+            <div className="sb_footer-below-links">
+                <a href="/terms"><div><p>Terms and Conditions</p></div></a>
+                <a href="/account"><div><p>Create Account</p></div></a>
+                <a href="/security"><div><p>Give Feedback</p></div></a>
+                <a href="/cookie"><div><p>Cookie Decleration</p></div></a>
+            </div>
+           </div>
+        </div>
+    )
+}
+export default Footer;
\ No newline at end of file