diff --git a/public/index.html b/public/index.html
index 8bfc4fc..5b31a28 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    
+    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
     <link rel="icon" href="%PUBLIC_URL%/logo.png" />
     <link rel="stylesheet" type ="text/css" href="index.css">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/src/components/layout/Footer.js b/src/components/layout/Footer.js
index ead154e..f70dde2 100644
--- a/src/components/layout/Footer.js
+++ b/src/components/layout/Footer.js
@@ -1,69 +1,51 @@
-import logo from "../../assets/logo.png";
-import img from "../../assets/Qr-code.png";
 import { Link } from "react-router-dom";
 import "../styles/footer.css";
 
 const Footer = () => {
   return (
-    <div className="footer-styling">
-      <footer>
-        <div className="container">
-          <div className="footer-logo">
-            <Link to="/">
-              <img src={logo} alt="Codeflow logo" width="100" />
-            </Link>
-            <div className="footer-logo-text">
-              <h2>Codeflow</h2>
-              <p>Learning must go on!</p>
-            </div>
-          </div>
-          <div className="footer-link-group">
-          <h3>Quick Links</h3>
-            <Link to="/">Home</Link>
-            <Link to="/events">Events</Link>
-            <Link to="/hackathon">Hackathons</Link>
-            <Link to="/">Open Source</Link>
-            <Link to="/">Collaborations</Link>
-          </div>
-          <div className="footer-link-group social-media-links">
-            <h3>Social Media Links</h3>
-            <a
-              href="https://www.facebook.com/"
-              target="_blank"
-              rel="noreferrer">
-              Facebook
-            </a>
-            <a href="https://www.twitter.com/" target="_blank" rel="noreferrer">
-              Twitter
-            </a>
-            <a
-              href="https://www.instagram.com/"
-              target="_blank"
-              rel="noreferrer">
-              Instagram
-            </a>
-          </div>
-          <div className="footer-link-group other-links">
-            <h3>Other Links</h3>
-            <a href="https://www.github.com/codeflow201" target="_blank" rel="noreferrer">
-              Github
-            </a>
-            <a
-              href="https://www.linkedin.com/"
-              target="_blank"
-              rel="noreferrer">
-              LinkedIn
-            </a>
-            <a href="mailto:codefloworg@gmail.com" target="_blank" rel="noreferrer">
-              Email Us
-            </a>
-          </div>
-          <div>
-          <img src={img} width="200px" height="200px" />
-          </div>
-        </div>
-      </footer>
+    <footer class="footer">    
+  <div class="footer-left col-md-4 col-sm-6">
+    <p class="about">
+      <h1> About the company</h1> Ut congue augue non tellus bibendum, in varius tellus condimentum. In scelerisque nibh tortor, sed rhoncus odio condimentum in. Sed sed est ut sapien ultrices eleifend. Integer tellus est, vehicula eu lectus tincidunt,
+      ultricies feugiat leo. Suspendisse tellus elit, pharetra in hendrerit ut, aliquam quis augue. Nam ut nibh mollis, tristique ante sed, viverra massa.
+    </p>
+    <div class="icons">
+      <a href="https://www.facebook.com/"><i class="icon-facebook"></i></a>
+      <a href="https://www.twitter.com/"><i class="icon-twitter"></i></a>
+      <a href="https://www.linkedin.com/"><i class="icon-linkedin"></i></a>
+      <a href="https://www.github.com/"><i class="icon-github"></i></a>
+      <a href="https://www.instagram.com/"><i class="icon-instagram"></i></a>
     </div>
+  </div>
+  
+  <div class="footer-center col-md-4 col-sm-6">
+  
+    <div>
+      <i class="icon-map-marker"></i>
+      <p><span> Street name and number</span> City, Country</p>
+    </div>
+    <div>
+      <i class="icon-phone"></i>
+      <p> (+00) 0000 000 000</p>
+    </div>
+    <div>
+      <i class="icon-envelope"></i>
+      <p> Codeflow@company.com</p>
+    </div>
+  </div>
+  <div class="footer-right col-md-4 col-sm-6">
+    
+    <p class="menu">
+    <Link to="/"> Home</Link> <br></br> 
+    <Link to="/events"> Events</Link> <br></br>
+    <Link to="/Hackathons"> Hackathons</Link> <br></br>
+    <Link to="/"> Open Source</Link> <br></br>
+    <Link to="/"> Collaborations</Link> <br></br>
+    <Link to="/"> Terms and Conditions</Link> 
+    </p>
+    <p class="name"> Codeflow &copy; 2021</p>
+  </div>
+</footer>
   );
 };
 
diff --git a/src/components/pages/Hackathon.js b/src/components/pages/Hackathon.js
index 8a4a6b9..c09fc80 100644
--- a/src/components/pages/Hackathon.js
+++ b/src/components/pages/Hackathon.js
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import Customnav from "../layout/customnavbar";
 import "../styles/hackathon.css";
 import img1 from "../../assets/img1.png";
 import HackCard from "../utilities/HackCard";
@@ -50,6 +49,7 @@ function Hackathon() {
               } else if (item.cat === option) {
                 return item;
               }
