diff --git a/package-lock.json b/package-lock.json
index 0b15f01..faaf7ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "mui-mdi": "^1.1.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-icons": "^4.3.1",
         "react-router-dom": "^5.3.0",
         "react-scripts": "4.0.3",
         "web-vitals": "^1.1.2"
@@ -17199,6 +17200,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "node_modules/react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -35590,6 +35599,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index df37ea9..1f77f06 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "mui-mdi": "^1.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.1.2"
diff --git a/src/components/Components.css b/src/components/Components.css
index ba88c90..e6c1a7f 100644
--- a/src/components/Components.css
+++ b/src/components/Components.css
@@ -2,22 +2,37 @@
     background-color: #dfb1d9;
     display: flex;
     margin: 5%;
-    
     background: rgba( 255, 255, 255, 0.05 );
     box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
     backdrop-filter: blur( 7px );
     -webkit-backdrop-filter: blur( 7px );
     border-radius: 10px;
     border: 1px solid rgba( 255, 255, 255, 0.18 );
-
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
 }
 
 .filter{
-  color:white;
+  color:black;
   display: flex;
   justify-content: flex-end;
   align-content: flex-start;
   flex-wrap: wrap;
+  position: fixed;
+  right: 0;
+  background: rgba( 255, 255, 255, 0.25 );
+  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+  backdrop-filter: blur( 4px );
+  -webkit-backdrop-filter: blur( 4px );
+  border-radius: 10px;
+  border: 1px solid rgba( 255, 255, 255, 0.18 );
+}
+
+.socialMedia{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
 }
 
 .restaurantCard:hover{
@@ -64,6 +79,12 @@
     display: flex;
     align-content: center;
     justify-content: space-around;
+    background: black( 255, 255, 255, 0.25 );
+    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+    backdrop-filter: blur( 4px );
+    -webkit-backdrop-filter: blur( 4px );
+    border-radius: 10px;
+    border: 1px solid rgba( 255, 255, 255, 0.18 );
   }
   
   .navBar .logo{object-fit: contain;
@@ -73,7 +94,7 @@
   .navBar a{
     
     height: 40px;
-    color: black;
+    color: white;
     padding: 0.5%;
     align-content: center;
   }
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 8f57009..8c8f2a7 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,7 +1,22 @@
 import React from 'react'
+import {FaInstagram} from "react-icons/fa"
+import {FaTwitter} from "react-icons/fa"
+import {FaFacebook} from "react-icons/fa"
+import {FaLinkedin} from "react-icons/fa"
+import {FaGithub} from "react-icons/fa"
+
+
+
 function Footer(){
     return(
-<p> call us @zahir_a1</p>
+
+    <div className = "socialMedia">
+    <a href = "https://instagram.com/zahir_a1?utm_medium=copy_link"> <FaInstagram/> Follow us at zahir_a1</a>
+    <a href ="https://twitter.com/LatifJazim"><FaTwitter/> Stalk us on Twitter</a>
+    <a href = "https://en-gb.facebook.com/"><FaFacebook/> For selling your data!</a>
+    <a href ="https://www.linkedin.com/in/vinh-chu-7502b81b3/"><FaLinkedin/> Look out for big business updates</a>
+    <a href ="https://github.com/zahir679/Front-end-Project"><FaGithub/> To have access to the project find us on GitHub</a>
+    </div>
     )
 }
 
diff --git a/src/components/RestaurantCard.js b/src/components/RestaurantCard.js
index 3049611..be91968 100644
--- a/src/components/RestaurantCard.js
+++ b/src/components/RestaurantCard.js
@@ -24,20 +24,20 @@ function RestaurantCard({ restaurant, onClick }) {
 
           <img class="cuisineImage" src={imageChoice} alt='Picture of food'/>
 
-          <h3>Name:</h3>
-          <p>{restaurant.restaurantName}</p>
+          <h4>Name:</h4>
+          <h4>{restaurant.restaurantName}</h4>
           <h4>Address:</h4>
-          <p>{restaurant.address}</p>
+          <h4>{restaurant.address}</h4>
           <h4>Cuisine:</h4>
-          <p>{restaurant.cuisine}</p>
+          <h4>{restaurant.cuisine}</h4>
           <h4>Price:</h4>
-          <p>{restaurant.price}</p>
+          <h4>{restaurant.price}</h4>
           <h4>Vegetarian:</h4>
-          <p>{restaurant.vegetarian ? "Yes" : "No"}</p>
+          <h4>{restaurant.vegetarian ? "Yes" : "No"}</h4>
           <h4>Halal:</h4>
-          <p>{restaurant.halal ? "Yes" : "No"}</p>
+          <h4>{restaurant.halal ? "Yes" : "No"}</h4>
           <h4>Gluten free?</h4>
-          <p>{restaurant.glutenFree ? "Yes" : "No"}</p>
+          <h4>{restaurant.glutenFree ? "Yes" : "No"}</h4>
 
           {/* <button onClick={() => onQuickView(restaurant.id)}>Review Page</button> */}
           {/* <hr/> */}