From ec311f26c628319a326d333dc5f951d8ac3b7447 Mon Sep 17 00:00:00 2001
From: Pavan Gandhi <pavangandhi100@gmail.com>
Date: Sun, 23 Aug 2020 13:12:53 +0530
Subject: [PATCH] Revert "Updated UI of the app"

---
 public/css/tailwind.css  |   52 --
 routes/api/addBalance.js |    7 +-
 routes/api/portfolio.js  |    4 +-
 views/addBalance.ejs     |   49 +-
 views/cart.ejs           |  115 ++--
 views/layouts/app.ejs    |   48 +-
 views/partials/_nav.ejs  |  123 ++--
 views/portfolio.ejs      | 1332 +++++++++++++++++++++-----------------
 views/view.ejs           |   74 ++-
 9 files changed, 971 insertions(+), 833 deletions(-)

diff --git a/public/css/tailwind.css b/public/css/tailwind.css
index f8da7c0..985abac 100644
--- a/public/css/tailwind.css
+++ b/public/css/tailwind.css
@@ -20,58 +20,6 @@ body {
     width: 75vw;
 }
 
-.tradebyte-logo {
-    color: #1955E4;
-    text-shadow: 1px 2px 40px rgba(0, 0, 0, 0.5)
-}
-
-.line {
-    border: 1.5px solid #8e9aad;
-}
-
-.user-profile {
-    border-radius: 100px;
-    border: 10px solid #1955E4;
-    width: 130px;
-    height: 130px;
-}
-
-.tick {
-    height: 22px;
-    width: 22px;
-    border-radius: 50%;
-    background-color: #38cda0;
-    color: white;
-}
-
-.tick-background {
-    background: #a9f7e6;
-    border-radius: 29px;
-    color: #1b9b7f;
-}
-
-.tab-color {
-    border-radius: 10px;
-    border-color: #1955E4;
-    color: #1955E4;
-  }
-  
-.view-link {
-    color: #1955E4;
-}
-  
-.table-content {
-    overflow: scroll;
-    overflow-x: scroll;
-    overflow-y: auto;
-}
-  
-.transaction-companySymbol {
-    color: rgb(0, 0, 0);
-    font-weight: 700;
-    font-size: 1.1rem;
-}
-
 @tailwind components;
 
 .symbolicon {
diff --git a/routes/api/addBalance.js b/routes/api/addBalance.js
index 98bfc33..7fe0d7b 100644
--- a/routes/api/addBalance.js
+++ b/routes/api/addBalance.js
@@ -10,11 +10,10 @@ const User = require("../../models/User");
 // @access   Private
 router.get("/", ensureAuth, (req, res) => {
   let user = req.user;
-  res.status(200).render("addBalance", {
-      layout: "layouts/app",
-      href: "/addBalance",
+  res.status(200).render("addBalance"),
+    {
       user,
-    });
+    };
 });
 
 // TODO
diff --git a/routes/api/portfolio.js b/routes/api/portfolio.js
index 291bc2f..1d28251 100644
--- a/routes/api/portfolio.js
+++ b/routes/api/portfolio.js
@@ -8,10 +8,10 @@ const { ensureAuth, ensureGuest } = require("../../middleware/auth");
 // @route    GET /portfolio
 // @access   Private
 router.get("/", ensureAuth, (req, res) => {
-  let user = req.user;
+  let avatar = req.user.image;
   res
     .status(200)
-    .render("portfolio", { layout: "layouts/app", user, href: "/portfolio" });
+    .render("portfolio", { layout: "layouts/app", avatar, href: "/portfolio" });
 });
 
 module.exports = router;
diff --git a/views/addBalance.ejs b/views/addBalance.ejs
index 5fc8037..2076304 100644
--- a/views/addBalance.ejs
+++ b/views/addBalance.ejs
@@ -1,24 +1,27 @@
-<section class="text-gray-700 body-font md:ml-56 lg:ml-64 md:mx-auto md:pr-14 w-screen inline">
-  <div class="container px-5 py-10 mx-auto md:px-auto">
-    <div class="my-4 absolute-center">
-      <h2 class="text-gray-700 lg:text-6xl text-5xl font-semibold leading-none tracking-wider px-5">Add Balance</h2>
+<h1>ADD BALANCE</h1>
+<hr />
+<h3>Your Current Balance: <%= user.balance%></h3>
+<hr />
+<br />
+<form
+  action="/addBalance"
+  method="POST"
+  class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+>
+  <div class="mb-4">
+    <label class="block text-gray-700 text-sm font-bold mb-2">
+      Enter amount
+    </label>
+    <input
+      type="number"
+      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+      name="addAmount"
+      placeholder="amount"
+    />
+    <input
+      type="submit"
+      value="Add"
+      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+    />
   </div>
-      <hr class="line">
-      <div class="container py-16 mx-auto">
-        <h3>Your Current Balance: <%= user.balance%></h3>
-        <form action="/addBalance" method="POST" class="bg-white shadow-md rounded px-8 pt-6 pb-8 my-6">
-          <div class=" mb-4">
-            <label class="block text-gray-700 text-sm font-bold mb-2">
-              Enter amount
-            </label>
-            <input type="number"
-              class="shadow appearance-none border rounded w-4/5 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-              name="addAmount" placeholder="amount" />
-            <input type="submit" value="Add"
-              class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" />
-          </div>
-        </form>
-      </div>
-  </div>
-</section>
-  
+</form>
diff --git a/views/cart.ejs b/views/cart.ejs
index 3aa8783..e803775 100644
--- a/views/cart.ejs
+++ b/views/cart.ejs
@@ -1,66 +1,97 @@
 <div class="relative md:ml-56 lg:ml-64 py-6 px-3 w-full">
-  <div class="relative bg-white mx-auto max-w-6xl text-gray-600 mt-6 shadow-xl rounded-lg">
-    <lable type="submit" class="absolute left-0 top-0 mt-3 ml-4">
-      <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-        version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966"
-        style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
-        <path
-          d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" />
-      </svg>
-    </lable>
-    <input
-      class="bg-white focus:outline-none focus:outline-none border border-gray-300 rounded-lg mr-6 pl-10 pr-4 py-2 px-4 block w-full appearance-none leading-normal"
-      type="search" placeholder="Search">
-  </div>
-  <div class="mx-auto max-w-6xl flex flex-col w-full px-4 md:py-12 md:px-8 text-gray-800">
+  <div
+    class="mx-auto max-w-6xl flex flex-col w-full px-4 md:py-12 md:px-8 text-gray-800"
+  >
     <form action="/cart/buy" method="POST">
       <h1 class="text-2xl lg:text-4xl font-bold mt-8 mb-4 flex">
-        Buy Stock :<input class="bg-gray-300 max-w-sm w-24 ml-2" type="text" readonly value="<%= symbol %>"
-          id="companySymbol" name="companySymbol" />
+        Buy Stock :<input
+          class="bg-gray-300 max-w-sm w-24 ml-2"
+          type="text"
+          readonly
+          value="<%= symbol %>"
+          id="companySymbol"
+          name="companySymbol"
+        />
       </h1>
       <div class="w-full text-sm lg:text-base border-4"></div>
       <div
-        class="new grid grid-flow-col grid-cols-3 md:grid-cols-4 grid-rows-2 grig-gap-0 md:gap-4 lg:grid-rows-3 bg-white shadow-md p-2 lg:p-6 text-center">
-        
-        <div class="text-xs text-left lg:text-lg font-bold uppercase flex items-center lg:justify-center">
+        class="new grid grid-flow-col grid-cols-3 md:grid-cols-4 grid-rows-2 grig-gap-0 md:gap-4 lg:grid-rows-3 bg-white shadow-md p-2 lg:p-6 text-center"
+      >
+        <div
+          class="text-xs text-left lg:text-lg font-bold uppercase flex items-center lg:justify-center"
+        >
           Company Name
         </div>
-        <div class="text-xs lg:text-lg font-bold flex items-center lg:items-center lg:row-span-2">
+        <div
+          class="text-xs lg:text-lg font-bold flex items-center lg:items-center lg:row-span-2"
+        >
           <div class="flex flex-col items-center justify-center w-full">
-            <img class="hidden lg:block h-16" src="<%= logoSrc %> " alt="<%= companyName %>" />
-            <p class="font-medium text-left text-xs md:text-sm lg:text-center lg:text-lg w-full md:break-all">
+            <img
+              class="hidden lg:block h-16"
+              src="<%= logoSrc %> "
+              alt="<%= companyName %>"
+            />
+            <p
+              class="font-medium text-left text-xs md:text-sm lg:text-center lg:text-lg w-full md:break-all"
+            >
               <%= companyName %>
             </p>
           </div>
         </div>
         <div
-          class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex items-center justify-center">
+          class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex md:items-center md:justify-center lg:items-start"
+        >
           Unit Price
         </div>
-        <div class="hidden md:block md:flex md:justify-center text-xs lg:text-lg font-bold uppercase lg:row-span-2">
-          <input class="text-sm lg:text-center font-medium text-xs lg:text-lg w-full text-center"
-            value="<%= latestPrice %>" name="stockPrice" id="stockPrice" readonly />
+        <div
+          class="hidden md:block md:flex md:justify-center text-xs lg:text-lg font-bold uppercase lg:row-span-2"
+        >
+          <input
+            class="text-sm lg:text-center font-medium text-xs lg:text-lg w-full text-center"
+            value="<%= latestPrice %>"
+            name="stockPrice"
+            id="stockPrice"
+            readonly
+          />
         </div>
-        <div class="md:hidden text-xs text-center font-semibold uppercase flex items-center justify-center">
+        <div
+          class="md:hidden text-xs text-center font-semibold uppercase flex items-center justify-center"
+        >
           Qty
         </div>
         <div
-          class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex items-center justify-center ">
+          class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex md:items-center md:justify-center lg:items-start"
+        >
           Quantity
         </div>
-        <div class="text-xs lg:text-lg font-bold uppercase flex items-center justify-center lg:row-span-2">
+        <div
+          class="text-xs lg:text-lg font-bold uppercase flex items-center justify-center lg:row-span-2"
+        >
           <div class="h-8">
             <div class="relative flex flex-row w-full h-8">
-              <input type="number" value="1" min="1" name="noOfStock" id="noOfStock"
-                class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black" />
+              <input
+                type="number"
+                value="1"
+                min="1"
+                name="noOfStock"
+                id="noOfStock"
+                class="w-full font-semibold text-center text-gray-700 bg-gray-200 outline-none focus:outline-none hover:text-black focus:text-black"
+              />
             </div>
           </div>
         </div>
-        <div class="text-xs lg:text-lg text-right font-bold uppercase flex items-center justify-end">
+        <div
+          class="text-xs lg:text-lg text-right font-bold uppercase flex items-center justify-end lg:items-start"
+        >
           Total Price
         </div>
-        <div class="text-xs lg:text-lg font-bold uppercase flex items-center justify-end lg:row-span-2">
-          <p class="text-xs md:text-sm font-medium text-right text-xs lg:text-lg break-words" id="totalPrice">
+        <div
+          class="text-xs lg:text-lg font-bold uppercase flex items-center justify-end lg:row-span-2"
+        >
+          <p
+            class="text-xs md:text-sm font-medium text-right text-xs lg:text-lg break-words"
+            id="totalPrice"
+          >
             <span class="total-price">
               <%= latestPrice %>
             </span>
@@ -69,11 +100,15 @@
         </div>
       </div>
       <div class="flex justify-end w-full items-center">
-        <a href="/market"
-          class="block uppercase ml-0 md:ml-auto mt-4 shadow bg-blue-800 hover:bg-indigo-700 focus:shadow-outline focus:outline-none text-white font-semibold text-xs lg:text-sm py-3 px-4 rounded">Back
-          to Market</a>
-        <button type="submit"
-          class="block uppercase mt-4 ml-4 shadow bg-yellow-500 hover:bg-yellow-600 focus:shadow-outline focus:outline-none text-black font-semibold text-xs lg:text-sm py-3 px-4 rounded">
+        <a
+          href="/market"
+          class="block uppercase ml-0 md:ml-auto mt-4 shadow bg-blue-800 hover:bg-indigo-700 focus:shadow-outline focus:outline-none text-white font-semibold text-xs lg:text-sm py-3 px-4 rounded"
+          >Back to Market</a
+        >
+        <button
+          type="submit"
+          class="block uppercase mt-4 ml-4 shadow bg-yellow-500 hover:bg-yellow-600 focus:shadow-outline focus:outline-none text-black font-semibold text-xs lg:text-sm py-3 px-4 rounded"
+        >
           <span class="hidden md:inline-block">Proceed to</span> Checkout
         </button>
       </div>
@@ -89,4 +124,4 @@
     const val = e.target.value;
     totalPrice.textContent = parseFloat(stockPrice.value * val).toFixed(4);
   });
