diff --git a/src/App.vue b/src/App.vue
index 69db88d..6f801f0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Header from "./views/Header";
+import Header from "./components/Header";
 import MasterComponent from "./components/Master";
 
 export default {
diff --git a/src/components/CodeSnippet.vue b/src/components/CodeSnippet.vue
deleted file mode 100644
index fef99cd..0000000
--- a/src/components/CodeSnippet.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-   <div class="relative rounded overflow-hidden">
-        <pre><code class="px-8 py-6 rounded-md overflow-x-scroll overflow-hidden">{{ code }}</code></pre>
-        <div class="absolute right-0 top-0">
-            <button class="px-3 py-2 text-gray-600 hover:text-gray-400 focus:outline-none" v-clipboard:copy="code">
-                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
-                    <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
-                </svg>
-            </button>
-        </div>
-    </div>
-</template>
-
-<script>
-import hljs from 'highlight.js/lib/core';
-hljs.registerLanguage('html', require('highlight.js/lib/languages/xml'));
-import 'highlight.js/styles/atom-one-dark.css';
-
-export default {
-    props: ['code'],
-     mounted() {
-        this.highlightCode();
-    },
-    methods: {
-        highlightCode() {
-            this.$nextTick(() => {
-                document.querySelectorAll('pre code').forEach((block) => {
-                    hljs.highlightBlock(block);
-                });
-            });
-        },
-    }
-}
-</script>
\ No newline at end of file
diff --git a/src/views/Header.vue b/src/components/Header.vue
similarity index 100%
rename from src/views/Header.vue
rename to src/components/Header.vue
diff --git a/src/components/Master.vue b/src/components/Master.vue
index 2465f69..2d9c7c9 100644
--- a/src/components/Master.vue
+++ b/src/components/Master.vue
@@ -12,12 +12,14 @@
                     <span class="text-gray-700">Categories : </span>
                     <div class="mt-2 md:mt-0">
                         <button @click="searchText = ''"
-                           class="ml-1 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"
-                           :class="searchText.length === 0 ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">all</button>
+                                class="ml-1 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"
+                                :class="searchText.length === 0 ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">
+                            all
+                        </button>
                         <span v-for="category in categories" :key="category.name">
                             <button @click="searchText = category.name"
-                               class="ml-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"
-                               :class="category.name === searchText? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">{{ category.name }}</button>
+                                    class="ml-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"
+                                    :class="category.name === searchText? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">{{ category.name }}</button>
                         </span>
                     </div>
                 </div>
diff --git a/src/components/UI/Alert/NotificationPop.vue b/src/components/UI/Alert/NotificationPop.vue
index ed71182..73cb097 100644
--- a/src/components/UI/Alert/NotificationPop.vue
+++ b/src/components/UI/Alert/NotificationPop.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import ViewComponent from "../../../views/ViewComponent";
+import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/UI/Cards/Article.vue b/src/components/UI/Cards/Article.vue
index 41e6ca4..a0da6ba 100644
--- a/src/components/UI/Cards/Article.vue
+++ b/src/components/UI/Cards/Article.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../../views/ViewComponent";
+    import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/UI/Cards/Product.vue b/src/components/UI/Cards/Product.vue
index f3163a9..f4e24d1 100644
--- a/src/components/UI/Cards/Product.vue
+++ b/src/components/UI/Cards/Product.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../../views/ViewComponent";
+    import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/UI/Cards/ProductWithEvaluation.vue b/src/components/UI/Cards/ProductWithEvaluation.vue
index 05a7b3f..6d2d4f8 100644
--- a/src/components/UI/Cards/ProductWithEvaluation.vue
+++ b/src/components/UI/Cards/ProductWithEvaluation.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../../views/ViewComponent";
+    import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/UI/Cards/Testimonial.vue b/src/components/UI/Cards/Testimonial.vue
index c180ed3..13d33a2 100644
--- a/src/components/UI/Cards/Testimonial.vue
+++ b/src/components/UI/Cards/Testimonial.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../../views/ViewComponent";
+    import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/UI/Cards/UserDetails.vue b/src/components/UI/Cards/UserDetails.vue
index 8a35f99..36ebb15 100644
--- a/src/components/UI/Cards/UserDetails.vue
+++ b/src/components/UI/Cards/UserDetails.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-    import ViewComponent from "../../../views/ViewComponent";
+    import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/UI/Forms/Login.vue b/src/components/UI/Forms/Login.vue
index 2e3981a..2fc059e 100644
--- a/src/components/UI/Forms/Login.vue
+++ b/src/components/UI/Forms/Login.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import ViewComponent from "../../../views/ViewComponent";
+import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/UI/Forms/Subscribe.vue b/src/components/UI/Forms/Subscribe.vue
index 062095c..02fbc71 100644
--- a/src/components/UI/Forms/Subscribe.vue
+++ b/src/components/UI/Forms/Subscribe.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import ViewComponent from "../../../views/ViewComponent";
+import ViewComponent from "../../Utilities/ViewComponent";
 
 export default {
     components: {
diff --git a/src/components/Utilities/CodeSnippet.vue b/src/components/Utilities/CodeSnippet.vue
new file mode 100644
index 0000000..8d741c0
--- /dev/null
+++ b/src/components/Utilities/CodeSnippet.vue
@@ -0,0 +1,36 @@
+<template>
+    <div class="relative rounded overflow-hidden">
+        <pre><code class="px-8 py-6 rounded-md overflow-x-scroll overflow-hidden">{{ code }}</code></pre>
+        <div class="absolute right-0 top-0">
+            <button class="px-3 py-2 text-gray-600 hover:text-gray-400 focus:outline-none" v-clipboard:copy="code">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                     viewBox="0 0 24 24" class="w-6 h-6">
+                    <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
+                </svg>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+    import hljs from 'highlight.js/lib/core';
+
+    hljs.registerLanguage('html', require('highlight.js/lib/languages/xml'));
+    import 'highlight.js/styles/atom-one-dark.css';
+
+    export default {
+        props: ['code'],
+        mounted() {
+            this.highlightCode();
+        },
+        methods: {
+            highlightCode() {
+                this.$nextTick(() => {
+                    document.querySelectorAll('pre code').forEach((block) => {
+                        hljs.highlightBlock(block);
+                    });
+                });
+            },
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/views/ViewComponent.vue b/src/components/Utilities/ViewComponent.vue
similarity index 97%
rename from src/views/ViewComponent.vue
rename to src/components/Utilities/ViewComponent.vue
index 0855947..2e42919 100644
--- a/src/views/ViewComponent.vue
+++ b/src/components/Utilities/ViewComponent.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import CodeSnippet from "../components/CodeSnippet";
+import CodeSnippet from "./CodeSnippet";
 
 export default {
     props: ['name' , 'code'],