diff --git a/views/cart.ejs b/views/cart.ejs
index 83acf08..87780ae 100644
--- a/views/cart.ejs
+++ b/views/cart.ejs
@@ -5,22 +5,22 @@
       <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 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:items-start">
+        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-start">
-          <div class="flex flex items-center justify-start w-full">
-            <img class="hidden lg:block h-8 mr-2" src="<%= logoSrc %> " alt="<%= companyName %>">
-            <p class="font-medium text-left text-xs md:text-sm lg:text-md w-full md:break-all"
-              name="companySymbol" id="companySymbol"><%= companyName %></p>
+        <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">
+        <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>
@@ -31,7 +31,7 @@
           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">
+        <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"
@@ -42,7 +42,7 @@
         <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">
+        <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 %>
@@ -55,7 +55,8 @@
           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>
+          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>
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