-</script>
\ No newline at end of file
+</script>
diff --git a/views/layouts/app.ejs b/views/layouts/app.ejs
index 947aca4..fcefe3f 100644
--- a/views/layouts/app.ejs
+++ b/views/layouts/app.ejs
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css"
+      integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o="
+      crossorigin="anonymous"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css"
-    integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
-  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
+    <link type="text/css" rel="stylesheet" href="./css/style.css" />
+    <link type="text/css" rel="stylesheet" href="../css/style.css" />
+    <title>TradeByte</title>
+  </head>
 
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet" />
-
-  <link type="text/css" rel="stylesheet" href="../css/style.css" />
-  <link type="text/css" rel="stylesheet" href="../css/tailwind.css" />
-  <link rel="shortcut icon" href="../images/TradeByte-Favicon.png" type="image/x-icon">
-  <title>TradeByte</title>
-</head>
-
-<body>
-  <div class="md:flex flex-col md:flex-row min-h-screen w-full">
-    <%- include('../partials/_nav.ejs') %>
-    <%- body %>
-  </div>
-  <script type="application/javascript" src="../javascript/script.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+  <body>
+    <div class="md:flex flex-col bg-gray-300 md:flex-row min-h-screen w-full">
+      <%- include('../partials/_nav.ejs') %> <%- body %>
+    </div>
+    <script type="application/javascript" src="./javascript/script.js"></script>
+    <script
+      type="application/javascript"
+      src="../javascript/script.js"
+    ></script>
+  </body>
+</html>
diff --git a/views/partials/_nav.ejs b/views/partials/_nav.ejs
index 65b1f13..e6bd0dd 100644
--- a/views/partials/_nav.ejs
+++ b/views/partials/_nav.ejs
@@ -1,78 +1,57 @@
 <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
