diff --git a/views/market.ejs b/views/market.ejs
index eb8f80a..40aa243 100644
--- a/views/market.ejs
+++ b/views/market.ejs
@@ -1,5 +1,5 @@
 <section class="text-gray-700 body-font md:ml-64 md:mx-auto md:pl-8 md:pr-14 w-screen inline">
-    <div class="container px-5 py-24 mx-auto md:px-auto">
+    <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>
@@ -10,90 +10,87 @@
 
                     <!-- <div class="lg:w-1/4 md:w-1/2 p-4 min-w-54 inline"> -->
                     <div class="inline p-4 m-4">
-
-                        <a class="block relative h-48 rounded overflow-hidden">
-                            <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/420x260" />
-
-                        </a>
-                        <div class="mt-4">
-                            <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">
-                                <%- jsonData[i]["Symbol"] %>
-                            </h3>
-                            <h2 class="text-gray-900 title-font text-lg font-medium">
-                                <%- jsonData[i]["Company Name"] %>
-                            </h2>
-                            <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">
-              <span class="mx-auto"><a href="/view/<%- jsonData[i]["Symbol"] %>">VIEW</a></span>
-            </button>
-                            <!-- <a href="/view/<%- jsonData[i][" Symbol "] %>">VIEW</a> -->
-                            <button class="w-32 bg-white tracking-wide text-gray-700 font-bold rounded border-b-2 border-green-400 hover:border-green-400 hover:bg-green-400 hover:text-white shadow-md py-2 px-2 inline-flex items-center">
-              <span class="mx-auto"><a href="/cart/<%- jsonData[i]["Symbol"] %>">ADD TO CART</a></span>
-
-            </button>
-                            <!-- <a href="/cart/<%- jsonData[i][" Symbol "] %>">ADD TO CART</a> -->
-                            <p class="mt-1">$0.00</p>
+                        <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="py-2 px-10">
+                                    <div class="space-y-5">
+                                        <div class="font-bold text-2xl text-center mb-2">
+                                            <%- jsonData[i]["Symbol"] %>
+                                        </div>
+                                        <p class="text-gray-700 text-center text-base">
+                                            <%- jsonData[i]["Company Name"] %>
+                                        </p>
+
+                                        <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">
+                                        <span class="mx-auto"><a href="/view/<%- jsonData[i]["Symbol"] %>">VIEW</a></span>
+                                      </button>
+
+                                        <button class="w-32 bg-white tracking-wide text-gray-700 font-bold rounded border-b-2 border-green-400 hover:border-green-400 hover:bg-green-400 hover:text-white shadow-md py-2 px-2 inline-flex items-center">
+                                        <span class="mx-auto"><a href="/cart/<%- jsonData[i]["Symbol"] %>">BUY</a></span>
+                                </div>
+                            </div>
                         </div>
                     </div>
-
+                    </div>
 
                     <% } %>
 
             </div>
 
 
+
             <!-- genral stocks section -->
-            <div class="pr-10">
+            <div class="pr-12">
                 <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="flex -m-4 inline-block flex-wrap pt-10">
