diff --git a/app/server/components/ProductsCardComponent.ts b/app/server/components/ProductsCardComponent.ts
index e3f242b..cb8877e 100644
--- a/app/server/components/ProductsCardComponent.ts
+++ b/app/server/components/ProductsCardComponent.ts
@@ -1,14 +1,13 @@
 import Product from "../interfaces/Product";
 
-export default function ProductsCardComponent(
-    {
-        image, 
-        id,
-        price, 
-        title
-    }: Product
-): string {
-    return /* html */ `
+export default function ProductsCardComponent({
+  image,
+  id,
+  price,
+  title,
+  stock,
+}: Product): string {
+  return /* html */ `
         <div class="product-card">
             <div class="product-image">
                 <div style="position:relative;">
@@ -24,7 +23,12 @@ export default function ProductsCardComponent(
                 <h5><a href="/product/${id}">${title}</a></h5>
                 <h6>$${price}</h6>
             </div>
-            <a class="shopButton shopButton-products" data-id="${id}">Comprar</a>
+            ${
+              stock === 0
+                ? `<a class="stockButton shopButton-products">Out of Stock</a>`
+                : `<a class="shopButton shopButton-products" data-id="${id}">Comprar</a>`
+            }
+            
         </div>
     `;
-}
\ No newline at end of file
+}
diff --git a/app/server/controllers/product.get.ts b/app/server/controllers/product.get.ts
index af7c86b..bcffb4a 100644
--- a/app/server/controllers/product.get.ts
+++ b/app/server/controllers/product.get.ts
@@ -16,6 +16,7 @@ module.exports = function productGet(req: any, res: any) {
         body: "",
         price: "",
         productSpecs: "",
+        stock: 0
       }
     : ProductSpecsComponent(product.caracts);
 
diff --git a/public/css/style.css b/public/css/style.css
index c987ab1..aaca2a9 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -178,6 +178,16 @@ footer {
     padding: 5px 10px;
 }
 
+.stockButton {
+    display: block;
+    width: 200px;
+    padding: 10px;
+    background-color: black;
+    text-align: center;
+    color: white;
+    cursor: initial;
+}
+
 
 /* @media (min-width: 576px) { 
 }
diff --git a/views/product.ejs b/views/product.ejs
index c0924cb..d56a2f3 100644
--- a/views/product.ejs
+++ b/views/product.ejs
@@ -18,7 +18,11 @@
     <div class="container-productSpecs">
       <%- productSpecs %>
     </div>
-    <a class="shopButton" data-id="<%= id %>">Comprar</a>
+      <% if(stock !== 0){ %>
+        <a class="shopButton" data-id="<%= id %>">Comprar</a>
+      <% } else{ %>  
+        <a class="stockButton shopButton">Out of Stock</a>
+      <% } %>
   </div>
 </div>