-
 <div @click.away="open = false"
   class="flex flex-col w-full md:w-56 lg:w-64 text-gray-700 bg-white flex-shrink-0 md:h-screen  md:z-50 md:fixed md:left-0 md:top-0"
   x-data="{ open: false }">
-
-  <div class="flex-shrink-0 px-6 py-4 flex flex-row items-center justify-between">
-    <div class="flex-shrink-0 text-center">
-      <img class="h-8 w-8 tradebyte-logo " src="../images/TradeByte-Favicon.png" alt="Logo">
-    </div>
-    <h4 class="font-bold text-center pt-1">
-      <a href="/"
-        class="hover:text-gray-900 tracking-widest text-2xl md:text-2xl lg:text-3xl tradebyte-logo">Tradebyte</a>
-    </h4>
-    <button class="rounded-lg md:hidden rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open">
-      <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
-        <path x-show="!open" fill-rule="evenodd"
-          d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
-          clip-rule="evenodd"></path>
-        <path x-show="open" fill-rule="evenodd"
-          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-          clip-rule="evenodd"></path>
-      </svg>
-    </button>
-
-  </div>
-
-
-  <nav :class="{'block': open, 'hidden': !open}" class="flex-grow md:block px-4 pb-4 md:pb-0">
-
-    <hr class="line mb-6">
-
-    <div class="flex justify-center align-center rounded-full">
-      <img class="h-16 w-16 border-8 user-profile box-1 rounded-full" src="<%= user.image %>" alt="" />
-    </div>
-
-    <a class="block w-2/5 md:w-4/5 max-w-xs p-2 mt-4 mb-8 mx-auto text-xs font-bold text-gray-900 focus:shadow-outline flex justify-center rounded-full text-green-900 font-bold tick-background"
-      href="#">
-      <div class="tick mr-1">
-        <svg class="w-5 mr-1 " fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-          viewBox="0 0 24 24" stroke="currentColor">
-          <path d="M5 13l4 4L19 7"></path>
-        </svg>
-      </div> Trading Active
-    </a>
-
-    <div class="nav-box flex flex-col justify-start">
-
-      <a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 hover:text-blue-800 focus:text-blue-900 hover:bg-blue-100 focus:bg-blue-200 focus:outline-none focus:shadow-outline flex <%= href === '/portfolio' ? 'border tab-color border-l-8': '' %>"
-        href="/portfolio">
-        <svg class="w-5 ml-2 mr-1" fill="none " stroke-linecap="round " stroke-linejoin="round " stroke-width="2 "
-          viewBox="0 0 24 24 " stroke="currentColor ">
-          <path
-            d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4
+      <div class="flex-shrink-0 px-6 py-4 flex flex-row items-center justify-between">
+        <h1 class="font-bold uppercase border-b border-gray-100 w-full text-center">
+          <a href="/" class="hover:text-gray-900 tracking-widest text-2xl md:text-2xl lg:text-3xl pb-2 pt-32">Tradebyte</a>
+        </h1>
+        <button class="rounded-lg md:hidden rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open">
+          <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
+            <path x-show="!open" fill-rule="evenodd"
+              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
+              clip-rule="evenodd"></path>
+            <path x-show="open" fill-rule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clip-rule="evenodd"></path>
+          </svg>
+        </button>
+      </div>
+      <nav :class="{'block': open, 'hidden': !open}" class="flex-grow md:block px-4 pb-4 md:pb-0">
+        <div class="flex justify-center align-center rounded-full">
+          <img class="h-20 w-20 border-8 border-blue-600 box-1 rounded-full" src="<%= avatar %>" alt="" />
+        </div>
+        <a class="block w-2/5 md:w-4/5 max-w-xs lg:w-3/5 p-2 mt-4 mb-8 mx-auto text-xs font-bold text-gray-900 focus:shadow-outline flex justify-center bg-green-200 rounded-full text-green-900 font-bold"
+          href="#"><svg class="w-5 mr-1 " fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            viewBox="0 0 24 24" stroke="currentColor">
+            <path d="M5 13l4 4L19 7"></path>
+          </svg>Trading Active</a>
+        <div class="nav-box flex flex-col justify-start">
+          <a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline flex <%= href === '/portfolio' ? 'bg-gray-200 border border-purple-700 border-l-8': '' %>"
+            href="/portfolio">
+            <svg class="w-5 ml-2 mr-1" fill="none " stroke-linecap="round " stroke-linejoin="round " stroke-width="2 "
+              viewBox="0 0 24 24 " stroke="currentColor ">
+              <path
+                d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4
         13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z ">
-          </path>
-        </svg>Dashboard</a>
-
-      <a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 hover:text-blue-800 focus:text-blue-900 hover:bg-blue-100 focus:bg-blue-200 focus:outline-none focus:shadow-outline flex <%= href === '/market' ? 'border tab-color border-l-8': '' %>"
-        href="/market"><svg class="w-5 ml-2 mr-1" fill="none " stroke-linecap="round " stroke-linejoin="round "
-          stroke-width="2 " viewBox="0 0 24 24 " stroke="currentColor ">
-          <path d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z "></path>
-        </svg>Market</a>
-
-      <a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 hover:text-blue-800 focus:text-blue-900 hover:bg-blue-100 focus:bg-blue-200 focus:outline-none focus:shadow-outline flex <%= href === '/addBalance' ? 'border tab-color border-l-8': '' %>"
-        href="/addBalance">+ Add Balance</a>
-      <!-- only for development purpose i added ADD BALANCE button here on navbar. -->
-
-      <a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 hover:text-blue-800 focus:text-blue-900 hover:bg-blue-100 focus:bg-blue-200 focus:outline-none focus:shadow-outline flex <%= href === '/auth/logout' ? 'border tab-color border-l-8': '' %>"
-        href="/auth/logout"><svg class="w-6 ml-2 mr-1" fill="currentColor" viewBox="0 0 20 20">
-          <path fill-rule="evenodd"
-            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-            clip-rule="evenodd"></path>
-        </svg>Logout</a>
-
+              </path>
+            </svg>Dashboard</a>
+          <a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline flex <%= href === '/market' ? 'bg-gray-200 border border-purple-700 border-l-8': '' %>"
+            href="/market"><svg class="w-5 ml-2 mr-1" fill="none " stroke-linecap="round " stroke-linejoin="round "
+              stroke-width="2 " viewBox="0 0 24 24 " stroke="currentColor ">
+              <path d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z "></path>
+            </svg>Market</a>
+
+          <a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline flex"
+            href="/addBalance">+ Add Balance</a>
+          <!-- only for development purpose i added ADD BALANCE button here on navbar. -->
+
+          <a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline flex"
+            href="/auth/logout"><svg class="w-6 ml-2 mr-1" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clip-rule="evenodd"></path>
+            </svg>Logout</a>
+        </div>
+      </nav>
     </div>
