diff --git a/package-lock.json b/package-lock.json
index 0ad4e18..5b1fb85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2984,6 +2984,12 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
+        "highlight.js": {
+          "version": "9.18.1",
+          "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.1.tgz",
+          "integrity": "sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==",
+          "dev": true
+        },
         "supports-color": {
           "version": "7.1.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
@@ -6004,10 +6010,9 @@
       "dev": true
     },
     "highlight.js": {
-      "version": "9.18.1",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.1.tgz",
-      "integrity": "sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==",
-      "dev": true
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.0.2.tgz",
+      "integrity": "sha512-2gMT2MHU6/2OjAlnaOE2LFdr9dwviDN3Q2lSw7Ois3/5uTtahbgYTkr4EPoY828ps+2eQWiixPTF8+phU6Ofkg=="
     },
     "hmac-drbg": {
       "version": "1.0.1",
diff --git a/package.json b/package.json
index c0066c9..2bdf3c9 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "autoprefixer": "^9.7.6",
     "core-js": "^3.6.4",
+    "highlight.js": "^10.0.2",
     "tailwindcss": "^1.4.4",
     "vue": "^2.6.11",
     "vue-clipboard2": "^0.3.1"
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index d66703d..ebf8739 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -4,4 +4,17 @@
 
 @tailwind components;
 
+::-webkit-scrollbar {
+    width: 5px;
+  }
+  ::-webkit-scrollbar-track{
+    background: #2D3748;
+  }
+  ::-webkit-scrollbar-thumb{
+    background: #CBD5E0;
+  }
+  ::-webkit-scrollbar-thumb:hover{
+    background: #718096;
+  }
+
 @tailwind utilities
\ No newline at end of file
diff --git a/src/components/Alert/NotificationPop.vue b/src/components/Alert/NotificationPop.vue
index a24fb0a..0ae4862 100644
--- a/src/components/Alert/NotificationPop.vue
+++ b/src/components/Alert/NotificationPop.vue
@@ -26,15 +26,15 @@ export default {
         return {
             name: 'Notification Pop',
             code: `<div class="flex max-w-md bg-white shadow-lg rounded-lg overflow-hidden">
-                        <div class="w-2 bg-gray-800"></div>
-                        <div class="flex items-center px-2 py-3">
-                            <img class="w-12 h-12 object-cover rounded-full" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
-                            <div class="mx-3">
-                                <h2 class="text-xl font-semibold text-gray-800">Hello john</h2>
-                                <p class="text-gray-600">Sara was replied on the <a href="#" class="text-blue-500">Upload Image</a>.</p>
-                            </div>
-                        </div>
-                    </div>`
+    <div class="w-2 bg-gray-800"></div>
+    <div class="flex items-center px-2 py-3">
+        <img class="w-12 h-12 object-cover rounded-full" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
+        <div class="mx-3">
+            <h2 class="text-xl font-semibold text-gray-800">Hello john</h2>
+            <p class="text-gray-600">Sara was replied on the <a href="#" class="text-blue-500">Upload Image</a>.</p>
+        </div>
+    </div>
+</div>`
         }
     }
 }
diff --git a/src/views/CodeSnippet.vue b/src/views/CodeSnippet.vue
index 0b98980..83d9f9a 100644
--- a/src/views/CodeSnippet.vue
+++ b/src/views/CodeSnippet.vue
@@ -1,11 +1,34 @@
 <template>
-    <div>
-        {{ code }}
+   <div class="relative rounded overflow-hidden">
+        <pre><code class="px-12 py-8 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/views/Header.vue
index 9c7e5c4..b291544 100644
--- a/src/views/Header.vue
+++ b/src/views/Header.vue
@@ -1,5 +1,30 @@
 <template>
-    <div class="bg-gray-900 border-t-8 border-blue-500">
+<div class="border-b-4 border-blue-500">
+    <nav class="bg-gray-900">
+        <div class="container mx-auto px-6 py-4">
+            <div class="md:flex items-center justify-between">
+                <div class="flex justify-between items-center">
+                    <a href="/" class="text-white text-xl font-bold md:text-2xl">
+                        Meraki <span class="text-blue-400">UI</span>
+                    </a>
+
+                    <button type="button" class="block text-white hover:text-gray-500 focus:text-gray-500 focus:outline-none md:hidden">
+                        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
+                            <path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
+                        </svg>
+                    </button>
+                </div>
+                <div class="flex flex-col hidden md:block md:items-center md:-mx-3">
+                    <a class="my-1 text-white text-sm font-normal hover:text-blue-400 md:mx-3 md:my-0" href="#">
+                        <svg class="h-6 w-6 inline fill-current" viewBox="0 0 30 30">
+                            <path d="M15 1.875C7.75195 1.875 1.875 7.9043 1.875 15.334C1.875 21.2812 5.63672 26.3203 10.8516 28.1016C10.9247 28.1175 10.9994 28.1253 11.0742 28.125C11.5605 28.125 11.748 27.7676 11.748 27.457C11.748 27.1348 11.7363 26.291 11.7305 25.166C11.2963 25.2678 10.8522 25.3209 10.4062 25.3242C7.88086 25.3242 7.30664 23.3613 7.30664 23.3613C6.70898 21.8086 5.84766 21.3926 5.84766 21.3926C4.70508 20.5898 5.8418 20.5664 5.92969 20.5664H5.93555C7.25391 20.6836 7.94531 21.9609 7.94531 21.9609C8.60156 23.1094 9.48047 23.4316 10.2656 23.4316C10.7848 23.4213 11.2959 23.3015 11.7656 23.0801C11.8828 22.2129 12.2227 21.6211 12.5977 21.2812C9.68555 20.9414 6.62109 19.7871 6.62109 14.6309C6.62109 13.1602 7.13086 11.959 7.96875 11.0215C7.83398 10.6816 7.38281 9.31055 8.09766 7.45898C8.19354 7.43604 8.29209 7.42619 8.39062 7.42969C8.86523 7.42969 9.9375 7.61133 11.707 8.8418C13.8572 8.24022 16.1311 8.24022 18.2812 8.8418C20.0508 7.61133 21.123 7.42969 21.5977 7.42969C21.6962 7.42619 21.7947 7.43604 21.8906 7.45898C22.6055 9.31055 22.1543 10.6816 22.0195 11.0215C22.8574 11.9648 23.3672 13.166 23.3672 14.6309C23.3672 19.7988 20.2969 20.9355 17.373 21.2695C17.8418 21.6855 18.2637 22.5059 18.2637 23.7598C18.2637 25.5586 18.2461 27.0117 18.2461 27.4512C18.2461 27.7676 18.4277 28.125 18.9141 28.125C18.9928 28.1253 19.0713 28.1175 19.1484 28.1016C24.3691 26.3203 28.125 21.2754 28.125 15.334C28.125 7.9043 22.248 1.875 15 1.875Z"/>
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <div class="bg-gray-900">
         <div class="container mx-auto px-6">
             <div class="md:flex md:h-96 py-16 md:py-0">
                 <div class="flex items-center w-full w-1/2">
@@ -22,4 +47,5 @@
             </div>
         </div>
     </div>
+</div>
 </template>
\ No newline at end of file
diff --git a/src/views/ViewComponet.vue b/src/views/ViewComponet.vue
index a7d933b..cabe43d 100644
--- a/src/views/ViewComponet.vue
+++ b/src/views/ViewComponet.vue
@@ -12,10 +12,8 @@
                         </svg>
                     </button>
                     <button v-clipboard:copy="code" class="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">
-                            <path d="M8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H15.9595C16.5118 13 16.9595 12.5523 16.9595 12C16.9595 11.4477 16.5118 11 15.9595 11H8Z"/>
-                            <path d="M8.04053 15.0665C7.48824 15.0665 7.04053 15.5142 7.04053 16.0665C7.04053 16.6188 7.48824 17.0665 8.04053 17.0665H16C16.5523 17.0665 17 16.6188 17 16.0665C17 15.5142 16.5523 15.0665 16 15.0665H8.04053Z"/>
-                            <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5ZM7 5H5L5 19H19V5H17V6C17 7.65685 15.6569 9 14 9H10C8.34315 9 7 7.65685 7 6V5ZM9 5V6C9 6.55228 9.44772 7 10 7H14C14.5523 7 15 6.55228 15 6V5H9Z"/>
+                        <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>
@@ -28,7 +26,7 @@
             </div>
         </div>
 
-        <div v-if="viewCode" class="flex justify-center items-center p-6">
+        <div v-if="viewCode">
             <code-snippet :code="code"></code-snippet>
         </div>
     </div>