diff --git a/src/components/Alert/NotificationPop.vue b/src/components/Alert/NotificationPop.vue
index 0ae4862..837615c 100644
--- a/src/components/Alert/NotificationPop.vue
+++ b/src/components/Alert/NotificationPop.vue
@@ -1,5 +1,5 @@
 <template>
-    <view-componet :name="name" :code="code">
+    <view-component :name="name" :code="code">
         <div slot="component">
             <div class="flex max-w-md bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
                 <div class="w-2 bg-gray-800"></div>
@@ -12,15 +12,15 @@
                 </div>
             </div>
         </div>   
-    </view-componet>
+    </view-component>
 </template>
 
 <script>
-import ViewComponet from "../../views/ViewComponet";
+import ViewComponent from "../../views/ViewComponent";
 
 export default {
     components: {
-        ViewComponet
+        ViewComponent
     },
     data() {
         return {
diff --git a/src/components/Cards/Artical.vue b/src/components/Cards/Artical.vue
new file mode 100644
index 0000000..63ec5ae
--- /dev/null
+++ b/src/components/Cards/Artical.vue
@@ -0,0 +1,59 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div slot="component">
+            <div class="max-w-3xl mx-auto px-10 py-6 bg-white rounded-lg shadow-md">
+                <div class="flex justify-between items-center">
+                    <span class="font-light text-gray-600">Mar 10, 2019</span>
+                    <a class="px-2 py-1 bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500" href="#">Design</a>
+                </div>
+                <div class="mt-2">
+                    <a class="text-2xl text-gray-700 font-bold hover:text-gray-600" href="#">Accessibility tools for designers and developers</a>
+                    <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
+                </div>
+                <div class="flex justify-between items-center mt-4">
+                    <a class="text-blue-600 hover:underline" href="#">Read more</a>
+                    <div>
+                        <a class="flex items-center" href="#">
+                            <img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=373&q=80" alt="avatar">
+                            <h1 class="text-gray-700 font-bold">Khatab wedaa</h1>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    import ViewComponent from "../../views/ViewComponent";
+
+export default {
+    components: {
+        ViewComponent
+    },
+    data() {
+        return {
+            name: 'Artical Card',
+            code: `<div class="max-w-3xl px-10 py-6 bg-white rounded-lg shadow-md">
+    <div class="flex justify-between items-center">
+        <span class="font-light text-gray-600">Mar 10, 2019</span>
+        <a class="px-2 py-1 bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500" href="#">Design</a>
+    </div>
+    <div class="mt-2">
+        <a class="text-2xl text-gray-700 font-bold hover:text-gray-600" href="#">Accessibility tools for designers and developers</a>
+        <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
+    </div>
+    <div class="flex justify-between items-center mt-4">
+        <a class="text-blue-600 hover:underline" href="#">Read more</a>
+        <div>
+            <a class="flex items-center" href="#">
+                <img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=373&q=80" alt="avatar">
+                <h1 class="text-gray-700 font-bold">Khatab wedaa</h1>
+            </a>
+        </div>
+    </div>
+</div>`
+        }
+    }
+}
+</script>
diff --git a/src/components/Cards/Product.vue b/src/components/Cards/Product.vue
new file mode 100644
index 0000000..7be9bc8
--- /dev/null
+++ b/src/components/Cards/Product.vue
@@ -0,0 +1,47 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div slot="component">
+            <div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+                <div class="px-4 py-2">
+                    <h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1>
+                    <p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
+                </div>
+                
+                <img class="h-56 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="NIKE AIR">
+                
+                <div class="flex items-center justify-between px-4 py-2 bg-gray-900">
+                    <h1 class="text-gray-200 font-bold text-xl">$129</h1>
+                    <button class="px-3 py-1 bg-gray-200 text-sm text-gray-900 font-semibold rounded">Add to card</button>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    import ViewComponent from "../../views/ViewComponent";
+
+export default {
+    components: {
+        ViewComponent
+    },
+    data() {
+        return {
+            name: 'Product Card',
+            code: `<div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden">
+    <div class="px-4 py-2">
+        <h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1>
+        <p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
+    </div>
+    
+    <img class="h-56 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="NIKE AIR">
+    
+    <div class="flex items-center justify-between px-4 py-2 bg-gray-900">
+        <h1 class="text-gray-200 font-bold text-xl">$129</h1>
+        <button class="px-3 py-1 bg-gray-200 text-sm text-gray-900 font-semibold rounded">Add to card</button>
+    </div>
+</div>`
+        }
+    }
+}
+</script>
diff --git a/src/components/Cards/ProductWithEvaluation.vue b/src/components/Cards/ProductWithEvaluation.vue
new file mode 100644
index 0000000..fc4358d
--- /dev/null
+++ b/src/components/Cards/ProductWithEvaluation.vue
@@ -0,0 +1,79 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div slot="component">
+            <div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+                <div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div> 
+                
+                <div class="w-2/3 p-4">
+                    <h1 class="text-gray-900 font-bold text-2xl">Backpack</h1>
+                    <p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit exercitationem fuga id nam quia</p>
+                    <div class="flex item-center mt-2">
+                        <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                        </svg>
+                        <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                        </svg>
+                        <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                        </svg>
+                        <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
+                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                        </svg>
+                        <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
+                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                        </svg>
+                    </div>
+                    <div class="flex item-center justify-between mt-3">
+                        <h1 class="text-gray-700 font-bold text-xl">$220</h1>
+                        <button class="px-3 py-2 bg-gray-800 text-white text-xs font-bold uppercase rounded">Add to Card</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    import ViewComponent from "../../views/ViewComponent";
+
+export default {
+    components: {
+        ViewComponent
+    },
+    data() {
+        return {
+            name: 'Product With Evaluation Card',
+            code: `<div class="flex max-w-md bg-white shadow-lg rounded-lg overflow-hidden">
+    <div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div> 
+    
+    <div class="w-2/3 p-4">
+        <h1 class="text-gray-900 font-bold text-2xl">Backpack</h1>
+        <p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit exercitationem fuga id nam quia</p>
+        <div class="flex item-center mt-2">
+            <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+            </svg>
+            <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+            </svg>
+            <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+            </svg>
+            <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
+                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+            </svg>
+            <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
+                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+            </svg>
+        </div>
+        <div class="flex item-center justify-between mt-3">
+            <h1 class="text-gray-700 font-bold text-xl">$220</h1>
+            <button class="px-3 py-2 bg-gray-800 text-white text-xs font-bold uppercase rounded">Add to Card</button>
+        </div>
+    </div>
+</div>`
+        }
+    }
+}
+</script>
diff --git a/src/components/Cards/Testimonial.vue b/src/components/Cards/Testimonial.vue
new file mode 100644
index 0000000..2203496
--- /dev/null
+++ b/src/components/Cards/Testimonial.vue
@@ -0,0 +1,45 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div slot="component">
+            <div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg my-10">
+                <div class="flex justify-center md:justify-end -mt-16">
+                    <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
+                </div>
+                <div>
+                    <h2 class="text-gray-800 text-3xl font-semibold">Design Tools</h2>
+                    <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
+                </div>
+                <div class="flex justify-end mt-4">
+                    <a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    import ViewComponent from "../../views/ViewComponent";
+
+export default {
+    components: {
+        ViewComponent
+    },
+    data() {
+        return {
+            name: 'Testimonial Card',
+            code: `<div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg">
+    <div class="flex justify-center md:justify-end -mt-16">
+        <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
+    </div>
+    <div>
+        <h2 class="text-gray-800 text-3xl font-semibold">Design Tools</h2>
+        <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
+    </div>
+    <div class="flex justify-end mt-4">
+        <a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
+    </div>
+</div>`
+        }
+    }
+}
+</script>
diff --git a/src/components/Cards/UserDetails.vue b/src/components/Cards/UserDetails.vue
new file mode 100644
index 0000000..78a8317
--- /dev/null
+++ b/src/components/Cards/UserDetails.vue
@@ -0,0 +1,83 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div slot="component">
+            <div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+                <img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
+                <div class="flex items-center px-6 py-3 bg-gray-900">
+                    <svg class="h-6 w-6 text-white fill-current" viewBox="0 0 512 512">
+                        <path d="M256 48C150 48 64 136.2 64 245.1v153.3c0 36.3 28.6 65.7 64 65.7h64V288h-85.3v-42.9c0-84.7 66.8-153.3 149.3-153.3s149.3 68.5 149.3 153.3V288H320v176h64c35.4 0 64-29.3 64-65.7V245.1C448 136.2 362 48 256 48z"/>
+                    </svg>
+                    <h1 class="mx-3 text-white font-semibold text-lg">Focusing</h1>
+                </div>
+                <div class="py-4 px-6">
+                    <h1 class="text-2xl font-semibold text-gray-800">Patterson johnson</h1>
+                    <p class="py-2 text-lg text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
+                    <div class="flex items-center mt-4 text-gray-700">
+                        <svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
+                            <path d="M239.208 343.937c-17.78 10.103-38.342 15.876-60.255 15.876-21.909 0-42.467-5.771-60.246-15.87C71.544 358.331 42.643 406 32 448h293.912c-10.639-42-39.537-89.683-86.704-104.063zM178.953 120.035c-58.479 0-105.886 47.394-105.886 105.858 0 58.464 47.407 105.857 105.886 105.857s105.886-47.394 105.886-105.857c0-58.464-47.408-105.858-105.886-105.858zm0 186.488c-33.671 0-62.445-22.513-73.997-50.523H252.95c-11.554 28.011-40.326 50.523-73.997 50.523z"/><g><path d="M322.602 384H480c-10.638-42-39.537-81.691-86.703-96.072-17.781 10.104-38.343 15.873-60.256 15.873-14.823 0-29.024-2.654-42.168-7.49-7.445 12.47-16.927 25.592-27.974 34.906C289.245 341.354 309.146 364 322.602 384zM306.545 200h100.493c-11.554 28-40.327 50.293-73.997 50.293-8.875 0-17.404-1.692-25.375-4.51a128.411 128.411 0 0 1-6.52 25.118c10.066 3.174 20.779 4.862 31.895 4.862 58.479 0 105.886-47.41 105.886-105.872 0-58.465-47.407-105.866-105.886-105.866-37.49 0-70.427 19.703-89.243 49.09C275.607 131.383 298.961 163 306.545 200z"/></g>
+                        </svg>
+                        <h1 class="px-2 text-sm">MerakiTeam</h1>
+                    </div>
+                    <div class="flex items-center mt-4 text-gray-700">
+                        <svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
+                            <path d="M256 32c-88.004 0-160 70.557-160 156.801C96 306.4 256 480 256 480s160-173.6 160-291.199C416 102.557 344.004 32 256 32zm0 212.801c-31.996 0-57.144-24.645-57.144-56 0-31.357 25.147-56 57.144-56s57.144 24.643 57.144 56c0 31.355-25.148 56-57.144 56z"/>
+                        </svg>
+                        <h1 class="px-2 text-sm">California</h1>
+                    </div>
+                    <div class="flex items-center mt-4 text-gray-700">
+                        <svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
+                            <path d="M437.332 80H74.668C51.199 80 32 99.198 32 122.667v266.666C32 412.802 51.199 432 74.668 432h362.664C460.801 432 480 412.802 480 389.333V122.667C480 99.198 460.801 80 437.332 80zM432 170.667L256 288 80 170.667V128l176 117.333L432 128v42.667z"/>
+                        </svg>
+                        <h1 class="px-2 text-sm">patterson@example.com</h1>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    import ViewComponent from "../../views/ViewComponent";
+
+export default {
+    components: {
+        ViewComponent
+    },
+    data() {
+        return {
+            name: 'User Details Card',
+            code: `<div class="max-w-sm bg-white shadow-lg rounded-lg overflow-hidden">
+    <img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
+    <div class="flex items-center px-6 py-3 bg-gray-900">
+        <svg class="h-6 w-6 text-white fill-current" viewBox="0 0 512 512">
+            <path d="M256 48C150 48 64 136.2 64 245.1v153.3c0 36.3 28.6 65.7 64 65.7h64V288h-85.3v-42.9c0-84.7 66.8-153.3 149.3-153.3s149.3 68.5 149.3 153.3V288H320v176h64c35.4 0 64-29.3 64-65.7V245.1C448 136.2 362 48 256 48z"/>
+        </svg>
+        <h1 class="mx-3 text-white font-semibold text-lg">Focusing</h1>
+    </div>
+    <div class="py-4 px-6">
+        <h1 class="text-2xl font-semibold text-gray-800">Patterson johnson</h1>
+        <p class="py-2 text-lg text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
+        <div class="flex items-center mt-4 text-gray-700">
+            <svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
+                <path d="M239.208 343.937c-17.78 10.103-38.342 15.876-60.255 15.876-21.909 0-42.467-5.771-60.246-15.87C71.544 358.331 42.643 406 32 448h293.912c-10.639-42-39.537-89.683-86.704-104.063zM178.953 120.035c-58.479 0-105.886 47.394-105.886 105.858 0 58.464 47.407 105.857 105.886 105.857s105.886-47.394 105.886-105.857c0-58.464-47.408-105.858-105.886-105.858zm0 186.488c-33.671 0-62.445-22.513-73.997-50.523H252.95c-11.554 28.011-40.326 50.523-73.997 50.523z"/><g><path d="M322.602 384H480c-10.638-42-39.537-81.691-86.703-96.072-17.781 10.104-38.343 15.873-60.256 15.873-14.823 0-29.024-2.654-42.168-7.49-7.445 12.47-16.927 25.592-27.974 34.906C289.245 341.354 309.146 364 322.602 384zM306.545 200h100.493c-11.554 28-40.327 50.293-73.997 50.293-8.875 0-17.404-1.692-25.375-4.51a128.411 128.411 0 0 1-6.52 25.118c10.066 3.174 20.779 4.862 31.895 4.862 58.479 0 105.886-47.41 105.886-105.872 0-58.465-47.407-105.866-105.886-105.866-37.49 0-70.427 19.703-89.243 49.09C275.607 131.383 298.961 163 306.545 200z"/></g>
+            </svg>
+            <h1 class="px-2 text-sm">MerakiTeam</h1>
+        </div>
+        <div class="flex items-center mt-4 text-gray-700">
+            <svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
+                <path d="M256 32c-88.004 0-160 70.557-160 156.801C96 306.4 256 480 256 480s160-173.6 160-291.199C416 102.557 344.004 32 256 32zm0 212.801c-31.996 0-57.144-24.645-57.144-56 0-31.357 25.147-56 57.144-56s57.144 24.643 57.144 56c0 31.355-25.148 56-57.144 56z"/>
+            </svg>
+            <h1 class="px-2 text-sm">California</h1>
+        </div>
+        <div class="flex items-center mt-4 text-gray-700">
+            <svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
+                <path d="M437.332 80H74.668C51.199 80 32 99.198 32 122.667v266.666C32 412.802 51.199 432 74.668 432h362.664C460.801 432 480 412.802 480 389.333V122.667C480 99.198 460.801 80 437.332 80zM432 170.667L256 288 80 170.667V128l176 117.333L432 128v42.667z"/>
+            </svg>
+            <h1 class="px-2 text-sm">patterson@example.com</h1>
+        </div>
+    </div>
+</div>`
+        }
+    }
+}
+</script>
diff --git a/src/components/Forms/Login.vue b/src/components/Forms/Login.vue
new file mode 100644
index 0000000..1c7af76
--- /dev/null
+++ b/src/components/Forms/Login.vue
@@ -0,0 +1,107 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div slot="component">
+            <div class="flex bg-white rounded-lg shadow-lg overflow-hidden mx-auto max-w-sm lg:max-w-4xl">
+                <div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1546514714-df0ccc50d7bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80')"></div>
+                <div class="w-full p-8 lg:w-1/2">
+                    <h2 class="text-2xl font-semibold text-gray-700 text-center">Brand</h2>
+                    <p class="text-xl text-gray-600 text-center">Welcome back!</p>
+                    <a href="#" class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
+                        <div class="px-4 py-3">
+                            <svg class="h-6 w-6" viewBox="0 0 40 40">
+                                <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#FFC107"/>
+                                <path d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z" fill="#FF3D00"/>
+                                <path d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z" fill="#4CAF50"/>
+                                <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#1976D2"/>
+                            </svg>
+                        </div>
+                        <h1 class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</h1>
+                    </a>
+                    <div class="mt-4 flex items-center justify-between">
+                        <span class="border-b w-1/5 lg:w-1/4"></span>
+                        <a href="#" class="text-xs text-center text-gray-500 uppercase">or login with email</a>
+                        <span class="border-b w-1/5 lg:w-1/4"></span>
+                    </div>
+                    <div class="mt-4">
+                        <label class="block text-gray-700 text-sm font-bold mb-2">Email Address</label>
+                        <input class="bg-gray-200 text-gray-700 focus:outline-none focus:shadow-outline border border-gray-300 rounded py-2 px-4 block w-full appearance-none" type="email">
+                    </div>
+                    <div class="mt-4">
+                        <div class="flex justify-between">
+                            <label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
+                            <a href="#" class="text-xs text-gray-500">Forget Password?</a>
+                        </div>
+                        <input class="bg-gray-200 text-gray-700 focus:outline-none focus:shadow-outline border border-gray-300 rounded py-2 px-4 block w-full appearance-none" type="password">
+                    </div>
+                    <div class="mt-8">
+                        <button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600">Login</button>
+                    </div>
+                    <div class="mt-4 flex items-center justify-between">
+                        <span class="border-b w-1/5 md:w-1/4"></span>
+                        <a href="#" class="text-xs text-gray-500 uppercase">or sign up</a>
+                        <span class="border-b w-1/5 md:w-1/4"></span>
+                    </div>
+                </div>
+            </div>
+        </div>   
+    </view-component>
+</template>
+
+<script>
+import ViewComponent from "../../views/ViewComponent";
+
+export default {
+    components: {
+        ViewComponent
+    },
+    data() {
+        return {
+            name: 'Login Form',
+            code: `<div class="py-6">
+    <div class="flex bg-white rounded-lg shadow-lg overflow-hidden mx-auto max-w-sm lg:max-w-4xl">
+        <div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1546514714-df0ccc50d7bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80')"></div>
+        <div class="w-full p-8 lg:w-1/2">
+            <h2 class="text-2xl font-semibold text-gray-700 text-center">Brand</h2>
+            <p class="text-xl text-gray-600 text-center">Welcome back!</p>
+            <a href="#" class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
+                <div class="px-4 py-3">
+                    <svg class="h-6 w-6" viewBox="0 0 40 40">
+                        <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#FFC107"/>
+                        <path d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z" fill="#FF3D00"/>
+                        <path d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z" fill="#4CAF50"/>
+                        <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#1976D2"/>
+                    </svg>
+                </div>
+                <h1 class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</h1>
+            </a>
+            <div class="mt-4 flex items-center justify-between">
+                <span class="border-b w-1/5 lg:w-1/4"></span>
+                <a href="#" class="text-xs text-center text-gray-500 uppercase">or login with email</a>
+                <span class="border-b w-1/5 lg:w-1/4"></span>
+            </div>
+            <div class="mt-4">
+                <label class="block text-gray-700 text-sm font-bold mb-2">Email Address</label>
+                <input class="bg-gray-200 text-gray-700 focus:outline-none focus:shadow-outline border border-gray-300 rounded py-2 px-4 block w-full appearance-none" type="email">
+            </div>
+            <div class="mt-4">
+                <div class="flex justify-between">
+                    <label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
+                    <a href="#" class="text-xs text-gray-500">Forget Password?</a>
+                </div>
+                <input class="bg-gray-200 text-gray-700 focus:outline-none focus:shadow-outline border border-gray-300 rounded py-2 px-4 block w-full appearance-none" type="password">
+            </div>
+            <div class="mt-8">
+                <button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600">Login</button>
+            </div>
+            <div class="mt-4 flex items-center justify-between">
+                <span class="border-b w-1/5 md:w-1/4"></span>
+                <a href="#" class="text-xs text-gray-500 uppercase">or sign up</a>
+                <span class="border-b w-1/5 md:w-1/4"></span>
+            </div>
+        </div>
+    </div>
+</div>`
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Forms/Subscribe.vue b/src/components/Forms/Subscribe.vue
new file mode 100644
index 0000000..b557f0a
--- /dev/null
+++ b/src/components/Forms/Subscribe.vue
@@ -0,0 +1,53 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div slot="component">
+            <div class="flex flex-col max-w-4xl mx-auto md:h-56 bg-white rounded-lg shadow-lg overflow-hidden md:flex-row">
+                <div class="md:flex items-center justify-center md:w-1/2 md:bg-gray-700">
+                    <div class="py-6 px-8 md:py-0">
+                        <h2 class="text-gray-700 text-2xl font-bold md:text-gray-100">Sign Up For Project Updates</h2>
+                        <p class="mt-2 text-gray-600 md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
+                    </div>
+                </div>
+                <div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
+                    <form>
+                        <div class="flex flex-col rounded-lg overflow-hidden sm:flex-row">
+                            <input class="py-3 px-4 bg-gray-200 text-gray-800 border-gray-300 border-2 outline-none placeholder-gray-500 focus:bg-gray-100" type="text" name="email" placeholder="Enter your email">
+                            <button class="py-3 px-4 bg-gray-700 text-gray-100 font-semibold uppercase hover:bg-gray-600">subscribe</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>   
+    </view-component>
+</template>
+
+<script>
+import ViewComponent from "../../views/ViewComponent";
+
+export default {
+    components: {
+        ViewComponent
+    },
+    data() {
+        return {
+            name: 'Subscribe Form',
+            code: `<div class="flex flex-col max-w-4xl md:h-56 bg-white rounded-lg shadow-lg overflow-hidden md:flex-row">
+    <div class="md:flex items-center justify-center md:w-1/2 md:bg-gray-700">
+        <div class="py-6 px-8 md:py-0">
+            <h2 class="text-gray-700 text-2xl font-bold md:text-gray-100">Sign Up For Project Updates</h2>
+            <p class="mt-2 text-gray-600 md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
+        </div>
+    </div>
+    <div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
+        <form>
+            <div class="flex flex-col rounded-lg overflow-hidden sm:flex-row">
+                <input class="py-3 px-4 bg-gray-200 text-gray-800 border-gray-300 border-2 outline-none placeholder-gray-500 focus:bg-gray-100" type="text" name="email" placeholder="Enter your email">
+                <button class="py-3 px-4 bg-gray-700 text-gray-100 font-semibold uppercase hover:bg-gray-600">subscribe</button>
+            </div>
+        </form>
+    </div>
+</div>`
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Master.vue b/src/components/Master.vue
index 7703049..e230422 100644
--- a/src/components/Master.vue
+++ b/src/components/Master.vue
@@ -1,18 +1,54 @@
 <template>
-    <div class="py-12">
-        <div class="container mx-auto px-6">
-            <h1 class="text-2xl text-gray-800 font-semibold mb-6">Alert</h1>
-            <notification-pop></notification-pop>
+    <div class="flex h-screen container mx-auto px-6">
+        <div class="w-64 border-r py-8">
+            List
+        </div>
+        <div class="flex-1 py-12 overflow-y-auto">
+            <div class="container mx-auto px-6">
+                <div class="py-8">
+                    <h1 class="text-2xl text-gray-800 font-semibold mb-6">Alert</h1>
+                    <notification-pop></notification-pop>
+                </div>
+
+                <div class="py-8">
+                    <h1 class="text-2xl text-gray-800 font-semibold mb-6">Cards</h1>
+                    <user-details></user-details>
+                    <testimonial class="mt-10"></testimonial>
+                    <artical class="mt-10"></artical>
+                    <product class="mt-10"></product>
+                    <product-evaluation class="mt-10"></product-evaluation>
+                </div>
+
+                <div class="py-8">
+                    <h1 class="text-2xl text-gray-800 font-semibold mb-6">Forms</h1>
+                    <login></login>
+                    <subscribe class="my-10"></subscribe>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
 import NotificationPop  from "./Alert/NotificationPop";
+import UserDetails  from "./Cards/UserDetails";
+import Testimonial  from "./Cards/Testimonial";
+import Artical  from "./Cards/Artical";
+import Product  from "./Cards/Product";
+import ProductEvaluation from "./Cards/ProductWithEvaluation";
+import Login from "./Forms/Login";
+import Subscribe from "./Forms/Subscribe";
 
 export default {
     components: {
-        NotificationPop
+        NotificationPop , 
+        UserDetails , 
+        Testimonial , 
+        Artical , 
+        Product , 
+        ProductEvaluation,
+        Login,
+        Subscribe
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/ViewComponet.vue b/src/views/ViewComponent.vue
similarity index 100%
rename from src/views/ViewComponet.vue
rename to src/views/ViewComponent.vue