-  </nav>
-</div>
\ No newline at end of file
diff --git a/views/portfolio.ejs b/views/portfolio.ejs
index 84df7c9..6f1ac27 100644
--- a/views/portfolio.ejs
+++ b/views/portfolio.ejs
@@ -1,598 +1,746 @@
-<main class="md:col-span-4 md:ml-56 lg:ml-64 md:pr-14 w-full">
-    <div class="container px-5 py-10 mx-auto md:px-auto">
-        <!-- <div class="absolute-center mx-auto"> -->
-
-        <!-- header -->
-
-        <header class="my-4 absolute-center">
-            <span class="text-gray-700 text-3xl font-semibold leading-none tracking-wider">Hello,</span>
-            <h2 class="text-gray-800 text-5xl leading-none tracking-wider view-link"><%= user.displayName%>.</h2>
-        </header>
-
-        <hr class="line">
-
-        <!-- search box -->
-
-        <div>
-            <div class="relative bg-white text-gray-600 mt-12 shadow-xl rounded-lg">
-                <lable type="submit" class="absolute left-0 top-0 mt-3 ml-4">
-                    <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg"
-                        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
-                        viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;"
-                        xml:space="preserve" width="512px" height="512px">
-                        <path
-                            d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" />
-                    </svg>
-                </lable>
-                <input
-                    class="bg-white focus:outline-none focus:outline-none border border-gray-300 rounded-lg mr-6 pl-10 pr-4 py-2 px-4 block w-full appearance-none leading-normal"
-                    type="search" placeholder="Search">
-            </div>
-
-            <div class="mt-8 grid lg:grid-cols-3 gap-10">
-                <!-- cards go here -->
-
-                <!-- card1 -->
-
-                <div class="bg-white card rounded-lg flex items-center h-20 sm:h-20 w-full object-cover px-5 shadow-2xl">
-                    <div class="flex-shrink-0 w-10 h-10">
-                        <img class="w-full h-full" src="images/graph.jpeg" alt=" " />
-                    </div>
-                    <div class="font-bold text-lg ml-3">
-                        <p class="text-gray-900 whitespace-no-wrap">
-                            $40,342.04
-                        </p>
-                        <span class="block text-gray-500 text-sm">Total Portfolio</span>
-                    </div>
-                </div>
-
-                <!-- card 2 -->
-
-                <div class="bg-white card rounded-lg flex items-center h-20 sm:h-20 w-full object-cover px-5 shadow-2xl">
-                    <div class="flex-shrink-0 w-10 h-10">
-                        <img class="w-full h-full" src="images/graph.jpeg " alt=" " />
-                    </div>
-                    <div class="font-bold text-lg ml-3 justify-center">
-                        <p class="text-gray-900 whitespace-no-wrap">
-                            $ 40,342.04
-                        </p>
-                        <span class="block text-gray-500 text-sm">Profit / Loss</span>
-                    </div>
-                </div>
-
-                <!-- card 3 -->
-
-                <div class="bg-white card rounded-lg flex items-center h-20 sm:h-20 w-full object-cover px-5 shadow-2xl">
-                    <div class="flex-shrink-0 w-10 h-10">
-                        <img class="w-full h-full" src="images/graph.jpeg " alt=" " />
-                    </div>
-                    <div class="font-bold text-lg ml-3">
-                        <p class="text-gray-900 whitespace-no-wrap">
-                            $40,342.04
-                        </p>
-                        <span class="block text-gray-500 text-sm">$ Balance</span>
-                    </div>
-                </div>
-            </div>
+<main class="md:col-span-4 bg-gray-300 md:ml-56 lg:ml-64 md:pr-14 w-full">
+  <div class="container px-5 py-10 mx-auto md:px-auto">
+    <!-- <div class="absolute-center mx-auto"> -->
+
+    <!-- header -->
+
+    <header class="mt-4 absolute-center">
+      <h2
+        class="text-gray-700 text-6xl font-semibold leading-none tracking-wider"
+      >
+        TradeByte
+      </h2>
+    </header>
+
+    <!-- search box -->
+
+    <div>
+      <div class="relative text-gray-600 mt-12 shadow-md rounded-b-lg">
+        <input
+          type="search"
+          name="serch"
+          placeholder="        Search Stocks"
+          class="bg-transparent h-10 px-5 pr-10 rounded-full text-sm focus:outline-none"
+        />
+        <button type="submit" class="absolute left-0 top-0 mt-3 ml-4">
+          <svg
+            class="h-4 w-4 fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            version="1.1"
+            id="Capa_1"
+            x="0px"
+            y="0px"
+            viewBox="0 0 56.966 56.966"
+            style="enable-background: new 0 0 56.966 56.966;"
+            xml:space="preserve"
+            width="512px"
+            height="512px"
+          >
+            <path
+              d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <div class="mt-8 grid lg:grid-cols-3 gap-10">
+        <!-- cards go here -->
+
+        <!-- card1 -->
+
+        <div
+          class="card rounded-xl flex items-center h-20 sm:h-20 w-full object-cover px-5 shadow-2xl"
+        >
+          <div class="flex-shrink-0 w-10 h-10">
+            <img class="w-full h-full" src="images/graph.jpeg" alt=" " />
+          </div>
+          <div class="font-bold text-xl xl:text-2xl ml-3">
+            <p class="text-gray-900 whitespace-no-wrap">
+              $40,342.04
+            </p>
+            <span class="block text-gray-500 text-sm">Total Portfolio</span>
+          </div>
         </div>
 
