diff --git a/src/Models/data.js b/src/Models/data.js
index 0b0dd2a..cc3f051 100644
--- a/src/Models/data.js
+++ b/src/Models/data.js
@@ -16,6 +16,7 @@ export default [
             { name: 'Article card' },
             { name: 'Article card with image' },
             { name: 'Product card' },
+            { name: 'Product card with price' },
             { name: 'Product card with evaluation' },
             { name: 'Testimonial card' },
             { name: 'User card' },
diff --git a/src/components/Master.vue b/src/components/Master.vue
index 6bb3f0b..c83917e 100644
--- a/src/components/Master.vue
+++ b/src/components/Master.vue
@@ -52,6 +52,7 @@
     import ArticleCard from "./UI/Cards/ArticleCard";
     import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage";
     import ProductCard from "./UI/Cards/ProductCard";
+    import ProductCardWithPrice from "./UI/Cards/ProductCardWithPrice";
     import ProductCardWithEvaluation from "./UI/Cards/ProductCardWithEvaluation";
     import TestimonialCard from "./UI/Cards/TestimonialCard";
     import UserCard from "./UI/Cards/UserCard";
@@ -90,6 +91,7 @@
             ArticleCard,
             ArticleCardWithImage,
             ProductCard,
+            ProductCardWithPrice,
             ProductCardWithEvaluation,
             TestimonialCard,
             UserCard,
diff --git a/src/components/UI/Cards/ProductCardWithPrice.vue b/src/components/UI/Cards/ProductCardWithPrice.vue
new file mode 100644
index 0000000..91a3fed
--- /dev/null
+++ b/src/components/UI/Cards/ProductCardWithPrice.vue
@@ -0,0 +1,29 @@
+<template>
+    <div :id="name | toId">
+        <div class="flex w-full h-full justify-center items-center">
+            <div class="flex flex-col w-2/5 h-auto justify-center items-center cursor-pointer">
+                <div style="background-image: url(https://images.unsplash.com/photo-1539185441755-769473a23570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"
+                     class="flex bg-gray-300 h-32 md:h-56 w-24 md:w-4/5 mx-2 rounded-sm shadow-md bg-cover bg-top">
+                </div>
+                <div class="flex flex-col h-20 w-2/3 bg-white text-xs md:text-base -mt-10 text-center shadow-lg rounded-md justify-center items-center">
+                    <span class="flex w-full h-10 justify-center items-center font-bold ">Nike Revolt</span>
+                    <div class="flex flex-row w-full h-10 bg-gray-200 rounded-b-lg ">
+                        <span class="flex w-1/3 h-full rounded-bl-lg justify-center items-center md:font-black md:text-lg"> $150 </span>
+                        <div  class="flex w-2/3 h-full bg-indigo-700 rounded-br-lg text-white justify-center items-center ">Add to Cart</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Product Card with Price',
+            }
+        }
+    }
+</script>