diff --git a/src/Models/data.js b/src/Models/data.js
index 885908e..492f58b 100644
--- a/src/Models/data.js
+++ b/src/Models/data.js
@@ -1,26 +1,26 @@
 export default [
     {
-        name: 'alert',
+        name: 'Alert',
         components: [
             { name: 'Notification Pop' }
 
         ],
     },
-    // {
-    //     name: 'cards',
-    //     components: [
-    //         { name: 'article' },
-    //         { name: 'product' },
-    //         { name: 'product-evaluation' },
-    //         { name: 'testimonial' },
-    //         { name: 'user-details' },
-    //     ],
-    // },
-    // {
-    //     name: 'forms',
-    //     components: [
-    //         { name: 'login' },
-    //         { name: 'subscribe' },
-    //     ],
-    // },
+    {
+        name: 'Cards',
+        components: [
+            { name: 'Article Card' },
+            { name: 'Product' },
+            { name: 'Product Evaluation' },
+            { name: 'Testimonial' },
+            { name: 'User Details' },
+        ],
+    },
+    {
+        name: 'Forms',
+        components: [
+            {name: 'Login'},
+            {name: 'Subscribe'},
+        ],
+    },
 ];
\ No newline at end of file
diff --git a/src/components/Master.vue b/src/components/Master.vue
index 9ddf5f5..826a5ca 100644
--- a/src/components/Master.vue
+++ b/src/components/Master.vue
@@ -29,7 +29,7 @@
         <div class="w-full max-w-5xl mx-auto">
             <div class="mb-16" v-for="category in list" :key="category.name">
                 <h1 class="text-2xl text-gray-800 font-semibold mb-6 capitalize" v-text="category.name"></h1>
-                <view-component v-for="component in category.components" :key="component.name" :name="component.name">
+                <view-component v-for="component in category.components" :key="component.name" :name="component.name" class="mt-6">
                     <div slot="component">
                         <component :is="component.name | toId" class="mb-10"></component>
                     </div>
@@ -43,7 +43,7 @@
     import NotificationPop from "./UI/Alert/NotificationPop";
     import UserDetails from "./UI/Cards/UserDetails";
     import Testimonial from "./UI/Cards/Testimonial";
-    import Article from "./UI/Cards/Article";
+    import ArticleCard from "./UI/Cards/ArticleCard";
     import Product from "./UI/Cards/Product";
     import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
     import Login from "./UI/Forms/Login";
@@ -56,7 +56,7 @@
             NotificationPop,
             UserDetails,
             Testimonial,
-            Article,
+            ArticleCard,
             Product,
             ProductEvaluation,
             Login,
diff --git a/src/components/UI/Cards/Article.vue b/src/components/UI/Cards/Article.vue
deleted file mode 100644
index a0da6ba..0000000
--- a/src/components/UI/Cards/Article.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<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 "../../Utilities/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/UI/Cards/ArticleCard.vue b/src/components/UI/Cards/ArticleCard.vue
new file mode 100644
index 0000000..bb6ce0e
--- /dev/null
+++ b/src/components/UI/Cards/ArticleCard.vue
@@ -0,0 +1,39 @@
+<template>
+    <div :id="name | toId">
+        <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>
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                name: 'Article Card',
+            }
+        }
+    }
+</script>
diff --git a/src/components/UI/Cards/Product.vue b/src/components/UI/Cards/Product.vue
index f4e24d1..3b54b18 100644
--- a/src/components/UI/Cards/Product.vue
+++ b/src/components/UI/Cards/Product.vue
@@ -1,47 +1,31 @@
 <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 :id="name | toId">
+        <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>
-    </view-component>
+    </div>
 </template>
 
 <script>
-    import ViewComponent from "../../Utilities/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>`
+    export default {
+        data() {
+            return {
+                name: 'Product',
+            }
         }
     }
-}
 </script>
diff --git a/src/components/UI/Cards/ProductWithEvaluation.vue b/src/components/UI/Cards/ProductWithEvaluation.vue
index 6d2d4f8..ed64af4 100644
--- a/src/components/UI/Cards/ProductWithEvaluation.vue
+++ b/src/components/UI/Cards/ProductWithEvaluation.vue
@@ -1,12 +1,13 @@
 <template>
-    <view-component :name="name" :code="code">
-        <div slot="component">
+        <div :id="name | toId">
             <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-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>
+                    <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"/>
@@ -26,54 +27,22 @@
                     </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>
+                        <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 "../../Utilities/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>`
+    export default {
+        data() {
+            return {
+                name: 'Product Evaluation',
+            }
         }
     }
-}
 </script>
diff --git a/src/components/UI/Cards/Testimonial.vue b/src/components/UI/Cards/Testimonial.vue
index 13d33a2..15e757f 100644
--- a/src/components/UI/Cards/Testimonial.vue
+++ b/src/components/UI/Cards/Testimonial.vue
@@ -1,45 +1,30 @@
 <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 :id="name | toId">
+        <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>
-    </view-component>
+    </div>
 </template>
 
 <script>
-    import ViewComponent from "../../Utilities/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>`
+    export default {
+        data() {
+            return {
+                name: 'Testimonial',
+            }
         }
     }
-}
 </script>
diff --git a/src/components/UI/Cards/UserDetails.vue b/src/components/UI/Cards/UserDetails.vue
index 36ebb15..fa3ff5f 100644
--- a/src/components/UI/Cards/UserDetails.vue
+++ b/src/components/UI/Cards/UserDetails.vue
@@ -1,6 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
-        <div slot="component">
+        <div :id="name | toId">
             <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">
@@ -33,50 +32,14 @@
                 </div>
             </div>
         </div>
-    </view-component>
 </template>
 
 <script>
-    import ViewComponent from "../../Utilities/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>`
+            name: 'User Details',
         }
     }
 }
diff --git a/src/components/UI/Forms/Login.vue b/src/components/UI/Forms/Login.vue
index 2fc059e..96c2e14 100644
--- a/src/components/UI/Forms/Login.vue
+++ b/src/components/UI/Forms/Login.vue
@@ -1,107 +1,66 @@
 <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 :id="name | toId">
+        <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>
-        </div>   
-    </view-component>
-</template>
-
-<script>
-import ViewComponent from "../../Utilities/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 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>
-                <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 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>
-                <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>`
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                name: 'Login',
+            }
         }
     }
-}
 </script>
\ No newline at end of file
diff --git a/src/components/UI/Forms/Subscribe.vue b/src/components/UI/Forms/Subscribe.vue
index 02fbc71..9091c5f 100644
--- a/src/components/UI/Forms/Subscribe.vue
+++ b/src/components/UI/Forms/Subscribe.vue
@@ -1,6 +1,5 @@
 <template>
-    <view-component :name="name" :code="code">
-        <div slot="component">
+        <div :id="name | toId">
             <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">
@@ -18,35 +17,14 @@
                 </div>
             </div>
         </div>   
-    </view-component>
 </template>
 
 <script>
-import ViewComponent from "../../Utilities/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>`
+            name: 'Subscribe',
         }
     }
 }