-        <!-- overview heading -->
-
-        <h2 class="text-lg font-bold leading-tight py-3 mt-8">Overview</h2>
-        <!-- graph card -->
-        <div class="bg-white rounded-lg card h-64 w-auto mb-10 shadow-2xl"></div>
-
-        <!-- container for both tables -->
-
-        <div class="lg:grid lg:grid-cols-2 -mx-8">
-            <!-- table component 1 -->
-
-            <div class="px-3 sm:px-6 py-4 overflow-hidden h-auto w-full">
-                <div class="flex justify-between">
-                    <!-- heading of table -->
-
-                    <h2 class="text-lg font-bold leading-tight py-3 ">Trade History</h2>
-                    <a href="#" class="mt-3 font-bold text-tempc-400 ">View All <span
-                            class="font-extrabold">></span></a>
-                </div>
-
-                <!-- start of table -->
-
-                <div class="px-5 inline-block min-w-0 shadow-lg rounded-lg overflow-hidden">
-                    <table class="min-w-0 leading-normal">
-                        <thead>
-                            <tr>
-                                <th
-                                    class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                    date
-                                </th>
-                                <th
-                                    class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                    platform
-                                </th>
-                                <th
-                                    class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                    fair
-                                </th>
-                                <th
-                                    class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                    action
-                                </th>
-                                <th
-                                    class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                    amount
-                                </th>
-                            </tr>
-                        </thead>
-
-                        <!-- table body -->
-
-                        <tbody>
-                            <tr class="bg-white">
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-600 whitespace-no-wrap">
-                                        Jan 21, 2020
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        Gdax
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap uppercase">
-                                        btc/usd
-                                    </p>
-                                </td>
-                                <td class="px-5 py-3 border-b border-gray-200 text-sm">
-                                    <span
-                                        class="relative inline-block px-3 py-1 font-semibold text-white leading-tight">
-                                        <span aria-hidden class="absolute inset-0 bg-tempc-500 rounded-full"></span>
-                                        <span class="relative">Sell</span>
-                                    </span>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap uppercase">
-                                        <span class="text-tempc-500">+</span>0.230046
-                                    </p>
-                                </td>
-                            </tr>
-                            <tr class="bg-gray-100">
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-600 whitespace-no-wrap">
-                                        Jan 8, 2020
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        Bitterx
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap uppercase">
-                                        btc/usd
-                                    </p>
-                                </td>
-
-                                <td class="px-5 py-3 border-b border-gray-200 text-sm">
-                                    <span
-                                        class="relative inline-block px-3 py-1 font-semibold text-white leading-tight">
-                                        <span aria-hidden class="absolute inset-0 bg-tempc-400 rounded-full"></span>
-                                        <span class="relative">Buy</span>
-                                    </span>
-                                </td>
-
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap uppercase">
-                                        <span class="text-tempc-400">-</span>0.230046
-                                    </p>
-                                </td>
-                            </tr>
-                            <tr class="bg-white">
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-600 whitespace-no-wrap">
-                                        Jan 21, 2020
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        Gdax
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap uppercase">
-                                        btc/usd
-                                    </p>
-                                </td>
-
-                                <td class="px-5 py-3 border-b border-gray-200 text-sm">
-                                    <span
-                                        class="relative inline-block px-3 py-1 font-semibold text-white leading-tight">
-                                        <span aria-hidden class="absolute inset-0 bg-tempc-500 rounded-full"></span>
-                                        <span class="relative">Sell</span>
-                                    </span>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap uppercase">
-                                        <span class="text-tempc-500">+</span>0.230046
-                                    </p>
-                                </td>
-                            </tr>
-                            <tr class="bg-gray-100">
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-600 whitespace-no-wrap">
-                                        Jan 8, 2020
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        Bitterx
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap uppercase">
-                                        btc/usd
-                                    </p>
-                                </td>
-
-                                <td class="px-5 py-3 border-b border-gray-200 text-sm">
-                                    <span
-                                        class="relative inline-block px-3 py-1 font-semibold text-white leading-tight">
-                                        <span aria-hidden class="absolute inset-0 bg-tempc-400 rounded-full"></span>
-                                        <span class="relative">Buy</span>
-                                    </span>
-                                </td>
-
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap uppercase">
-                                        <span class="text-tempc-400">-</span>0.230046
-                                    </p>
-                                </td>
-                            </tr>
-                            <tr class="bg-white">
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-600 whitespace-no-wrap">
-                                        Jan 21, 2020
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        Gdax
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap uppercase">
-                                        btc/usd
-                                    </p>
-                                </td>
-
-                                <td class="px-5 py-3 border-b border-gray-200 text-sm">
-                                    <span
-                                        class="relative inline-block px-3 py-1 font-semibold text-white leading-tight">
-                                        <span aria-hidden class="absolute inset-0 bg-tempc-500 rounded-full"></span>
-                                        <span class="relative">Sell</span>
-                                    </span>
-                                </td>
-
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap uppercase">
-                                        <span class="text-tempc-500">+</span>0.230046
-                                    </p>
-                                </td>
-                            </tr>
-                            <tr class="bg-gray-100">
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-600 whitespace-no-wrap">
-                                        Jan 8, 2020
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        Bitterx
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap uppercase">
-                                        btc/usd
-                                    </p>
-                                </td>
-
-                                <td class="px-5 py-3 border-b border-gray-200 text-sm">
-                                    <span
-                                        class="relative inline-block px-3 py-1 font-semibold text-white leading-tight">
-                                        <span aria-hidden class="absolute inset-0 bg-tempc-400 rounded-full"></span>
-                                        <span class="relative">Buy</span>
-                                    </span>
-                                </td>
-
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap uppercase">
-                                        <span class="text-tempc-400">-</span>0.230046
-                                    </p>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-
-            <!-- table component 2 -->
-
-            <div class="px-3 sm:px-8 py-4 overflow-hidden h-auto w-full">
-                <!-- table name stocks status -->
-
-                <div class="flex justify-between">
-                    <h2 class="text-lg font-bold leading-tight py-3 ">Stock Status</h2>
-                    <a href="#" class="mt-3 pr-42 font-bold text-tempc-400 ">View All <span
-                            class="font-extrabold">></span></a>
-                </div>
-
-                <!-- table start -->
-
-                <div class="px-5 inline-block min-w-0 shadow-lg rounded-lg overflow-hidden">
-                    <table class="min-w-0 leading-normal">
-                        <!-- table head -->
-
-                        <thead>
-                            <tr>
-                                <th
-                                    class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                    name
-                                </th>
-                                <th
-                                    class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                    amount
-                                </th>
-                                <th
-                                    class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                    current
-                                </th>
-                                <th
-                                    class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                    status
-                                </th>
-                                <th
-                                    class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                                    sell
-                                </th>
-                            </tr>
-                        </thead>
-
-                        <!-- table body -->
-
-                        <tbody>
-                            <tr class="bg-white">
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        Gdax
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        $11111
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="block px-4 flex">
-                                        <span>0.2334</span>
-                                        <svg class="w-6 h-4 text-tempc-400" fill="none" stroke-linecap="round"
-                                            stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
-                                            stroke="currentColor">
-                                            <path d="M8 7l4-4m0 0l4 4m-4-4v18"></path>
-                                        </svg>
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-tempc-400 whitespace-no-wrap">
-                                        +639
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm text-tempc-400">
-                                    <svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round"
-                                        stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path
-                                            d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
-                                        </path>
-                                    </svg>
-                                </td>
-                            </tr>
-                            <tr class="bg-gray-100">
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        Gdax1
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        $11112
-                                    </p>
-                                </td>
-
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="block px-4 flex">
-                                        <span>0.2334</span>
-                                        <svg class="w-6 h-4 text-tempc-200" fill="none" stroke-linecap="round"
-                                            stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
-                                            stroke="currentColor">
-                                            <path d="M16 17l-4 4m0 0l-4-4m4 4V3"></path>
-                                        </svg>
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-tempc-200 whitespace-no-wrap">
-                                        -639
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm text-tempc-400">
-                                    <svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round"
-                                        stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path
-                                            d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
-                                        </path>
-                                    </svg>
-                                </td>
-                            </tr>
-                            <tr class="bg-white">
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        Gdax
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        $11111
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="block px-4 flex">
-                                        <span>0.2334</span>
-                                        <svg class="w-6 h-4 text-tempc-400" fill="none" stroke-linecap="round"
-                                            stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
-                                            stroke="currentColor">
-                                            <path d="M8 7l4-4m0 0l4 4m-4-4v18"></path>
-                                        </svg>
-                                    </p>
-                                </td>
-
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-tempc-400 whitespace-no-wrap">
-                                        +639
-                                    </p>
-                                </td>
-
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm text-tempc-400">
-                                    <svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round"
-                                        stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path
-                                            d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
-                                        </path>
-                                    </svg>
-                                </td>
-                            </tr>
-                            <tr class="bg-gray-100">
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        Gdax
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        $11111
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="block px-4 flex">
-                                        <span>0.2334</span>
-                                        <svg class="w-6 h-4 text-tempc-200" fill="none" stroke-linecap="round"
-                                            stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
-                                            stroke="currentColor">
-                                            <path d="M16 17l-4 4m0 0l-4-4m4 4V3"></path>
-                                        </svg>
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-tempc-200 whitespace-no-wrap">
-                                        -119
-                                    </p>
-                                </td>
-
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm text-tempc-400">
-                                    <svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round"
-                                        stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path
-                                            d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
-                                        </path>
-                                    </svg>
-                                </td>
-                            </tr>
-                            <tr class="bg-white">
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        Gdax
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        $11111
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="block px-4 flex">
-                                        <span>0.2334</span>
-                                        <svg class="w-6 h-4 text-tempc-400" fill="none" stroke-linecap="round"
-                                            stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
-                                            stroke="currentColor">
-                                            <path d="M8 7l4-4m0 0l4 4m-4-4v18"></path>
-                                        </svg>
-                                    </p>
-                                </td>
-
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-tempc-400 whitespace-no-wrap">
-                                        +639
-                                    </p>
-                                </td>
-
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm text-tempc-400">
-                                    <svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round"
-                                        stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path
-                                            d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
-                                        </path>
-                                    </svg>
-                                </td>
-                            </tr>
-                            <tr class="bg-gray-100">
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        Gdax
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-gray-900 whitespace-no-wrap">
-                                        $11111
-                                    </p>
-                                </td>
-
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="block px-4 flex">
-                                        <span>0.2334</span>
-                                        <svg class="w-6 h-4 text-tempc-200" fill="none" stroke-linecap="round"
-                                            stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"
-                                            stroke="currentColor">
-                                            <path d="M16 17l-4 4m0 0l-4-4m4 4V3"></path>
-                                        </svg>
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm">
-                                    <p class="text-tempc-200 whitespace-no-wrap">
-                                        -339
-                                    </p>
-                                </td>
-                                <td class="px-3 py-3 border-b border-gray-200 text-sm text-tempc-400 pr-4">
-                                    <svg class="w-6 h-6" fill="none" stroke-linecap="round" stroke-linejoin="round"
-                                        stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path
-                                            d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
-                                        </path>
-                                    </svg>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
+        <!-- card 2 -->
+
+        <div
+          class="card rounded-xl flex items-center h-20 sm:h-20 w-full object-cover px-5 shadow-2xl"
+        >
+          <div class="flex-shrink-0 w-10 h-10">
+            <img class="w-full h-full" src="images/graph.jpeg " alt=" " />
+          </div>
+          <div class="font-bold text-xl xl:text-2xl ml-3 justify-center">
+            <p class="text-gray-900 whitespace-no-wrap">
+              $ 40,342.04
+            </p>
+            <span class="block text-gray-500 text-sm">Profit / Loss</span>
+          </div>
         </div>
