diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..387ead9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+static/img/trash1.jpg
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..5fba202
--- /dev/null
+++ b/README.md
@@ -0,0 +1,2 @@
+# Fast-Food-Fast
+UI for fast food ordering site
diff --git a/js/admin.js b/js/admin.js
new file mode 100644
index 0000000..e194b48
--- /dev/null
+++ b/js/admin.js
@@ -0,0 +1,213 @@
+'use strict';
+
+
+
+var newOrders = 
+{jay: [1, ['coke', 1,],['fries', 2,]],
+moe:[2, ['sausage', 4],['samosa',3]],
+emm: [3, ['burger', 3],['coke', 5],['sausage', 2]],
+fiddy: [4, ['coke', 1],['fries', 1]],
+dmx: [1, ['coke', 1,],['fries', 2,]],
+hov:[2, ['sausage', 4],['samosa',3]],
+pac: [3, ['burger', 3],['coke', 5],['sausage', 2]],
+biggy: [4, ['coke', 1],['fries', 1]],
+ti: [3, ['burger', 3],['coke', 5],['sausage', 2]],
+joc: [4, ['coke', 1],['fries', 1]],
+wayne: [1, ['coke', 1,],['fries', 2,]],
+jon:[2, ['sausage', 4],['samosa',3]],
+kaka: [3, ['burger', 3],['coke', 5],['sausage', 2]],
+kanye: [4, ['coke', 1],['fries', 1]]
+};
+
+var acceptedOrders = 
+{
+    
+};
+// Global constants and vaiables
+const ordersDiv = document.querySelector('#o-list');
+const acceptedOrdersDiv = document.querySelector('#ao-list');
+const addItemBtn = document.querySelector('#addItem');
+const addFoodbtn = document.querySelector('#add-fds');
+const adminModal = document.querySelector('.admin-modal');
+const closeButton = document.querySelector('.close-btn');
+const itemNameInput = document.querySelector('#item-name');
+const imgNameInput = document.querySelector('#img');
+const priceInput = document.querySelector('#itm-price');
+// Liten for domcontentloaded event
+document.addEventListener('DOMContentLoaded', () =>{ 
+    addItemBtn.addEventListener('click', addItem);
+    addFoodbtn.addEventListener('click', addItem);
+    adminModal.addEventListener('click', closeModal);
+    closeButton.addEventListener('click', closeModal);
+});
+
+// Displays Orders by looping through newOrders object
+function displayOrders(){
+    ordersDiv.innerHTML = '';
+     for (var name in newOrders){
+         var orderList = newOrders[name];
+         var orderNo = orderList[0];
+         const orderDiv = document.createElement('DIV');
+         orderDiv.className = 'order'
+         const foodList = document.createElement('UL');
+         const qtyList = document.createElement('UL');
+
+         orderDiv.innerHTML=  `<span>${orderNo}</span>
+         <span>${name}</span>
+         <div class="order-list">
+             
+         </div>
+         <div class="qty">
+             
+         </div>
+         <span><span>Kshs </span>500</span>
+         <div class="buttons">
+                 <span><img class="accept" src="../static/img/tick.jpg" alt="OK"></span>
+                 <span><img class="reject" src="../static/img/trash.png" alt="NO"></span>                                        
+         </div>`
+
+
+         const nameListDiv = orderDiv.querySelector('.order-list');
+         const qtyListDiv = orderDiv.querySelector('.qty'); 
+         const buttonDiv = orderDiv.querySelector('.buttons');
+         buttonDiv.addEventListener('click', orderButtons);
+         for (var i = 1; i < orderList.length; i++){
+             var order = orderList[i];
+             var orderName = order[0];
+             var qty = order[1];
+             var nameLi = document.createElement('LI');
+             nameLi.innerText = orderName;
+             var qtyLi = document.createElement('LI');
+             qtyLi.innerText = qty;
+             nameListDiv.appendChild(nameLi);
+             qtyListDiv.appendChild(qtyLi);                                      
+         }
+
+         ordersDiv.appendChild(orderDiv);
+     }        
+}
+
+// Displays Orders by looping through acceptedOrders object
+
+function displayAcceptedOrders(){
+    acceptedOrdersDiv.innerHTML = '';
+    
+    for (name in acceptedOrders){
+        const orderDiv = document.createElement('DIV');
+        orderDiv.className = 'order';
+
+        var orderList = acceptedOrders[name];
+        var orderNo = orderList[0];
+        var lastIndex = orderList.length - 1;
+        var status = orderList[lastIndex];
+        const statusBtn = document.createElement('BUTTON');
+        statusBtn.addEventListener('click', completeOrder);
+
+        if (status){
+            statusBtn.innerText = 'Completed';
+            statusBtn.style.backgroundColor = 'rgb(7, 175, 58)';
+            statusBtn.disabled = true;
+        }else{
+            statusBtn.innerText = 'Incomplete';
+            statusBtn.style.backgroundColor = 'rgb(255, 16, 16)';
+        }
+
+        orderDiv.innerHTML = `
+        <span>${orderNo}</span>
+        <span>${name}</span>
+        <div class="order-list">
+            
+        </div>
+        <div class="qty">
+            
+        </div>
+        <span><span>Kshs </span>500</span>
+        <div class="cmplt-order">
+        </div>`
+
+
+    const cmpltBtnDiv = orderDiv.querySelector('.cmplt-order');
+    cmpltBtnDiv.appendChild(statusBtn);
+    const nameListDiv = orderDiv.querySelector('.order-list');
+    const qtyListDiv = orderDiv.querySelector('.qty'); 
+         for (var i = 1; i < orderList.length-1; i++){
+             var order = orderList[i];
+             var orderName = order[0];
+             var qty = order[1];
+             var nameLi = document.createElement('LI');
+             nameLi.innerText = orderName;
+             var qtyLi = document.createElement('LI');
+             qtyLi.innerText = qty;
+             nameListDiv.appendChild(nameLi);
+             qtyListDiv.appendChild(qtyLi);                                      
+         }
+    acceptedOrdersDiv.appendChild(orderDiv);
+   }
+}
+
+displayOrders();
+displayAcceptedOrders();
+
+// Event Functions
+
+// invoked when reject and accept buttons are clicked
+function orderButtons(event){
+    
+    if (event.target.className == 'accept'){
+        var name = event.target.parentElement.parentElement.parentElement.children[1].innerText;
+        var orderList = newOrders[name];
+        orderList.push(false);
+        acceptedOrders[name] = orderList;
+        delete newOrders[name];
+        displayOrders();
+        displayAcceptedOrders();
+        
+                                          
+    }    
+    if (event.target.className == 'reject'){
+        var name = event.target.parentElement.parentElement.parentElement.children[1].innerText;
+        delete newOrders[name];
+        displayOrders();
+    }
+
+}
+
+
+// Invoked when complete order button is clicked
+function completeOrder(event){
+    event.target.style.backgroundColor = 'rgb(7, 175, 58)';
+    event.target.innerText = 'Completed';
+    var name = event.target.parentElement.parentElement.children[1].innerText;
+    var lastIndex = acceptedOrders[name].length -1;
+    acceptedOrders[name][lastIndex] = true;
+    event.target.disabled = true;   
+}
+
+
+// Add item to homepage
+function addItem (e){
+    if (e.target.id == 'add-fds'){
+        adminModal.style.display = 'block';        
+    }else{
+        e.preventDefault();
+        var imgName = imgNameInput.value;
+        var itemName = itemNameInput.value;
+        var price = priceInput.value
+        if(imgName != '' & itemName != '' & price != ''){
+            var imgHtml = `<img src="../static/img/${imgName}">`;
+            // send item details to backend
+
+        }
+            
+    }
+
+}
+
+
+// Close modal
+function closeModal(e){
+    if (e.target.className == 'admin-modal' || e.target.className == 'close-btn'){
+    adminModal.style.display = 'none';
+    }
+}
+
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..1aa899c
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,150 @@
+'use strict';
+
+// Global constants and variables
+const foodTray = document.querySelector('.food-tray');
+const addButtons = document.querySelectorAll('.button_1');
+var isCheckoutBtn = false;
+const boxes = document.querySelector('#boxes'); 
+
+// Image html strings
+var items = 
+{
+    Coke:     [50,  '<img src="../static/img/coke.png">'],
+    Burger:   [50,  '<img src="../static/img/burger.png">'],
+    'Mountain Dew':    [500, '<img src="../static/img/mountaindew.png">'],
+    Fries:    [100, '<img src="../static/img/fries.png">'],
+    Hotdog:   [70,  '<img src="../static/img/hotdog.png">'],
+    Drumsticks:[120, '<img src="../static/img/drumsticks.png">'],
+    Wings:    [120, '<img src="../static/img/wings.png">'],
+    Taco:   [50,  '<img src="../static/img/taco.png">'],
+} 
+var tray = {};
+
+// Fuction to check if tray is empty
+function isEmpty(dict){
+    return Object.getOwnPropertyNames(dict) == 0;
+}
+
+// Liten for domcontentloaded event
+/*document.addEventListener('DOMContentLoaded', () =>{    
+    addButtonClickListener();
+});*/
+
+
+function displayItems(){
+    for (var item in items){
+        var price =  items[item][0];
+        var imgHtml = items[item][1]; 
+        const boxDiv = document.createElement('div');
+        boxDiv.className = 'box';
+        boxDiv.innerHTML = 
+        `<div class="image">${imgHtml}
+
+</div>
+<div class="description">
+  <div> <span class="name">${item}</span><br>
+  <span class="price"><span>Kshs</span><span class="item-price">${price}</span><span>/=</span></span></div>
+  <span class="button_1"><img src="../static/img/add-icon.png" alt=""></span>
+</div>`;
+
+ boxDiv.querySelector('.button_1 img').addEventListener('click',  (e) =>{
+    const boxItem = e.target.parentElement.parentElement.parentElement;
+    addItemToFoodTray(boxItem);
+    displayItemsInTray();
+})
+
+
+        boxes.appendChild(boxDiv);
+
+
+    }
+}
+
+displayItems();
+// Display or not display checkout button
+function displayCheckoutBtn(){
+    const sidebar = document.querySelector('#sidebar');
+    if (isEmpty(tray)){
+        sidebar.querySelector('#checkout-btn').className = 'invincible';        
+    }    
+}
+
+// Add listeners to add button
+/* function addButtonClickListener(){
+    for (const addButton of addButtons){        
+        addButton.addEventListener('click', () =>{
+            const boxItem = addButton.parentElement.parentElement;
+            addItemToFoodTray(boxItem);
+            displayItemsInTray();                      
+            
+        })
+  
+    }        
+} */
+
+
+// Add Items to tray object
+function addItemToFoodTray(item){
+    const itemName = item.querySelector('.name').innerHTML;
+    const itemPrice = item.querySelector('.item-price').innerHTML;
+    const itemImg = item.querySelector('.image').innerHTML;
+    const itemQuantity = 1;
+    const itemsInFoodTray = foodTray.querySelectorAll('item');
+    const checkoutBtn = document.querySelector('#checkout-btn');
+    
+
+    
+
+    if (itemName in tray){
+        tray[itemName][1] += 1;
+    }
+    else{
+        tray[itemName] = [itemImg, itemQuantity, itemPrice];
+    }
+    
+    checkoutBtn.className = '';
+    
+}
+
+
+// Remove function from tray
+function removeItemFromTray(name){
+    delete tray[name];
+    displayCheckoutBtn();
+    displayItemsInTray();
+}
+
+
+// Display current items in the tray object 
+function displayItemsInTray(){
+    foodTray.innerHTML = "";
+    if (tray.isEmpty){
+        foodTray.innerHTML="";
+    }
+    for (var name in tray){        
+        var totalPrice = parseInt(tray[name][1]) * parseInt(tray[name][2]);
+        const orderDetails =  
+       `<div class="button">
+            <span class="delete-btn" onclick="removeItemFromTray('${name}');"><img src="../static/img/trash.png" alt=""></span>\                      
+        </div>
+       <div class="cart-image">
+        ${tray[name][0]}                        
+        </div>
+        <div class="description">
+            <span class="item-name">${name}</span>
+        </div>
+        <div class="quantity">        
+            <span class="qt"> ${tray[name][1]}</span>                              
+        </div>
+        <div class="total-price"><span>Kshs</span> <span>${totalPrice}</span></div>`;
+        
+       
+        const elementToBeAdded = document.createElement('DIV');
+        elementToBeAdded.className = 'item';
+        elementToBeAdded.innerHTML = orderDetails;        
+        foodTray.appendChild(elementToBeAdded);
+
+        
+        
+    }
+}
diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 0000000..2e8660d
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,469 @@
+body{
+    font: 15px/1.5 Arial, helvetica, sans-serif;
+    padding: 0;
+    margin: 0;
+    background: #ffffff;
+}
+
+/* global */
+.container{
+    width: 80%;
+    margin: auto;
+    overflow: hidden;
+}
+
+ul{
+    margin: 0;
+    padding: 0;
+}
+
+
+
+.button_1 img{
+    cursor: pointer;
+}
+    
+/* Header */
+header{
+    background: #ffffff;
+    color: rgb(7, 175, 58);
+    padding-top: 20px;
+    min-height: 60px;
+    position: sticky;
+    top: 0;
+   
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+header a{
+    color:rgb(7, 175, 58);
+    text-decoration: none;
+    text-transform: uppercase;
+    font-size: 16px;
+    padding: 5px;
+}
+
+header li{
+    /*float: right;*/
+    display: inline;
+    padding: 0 15px 0 15px;
+}
+
+header #title{
+    float: left;
+    padding-bottom: 0;
+}
+
+header #title h1{
+    margin: 0;
+}
+
+header nav{
+    float: right;
+    margin-top: 13px
+}
+
+header .highlight, header .current a{
+    color: #ffffff;
+    background-color: rgb(7, 175, 58);
+    border-radius: 5px;
+    
+}
+
+header a:hover{
+    color: #ffffff;
+    background-color: rgb(7, 175, 58);
+    font-weight: bolder;
+    border-radius: 5px;
+}
+
+/* section#items */
+#items .container{
+    width: 90%; 
+}
+
+#items .container{
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    grid-column-gap: 1em;
+    padding-right: 30px; 
+} 
+
+
+/* boxes */
+#boxes{
+    margin-top: 25px;
+    display: grid;
+    grid-gap: 1em;
+    grid-template-columns: repeat(4, 1fr);
+}
+
+#boxes .box{
+    float: left;
+    padding: 10px;
+    margin: 5px;    
+    text-align: start;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+#boxes .box img{
+    width: 90%;
+}
+
+
+
+.name{
+    font-weight: bold;
+}
+
+/* login and register.html */
+#content{
+    margin-top: 150px;
+    
+}
+
+
+ input{
+    width: 40%;
+    padding: 15px;
+    margin: 5px 0 22px 0;
+    display: inline-block;
+    border-top: none;
+    border-left: none;
+    border-color: rgb(7, 175, 58);
+    box-shadow: none;
+    background: rgb(223, 250, 231);
+    border-radius: 6px;   
+
+}
+
+form{
+    text-align: center;
+
+}
+
+.container a{
+    text-decoration: none;
+}
+
+.form-content .container{
+    width: 50%;
+    padding-top:100px; 
+    margin-top: 10%;
+    padding-left: 0px;
+    margin-right: auto;
+    margin-left: auto;
+    padding-bottom: 100px;
+    color: rgb(7, 175, 58);
+    text-align: center;
+    border-radius: 10px; 
+    border: 2px solid rgb(123, 156, 124);
+
+}
+
+#register{
+    padding-bottom: 50px;
+}
+
+
+
+
+.register_btn {
+    background-color: rgb(33, 165, 37);
+    color: white;
+    padding: 16px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 30%;
+    opacity: 0.9;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+  
+.registerbtn:hover {
+    opacity:1;
+}
+
+
+/* food_tray */
+.food-tray{
+    height: auto;
+    margin-top: 0;
+    padding-left: 10px;
+    background: #ffffff;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    display: grid;
+    border-radius: 5px;
+    margin-bottom: 10px;
+
+    
+}
+
+.invincible{
+    display: none;
+}
+
+.item{
+    padding: 0;
+    height: 80px;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    border-bottom: 1px solid rgb(7, 175, 58);
+        
+}
+
+.button {
+    justify-self: start;
+    padding-top: 25%;
+}
+
+.delete-btn img{
+    width: 30px;
+    float: left;
+    cursor: pointer;        
+}
+
+#checkout-btn{
+    height: 32px;
+    background: rgb(7, 175, 58);
+    border: 2px;
+    padding-left: 20px;
+    padding-right: 20px;
+    color: #ffffff;
+    align-self: auto;
+    opacity: 0.9;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    float: right;
+}
+
+
+.cart-image{
+    margin-right: 5%;
+}
+
+.cart-image img{
+    width: 80%;
+}
+
+
+aside{
+    width: 35%;
+    float: right;
+}
+
+#sidebar h3{
+    margin-bottom: 0;
+    padding: 0;
+    margin-top: 5px;
+}
+
+.item .description{
+    padding-top: 20px;
+    margin-right: 5%;
+    width: 15%;
+    font-weight: 500;
+    
+}
+
+.box .description{
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+}
+
+.quantity{
+    margin-top: 20px;
+    margin-right: 5%;
+    float: left;
+}
+
+button:focus,
+input:focus {
+  outline:0;
+}
+
+.total-price {
+    width: 15%;
+    padding-top: 20px;
+    text-align: center;
+    font-weight: 300;
+}
+
+/* admin-panel */
+
+#section{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 1em;
+    grid-auto-rows: minmax(644px, auto); 
+}
+
+#orders{
+    display: grid;
+    padding: 5px;
+    grid-auto-rows: max-content;
+
+}
+
+#accepted-orders{
+    margin-top: 0px;
+    display: grid; 
+    grid-auto-rows: max-content;
+    padding: 5px;
+}
+
+
+.order{
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    margin-bottom: 10px;
+    padding-left: 5px;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
+    
+}
+
+
+
+h5{
+    margin: 0;
+}
+
+.order li{
+    list-style-type: none;
+}
+
+.buttons img{
+    width: 23px;
+    height: 23px;
+    float: right;
+}
+
+.buttons{
+    justify-self: stretch;
+    padding-top: 20px;
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    padding-top: 6%;
+}
+
+.buttons span{
+    cursor: pointer;
+}
+
+ h3{
+    margin-bottom: 5px;
+}
+
+#labels{
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    margin-bottom: 3px;
+}
+
+.qty{
+    padding-left:10px;
+}
+
+.cmplt-btn{
+    align-content: end;
+}
+
+.cmplt-order img{
+    height: 30px;
+}
+
+.cmplt-order{
+    justify-self: end;
+    padding-top: 6%;
+    padding-right: 3px;
+}
+
+
+
+.cmplt-order button{
+    height: 32px;
+    background: rgb(255, 16, 16);
+    border: 2px;
+    padding-left: 10px;
+    padding-right: 10px;
+    color: #ffffff;
+    border-radius: 5px;
+    align-self:stretch;
+    opacity: 0.9;
+    cursor: pointer;
+    
+}
+
+#add-fds{
+    border: 2px solid rgb(7, 175, 58);
+    padding: 4px; 
+    border-radius: 5px;
+    cursor: pointer;          
+}
+
+#add-fds:hover{
+    color: #ffffff;
+    background-color: rgb(7, 175, 58);
+    font-weight: bolder;
+    border-radius: 5px;
+}
+
+/* Admin Modal*/
+
+.admin-modal{
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0,0.5);
+
+     
+}
+
+.cont{
+    margin: 10% auto;
+    background-color: #ffffff;
+    width: 40%;
+    height: 40% auto;
+    padding-bottom: 10px;
+
+}
+
+.close-btn{
+    float: right;
+    font-size: 18px;
+    font-weight: 700;
+    color: red;
+    margin-right: 8px;
+    cursor: pointer;
+    
+}
+
+.cont input{
+    width: 50%;
+}
+
+.cont .container {
+    width: 100%;
+}
+
+.cont h1{
+    margin-top: 0;
+}
+
+.modal-header{
+    
+}
+
+footer{
+    padding:  20px;
+    margin-top: 40px;
+    color:#ffffff;
+    background: rgb(7, 175, 58);  
+    text-align: center;       
+}
diff --git a/static/img/add-icon.png b/static/img/add-icon.png
new file mode 100644
index 0000000..fa6a413
Binary files /dev/null and b/static/img/add-icon.png differ
diff --git a/static/img/burger.png b/static/img/burger.png
new file mode 100644
index 0000000..d688bd7
Binary files /dev/null and b/static/img/burger.png differ
diff --git a/static/img/coke.png b/static/img/coke.png
new file mode 100644
index 0000000..17423ce
Binary files /dev/null and b/static/img/coke.png differ
diff --git a/static/img/drumsticks.png b/static/img/drumsticks.png
new file mode 100644
index 0000000..e73f076
Binary files /dev/null and b/static/img/drumsticks.png differ
diff --git a/static/img/fries.png b/static/img/fries.png
new file mode 100644
index 0000000..b5e6b06
Binary files /dev/null and b/static/img/fries.png differ
diff --git a/static/img/hotdog.png b/static/img/hotdog.png
new file mode 100644
index 0000000..c9cf96d
Binary files /dev/null and b/static/img/hotdog.png differ
diff --git a/static/img/kickstart.png b/static/img/kickstart.png
new file mode 100644
index 0000000..b69c9b2
Binary files /dev/null and b/static/img/kickstart.png differ
diff --git a/static/img/mountaindew.png b/static/img/mountaindew.png
new file mode 100644
index 0000000..4121434
Binary files /dev/null and b/static/img/mountaindew.png differ
diff --git a/static/img/pepsi.png b/static/img/pepsi.png
new file mode 100644
index 0000000..f333026
Binary files /dev/null and b/static/img/pepsi.png differ
diff --git a/static/img/pizza.jpg b/static/img/pizza.jpg
new file mode 100644
index 0000000..e189d6a
Binary files /dev/null and b/static/img/pizza.jpg differ
diff --git a/static/img/plus-add-icon.png b/static/img/plus-add-icon.png
new file mode 100644
index 0000000..450d9e9
Binary files /dev/null and b/static/img/plus-add-icon.png differ
diff --git a/static/img/taco.png b/static/img/taco.png
new file mode 100644
index 0000000..c3d2952
Binary files /dev/null and b/static/img/taco.png differ
diff --git a/static/img/tick.jpg b/static/img/tick.jpg
new file mode 100644
index 0000000..96c7a1a
Binary files /dev/null and b/static/img/tick.jpg differ
diff --git a/static/img/tick.png b/static/img/tick.png
new file mode 100644
index 0000000..e6b9db9
Binary files /dev/null and b/static/img/tick.png differ
diff --git a/static/img/trash.png b/static/img/trash.png
new file mode 100644
index 0000000..1b0841f
Binary files /dev/null and b/static/img/trash.png differ
diff --git a/static/img/wings.png b/static/img/wings.png
new file mode 100644
index 0000000..0861d7e
Binary files /dev/null and b/static/img/wings.png differ
diff --git a/templates/admin_panel.html b/templates/admin_panel.html
index e69de29..742ed21 100644
--- a/templates/admin_panel.html
+++ b/templates/admin_panel.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Fast Food Fast</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="Author" content="Joshua Moracha">
+    <link rel="stylesheet" type="text/css" media="screen" href="../static/css/main.css" />    
+    
+</head>
+<body>
+    <header>
+        <div class="container">
+            <div id="title">
+                <h1>Fast Food Fast</h1>
+            </div>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li class="current"><a href="admin_panel.html">Admin</a></li>             
+                <li ><span id="add-fds">ADD FOODS</span></li>                
+                
+            </ul>
+        </nav>
+        </div>
+    </header>
+        <div class="container" id="section">            
+                    <div id="orders">
+                        <div>
+                            <h3>Orders</h3>
+                            <div id="labels">
+                                <h5>Order #</h5>
+                                <h5>Customer</h5>
+                                <h5>Items</h5>
+                                <h5>Quantity</h5>
+                                <h5>Total Amount</h5>
+                            </div>
+                            <div id="o-list">
+
+                            </div>
+                        </div>                              
+        
+                            <!-- To be filled dynamically -->
+                
+                    </div>  
+                    <div id="accepted-orders">
+                            <div>
+                                    <h3>Accepted Orders</h3>
+                                    <div id="labels">
+                                        <h5>Order #</h5>
+                                        <h5>Customer</h5>
+                                        <h5>Items</h5>
+                                        <h5>Quantity</h5>
+                                        <h5>Total Amount</h5>
+                                        <h5 id="stts">Status</h5>
+                                    </div>
+                                    <div id="ao-list">
+                                    
+                                    </div>
+                                        
+                            </div>                                  
+                            
+                    </div>
+    </div>
+
+    <div class="admin-modal">
+        <div class="cont">
+            <div class="modal-header"><span class="close-btn">X</span></div>
+            <form>
+                <div class="container">
+                    <h1>Add Item</h1>         
+                    
+        
+                    <label for="name">Item Name:</label><br>
+                    <input type="text" placeholder="Item Name" name="name" required="true" id="item-name"><br>
+        
+                    <label for="price">Item Price:</label><br>
+                    <input type="text" placeholder="100" name="price" required="true" id="itm-price"><br>
+                    <label for="img-name">Image Name:</label><br>
+                    <input type="text" placeholder="image_name.png" name="img-name" required="true" id="img"><br>                  
+                    
+                    <button class="register_btn" id="addItem">Add</button>
+                </div>  
+                
+            </form>
+            </div>  
+        </div>
+    </div>    
+</body>
+<script src="../js/main.js"></script>
+<script src="../js/admin.js"></script>
+<footer>
+    <h3>Fast Food Fast &copy; 2018</h3>
+</footer>
+</html>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index e69de29..811307f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Fast Food Fast</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="Author" content="Joshua Moracha">
+    <link rel="stylesheet" type="text/css" media="screen" href="../static/css/main.css" />    
+    
+</head>
+<body>
+    <header>
+        <div class="container">
+            <div id="title">
+                <h1>Fast Food Fast</h1>
+            </div>
+        <nav>
+            <ul>
+                <li><a href="admin_panel.html">Admin</a></li>             
+                <li><a href="login.html">Login</a></li>
+                <li><a href="register.html">Register</a></li>                
+                <li class="current"><a href="index.html">Home</a></li>
+            </ul>
+        </nav>
+        </div>
+    </header>
+    <section id="items">
+        <div class="container">
+            <div id="boxes">
+                <!-- To be filled dynamically -->               
+                
+            </div>
+        
+          <div id="sidebar"> 
+                <h3>Food Tray</h3>           
+                <div class="food-tray">          
+
+                    <!-- To be filled dynamically -->
+
+                    
+                </div>
+                <button class="invincible" id="checkout-btn">Checkout</button>         
+            
+         <div>
+        </div>
+    </section>
+    
+</body>
+<script src="../js/main.js"></script>
+<footer>
+    <h3>Fast Food Fast &copy; 2018</h3>
+</footer>   
+</html>
diff --git a/templates/login.html b/templates/login.html
index e69de29..0ffb5fc 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Login</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="../static/css/main.css" />
+    <script src="main.js"></script>
+</head>
+<body>
+  <section class="form-content" >
+    <form action="">
+        <div class=container>
+            <h1>Login</h1>          
+            
+
+            <label for="email">Email</label><br>
+            <input type="email" placeholder="Your email" name="email" required><br>
+
+            <label for="password">Password</label><br>
+            <input type="password" placeholder="Enter password" name="password" required><br>                    
+            
+            <button type="submit" class="register_btn">Login</button>
+        </div>  
+        
+    </form>    
+  </section>    
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/register.html b/templates/register.html
index e69de29..39c3cfe 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Register</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="../static/css/main.css" />
+    <script src="main.js"></script>
+</head>
+<body>
+  <section class="form-content">
+    <form action="">
+        <div class=container id="register">
+            <h1>Register</h1>          
+            
+
+            <label for="email">Email</label><br>
+            <input type="email" placeholder="Your email" name="email" required><br>
+
+            <label for="password">Password</label><br>
+            <input type="password" placeholder="Enter password" name="password" required><br>
+
+            <label for="repeat-psw">Repeat Password</label><br>
+            <input type="password" placeholder="Repeat password" name="repeat-psw" required><br>
+            
+            
+            <button type="submit" class="register_btn">Register</button>
+         
+        <div id="signin">
+          <p>Already have an account? <a href="login.html">Sign in</a></p>
+        </div> 
+        </div>
+        
+    </form>
+  </section>    
+</body>
+</html>
\ No newline at end of file