diff --git a/src/App.css b/src/App.css
index 74f799c..52e5af5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,6 +1,6 @@
 
 .app{
-  background: red;
+  background: rgb(100,25,31);
   background-position: center;
   background-attachment: fixed;
   background-size: cover;
@@ -9,29 +9,35 @@
 .scroll{
   display: flex;
   flex-direction: column;
+  color: rgb(226, 226, 226);
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 0;
 }
+.marker{
+  width:auto;
+  height: 60px;
+}
+.scrollT{
+  color: white;
+  text-decoration: underline;
+  font-weight: bold;
 
+}
+.links li{
+  margin: 5px;
+}
 .links a{
   color: rgb(226, 226, 226);
   text-decoration: none;
   font-weight: bold;
   font-size: 18px;
+  background-color:#D92128;
+  padding: 3px;
 }
+
 .backImg{
-  background: url('./imgs/pepper.jpg');
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-size: 40%;
-  min-height: 100%;
-  min-width: 1024px;
   background-color: black;
-	
-  /* Set up proportionate scaling */
-  width: 100%;
-  height: auto;
-	
-  /* Set up positioning */
-  background-position: center;
   
 }
 .item{
@@ -41,26 +47,33 @@
   display: flex;
   flex-direction: row;
   justify-content: space-around;
-  background: white;
+  background: rgba(172,36,49,255);
   align-items: center;
   min-width: 40%;
   width: fit-content;
   flex-wrap: wrap;
   
 }
+.item h1{
+  color: white;
+}
 .itemNoC{
   border-radius: 10px;
   box-shadow: 0px 5px 20px rgb(71, 71, 71);
-  margin: 20px;
+  margin: 15px;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
-  background: white;
+  background: rgba(172,36,49,255);
   align-items: center;
+  min-width: 40%;
+  width: fit-content;
   flex-wrap: wrap;
-  block-size: auto;
   
 }
+.item h1{
+  color: white;
+}
 .homefont{
   font-size: 80%;
   font-weight: bold;
@@ -68,6 +81,7 @@
 .mtext{
   font-weight: bold;
   padding: 5px;
+  color: white;
 }
 .description{
   font-size: 30px;
@@ -81,12 +95,14 @@
   border-radius: 4px;
   padding: 5px;
   width: 200px;
+  background-color: white;
 }
 .imgH{
   border: 1px solid #ddd;
   border-radius: 4px;
   padding: 5px;
   width: 300px;
+  background-color: white;
 }
 .wrapper{
   display: flex;
@@ -148,7 +164,7 @@
   display: inline-block;
 }
 .red{
-  color:red;
+  color:rgba(172,36,49,255);
   font-size: 50px;
 }
 .center{
@@ -161,10 +177,6 @@
   width:400px;
   height:360px;
 }
-.scrollT{
-  color: white;
-  text-decoration: underline;
-}
 .logo{
   display: flex;
   align-items: center;
@@ -176,9 +188,26 @@ nav{
   align-items: center;
 
 }
+.nav-active{
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+}
+.nav-active li{
+  list-style: none;
+}
+.nav-active a{
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 30px;
+  color: white;
+  text-decoration: none;
+}
 .nav-links{
   display: flex;
   justify-content: space-around;
+  align-items: center;
   width: 100%;
 }
 .nav-links li{
@@ -212,6 +241,11 @@ nav{
     height: 100%;
     overflow: hidden;
   }
+  .backImg{
+    background: none;
+    background-color: black;
+    
+  }
   
   body {
     margin: 0;
@@ -251,6 +285,19 @@ nav{
     transform: rotate(0deg);
     transition: transform 0.5s ease-in;
   }
+  .nav-active{
+    position: fixed;
+    top: 60px; /* Place the button at the bottom of the page */
+    z-index: 99;
+    right: 0px;
+    height: 78vh;
+    background-color: #D92128;
+    display: flex;
+    flex-direction: column;
+    width: 80%;
+    transform: translateX(0%);
+    transition: transform 0.5s ease-in;
+  }
   .nav-active li{
     font-weight: bold;
     font-size: 20px;
@@ -263,6 +310,7 @@ nav{
     color: white;
     text-decoration: none;
   }
+  
   .carousel .thumb img {
     width: 100% !important;
     height: 100% !important;
@@ -294,6 +342,10 @@ nav{
   .scrollT{
     font-size: 20px;
     background-color: #555;
+    font-weight: bold;
+  }
+  .links{
+    padding-left: 0;
   }
   .links a{
     color: rgb(226, 226, 226);
@@ -301,10 +353,7 @@ nav{
     text-decoration: none;
     font-weight: bold;
     font-size: 15px;
-    padding: 3px;
-  }
-  .links{
-    padding-left: 0;
+
   }
   .catagory{
     width: 100vw;
@@ -337,6 +386,7 @@ nav{
     width: 100vw;
     text-align: center;
     flex-direction: column;
+    align-items: stretch;
   }
   .map{
     border: 1px solid #ddd;
@@ -353,20 +403,7 @@ nav{
   #myBtn { /* Hidden by default */
   display: none;
 }
-}
-.nav-active{
-  position: fixed;
-  top: 60px; /* Place the button at the bottom of the page */
-  z-index: 99;
-  right: 0px;
-  height: 78vh;
-  background-color: #D92128;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  width: 50%;
-  transition: transform 0.5s ease-in;
-  transform: translateX(0%);
+
 }
 .types{
   background: white;
@@ -375,6 +412,7 @@ nav{
 }
 .deliver{
   flex-wrap: wrap;
+  color:white;
 }
 .redirect{
   color: black;
@@ -384,6 +422,7 @@ nav{
   margin-left: 10%;
   font-family: "proxima-nova";
   text-align: center;
+  color:white;
 }
 .GrubHub{
   border-radius: 10px;
@@ -435,22 +474,7 @@ nav{
   background-color: #D92128;
 }
 .togo{
-  background: url('./imgs/pepper.jpg');
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-size: 40%;
-  min-height: 100%;
-  min-width: 1024px;
   background-color: black;
-	
-  /* Set up proportionate scaling */
-  width: 100%;
-  height: 100%;
-	
-  /* Set up positioning */
-
-  background-position: center;
-  text-align: center;
 }
 .togo-links{
   padding-left: 0;
@@ -461,11 +485,11 @@ nav{
 #myBtn { /* Hidden by default */
   position: fixed; /* Fixed/sticky position */
   bottom: 20px; /* Place the button at the bottom of the page */
-  right: 30px; /* Place the button 30px from the right */
+  right: 25px; /* Place the button 30px from the right */
   z-index: 99; /* Make sure it does not overlap */
   border: none; /* Remove borders */
   outline: none; /* Remove outline */
-  background-color: red; /* Set a background color */
+  background-color: #D92128; /* Set a background color */
   color: white; /* Text color */
   cursor: pointer; /* Add a mouse pointer on hover */
   padding: 15px; /* Some padding */
@@ -476,21 +500,19 @@ nav{
 #myBtn:hover {
   background-color: #555; /* Add a dark-grey background on hover */
 }
-.about{
-  background-color: white;
-}
 .pickup{
   margin: 15px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  background: white;
+  background: rgba(172,36,49,255);
   align-items: center;
   min-width: 40%;
   width: fit-content;
   flex-wrap: wrap;
   padding: 30px;
   
+  
 }
 .deliver{
   display: flex;
@@ -499,6 +521,11 @@ nav{
 .about{
   display: flex;
   justify-content: center;
+  align-content: center;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: stretch;
+  background-color: white;
 }
 .info{
   padding: 50px;
@@ -507,6 +534,7 @@ nav{
 .hours{
   padding: 50px;
   font-weight: bold;
+  font-size: large;
 }
 .hours li{
   padding: 5px;
diff --git a/src/Catagory.js b/src/Catagory.js
index dac1d06..5b53544 100644
--- a/src/Catagory.js
+++ b/src/Catagory.js
@@ -7,7 +7,6 @@ const Catagory = ()=>{
     const itemList = [];
     const keys = Object.keys(items);
 
-    var place = 0
     for(let i = 0; i < keys.length; i++){
         const key = keys[i];
         const parts = items[key];
@@ -15,8 +14,7 @@ const Catagory = ()=>{
         var wrapper = []
         for(let j = 0; j < parts.length; j++){
             const food = parts[j];
-            wrapper.push(<Item name={food.Name} price={food.Price} key={food.Name} counterID={place}/>)
-            place += 1
+            wrapper.push(<Item name={food.Name} price={food.Price} key={food.Tag} counterID={food.Tag}/>)
         }
         itemList.push(<div className='wrapper'>{wrapper}</div>)
     }
diff --git a/src/Home.js b/src/Home.js
index 80d483a..f9365ad 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -4,6 +4,7 @@ import Rolling from './scroll';
 import Catagory from './Catagory';
 import {MenuContext} from './MenuContext';
 import SlideHome from './slides/homeSlide';
+import Footer from './socials/Footer';
 
 const Home = () =>{
 	const scrollToTop = () =>{
@@ -23,6 +24,7 @@ const Home = () =>{
 				<Catagory/>
 			</div>
 			<button onClick={scrollToTop} id="myBtn" title="Go to top">Top</button>
+			<Footer/>
         </div>
 
     );
diff --git a/src/Malatang.js b/src/Malatang.js
index 4371a59..f4e98dd 100644
--- a/src/Malatang.js
+++ b/src/Malatang.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ItemNoC from './itemNoC';
 import MalatangJS from './Malatang.json'
-
+import Footer from './socials/Footer';
 const Malatang = ()=>{
     const itemList = [];
     const keys = Object.keys(MalatangJS);
@@ -20,6 +20,7 @@ const Malatang = ()=>{
         <div className="classM">
             <h1 className="Malatang"> Malatang </h1>
             {itemList}
+            <Footer/>
 		</div>
     );
 
diff --git a/src/Menu.json b/src/Menu.json
index f302321..5c6d245 100644
--- a/src/Menu.json
+++ b/src/Menu.json
@@ -1,46 +1,55 @@
 {
     "Hand-Pulled Noodles (Biang-Biang Noodles)" :[
         {
+            "Tag": "H1",
             "Name": "Cumin Lamb In Sauce",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "H2S",
             "Name": "Cumin Lamb In Soup",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "H2",
             "Name": "Pork 'Zha Jiang' In Sauce",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "H3",
             "Name": "Oil Seared In Sauce",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "H4",
             "Name": "Stewed Pork In Soup",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "H4S",
             "Name": "Tingly Beef In Sauce",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "H5",
             "Name": "Tingly Beef In Soup",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "H5S",
             "Name": "Curry Beef In Sauce",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "H6",
             "Name": "Mixed Vegi in Sauce",
             "Price": 12.99,
             "img": ""
@@ -48,31 +57,37 @@
     ],
     "Noodles": [
         {
+            "Tag": "T1",
             "Name": "Pork 'Zha Jiang' Noodle",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "T2",
             "Name": "Dandan Noodle",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "T3",
             "Name": "Beef Noodles In Soup",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "T4",
             "Name": "Cumin Lamb Noodle In Soup",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "T5",
             "Name": "Spicy & Sour Vermicelli",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "T6",
             "Name": "Beef Vermichelli",
             "Price": 12.99,
             "img": ""
@@ -80,31 +95,37 @@
     ],
     "Dumplings":[
         {
+            "Tag": "D1",
             "Name": "Pork Dumplings In Sauce",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "D1S",
             "Name": "Pork Dumplings In Soup",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "D2",
             "Name": "Lamb Dumplings In Sauce",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "D2S",
             "Name": "Lamb Dumplings In Soup",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "D3",
             "Name": "Spinich Dumplings In Sauce",
             "Price": 12.99,
             "img": ""
         },
         {
+            "Tag": "D3S",
             "Name": "Spinisch Dumplings In Soup",
             "Price": 12.99,
             "img": ""
@@ -112,10 +133,12 @@
     ],
     "Rou Jia Mo":[
         {
+            "Tag": "A1",
             "Name": "Stewed Pork Burger",
             "Price": 4.99
         },
         {
+            "Tag": "A2",
             "Name":"Cumin Lamb Burger",
             "Price": 4.99
         }
@@ -124,10 +147,12 @@
     "Cold Noodles":
                 [
                     {
+                        "Tag": "L1",
                         "Name": "Liang Pi",
                         "Price": 9.00
                     },
                     {
+                        "Tag": "L2",
                         "Name": "Stir-fried Liang-Pi",
                         "Price": 9.00
                     }
@@ -135,10 +160,12 @@
     "Salad":[
                 
                     {
+                        "Tag": "S1",
                         "Name" : "Spicy Cumumber Salad",
                         "Price": 6.0
                     },
                     {
+                        "Tag": "S2",
                         "Name": "Tiger Salad",
                         "Price": 8.00
                     }
diff --git a/src/Nav.js b/src/Nav.js
index 45cc5d8..ce6f049 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -15,18 +15,18 @@ const Nav = () =>{
     return(
         <nav>
             <ul className={style}>
-
+                <img className='marker' src={require("./imgs/logoNobg.png")} alt=""/>
                 <li>
-                    <Link to={`/`} className="Toolbar">Home</Link>
+                    <Link onClick={handleToggle} to={`/`} className="Toolbar">Home</Link>
                 </li>
                 <li>
-                    <Link to={`/Malatang`} className="Toolbar">Create Your Own Malatang</Link>
+                    <Link onClick={handleToggle} to={`/Malatang`} className="Toolbar">Create Your Own Malatang</Link>
                 </li>
                 <li>
-                    <Link to={`/ToGo`} className="Toolbar">ToGo</Link>
+                    <Link onClick={handleToggle} to={`/ToGo`} className="Toolbar">ToGo</Link>
                 </li>
                 <li>
-                    <Link to={`/About`} className="About">About</Link>
+                    <Link onClick={handleToggle} to={`/About`} className="About">About</Link>
                 </li>
             </ul>
             <div className='burger' 
diff --git a/src/ToGo.js b/src/ToGo.js
index fa88302..2c68cbd 100644
--- a/src/ToGo.js
+++ b/src/ToGo.js
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import Footer from './socials/Footer';
 const ToGo = () =>{
     return(
         <div className='togo'>
@@ -28,6 +28,7 @@ const ToGo = () =>{
                     </div>
             </ul>
             <div className='filler'></div>
+            <Footer/>
         </div>
     );
 }
diff --git a/src/imgs/logoNobg.png b/src/imgs/logoNobg.png
new file mode 100644
index 0000000..147fd9a
Binary files /dev/null and b/src/imgs/logoNobg.png differ
diff --git a/src/itemNoC.js b/src/itemNoC.js
index 78b21eb..bb3fbb3 100644
--- a/src/itemNoC.js
+++ b/src/itemNoC.js
@@ -4,7 +4,6 @@ const ItemNoC = ({name, price, counterID, img})=>{
     return(
         <div className="itemNoC">
             <div className='description'>           
-                <h3 className='mtext'>{counterID}</h3>
                 <h3 className='mtext'>{name}</h3>
 			    <h3 className='mtext'>${price}</h3>
             </div>
diff --git a/src/socials/About.js b/src/socials/About.js
index 7b0ad2c..e29b636 100644
--- a/src/socials/About.js
+++ b/src/socials/About.js
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import Footer from './Footer';
 const About = () =>{
     return(
         <div className='about'>
@@ -51,7 +51,7 @@ const About = () =>{
                 </ul>
             </li>
             </ul>
-            
+            <Footer/>
         </div>
     );
 }
diff --git a/src/socials/Footer.js b/src/socials/Footer.js
new file mode 100644
index 0000000..ab977b3
--- /dev/null
+++ b/src/socials/Footer.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import {BottomNavigation, BottomNavigationAction} from '@material-ui/core'
+import FacebookIcon from '@material-ui/icons/Facebook';
+import TwitterIcon from '@material-ui/icons/Twitter';
+import InstagramIcon from '@material-ui/icons/Instagram';
+import YouTubeIcon from '@material-ui/icons/YouTube';
+
+function Footer() {
+    return (
+        <BottomNavigation >
+          <BottomNavigationAction color="red" label="Facebook" value="recents" icon={<FacebookIcon  style={{fill: "#3b5998"}}/>} />
+          <BottomNavigationAction label="Twitter" value="favorites" icon={<TwitterIcon  style={{fill: "#1DA1F2"}}/>} />
+          <BottomNavigationAction label="Instagram" value="nearby" icon={<InstagramIcon  style={{fill: " #C13584"}}/>} />
+          <BottomNavigationAction label="YouTube" value="folder" icon={<YouTubeIcon  style={{fill: "#c4302b"}}/>} />
+        </BottomNavigation>
+)
+}
+
+export default Footer
\ No newline at end of file