-        <!-- end of tables -->
-
-        <!-- lode more -->
-        <div class="mt-12 flex justify-center">
-            <div
-                class="btn bg-secondary-100 text-secondary-200 inline-block hover:shadow-inner transform hover:scale-125 hover:bg-opacity-50 transition ease-out duration-300">
-                Load more
-            </div>
+
+        <!-- card 3 -->
+
+        <div
+          class="card rounded-xl flex items-center h-20 sm:h-20 w-full object-cover px-5 shadow-2xl"
+        >
+          <div class="flex-shrink-0 w-10 h-10">
+            <img class="w-full h-full" src="images/graph.jpeg " alt=" " />
+          </div>
+          <div class="font-bold text-xl xl:text-2xl ml-3">
+            <p class="text-gray-900 whitespace-no-wrap">
+              $40,342.04
+            </p>
+            <span class="block text-gray-500 text-sm">$ Balance</span>
+          </div>
         </div>
+      </div>
+    </div>
+
+    <!-- overview heading -->
+
+    <h2 class="text-2xl font-bold leading-tight py-6 mt-6">Overview</h2>
+    <!-- graph card -->
+    <div class="card h-64 w-auto mb-10 shadow-2xl"></div>
+
+    <!-- container for both tables -->
+
+    <div class="lg:grid lg:grid-cols-2 -mx-8">
+      <!-- table component 1 -->
+
+      <div class="px-3 sm:px-6 py-4 overflow-hidden h-auto w-full">
+        <div class="flex justify-between">
+          <!-- heading of table -->
+
+          <h2 class="text-2xl font-bold leading-tight py-6">Trade History</h2>
+          <a href="#" class="mt-6 mr-6 font-bold text-tempc-400"
+            >View All <span class="font-extrabold">></span></a
+          >
+        </div>
+
+        <!-- start of table -->
+
+        <div class="inline-block min-w-0 shadow-lg rounded-lg overflow-hidden">
+          <table class="min-w-0 leading-normal">
+            <thead>
+              <tr>
+                <th
+                  class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+                >
+                  date
+                </th>
+                <th
+                  class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+                >
+                  platform
+                </th>
+                <th
+                  class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+                >
+                  fair
+                </th>
+                <th
+                  class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+                >
+                  action
+                </th>
+                <th
+                  class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+                >
+                  amount
+                </th>
+              </tr>
+            </thead>
+
+            <!-- table body -->
+
+            <tbody>
+              <tr class="bg-white">
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-600 whitespace-no-wrap">
+                    Jan 21, 2020
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    Gdax
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap uppercase">
+                    btc/usd
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <span
+                    class="relative inline-block px-3 py-1 font-semibold text-white leading-tight"
+                  >
+                    <span
+                      aria-hidden
+                      class="absolute inset-0 bg-tempc-500 rounded-full"
+                    ></span>
+                    <span class="relative">Sell</span>
+                  </span>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap uppercase">
+                    <span class="text-tempc-500">+</span>0.230046
+                  </p>
+                </td>
+              </tr>
+              <tr class="bg-gray-100">
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-600 whitespace-no-wrap">
+                    Jan 8, 2020
+                  </p>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    Bitterx
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap uppercase">
+                    btc/usd
+                  </p>
+                </td>
+
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <span
+                    class="relative inline-block px-3 py-1 font-semibold text-white leading-tight"
+                  >
+                    <span
+                      aria-hidden
+                      class="absolute inset-0 bg-tempc-400 rounded-full"
+                    ></span>
+                    <span class="relative">Buy</span>
+                  </span>
+                </td>
+
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap uppercase">
+                    <span class="text-tempc-400">-</span>0.230046
+                  </p>
+                </td>
+              </tr>
+              <tr class="bg-white">
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-600 whitespace-no-wrap">
+                    Jan 21, 2020
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    Gdax
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap uppercase">
+                    btc/usd
+                  </p>
+                </td>
+
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <span
+                    class="relative inline-block px-3 py-1 font-semibold text-white leading-tight"
+                  >
+                    <span
+                      aria-hidden
+                      class="absolute inset-0 bg-tempc-500 rounded-full"
+                    ></span>
+                    <span class="relative">Sell</span>
+                  </span>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap uppercase">
+                    <span class="text-tempc-500">+</span>0.230046
+                  </p>
+                </td>
+              </tr>
+              <tr class="bg-gray-100">
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-600 whitespace-no-wrap">
+                    Jan 8, 2020
+                  </p>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    Bitterx
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap uppercase">
+                    btc/usd
+                  </p>
+                </td>
+
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <span
+                    class="relative inline-block px-3 py-1 font-semibold text-white leading-tight"
+                  >
+                    <span
+                      aria-hidden
+                      class="absolute inset-0 bg-tempc-400 rounded-full"
+                    ></span>
+                    <span class="relative">Buy</span>
+                  </span>
+                </td>
+
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap uppercase">
+                    <span class="text-tempc-400">-</span>0.230046
+                  </p>
+                </td>
+              </tr>
+              <tr class="bg-white">
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-600 whitespace-no-wrap">
+                    Jan 21, 2020
+                  </p>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    Gdax
+                  </p>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap uppercase">
+                    btc/usd
+                  </p>
+                </td>
+
+                <td class="px-5 py-5 border-b border-gray-200 text-sm">
+                  <span
+                    class="relative inline-block px-3 py-1 font-semibold text-white leading-tight"
+                  >
+                    <span
+                      aria-hidden
+                      class="absolute inset-0 bg-tempc-500 rounded-full"
+                    ></span>
+                    <span class="relative">Sell</span>
+                  </span>
+                </td>
+
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap uppercase">
+                    <span class="text-tempc-500">+</span>0.230046
+                  </p>
+                </td>
+              </tr>
+              <tr class="bg-gray-100">
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-600 whitespace-no-wrap">
+                    Jan 8, 2020
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    Bitterx
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap uppercase">
+                    btc/usd
+                  </p>
+                </td>
+
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <span
+                    class="relative inline-block px-3 py-1 font-semibold text-white leading-tight"
+                  >
+                    <span
+                      aria-hidden
+                      class="absolute inset-0 bg-tempc-400 rounded-full"
+                    ></span>
+                    <span class="relative">Buy</span>
+                  </span>
+                </td>
+
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap uppercase">
+                    <span class="text-tempc-400">-</span>0.230046
+                  </p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- table component 2 -->
+
+      <div class="px-3 sm:px-8 py-4 overflow-hidden h-auto w-full">
+        <!-- table name stocks status -->
+
+        <div class="flex justify-between">
+          <h2 class="text-2xl font-bold leading-tight py-6">Stock Status</h2>
+          <a href="#" class="mt-6 mr-6 font-bold text-tempc-400"
+            >View All <span class="font-extrabold">></span></a
+          >
+        </div>
+
+        <!-- table start -->
+
+        <div class="inline-block min-w-0 shadow-lg rounded-lg overflow-hidden">
+          <table class="min-w-0 leading-normal">
+            <!-- table head -->
+
+            <thead>
+              <tr>
+                <th
+                  class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+                >
+                  name
+                </th>
+                <th
+                  class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+                >
+                  amount
+                </th>
+                <th
+                  class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+                >
+                  current
+                </th>
+                <th
+                  class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+                >
+                  status
+                </th>
+                <th
+                  class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"
+                >
+                  sell
+                </th>
+              </tr>
+            </thead>
+
+            <!-- table body -->
+
+            <tbody>
+              <tr class="bg-white">
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    Gdax
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    $11111
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="block px-4 flex">
+                    <span>0.2334</span>
+                    <svg
+                      class="w-6 h-4 text-tempc-400"
+                      fill="none"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path d="M8 7l4-4m0 0l4 4m-4-4v18"></path>
+                    </svg>
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-tempc-400 whitespace-no-wrap">
+                    +639
+                  </p>
+                </td>
+                <td
+                  class="px-3 py-3 border-b border-gray-200 text-sm text-tempc-400"
+                >
+                  <svg
+                    class="w-6 h-6"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    ></path>
+                  </svg>
+                </td>
+              </tr>
+              <tr class="bg-gray-100">
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    Gdax1
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    $11112
+                  </p>
+                </td>
+
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="block px-4 flex">
+                    <span>0.2334</span>
+                    <svg
+                      class="w-6 h-4 text-tempc-200"
+                      fill="none"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path d="M16 17l-4 4m0 0l-4-4m4 4V3"></path>
+                    </svg>
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-tempc-200 whitespace-no-wrap">
+                    -639
+                  </p>
+                </td>
+                <td
+                  class="px-3 py-3 border-b border-gray-200 text-sm text-tempc-400"
+                >
+                  <svg
+                    class="w-6 h-6"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    ></path>
+                  </svg>
+                </td>
+              </tr>
+              <tr class="bg-white">
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    Gdax
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    $11111
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="block px-4 flex">
+                    <span>0.2334</span>
+                    <svg
+                      class="w-6 h-4 text-tempc-400"
+                      fill="none"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path d="M8 7l4-4m0 0l4 4m-4-4v18"></path>
+                    </svg>
+                  </p>
+                </td>
+
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-tempc-400 whitespace-no-wrap">
+                    +639
+                  </p>
+                </td>
+
+                <td
+                  class="px-3 py-3 border-b border-gray-200 text-sm text-tempc-400"
+                >
+                  <svg
+                    class="w-6 h-6"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    ></path>
+                  </svg>
+                </td>
+              </tr>
+              <tr class="bg-gray-100">
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    Gdax
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    $11111
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="block px-4 flex">
+                    <span>0.2334</span>
+                    <svg
+                      class="w-6 h-4 text-tempc-200"
+                      fill="none"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path d="M16 17l-4 4m0 0l-4-4m4 4V3"></path>
+                    </svg>
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-tempc-200 whitespace-no-wrap">
+                    -119
+                  </p>
+                </td>
+
+                <td
+                  class="px-3 py-3 border-b border-gray-200 text-sm text-tempc-400"
+                >
+                  <svg
+                    class="w-6 h-6"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    ></path>
+                  </svg>
+                </td>
+              </tr>
+              <tr class="bg-white">
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    Gdax
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    $11111
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="block px-4 flex">
+                    <span>0.2334</span>
+                    <svg
+                      class="w-6 h-4 text-tempc-400"
+                      fill="none"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path d="M8 7l4-4m0 0l4 4m-4-4v18"></path>
+                    </svg>
+                  </p>
+                </td>
+
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-tempc-400 whitespace-no-wrap">
+                    +639
+                  </p>
+                </td>
+
+                <td
+                  class="px-3 py-3 border-b border-gray-200 text-sm text-tempc-400"
+                >
+                  <svg
+                    class="w-6 h-6"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    ></path>
+                  </svg>
+                </td>
+              </tr>
+              <tr class="bg-gray-100">
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    Gdax
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-gray-900 whitespace-no-wrap">
+                    $11111
+                  </p>
+                </td>
+
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="block px-4 flex">
+                    <span>0.2334</span>
+                    <svg
+                      class="w-6 h-4 text-tempc-200"
+                      fill="none"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path d="M16 17l-4 4m0 0l-4-4m4 4V3"></path>
+                    </svg>
+                  </p>
+                </td>
+                <td class="px-3 py-3 border-b border-gray-200 text-sm">
+                  <p class="text-tempc-200 whitespace-no-wrap">
+                    -339
+                  </p>
+                </td>
+                <td
+                  class="px-3 py-3 border-b border-gray-200 text-sm text-tempc-400 pr-4"
+                >
+                  <svg
+                    class="w-6 h-6"
+                    fill="none"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    ></path>
+                  </svg>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <!-- end of tables -->
+
+    <!-- lode more -->
+    <div class="mt-12 flex justify-center">
+      <div
+        class="btn bg-secondary-100 text-secondary-200 inline-block hover:shadow-inner transform hover:scale-125 hover:bg-opacity-50 transition ease-out duration-300"
+      >
+        Load more
+      </div>
     </div>
