diff --git a/product-list.html b/product-list.html
index bff728d..7cc59bb 100644
--- a/product-list.html
+++ b/product-list.html
@@ -22,11 +22,24 @@
             border-bottom-left-radius: 20px;
             border-bottom-right-radius: 20px;
         }
+
         .card {
             border-radius: 20px;
             background-color: #212226;
             color: white;
         }
+
+        .btn-product-card {
+            width: 100%;
+            background-color: darkred;
+            border-color: darkred;
+            border-radius: 10px;
+        }
+
+        .btn-product-card:hover {
+            background-color: red;
+            border-color: red;
+        }
     </style>
 </head>
 
@@ -34,7 +47,8 @@
 <nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
     <a href="/"><img alt="Banner" class="navbar-brand" height="80" src="assets/logo_transparent.webp"
                      style="margin-top: 0%;" width="80"></a>
-    <button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
+    <button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"
+            class="navbar-toggler"
             data-target="#navbarTogglerDemo01" data-toggle="collapse" type="button">
         <span class="navbar-toggler-icon"></span>
     </button>
@@ -104,7 +118,7 @@
                         <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
                             tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
-                            <button class="btn btn-info" type="button">View Detail</button>
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
                     </div>
                 </div>
@@ -121,7 +135,7 @@
                         <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
                             tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
-                            <button class="btn btn-info" type="button">View Detail</button>
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
                     </div>
                 </div>
@@ -138,7 +152,7 @@
                         <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
                             tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
-                            <button class="btn btn-info" type="button">View Detail</button>
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
                     </div>
                 </div>
@@ -155,7 +169,7 @@
                         <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
                             tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
-                            <button class="btn btn-info" type="button">View Detail</button>
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
                     </div>
                 </div>
@@ -172,7 +186,7 @@
                         <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
                             tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
-                            <button class="btn btn-info" type="button">View Detail</button>
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
                     </div>
                 </div>
@@ -189,7 +203,7 @@
                         <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
                             tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
-                            <button class="btn btn-info" type="button">View Detail</button>
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
                     </div>
                 </div>
@@ -206,7 +220,7 @@
                         <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
                             tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
-                            <button class="btn btn-info" type="button">View Detail</button>
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
                     </div>
                 </div>
@@ -223,7 +237,7 @@
                         <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
                             tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
-                            <button class="btn btn-info" type="button">View Detail</button>
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
                     </div>
                 </div>
@@ -240,7 +254,7 @@
                         <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
                             tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
                         <a href="product.html">
-                            <button class="btn btn-info" type="button">View Detail</button>
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
                         </a>
                     </div>
                 </div>
@@ -250,10 +264,12 @@
 </div>
 
 <script crossorigin="anonymous"
-        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
+        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
+        src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
 </script>
 <script crossorigin="anonymous"
-        integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
+        integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
+        src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
 </script>
 </body>