diff --git a/helpers/getCompanyNameAndLogo.js b/helpers/getCompanyNameAndLogo.js
new file mode 100644
index 0000000..cd01c71
--- /dev/null
+++ b/helpers/getCompanyNameAndLogo.js
@@ -0,0 +1,21 @@
+// Get Stock Company symbol Function
+const axios = require("axios");
+
+module.exports = async function getCompanyNameAndLogo(symbol) {
+
+    let data = await axios
+        .get(
+            `https://www.alphavantage.co/query?function=OVERVIEW&symbol=${symbol}&apikey=${process.env.ALPHA_VANTAGE_KEY}`
+        )
+        .then(async (resp) => {
+            let companyName = resp.data.Name;
+            console.log(companyName);
+            let logoSrc = await axios.get(`https://autocomplete.clearbit.com/v1/companies/suggest?query=:${companyName.split(' ')[0]}`).then((resp) => resp.data[0].logo).catch(err => console.log(err));
+            return { companyName, logoSrc };
+        })
+        .catch((err) => {
+            console.log(err);
+        });
+
+    return data;
+};
diff --git a/routes/api/cart.js b/routes/api/cart.js
index 5f5f3ee..3324d45 100644
--- a/routes/api/cart.js
+++ b/routes/api/cart.js
@@ -5,6 +5,7 @@ const { ensureAuth } = require("../../middleware/auth");
 
 const User = require("../../models/User");
 const getPrice = require("../../helpers/getPrice");
+const getCompanyNameAndLogo = require("../../helpers/getCompanyNameAndLogo");
 
 // TODO
 // Stocks Cart Buy/Sell
@@ -16,9 +17,9 @@ const getPrice = require("../../helpers/getPrice");
 // @route   GET /cart/:symbol
 router.get("/:symbol", ensureAuth, async (req, res) => {
   const symbol = req.params.symbol;
-  const price = await getPrice(symbol);
-  res.status(200).render("cart", { layout: "layouts/app", symbol, price, href: '/market', avatar: req.user.image });
-
+  const { latestPrice } = await getPrice(symbol);
+  const { companyName, logoSrc } = await getCompanyNameAndLogo(symbol);
+  res.status(200).render("cart", { layout: "layouts/app", symbol, latestPrice, logoSrc, companyName, href: '/market', avatar: req.user.image });
 });
 
 // @desc    To buy