+  </div>
 
-    <!-- </div> -->
-</main>
\ No newline at end of file
+  <!-- </div> -->
+</main>
diff --git a/views/view.ejs b/views/view.ejs
index 2b88d4b..6da1f03 100644
--- a/views/view.ejs
+++ b/views/view.ejs
@@ -1,20 +1,39 @@
 <div class="relative md:ml-64 py-6 px-3 w-full">
   <div class="mx-auto max-w-4xl">
-    <div class="relative bg-white text-gray-600 mt-10 mb-24 shadow-xl rounded-lg">
-      <lable type="submit" class="absolute left-0 top-0 mt-3 ml-4">
-          <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
-              viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;"
-              xml:space="preserve" width="512px" height="512px">
-              <path
-                  d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" />
-          </svg>
-      </lable>
+    <h2
+      class="text-gray-700 text-4xl lg:text-6xl font-semibold leading-none tracking-wider"
+    >
+      TradeByte
+    </h2>
+    <div class="relative text-gray-600 my-8 shadow-md rounded-b-lg">
       <input
-          class="bg-white focus:outline-none focus:outline-none border border-gray-300 rounded-lg mr-6 pl-10 pr-4 py-2 px-4 block w-full appearance-none leading-normal"
-          type="search" placeholder="Search">
-  </div>
-    <div class="head flex justify-between items-center mx-auto my-4">
+        type="search"
+        name="serch"
+        placeholder="Search Stocks"
+        class="bg-transparent h-10 w-full px-5 pl-10 pr-10 rounded-full text-sm focus:outline-none"
+      />
+      <button type="submit" class="absolute left-0 top-0 mt-3 ml-4">
+        <svg
+          class="h-4 w-4 fill-current"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          version="1.1"
+          id="Capa_1"
+          x="0px"
+          y="0px"
+          viewBox="0 0 56.966 56.966"
+          style="enable-background: new 0 0 56.966 56.966;"
+          xml:space="preserve"
+          width="512px"
+          height="512px"
+        >
+          <path
+            d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"
+          />
+        </svg>
+      </button>
+    </div>
+    <div class="head flex justify-between items-center mx-auto mb-4">
       <div class="company flex flex-col justify-start">
         <h1 class="text-2xl md:text-3xl font-bold"><%= assetName %></h1>
         <h3>