+                <div class="md:flex -m-4 inline-block flex-wrap pt-10">
                     <% for(var i=jsonData[0]["dataStart2"]; i < jsonData.length; i++) { %>
 
-                        <div class="lg:w-1/4 md:w-1/2 p-4 min-w-54 ">
-                            <!-- <div class="p-4 m-4"> -->
-
-                            <a class="block relative h-48 rounded overflow-hidden">
-                                <img alt="ecommerce" class="object-cover object-center w-full h-full block" src="https://dummyimage.com/420x260" />
-                                <!-- <div class="symbolicon object-cover object-center w-full h-full block text">
-                            <%- jsonData[i][" Symbol "] %>
-                        </div> -->
-                            </a>
-                            <div class="mt-4">
-                                <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1">
-                                    <%- jsonData[i]["Symbol"] %>
-                                </h3>
-                                <h2 class="text-gray-900 title-font text-lg font-medium">
-                                    <%- jsonData[i]["Company Name"] %>
-                                </h2>
-                                <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">
-              <span class="mx-auto"><a href="/view/<%- jsonData[i]["Symbol"] %>">VIEW</a></span>
-            </button>
-                                <!-- <a href="/view/<%- jsonData[i][" Symbol "] %>">VIEW</a> -->
-                                <button class="w-32 bg-white tracking-wide text-gray-700 font-bold rounded border-b-2 border-green-400 hover:border-green-400 hover:bg-green-400 hover:text-white shadow-md py-2 px-2 inline-flex items-center">
-              <span class="mx-auto"><a href="/cart/<%- jsonData[i]["Symbol"] %>">ADD TO CART</a></span>
-
-            </button>
-                                <!-- <a href="/cart/<%- jsonData[i][" Symbol "] %>">ADD TO CART</a> -->
-                                <p class="mt-1">$0.00</p>
+                        <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="py-2 px-4 md:px-10">
+                                                <div class="space-y-5">
+                                                    <div class="font-bold text-2xl text-center mb-2">
+                                                        <%- jsonData[i]["Symbol"] %>
+                                                    </div>
+                                                    <p class="text-gray-700 text-center text-base">
+                                                        <%- jsonData[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">
+                                                    <span class="mx-auto"><a href="/view/<%- jsonData[i]["Symbol"] %>">VIEW</a></span>
+                                                  </button>
+
+                                        <button class="w-24 pl-2 bg-white tracking-wide text-gray-700 font-bold rounded border-b-2 border-green-400 hover:border-green-400 hover:bg-green-400 hover:text-white shadow-md py-2 px-2 inline-flex items-center">
+                                                    <span class="mx-auto"><a href="/cart/<%- jsonData[i]["Symbol"] %>">BUY</a></span>
+                                        </button>
+                                    </div>
+                                </div>
                             </div>
                         </div>
+                    </div>
 
 
-                        <% } %>
-                </div>
+            </div>
+
+
+            <% } %>
+        </div>
 
 
-                <!-- pagination element -->
-                <div class="pt-10">
-                    <div class="flex justify-between">
-                        <button class="border border-teal-500 text-teal-500 block rounded-sm font-bold py-4 px-6 mr-2 flex items-center hover:bg-teal-500 hover:text-white">
+        <!-- pagination element -->
+        <div class="pt-10">
+            <div class="flex justify-between">
+                <button class="border border-teal-500 text-teal-500 block rounded-sm font-bold py-4 px-6 mr-2 flex items-center hover:bg-teal-500 hover:text-white">
                 <svg class="h-5 w-5 mr-2 fill-current" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-49 141 512 512" style="enable-background:new -49 141 512 512;" xml:space="preserve">
                     <path id="XMLID_10_" d="M438,372H36.355l72.822-72.822c9.763-9.763,9.763-25.592,0-35.355c-9.763-9.764-25.593-9.762-35.355,0 l-115.5,115.5C-46.366,384.01-49,390.369-49,397s2.634,12.989,7.322,17.678l115.5,115.5c9.763,9.762,25.593,9.763,35.355,0 c9.763-9.763,9.763-25.592,0-35.355L36.355,422H438c13.808,0,25-11.193,25-25S451.808,372,438,372z"></path>
                 </svg>
                 Previous page
             </button>
-                        <button class="border border-teal-500 bg-teal-500 text-white block rounded-sm font-bold py-4 px-6 ml-2 flex items-center">
+                <button class="border border-teal-500 bg-teal-500 text-white block rounded-sm font-bold py-4 px-6 ml-2 flex items-center">
                 Next page
                 <svg class="h-5 w-5 ml-2 fill-current" clasversion="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                      viewBox="-49 141 512 512" style="enable-background:new -49 141 512 512;" xml:space="preserve">
@@ -102,10 +99,10 @@
                     c-9.763,9.763-9.763,25.592,0,35.355l72.822,72.822H-24c-13.808,0-25,11.193-25,25S-37.808,422-24,422z"/>
                 </svg>
             </button>
-                    </div>
-                </div>
             </div>
         </div>
     </div>
+    </div>
+    </div>
 
 </section>
\ No newline at end of file