@@ -26,14 +27,11 @@ router.get("/:symbol", ensureAuth, async (req, res) => {
 router.post("/buy", ensureAuth, async (req, res) => {
   let data = req.body;
   let user = req.user;
-  let stockPrice = req.body.stockPrice;
-  let noOfStock = req.body.noOfStock;
-  let totalAmount = stockPrice * noOfStock;
+  let stockPrice = data.stockPrice;
+  let noOfStock = data.noOfStock;
+  let totalAmount = parseFloat(stockPrice * noOfStock).toFixed(4);
 
   try {
-    console.log(req.user);
-    console.log(req.body);
-    // req.body.user = req.user.id
     if (totalAmount > req.user.balance) {
       let ExtraBalance = totalAmount - req.user.balance;
       res.render("transaction", {
diff --git a/views/cart.ejs b/views/cart.ejs
index 3be7e79..87780ae 100644
--- a/views/cart.ejs
+++ b/views/cart.ejs
@@ -1,106 +1,73 @@
-<div class="flex flex-col w-full py-8 px-4 md:py-16 md:px-8 text-gray-800 md:w-full md:ml-64">
-  <h1 class="text-2xl lg:text-4xl font-bold">Buy Stock</h1>
-  <div>
-    <table class="w-full text-sm lg:text-base border-4 " cellspacing="0">
-      <thead>
-        <tr class="h-12 uppercase">
-          <th class="text-left">Product</th>
-          <th class="lg:text-right text-left pl-5 lg:pl-0">
-            <span class="lg:hidden" title="Quantity">Qtd</span>
-            <span class="hidden lg:inline">Quantity</span>
-          </th>
-          <th class="hidden text-right md:table-cell">Unit price</th>
-          <th class="text-right">Total price</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr class="bg-gray-600 border-b-2 text-white">
-          <td>
-            <a href="#">
-              <p class="mb-2 md:ml-4">Earphone</p>
-              <form action="" method="POST">
-                <button type="submit" class="md:ml-4">
-                  <small>(Remove item)</small>
-                </button>
-              </form>
-            </a>
-          </td>
-          <td class="justify-center md:justify-end md:flex mt-2">
-            <div class="w-20 h-10">
-              <div class="relative flex flex-row w-full h-8">
-                <input type="number" value="1"
-                  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 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">
+    <h1 class="text-2xl lg:text-4xl font-bold mt-8 mb-4">Buy Stock</h1>
+    <form action="/cart/buy" method="POST">
+      <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">
+          Company Name
+        </div>
+        <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"
+              ><%= 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">
+          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>
+        <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">
+          Quantity
+        </div>
+        <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" />
             </div>
-          </td>
-          <td class="hidden text-right md:table-cell">
-            <span class="text-sm lg:text-base font-medium">
-              10.00€
-            </span>
-          </td>
-          <td class="text-right">
-            <span class="text-sm lg:text-base font-medium pr-1">
-              20.00€
-            </span>
-          </td>
-        </tr>
-        <tr class="bg-gray-600 border-b-2 text-white">
-          <td>
-            <p class="mb-2 md:ml-4">Tesla Model 3</p>
-            <form action="" method="POST">
-              <button type="submit" class="700 md:ml-4">
-                <small>(Remove item)</small>
-              </button>
-            </form>
-          </td>
-          <td class="justify-center md:justify-end md:flex md:mt-4">
-            <div class="w-20 h-10">
-              <div class="relative flex flex-row w-full h-8">
-                <input type="number" value="1"
-                  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>
-          </td>
-          <td class="hidden text-right md:table-cell">
-            <span class="text-sm lg:text-base font-medium">
-              49,600.01€
-            </span>
-          </td>
-          <td class="text-right">
-            <span class="text-sm lg:text-base font-medium pr-1">
-              148,800.03€
-            </span>
-          </td>
-        </tr>
-        <tr class="bg-gray-600 border-b-2 text-white">
-          <td>
-            <p class="mb-2 md:ml-4">Bic 4 colour pen</p>
-            <form action="" method="POST">
-              <button type="submit" class="md:ml-4">
-                <small>(Remove item)</small>
-              </button>
-            </form>
-          </td>
-          <td class="justify-center md:justify-end md:flex md:mt-4">
-            <div class="w-20 h-10">
-              <div class="relative flex flex-row w-full h-8">
-                <input type="number" value="1"
-                  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>
-
-          </td>
-          <td class="hidden text-right md:table-cell">
-            <span class="text-sm lg:text-base font-medium">
-              1.50€
-            </span>
-          </td>
-          <td class="text-right">
-            <span class="text-sm lg:text-base font-medium pr-1">
-              7.50€
-            </span>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
\ No newline at end of file
+          </div>
+        </div>
+        <div class=" text-xs lg:text-lg text-right font-bold uppercase flex items-center justify-end lg:items-start">
+          Total Price
+        </div>
+        <div class=" text-xs lg:text-lg font-bold uppercase flex items-center justify-end lg:row-span-2">
+          <p class="text-xs md:text-sm  font-medium text-right text-xs lg:text-lg break-words" id="totalPrice">
+            <span class="total-price">
+              <%= latestPrice %>
+            </span> $
+          </p>
+        </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"><span
+            class="hidden md:inline-block">Proceed to</span> Checkout</button>
+      </div>
+    </form>
+  </div>
+</div>
+<script>
+  const stockPrice = document.querySelector('#stockPrice')
+  const noOfStock = document.querySelector('#noOfStock')
+  const totalPrice = document.querySelector('.total-price')
+  noOfStock.addEventListener('change', (e) => {
+    e.preventDefault()
+    const val = e.target.value
+    totalPrice.textContent = parseFloat(stockPrice.value * val).toFixed(4)
+  })
+</script>
\ No newline at end of file
diff --git a/views/market.ejs b/views/market.ejs
index c091258..c7aaa19 100644
--- a/views/market.ejs
+++ b/views/market.ejs
@@ -1,9 +1,9 @@
-<section class="text-gray-700 body-font md:ml-64 md:mx-auto md:pl-8 md:pr-14 w-screen inline">
+<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">
             <h4 class="text-gray-700 lg:text-6xl text-5xl font-semibold leading-none tracking-wider px-5">Favorite Stocks</h2>
         </div>
-        <div class="container px-5 py-16 mx-auto pl-4">
+        <div class="container py-16 mx-auto">
 
             <div class="flex -m-4 inline-block overflow-x-auto whitespace-no-wrap">
                 <% for(var i=0; i < compactData.length; i++) { %>
@@ -40,17 +40,17 @@
 
 
             <!-- genral stocks section -->
-            <div class="pr-12">
+            <div class="px-auto">
                 <div class="my-4 absolute-center pt-20">
                     <h4 class="text-gray-700 lg:text-6xl text-5xl font-semibold leading-none tracking-wider px-5">Trending Stocks</h2>
                 </div>
 
-                <div class="md:flex -m-4 inline-block flex-wrap pt-10">
+                <div class="md:flex -m-4 inline-block mx-auto w-full flex-wrap pt-10">
                     <% for(var i=min; i < max; i++) { %>
 
-                        <div class="lg:w-1/4 md:w-1/2 p-4 w-54">
-                                    <div class="py-6 max-w-sm rounded overflow-hidden shadow-lg hover:bg-white transition duration-500 bg-white ">
-                                        <div class="space-y-10">
+                        <div class="lg:w-1/4 md:w-1/2 p-4 w-54 flex justify-center">
+                                    <div class="flex items-center justify-center py-6 min-h-full w-full rounded overflow-hidden shadow-lg hover:bg-white transition duration-500 bg-white ">
+                                        <div class="space-y-10 w-full">
                                             <div class="py-2 px-4 md:px-10">
                                                 <div class="space-y-5">
                                                     <div class="font-bold text-2xl text-center mb-2">
@@ -59,8 +59,8 @@
                                                     <p class="text-gray-700 text-center text-base">
                                                         <%- totalData[i]["Company Name"] %>
                                                     </p>
-<div class="flex justify-between px-6 md:px-2">
-                                                    <button class="w-14 bg-white tracking-wide text-gray-700 font-bold rounded border-b-2 border-blue-500 hover:border-blue-600 hover:bg-blue-500 hover:text-white shadow-md py-2 px-2 inline-flex items-center">
+<div class="flex justify-around px-6 md:px-2 w-2/3 mx-auto">
+                                                    <button class="mr-1 w-14 bg-white tracking-wide text-gray-700 font-bold rounded border-b-2 border-blue-500 hover:border-blue-600 hover:bg-blue-500 hover:text-white shadow-md py-2 px-2 inline-flex items-center">
                                                     <span class="mx-auto"><a href="/view/<%- totalData[i]["Symbol"] %>">VIEW</a></span>
                                                   </button>
 
diff --git a/views/partials/_nav.ejs b/views/partials/_nav.ejs
index 43b01f1..2303413 100644
--- a/views/partials/_nav.ejs
+++ b/views/partials/_nav.ejs
@@ -1,57 +1,61 @@
 <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"
+  class="flex flex-col w-full md:w-56 lg:w-64 text-gray-700 bg-white flex-shrink-0 md:min-h-full md:fixed md:left-0 md:top-0 overflow-y-auto"
   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 h-full 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="container rerelative flex flex-col">
+    <div class="container ">
+      <div class="flex-shrink-0 px-6 py-4 flex flex-row items-center justify-between">
+        <h1 class="font-bold uppercase border-b border-gray-100 w-full text-center">
+          <a href="/" class="hover:text-gray-900 tracking-widest text-2xl md:text-2xl lg:text-3xl pb-2 pt-32">Tradebyte</a>
+        </h1>
+        <button class="rounded-lg md:hidden rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open">
+          <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
+            <path x-show="!open" fill-rule="evenodd"
+              d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
+              clip-rule="evenodd"></path>
+            <path x-show="open" fill-rule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clip-rule="evenodd"></path>
+          </svg>
+        </button>
+      </div>
+      <nav :class="{'block': open, 'hidden': !open}" class="flex-grow md:block px-4 pb-4 md:pb-0">
+        <div class="flex justify-center align-center rounded-full">
+          <img class="h-20 w-20 border-8 border-blue-600 box-1 rounded-full" src="<%= avatar %>" alt="" />
+        </div>
+        <a class="block w-2/5 md:w-4/5 max-w-xs lg:w-3/5 p-2 mt-4 mb-8 mx-auto text-xs font-bold text-gray-900 focus:shadow-outline flex justify-center bg-green-200 rounded-full text-green-900 font-bold"
+          href="#"><svg class="w-5 mr-1 " fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            viewBox="0 0 24 24" stroke="currentColor">
+            <path d="M5 13l4 4L19 7"></path>
+          </svg>Trading Active</a>
+        <div class="nav-box flex flex-col justify-start">
+          <a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline flex <%= href === '/portfolio' ? 'bg-gray-200 border border-purple-700 border-l-8': '' %>"
+            href="/portfolio">
+            <svg class="w-5 ml-2 mr-1" fill="none " stroke-linecap="round " stroke-linejoin="round " stroke-width="2 "
+              viewBox="0 0 24 24 " stroke="currentColor ">
+              <path
+                d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4
         13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z ">
-          </path>
-        </svg>Dashboard</a>
-      <a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 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>
+              </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="/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>
+          <a class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline flex"
+            href="/auth/logout"><svg class="w-6 ml-2 mr-1" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clip-rule="evenodd"></path>
+            </svg>Logout</a>
+        </div>
+      </nav>
     </div>
-  </nav>
+  </div>
 </div>
\ No newline at end of file
diff --git a/views/portfolio.ejs b/views/portfolio.ejs
index 7ac5b86..ea86d89 100644
--- a/views/portfolio.ejs
+++ b/views/portfolio.ejs
@@ -1,5 +1,6 @@
-<main class="px-16 py-6 md:col-span-4 bg-gray-300 md:pl-64 md:mx-auto">
+<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"> -->
 
@@ -518,7 +519,7 @@
     <div class="mt-12 flex justify-center ">
         <div class="btn bg-secondary-100 text-secondary-200 inline-block hover:shadow-inner transform hover:scale-125 hover:bg-opacity-50 transition ease-out duration-300 ">Load more</div>
     </div>
-
+</div>
 
     <!-- </div> -->
 </main>
\ No newline at end of file