@@ -29,7 +48,9 @@
     <h2 class="text-xl font-bold mb-1">Price Summary</h2>
     <section class="price-summary mb-8 bg-white shadow-md p-4 rounded">
       <div class="table w-full">
-        <div class="w-full grid grid-flow-col grid-cols-2 grid-rows-2 gap-8 md:grid-cols-4 md:grid-rows-1">
+        <div
+          class="w-full grid grid-flow-col grid-cols-2 grid-rows-2 gap-8 md:grid-cols-4 md:grid-rows-1"
+        >
           <div class="flex flex-col justify-start">
             <p class="text-md uppercase font-semibold text-gray-600">
               Today's High
@@ -59,8 +80,10 @@
     </section>
 
     <h2 class="text-xl font-bold mb-1">Overview</h2>
-    <section class="chart-container relative w-full bg-white shadow-md rounded px-4 pt-2 pb-4 mb-8"
-      style="height: 50vh;">
+    <section
+      class="chart-container relative w-full bg-white shadow-md rounded px-4 pt-2 pb-4 mb-8"
+      style="height: 50vh;"
+    >
       <canvas id="chart"></canvas>
     </section>
 
@@ -68,7 +91,8 @@
     <section class="Comapany-summary mb-4 bg-white shadow-md p-4 rounded">
       <div class="table w-full">
         <div
-          class="w-full grid grid-flow-col grid-cols-2 grid-rows-4 md:grid-cols-3 md:grid-rows-3 gap-4 lg:grid-cols-4 lg:grid-rows-2">
+          class="w-full grid grid-flow-col grid-cols-2 grid-rows-4 md:grid-cols-3 md:grid-rows-3 gap-4 lg:grid-cols-4 lg:grid-rows-2"
+        >
           <div class="flex flex-col justify-start break-words">
             <p class="text-md uppercase font-semibold text-gray-600">
               Market Cap
@@ -119,23 +143,23 @@
   </div>
   <a href="/cart/<%- symbol %>">
     <button
-      class="m-8 p-0 w-16 h-16 bg-blue-600 text-white font-bold rounded-full hover:bg-blue-700 active:shadow-lg mouse shadow transition ease-in duration-200 focus:outline-none fixed right-0 bottom-0">
+      class="m-8 p-0 w-16 h-16 bg-blue-600 text-white font-bold rounded-full hover:bg-blue-700 active:shadow-lg mouse shadow transition ease-in duration-200 focus:outline-none fixed right-0 bottom-0"
+    >
       Buy
     </button>
   </a>
 </div>
 
 <script>
-  let datesList = < % -JSON.stringify(dates) % > ;
-  let closingList = < % -JSON.stringify(closing) % > ;
+  let datesList = <%- JSON.stringify(dates) %>;
+  let closingList = <%- JSON.stringify(closing) %> ;
   var ctx = document.getElementById('chart').getContext('2d');
   var myChart = new Chart(ctx, {
     type: 'line',
     data: {
-      labels: datesList,
-      closingList,
+      labels: datesList, closingList,
       datasets: [{
-        label: < % -JSON.stringify(symbol) % > ,
+        label: <%- JSON.stringify(symbol) %>,
         data: closingList,
         borderColor: "#3e95cd",
         backgroundColor: "rgba(118,152,255,0.4)"
@@ -147,4 +171,4 @@
 
     },
   });
-</script>
\ No newline at end of file
+</script>