diff --git a/public/css/tailwind.css b/public/css/tailwind.css
index 985abac..f8da7c0 100644
--- a/public/css/tailwind.css
+++ b/public/css/tailwind.css
@@ -20,6 +20,58 @@ 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 7fe0d7b..98bfc33 100644
--- a/routes/api/addBalance.js
+++ b/routes/api/addBalance.js
@@ -10,10 +10,11 @@ const User = require("../../models/User");
 // @access   Private
 router.get("/", ensureAuth, (req, res) => {
   let user = req.user;
-  res.status(200).render("addBalance"),
-    {
+  res.status(200).render("addBalance", {
+      layout: "layouts/app",
+      href: "/addBalance",
       user,
-    };
+    });
 });
 
 // TODO
diff --git a/routes/api/portfolio.js b/routes/api/portfolio.js
index 1d28251..291bc2f 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 avatar = req.user.image;
+  let user = req.user;
   res
     .status(200)
-    .render("portfolio", { layout: "layouts/app", avatar, href: "/portfolio" });
+    .render("portfolio", { layout: "layouts/app", user, href: "/portfolio" });
 });
 
 module.exports = router;
diff --git a/views/addBalance.ejs b/views/addBalance.ejs
index 2076304..5fc8037 100644
--- a/views/addBalance.ejs
+++ b/views/addBalance.ejs
@@ -1,27 +1,24 @@
-<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"
-    />
+<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>
   </div>
-</form>
+      <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>
+  
diff --git a/views/cart.ejs b/views/cart.ejs
index e803775..3aa8783 100644
--- a/views/cart.ejs
+++ b/views/cart.ejs
@@ -1,97 +1,66 @@
 <div class="relative md:ml-56 lg:ml-64 py-6 px-3 w-full">
-  <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="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">
     <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 md:items-center md:justify-center lg:items-start"
-        >
+          class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex items-center justify-center">
           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 md:items-center md:justify-center lg:items-start"
-        >
+          class="hidden md:block text-xs lg:text-lg font-bold uppercase md:flex items-center justify-center ">
           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 lg:items-start"
-        >
+        <div class="text-xs lg:text-lg text-right font-bold uppercase flex items-center justify-end">
           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>
@@ -100,15 +69,11 @@
         </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>
@@ -124,4 +89,4 @@
     const val = e.target.value;
     totalPrice.textContent = parseFloat(stockPrice.value * val).toFixed(4);
   });
-</script>
+</script>
\ No newline at end of file
diff --git a/views/layouts/app.ejs b/views/layouts/app.ejs
index fcefe3f..947aca4 100644
--- a/views/layouts/app.ejs
+++ b/views/layouts/app.ejs
@@ -1,29 +1,27 @@
 <!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>
 
-    <link type="text/css" rel="stylesheet" href="./css/style.css" />
-    <link type="text/css" rel="stylesheet" href="../css/style.css" />
-    <title>TradeByte</title>
-  </head>
+<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>
 
-  <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>
+  <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
diff --git a/views/partials/_nav.ejs b/views/partials/_nav.ejs
index e6bd0dd..65b1f13 100644
--- a/views/partials/_nav.ejs
+++ b/views/partials/_nav.ejs
@@ -1,57 +1,78 @@
 <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">
-        <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
+
+  <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
         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 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>
+          </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>
+
     </div>
+  </nav>
+</div>
\ No newline at end of file
diff --git a/views/portfolio.ejs b/views/portfolio.ejs
index 6f1ac27..84df7c9 100644
--- a/views/portfolio.ejs
+++ b/views/portfolio.ejs
@@ -1,746 +1,598 @@
-<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>
-
-        <!-- 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>
-
-        <!-- 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>
+<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>
         </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
-          >
+        <!-- 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>
         </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>
+        <!-- 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>
-    <!-- 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>
+    <!-- </div> -->
+</main>
\ No newline at end of file
diff --git a/views/view.ejs b/views/view.ejs
index 6da1f03..2b88d4b 100644
--- a/views/view.ejs
+++ b/views/view.ejs
@@ -1,39 +1,20 @@
 <div class="relative md:ml-64 py-6 px-3 w-full">
   <div class="mx-auto max-w-4xl">
-    <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">
+    <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>
       <input
-        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">
+          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">
       <div class="company flex flex-col justify-start">
         <h1 class="text-2xl md:text-3xl font-bold"><%= assetName %></h1>
         <h3>
@@ -48,9 +29,7 @@
     <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
@@ -80,10 +59,8 @@
     </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>
 
@@ -91,8 +68,7 @@
     <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
@@ -143,23 +119,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)"
@@ -171,4 +147,4 @@
 
     },
   });
-</script>
+</script>
\ No newline at end of file