+              return null;
             }).map((item) => {
               return (
                 <HackCard
diff --git a/src/components/styles/footer.css b/src/components/styles/footer.css
index 8a104ee..688f18f 100644
--- a/src/components/styles/footer.css
+++ b/src/components/styles/footer.css
@@ -1,112 +1,163 @@
-.footer-styling a {
-  color: #000 !important;
+.footer {
+  background-color: #414141;
+  width: 100%;
+  text-align: left;
+  font-family: sans-serif;
+  font-weight: bold;
+  font-size: 16px;
+  padding: 50px;
+  margin-top: 50px;
 }
-.footer-styling a:hover {
-  color: #000;
+
+.footer .footer-left,
+.footer .footer-center,
+.footer .footer-right {
+  display: inline-block;
+  vertical-align: top;
 }
-footer {
-  background-color: #edfbfb;
-  padding: 1rem;
+
+
+/* footer left*/
+
+.footer .footer-left {
+  width: 33%;
+  padding-right: 15px;
 }
-footer h3 {
-  font-size: 1rem;
-  text-decoration: underline;
+
+.footer .about {
+  line-height: 20px;
+  color: #ffffff;
+  font-size: 13px;
   font-weight: normal;
+  margin: 0;
 }
-footer .container {
-  display: flex;
-  justify-content: space-around;
-  max-width: 70%;
+
+.footer .about span {
+  display: block;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 20px;
 }
-.footer-link-group {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+
+.footer .icons {
+  margin-top: 25px;
 }
-.footer-link-group a{
-  margin: 3px;
+
+.footer .icons a {
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  cursor: pointer;
+  background-color: #33383b;
+  border-radius: 2px;
+  font-size: 20px;
+  color: #ffffff;
+  text-align: center;
+  line-height: 35px;
+  margin-right: 3px;
+  margin-bottom: 5px;
 }
-.footer-link-group a:last-child {
-  border-radius: 5px;
-  padding: 0 5px;
-  border : 1px solid black;
+
+
+/* footer center*/
+
+.footer .footer-center {
+  width: 30%;
+}
+
+.footer .footer-center i {
+  background-color: #33383b;
+  color: #ffffff;
+  font-size: 25px;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 42px;
+  margin: 10px 15px;
+  vertical-align: middle;
 }
-.footer-logo {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+
+.footer .footer-center i.fa-envelope {
+  font-size: 17px;
+  line-height: 38px;
 }
-.footer-logo h2 {
+
+.footer .footer-center p {
+  display: inline-block;
+  color: #ffffff;
+  vertical-align: middle;
   margin: 0;
 }
-.footer-logo-text {
-  margin-left: 0.5rem;
+
+.footer .footer-center p span {
+  display: block;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 2;
 }
-@media screen and (max-width: 1200px) {
-  footer .container {
-    max-width: 85%;
-  }
+
+.footer .footer-center p a {
+  color: #0099ff;
+  text-decoration: none;
 }
 
-@media screen and (max-width: 992px) {
-  footer .container {
-    max-width: 95%;
-  }
+
+/* footer right*/
+
+.footer .footer-right {
+  width: 35%;
 }
-@media screen and (max-width: 768px) {
-  footer .container {
-    flex-wrap: wrap;
-  }
-  .footer-logo {
-    width: 100%;
-    margin-bottom: 1rem;
-  }
+
+.footer h2 {
+  color: #ffffff;
+  font-size: 36px;
+  font-weight: normal;
+  margin: 0;
 }
-@media screen and (max-width: 576px) {
-  footer .container {
-    flex-wrap: nowrap;
-    flex-direction: column;
-    align-items: center;
-  }
-  .footer-link-group {
-    margin: 0.5rem auto;
-    align-items: center;
-  }
+
+.footer h2 span {
+  color: #0099ff;
 }
 
-.footer-link-group a {
-  position: relative;
-  color: #000;
-  text-decoration: none;
+.footer .menu {
+  color: #ffffff;
+  margin: 20px 0 12px;
+  padding: 0;
 }
 
-.footer-link-group a:hover {
-  color: #000;
+.footer .menu a {
+  display: inline-block;
+  line-height: 1.8;
   text-decoration: none;
+  color: inherit;
 }
 
-.footer-link-group a::before {
-  content: "";
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 1.75px;
-  bottom: 0;
-  left: 0;
-  background-color: #000;
-  transform: scaleX(0);
-  transition: transform 0.3s ease;
+.footer .menu a:hover {
+  color: #0099ff;
 }
 
-.footer-link-group a:hover::before {
-  transform: scaleX(1);
+.footer .name {
+  color: #0099ff;
+  font-size: 14px;
+  font-weight: normal;
+  margin: 0;
 }
 
-.social-media-links > h3,
-.other-links > h3 ,.footer-link-group > h3 {
-  background-color: var(--dark);
-  color: #edfbfb !important;
-  border-radius: 5px;
-  padding: 0 5px;
-  text-decoration: none;
+@media (max-width: 767px) {
+  .footer {
+    font-size: 14px;
+  }
+  .footer .footer-left,
+  .footer .footer-center,
+  .footer .footer-right {
+    display: block;
+    width: 100%;
+    margin-bottom: 40px;
+    text-align: center;
+  }
+  .footer .footer-center i {
+    margin-left: 0;
+  }
 }
