diff --git a/src/App.vue b/src/App.vue
index 38095de..8b7e24b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="font-inter" id="app">
+  <div class="bg-gray-100 font-inter" id="app">
     <Header></Header>
     <master-component></master-component>
   </div>
diff --git a/src/views/CodeSnippet.vue b/src/components/CodeSnippet.vue
similarity index 100%
rename from src/views/CodeSnippet.vue
rename to src/components/CodeSnippet.vue
diff --git a/src/components/Master.vue b/src/components/Master.vue
index e230422..8e19555 100644
--- a/src/components/Master.vue
+++ b/src/components/Master.vue
@@ -1,28 +1,43 @@
 <template>
-    <div class="flex h-screen container mx-auto px-6">
-        <div class="w-64 border-r py-8">
-            List
+    <div class="min-h-screen container mx-auto px-6">
+
+        <div class="container mx-auto px-6 py-16 text-center">
+            <h1 class="text-2xl sm: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..">
         </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="flex">
+            <div class="hidden sm:w-64">
+                <h2 class="text-gray-800 text-2xl font-semibold">Categories</h2>
+                <ul class="flex flex-col mt-4">
+                    <li class="text-gray-600 hover:text-gray-800 cursor-pointer text-lg">All Components</li>
+                    <li class="text-gray-600 hover:text-gray-800 cursor-pointer text-lg">Alerts</li>
+                    <li class="text-gray-600 hover:text-gray-800 cursor-pointer text-lg">Cards</li>
+                    <li class="text-gray-600 hover:text-gray-800 cursor-pointer text-lg">Forms</li>
+                    <li class="text-gray-600 hover:text-gray-800 cursor-pointer text-lg">Layouts</li>
+                </ul>
+            </div>
+            <div class="w-full sm: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">Forms</h1>
-                    <login></login>
-                    <subscribe class="my-10"></subscribe>
+                    <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>
@@ -30,22 +45,22 @@
 </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";
+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";
 
 export default {
     components: {
-        NotificationPop , 
-        UserDetails , 
-        Testimonial , 
-        Artical , 
-        Product , 
+        NotificationPop ,
+        UserDetails ,
+        Testimonial ,
+        Artical ,
+        Product ,
         ProductEvaluation,
         Login,
         Subscribe
diff --git a/src/components/Alert/NotificationPop.vue b/src/components/UI/Alert/NotificationPop.vue
similarity index 96%
rename from src/components/Alert/NotificationPop.vue
rename to src/components/UI/Alert/NotificationPop.vue
index 837615c..ed71182 100644
--- a/src/components/Alert/NotificationPop.vue
+++ b/src/components/UI/Alert/NotificationPop.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import ViewComponent from "../../views/ViewComponent";
+import ViewComponent from "../../../views/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/Cards/Artical.vue b/src/components/UI/Cards/Artical.vue
similarity index 98%
rename from src/components/Cards/Artical.vue
rename to src/components/UI/Cards/Artical.vue
index 63ec5ae..41e6ca4 100644
--- a/src/components/Cards/Artical.vue
+++ b/src/components/UI/Cards/Artical.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../views/ViewComponent";
+    import ViewComponent from "../../../views/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/Cards/Product.vue b/src/components/UI/Cards/Product.vue
similarity index 97%
rename from src/components/Cards/Product.vue
rename to src/components/UI/Cards/Product.vue
index 7be9bc8..f3163a9 100644
--- a/src/components/Cards/Product.vue
+++ b/src/components/UI/Cards/Product.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../views/ViewComponent";
+    import ViewComponent from "../../../views/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/Cards/ProductWithEvaluation.vue b/src/components/UI/Cards/ProductWithEvaluation.vue
similarity index 98%
rename from src/components/Cards/ProductWithEvaluation.vue
rename to src/components/UI/Cards/ProductWithEvaluation.vue
index fc4358d..05a7b3f 100644
--- a/src/components/Cards/ProductWithEvaluation.vue
+++ b/src/components/UI/Cards/ProductWithEvaluation.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../views/ViewComponent";
+    import ViewComponent from "../../../views/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/Cards/Testimonial.vue b/src/components/UI/Cards/Testimonial.vue
similarity index 97%
rename from src/components/Cards/Testimonial.vue
rename to src/components/UI/Cards/Testimonial.vue
index 2203496..c180ed3 100644
--- a/src/components/Cards/Testimonial.vue
+++ b/src/components/UI/Cards/Testimonial.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../views/ViewComponent";
+    import ViewComponent from "../../../views/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/Cards/UserDetails.vue b/src/components/UI/Cards/UserDetails.vue
similarity index 99%
rename from src/components/Cards/UserDetails.vue
rename to src/components/UI/Cards/UserDetails.vue
index 78a8317..8a35f99 100644
--- a/src/components/Cards/UserDetails.vue
+++ b/src/components/UI/Cards/UserDetails.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../views/ViewComponent";
+    import ViewComponent from "../../../views/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/Forms/Login.vue b/src/components/UI/Forms/Login.vue
similarity index 99%
rename from src/components/Forms/Login.vue
rename to src/components/UI/Forms/Login.vue
index 1c7af76..2e3981a 100644
--- a/src/components/Forms/Login.vue
+++ b/src/components/UI/Forms/Login.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import ViewComponent from "../../views/ViewComponent";
+import ViewComponent from "../../../views/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/Forms/Subscribe.vue b/src/components/UI/Forms/Subscribe.vue
similarity index 97%
rename from src/components/Forms/Subscribe.vue
rename to src/components/UI/Forms/Subscribe.vue
index b557f0a..062095c 100644
--- a/src/components/Forms/Subscribe.vue
+++ b/src/components/UI/Forms/Subscribe.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import ViewComponent from "../../views/ViewComponent";
+import ViewComponent from "../../../views/ViewComponent";
 
 export default {
     components: {
diff --git a/src/views/ViewComponent.vue b/src/views/ViewComponent.vue
index cabe43d..5bdfd6c 100644
--- a/src/views/ViewComponent.vue
+++ b/src/views/ViewComponent.vue
@@ -2,7 +2,7 @@
     <div class="bg-gray-300 border rounded-md overflow-hidden">
         <div class="bg-white p-4 border-b">
             <div class="flex justify-between items-center">
-                <div class="text-gray-700 font-medium text-lg">{{ name }}</div>
+                <div class="text-gray-700 font-medium text-sm sm:text-lg">{{ name }}</div>
                <div>
                     <button @click="viewCode =! viewCode" class="mx-4 bg-gray-200 rounded-md p-1 text-gray-600 hover:text-gray-700 hover:bg-gray-400 focus:outline-none">
                         <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import CodeSnippet from "./CodeSnippet";
+import CodeSnippet from "../components/CodeSnippet";
 
 export default {
     props: ['name' , 'code'],