diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index ebf8739..9442647 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -17,4 +17,4 @@
     background: #718096;
   }
 
-@tailwind utilities
\ No newline at end of file
+@tailwind utilities;
\ No newline at end of file
diff --git a/src/components.js b/src/components.js
new file mode 100644
index 0000000..84d6d0f
--- /dev/null
+++ b/src/components.js
@@ -0,0 +1,26 @@
+export default [
+    {
+        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' },
+        ],
+    },
+];
\ No newline at end of file
diff --git a/src/components/Master.vue b/src/components/Master.vue
index 9438fc2..2c5505d 100644
--- a/src/components/Master.vue
+++ b/src/components/Master.vue
@@ -3,7 +3,8 @@
 
         <div class="container mx-auto px-6 py-16 text-center">
             <h1 class="text-2xl md:text-3xl text-gray-800">Discover new components. Build amazing things 🔥</h1>
-            <input class="w-11/12 mt-6 px-6 py-4 bg-gray-200 border border-gray-300 text-gray-800 rounded-lg focus:outline-none focus:bg-white placeholder-gray-700" type="text" placeholder="search..">
+            <input class="w-11/12 mt-6 px-6 py-4 bg-gray-200 border border-gray-300 text-gray-800 rounded-lg focus:outline-none focus:bg-white placeholder-gray-700"
+                   type="text" placeholder="search.." v-model="searchText">
         </div>
 
         <div class="flex">
@@ -19,24 +20,10 @@
             </div>
             <div class="w-full md:flex-1">
                 <div class="container mx-auto px-6">
-                    <div class="pb-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 class="pb-8" v-for="category in list" :key="category.name">
+                        <h1 class="text-2xl text-gray-800 font-semibold mb-6" v-text="category.name"></h1>
+                        <component v-for="component in category.components" :key="component.name" :is="component.name"
+                                   class="mt-8"></component>
                     </div>
                 </div>
             </div>
@@ -45,25 +32,48 @@
 </template>
 
 <script>
-import NotificationPop  from "./UI/Alert/NotificationPop";
-import UserDetails  from "./UI/Cards/UserDetails";
-import Testimonial  from "./UI/Cards/Testimonial";
-import Artical  from "./UI/Cards/Artical";
-import Product  from "./UI/Cards/Product";
-import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
-import Login from "./UI/Forms/Login";
-import Subscribe from "./UI/Forms/Subscribe";
+    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 Product from "./UI/Cards/Product";
+    import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
+    import Login from "./UI/Forms/Login";
+    import Subscribe from "./UI/Forms/Subscribe";
+    import componentList from "./../components";
 
-export default {
-    components: {
-        NotificationPop ,
-        UserDetails ,
-        Testimonial ,
-        Artical ,
-        Product ,
-        ProductEvaluation,
-        Login,
-        Subscribe
+    export default {
+        components: {
+            NotificationPop,
+            UserDetails,
+            Testimonial,
+            Article,
+            Product,
+            ProductEvaluation,
+            Login,
+            Subscribe
+        },
+        data() {
+            return {
+                categories: componentList,
+                searchText: '',
+            }
+        },
+        computed: {
+            list() {
+
+                if (this.searchText.length === 0) return componentList;
+
+                return this.search(this.searchText);
+            },
+        },
+
+        methods: {
+            search(string) {
+                let pattern = new RegExp(`^${string}`, 'i');
+
+                return this.categories.filter(category => category.name.match(pattern));
+            }
+        },
     }
-}
 </script>
\ No newline at end of file
diff --git a/src/components/UI/Cards/Artical.vue b/src/components/UI/Cards/Article.vue
similarity index 100%
rename from src/components/UI/Cards/Artical.vue
rename to src/components/UI/Cards/Article.vue
diff --git a/src/views/ViewComponent.vue b/src/views/ViewComponent.vue
index 19a69b8..f6a258b 100644
--- a/src/views/ViewComponent.vue
+++ b/src/views/ViewComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-gray-300 border rounded-md overflow-hidden">
+    <div class="bg-gray-300 border rounded-md overflow-hidden max-w-4xl">
         <div class="bg-white p-4 border-b">
             <div class="flex justify-between items-center">
                 <div class="text-gray-700 font-medium text-sm md:text-lg">{{ name }}</div>
@@ -22,14 +22,14 @@
 
         <div class="flex justify-center items-center p-6">
             <div class="w-full">
-                <slot name="component"></slot> 
+                <slot name="component"></slot>
             </div>
         </div>
 
         <div v-if="viewCode">
             <code-snippet :code="code"></code-snippet>
         </div>
-    </div>    
+    </div>
 </template>
 
 <script>
diff --git a/tailwind.config.js b/tailwind.config.js
index 8fcc616..561fb9b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,19 +1,21 @@
 module.exports = {
-  purge: [],
-  theme: {
-    extend: {
-      fontFamily: {
-        inter: [
-          'Inter'
-        ],
-      },
-      spacing: {
-        '7': '1.75rem',
-        '9': '2.25rem',
-        '96': '24rem',
-      },
+    purge: [
+        './src/**/*.vue',
+    ],
+    theme: {
+        extend: {
+            fontFamily: {
+                inter: [
+                    'Inter'
+                ],
+            },
+            spacing: {
+                '7': '1.75rem',
+                '9': '2.25rem',
+                '96': '24rem',
+            },
+        },
     },
-  },
-  variants: {},
-  plugins: [],
+    variants: {},
+    plugins: [],
 }