diff --git a/src/components/categories/Alerts.vue b/src/components/categories/Alerts.vue
index 7f90ffe..47b1f91 100644
--- a/src/components/categories/Alerts.vue
+++ b/src/components/categories/Alerts.vue
@@ -7,6 +7,10 @@
         <warning-pop></warning-pop>
         <error-pop></error-pop>
         <notification-pop></notification-pop>
+        <success-full-width></success-full-width>
+        <info-full-width></info-full-width>
+        <warning-full-width></warning-full-width>
+        <error-full-width></error-full-width>
     </div>
 </template>
 
@@ -16,6 +20,10 @@ import InfoPop from "../ui/Alerts/InfoPop";
 import WarningPop from "../ui/Alerts/WarningPop";
 import ErrorPop from "../ui/Alerts/ErrorPop";
 import NotificationPop from "../ui/Alerts/NotificationPop";
+import SuccessFullWidth from "../ui/Alerts/SuccessFullWidth";
+import InfoFullWidth from "../ui/Alerts/InfoFullWidth";
+import WarningFullWidth from "../ui/Alerts/WarningFullWidth";
+import ErrorFullWidth from "../ui/Alerts/ErrorFullWidth";
 
 export default {
     components: { 
@@ -24,6 +32,10 @@ export default {
         WarningPop,
         ErrorPop,
         NotificationPop,
+        SuccessFullWidth,
+        InfoFullWidth,
+        WarningFullWidth,
+        ErrorFullWidth,
     },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/categories/Footers.vue b/src/components/categories/Footers.vue
index dad8544..78d32ac 100644
--- a/src/components/categories/Footers.vue
+++ b/src/components/categories/Footers.vue
@@ -3,17 +3,20 @@
         <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Footers</h1>
 
         <simple></simple>
+        <with-details></with-details>
         <with-subscribe-form></with-subscribe-form>
     </div>
 </template>
 
 <script>
 import Simple from "../ui/Footers/Simple";
+import WithDetails from "../ui/Footers/WithDetails";
 import WithSubscribeForm from "../ui/Footers/WithSubscribeForm";
 
 export default {
     components: { 
         Simple,
+        WithDetails,
         WithSubscribeForm,
     },
 };
diff --git a/src/components/categories/Navbars.vue b/src/components/categories/Navbars.vue
index b0e2cd1..b2b5225 100644
--- a/src/components/categories/Navbars.vue
+++ b/src/components/categories/Navbars.vue
@@ -2,20 +2,20 @@
     <div class="w-full max-w-5xl mx-auto my-10">
         <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Navbars</h1>
 
-        <simple></simple>
+        <e-commerce></e-commerce>
         <with-search></with-search>
         <with-avatar-and-alert-icon></with-avatar-and-alert-icon>
     </div>
 </template>
 
 <script>
-import Simple from "../ui/Navbars/Simple";
+import ECommerce from "../ui/Navbars/ECommerce";
 import WithSearch from "../ui/Navbars/WithSearch";
 import WithAvatarAndAlertIcon from "../ui/Navbars/WithAvatarAndAlertIcon";
 
 export default {
     components: { 
-        Simple,
+        ECommerce,
         WithSearch,
         WithAvatarAndAlertIcon,
     },
diff --git a/src/components/categories/Sections.vue b/src/components/categories/Sections.vue
index b00e6ff..e934c74 100644
--- a/src/components/categories/Sections.vue
+++ b/src/components/categories/Sections.vue
@@ -3,6 +3,7 @@
         <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Sections</h1>
 
         <about-me></about-me>
+        <feature></feature>
         <our-team></our-team>
         <paragraph-with-image></paragraph-with-image>
     </div>
@@ -10,12 +11,14 @@
 
 <script>
 import AboutMe from "../ui/Sections/AboutMe";
+import Feature from "../ui/Sections/Feature";
 import OurTeam from "../ui/Sections/OurTeam";
 import ParagraphWithImage from "../ui/Sections/ParagraphWithImage";
 
 export default {
     components: { 
         AboutMe,
+        Feature,
         OurTeam,
         ParagraphWithImage,
     },
diff --git a/src/components/ui/Alerts/ErrorFullWidth.vue b/src/components/ui/Alerts/ErrorFullWidth.vue
index 9e6f4d4..9e3a61a 100644
--- a/src/components/ui/Alerts/ErrorFullWidth.vue
+++ b/src/components/ui/Alerts/ErrorFullWidth.vue
@@ -1,10 +1,38 @@
 <template>
-    <div :id="name | toId">
+    <view-component :mark="true" :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <div class="w-full bg-red-500 text-white">
+                <div class="flex justify-between items-center container mx-auto py-4 px-6">
+                    <div class="flex">
+                        <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                            <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"></path>
+                        </svg>
+
+                        <p class="mx-3">Validation Error.</p>
+                    </div>
+
+                    <button class="rounded-md p-1 hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Error Full Width',
+                code: `
         <div class="w-full bg-red-500 text-white">
             <div class="flex justify-between items-center container mx-auto py-4 px-6">
                 <div class="flex">
                     <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
-                       <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"></path>
+                        <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"></path>
                     </svg>
 
                     <p class="mx-3">Validation Error.</p>
@@ -16,15 +44,7 @@
                     </svg>
                 </button>
             </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Error Full Width',
+        </div>`,
             }
         }
     }
diff --git a/src/components/ui/Alerts/InfoFullWidth.vue b/src/components/ui/Alerts/InfoFullWidth.vue
index 2c91faa..a585ca9 100644
--- a/src/components/ui/Alerts/InfoFullWidth.vue
+++ b/src/components/ui/Alerts/InfoFullWidth.vue
@@ -1,5 +1,33 @@
 <template>
-    <div :id="name | toId">
+    <view-component :mark="true" :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <div class="w-full bg-blue-500 text-white">
+                <div class="flex justify-between items-center container mx-auto py-4 px-6">
+                    <div class="flex">
+                        <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                            <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"></path>
+                        </svg>
+
+                        <p class="mx-3">Update your avatar.</p>
+                    </div>
+
+                    <button class="rounded-md p-1 hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Info Full Width',
+                code: `
         <div class="w-full bg-blue-500 text-white">
             <div class="flex justify-between items-center container mx-auto py-4 px-6">
                 <div class="flex">
@@ -16,15 +44,7 @@
                     </svg>
                 </button>
             </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Info Full Width',
+        </div>`
             }
         }
     }
diff --git a/src/components/ui/Alerts/SuccessFullWidth.vue b/src/components/ui/Alerts/SuccessFullWidth.vue
index 049f7f6..a6686c2 100644
--- a/src/components/ui/Alerts/SuccessFullWidth.vue
+++ b/src/components/ui/Alerts/SuccessFullWidth.vue
@@ -1,6 +1,33 @@
 <template>
-    <view-component :name="name">
-        <div slot="component">
+    <view-component :mark="true" :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <div class="w-full bg-green-500 text-white">
+                <div class="flex justify-between items-center container mx-auto py-4 px-6">
+                    <div class="flex">
+                        <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                            <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"></path>
+                        </svg>
+
+                        <p class="mx-3">You are finished the tasks.</p>
+                    </div>
+
+                    <button class="rounded-md p-1 hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Success Full Width',
+                code: `
         <div class="w-full bg-green-500 text-white">
             <div class="flex justify-between items-center container mx-auto py-4 px-6">
                 <div class="flex">
@@ -17,16 +44,7 @@
                     </svg>
                 </button>
             </div>
-        </div>
-        </div>
-    </view-component>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Success Full Width',
+        </div>`
             }
         }
     }
diff --git a/src/components/ui/Alerts/WarningFullWidth.vue b/src/components/ui/Alerts/WarningFullWidth.vue
index c07678d..fa62e8b 100644
--- a/src/components/ui/Alerts/WarningFullWidth.vue
+++ b/src/components/ui/Alerts/WarningFullWidth.vue
@@ -1,5 +1,33 @@
 <template>
-    <div :id="name | toId">
+    <view-component :mark="true" :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <div class="w-full bg-yellow-500 text-white">
+                <div class="flex justify-between items-center container mx-auto py-4 px-6">
+                    <div class="flex">
+                        <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                            <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"></path>
+                        </svg>
+
+                        <p class="mx-3">This version is not support.</p>
+                    </div>
+
+                    <button class="rounded-md p-1 hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Warning Full Width',
+                code: `
         <div class="w-full bg-yellow-500 text-white">
             <div class="flex justify-between items-center container mx-auto py-4 px-6">
                 <div class="flex">
@@ -16,15 +44,7 @@
                     </svg>
                 </button>
             </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Warning Full Width',
+        </div>`,
             }
         }
     }
diff --git a/src/components/ui/Footers/WithDetails.vue b/src/components/ui/Footers/WithDetails.vue
new file mode 100644
index 0000000..14411e8
--- /dev/null
+++ b/src/components/ui/Footers/WithDetails.vue
@@ -0,0 +1,161 @@
+<template>
+     <view-component :mark="true" :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <footer class="bg-gray-800">
+                <div class="container mx-auto px-6 py-4">
+                    <div class="lg:flex">
+                        <div class="w-full lg:w-2/5 -mx-6">
+                            <div class="px-6">
+                                <div>
+                                    <a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
+                                </div>
+                                
+                                <p class="mt-2 text-gray-400 max-w-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
+                                
+                                <div class="flex mt-4 -mx-2">
+                                    <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
+                                        <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                                            <path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
+                                        </svg>
+                                    </a>
+
+                                    <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook">
+                                        <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                                            <path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
+                                        </svg>
+                                    </a>
+
+                                    <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter">
+                                        <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                                            <path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
+                                        </svg>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="mt-6 lg:mt-0 lg:flex-1">
+                            <div class="grid gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                                <div>
+                                    <h3 class="text-gray-100 uppercase">About</h3>
+                                    <a href="#" class="block mt-2 text-sm text-gray-400">Company</a>
+                                    <a href="#" class="block mt-2 text-sm text-gray-400">community</a>
+                                    <a href="#" class="block mt-2 text-sm text-gray-400">Careers</a>
+                                </div>
+
+                                <div>
+                                    <h3 class="text-gray-100 uppercase">Blog</h3>
+                                    <a href="#" class="block mt-2 text-sm text-gray-400">Tec</a>
+                                    <a href="#" class="block mt-2 text-sm text-gray-400">Music</a>
+                                    <a href="#" class="block mt-2 text-sm text-gray-400">Videos</a>
+                                </div>
+
+                                <div>
+                                    <h3 class="text-gray-100 uppercase">Products</h3>
+                                    <a href="#" class="block mt-2 text-sm text-gray-400">Mega cloud</a>
+                                    <a href="#" class="block mt-2 text-sm text-gray-400">Aperion UI</a>
+                                    <a href="#" class="block mt-2 text-sm text-gray-400">Meraki UI</a>
+                                </div>
+
+                                <div>
+                                    <h3 class="text-gray-100 uppercase">Contact</h3>
+                                    <span class="block mt-2 text-sm text-gray-400">+1 526 654 8965</span>
+                                    <span class="block mt-2 text-sm text-gray-400">example@email.com</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <hr class="h-px my-6 bg-gray-700 border-none">
+
+                    <div>
+                        <p class="text-center text-gray-100">© Brand 2020 - All rights reserved</p>
+                    </div>
+                </div>
+            </footer>
+        </div>
+     </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'With Details',
+                code: `
+        <footer class="bg-gray-800">
+            <div class="container mx-auto px-6 py-4">
+                <div class="lg:flex">
+                    <div class="w-full lg:w-2/5 -mx-6">
+                        <div class="px-6">
+                            <div>
+                                <a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
+                            </div>
+                            
+                            <p class="mt-2 text-gray-400 max-w-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
+                            
+                            <div class="flex mt-4 -mx-2">
+                                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
+                                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                                        <path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
+                                    </svg>
+                                </a>
+
+                                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook">
+                                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                                        <path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
+                                    </svg>
+                                </a>
+
+                                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter">
+                                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                                        <path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="mt-6 lg:mt-0 lg:flex-1">
+                        <div class="grid gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                            <div>
+                                <h3 class="text-gray-100 uppercase">About</h3>
+                                <a href="#" class="block mt-2 text-sm text-gray-400">Company</a>
+                                <a href="#" class="block mt-2 text-sm text-gray-400">community</a>
+                                <a href="#" class="block mt-2 text-sm text-gray-400">Careers</a>
+                            </div>
+
+                            <div>
+                                <h3 class="text-gray-100 uppercase">Blog</h3>
+                                <a href="#" class="block mt-2 text-sm text-gray-400">Tec</a>
+                                <a href="#" class="block mt-2 text-sm text-gray-400">Music</a>
+                                <a href="#" class="block mt-2 text-sm text-gray-400">Videos</a>
+                            </div>
+
+                            <div>
+                                <h3 class="text-gray-100 uppercase">Products</h3>
+                                <a href="#" class="block mt-2 text-sm text-gray-400">Mega cloud</a>
+                                <a href="#" class="block mt-2 text-sm text-gray-400">Aperion UI</a>
+                                <a href="#" class="block mt-2 text-sm text-gray-400">Meraki UI</a>
+                            </div>
+
+                            <div>
+                                <h3 class="text-gray-100 uppercase">Contact</h3>
+                                <span class="block mt-2 text-sm text-gray-400">+1 526 654 8965</span>
+                                <span class="block mt-2 text-sm text-gray-400">example@email.com</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="h-px my-6 bg-gray-700 border-none">
+
+                <div>
+                    <p class="text-center text-gray-100">© Brand 2020 - All rights reserved</p>
+                </div>
+            </div>
+        </footer>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/ui/Navbars/ECommerce.vue b/src/components/ui/Navbars/ECommerce.vue
new file mode 100644
index 0000000..76ea81f
--- /dev/null
+++ b/src/components/ui/Navbars/ECommerce.vue
@@ -0,0 +1,90 @@
+<template>
+    <view-component :mark="true" :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <nav class="bg-white shadow">
+                <div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center">
+                    <div class="flex justify-between items-center">
+                        <div>
+                            <a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a>
+                        </div>
+
+                        <div class="flex md:hidden">
+                            <button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                    <path fill-rule="evenodd" 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"></path>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div :class="isOpen ? '' : 'hidden'" class="md:flex items-center">
+                        <div class="flex flex-col md:flex-row md:mx-6">
+                            <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Home</a>
+                            <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Shop</a>
+                            <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Contact</a>
+                            <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">About</a>
+                        </div>
+
+                        <div class="flex justify-center md:block">
+                            <a class="relative text-gray-700 hover:text-gray-600" href="#">
+                                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                </svg>
+
+                                <span class="absolute top-0 left-0 rounded-full bg-indigo-500 text-white p-1 text-xs"></span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'E-Commerce',
+                isOpen: false,
+                code: `
+        <nav class="bg-white shadow">
+            <div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a>
+                    </div>
+
+                    <div class="flex md:hidden">
+                        <button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                            <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                <path fill-rule="evenodd" 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"></path>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <div :class="isOpen ? '' : 'hidden'" class="md:flex items-center">
+                    <div class="flex flex-col md:flex-row md:mx-6">
+                        <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Home</a>
+                        <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Shop</a>
+                        <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Contact</a>
+                        <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">About</a>
+                    </div>
+
+                    <div class="flex justify-center md:block">
+                        <a class="relative text-gray-700 hover:text-gray-600" href="#">
+                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+
+                            <span class="absolute top-0 left-0 rounded-full bg-indigo-500 text-white p-1 text-xs"></span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </nav>`,
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/ui/Navbars/Simple.vue b/src/components/ui/Navbars/Simple.vue
deleted file mode 100644
index 3c0c9e2..0000000
--- a/src/components/ui/Navbars/Simple.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <view-component :name="name" :code="code">
-        <div class="py-6" slot="component">
-            <nav class="bg-white shadow">
-                <div class="container py-3 px-6 mx-auto">
-                    <div class="md:flex justify-between items-center">
-                        <div class="flex justify-between items-center">
-                            <div>
-                                <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
-                            </div>
-
-                            <!-- Mobile menu button -->
-                            <div class="flex md:hidden">
-                                <button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
-                                    <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
-                                        <path fill-rule="evenodd" 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"></path>
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                        <div :class="!isOpen ? 'hidden' : ''" class="flex flex-col mt-3 md:flex-row md:mt-0 md:block">
-                            <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Home</a>
-                            <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Contact</a>
-                            <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">About Us</a>
-                        </div>
-                    </div>
-                </div>
-            </nav>
-        </div>
-    </view-component>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Simple',
-                isOpen: false,
-                code: `
-        <nav class="bg-white shadow">
-            <div class="container py-3 px-6 mx-auto">
-                <div class="md:flex justify-between items-center">
-                    <div class="flex justify-between items-center">
-                        <div>
-                            <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
-                        </div>
-
-                        <!-- Mobile menu button -->
-                        <div class="flex md:hidden">
-                            <button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
-                                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
-                                    <path fill-rule="evenodd" 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"></path>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-
-                    <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                    <div class="flex flex-col mt-3 hidden md:flex-row md:mt-0 md:block">
-                        <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Home</a>
-                        <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Contact</a>
-                        <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">About Us</a>
-                    </div>
-                </div>
-            </div>
-        </nav>`,
-            }
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/src/components/ui/Navbars/WithSearch.vue b/src/components/ui/Navbars/WithSearch.vue
index e53e975..3dba558 100644
--- a/src/components/ui/Navbars/WithSearch.vue
+++ b/src/components/ui/Navbars/WithSearch.vue
@@ -21,9 +21,9 @@
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                     <div :class="!isOpen ? 'hidden' : ''" class="w-full md:flex md:items-center md:justify-between md:block">
                         <div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
-                            <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
-                            <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
-                            <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                            <a href="#" class="py-1 px-2 text-gray-700 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
+                            <a href="#" class="py-1 px-2 text-gray-700 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
+                            <a href="#" class="py-1 px-2 text-gray-700 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
                         </div>
                         
                         <div>
diff --git a/src/components/ui/Sections/Feature.vue b/src/components/ui/Sections/Feature.vue
new file mode 100644
index 0000000..77be8af
--- /dev/null
+++ b/src/components/ui/Sections/Feature.vue
@@ -0,0 +1,87 @@
+<template>
+    <view-component :mark="true" :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-white">
+                <div class="container mx-auto px-6 py-8">
+                    <div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+                        <div>
+                            <svg class="h-8 w-8" viewBox="0 0 30 30" fill="none">
+                                <path d="M29.6931 14.2283L22.7556 6.87823C22.3292 6.426 21.6175 6.40538 21.1652 6.83212C20.7137 7.25851 20.6927 7.9706 21.1195 8.42248L27.3284 15L21.1195 21.5783C20.6927 22.0302 20.7137 22.7419 21.1652 23.1687C21.3827 23.3738 21.6606 23.4754 21.9374 23.4754C22.2363 23.4754 22.5348 23.3569 22.7557 23.1233L29.6932 15.7729C30.1022 15.339 30.1023 14.6618 29.6931 14.2283Z" fill="#2D3748"/><path d="M8.88087 21.578L2.67236 15L8.88087 8.42215C9.30726 7.97028 9.28664 7.25812 8.83476 6.83179C8.38323 6.4054 7.67073 6.42603 7.2444 6.87791L0.306858 14.2279C-0.102245 14.6614 -0.102245 15.3391 0.306858 15.7726L7.24475 23.123C7.466 23.3574 7.76413 23.4755 8.06302 23.4755C8.33976 23.4755 8.61767 23.3735 8.83476 23.1684C9.28705 22.742 9.30726 22.0299 8.88087 21.578Z" fill="#2D3748"/><path d="M16.8201 3.08774C16.2062 2.99476 15.6317 3.41622 15.5379 4.03011L12.2379 25.6302C12.1441 26.2445 12.566 26.8186 13.1803 26.9124C13.238 26.921 13.295 26.9252 13.3516 26.9252C13.898 26.9252 14.3773 26.5266 14.4624 25.97L17.7624 4.3699C17.8562 3.7556 17.4343 3.1815 16.8201 3.08774Z" fill="#4299E1"/>
+                            </svg>
+            
+                            <h1 class="mt-4 font-semibold text-xl text-gray-800">Default Taiwindcss Config</h1>
+            
+                            <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
+                        </div>
+            
+                        <div>
+                            <svg class="h-8 w-8" viewBox="0 0 30 30" fill="none">
+                                <path d="M27.3633 7.08984H26.4844V6.21094C26.4844 4.75705 25.3015 3.57422 23.8477 3.57422H4.39453C2.94064 3.57422 1.75781 4.75705 1.75781 6.21094V21.1523H0.878906C0.393516 21.1523 0 21.5459 0 22.0312V23.7891C0 25.2429 1.18283 26.4258 2.63672 26.4258H27.3633C28.8172 26.4258 30 25.2429 30 23.7891V9.72656C30 8.27268 28.8172 7.08984 27.3633 7.08984ZM3.51562 6.21094C3.51562 5.72631 3.9099 5.33203 4.39453 5.33203H23.8477C24.3323 5.33203 24.7266 5.72631 24.7266 6.21094V7.08984H20.332C18.8781 7.08984 17.6953 8.27268 17.6953 9.72656V21.1523H3.51562V6.21094ZM1.75781 23.7891V22.9102H17.6953V23.7891C17.6953 24.0971 17.7489 24.3929 17.8465 24.668H2.63672C2.15209 24.668 1.75781 24.2737 1.75781 23.7891ZM28.2422 23.7891C28.2422 24.2737 27.8479 24.668 27.3633 24.668H20.332C19.8474 24.668 19.4531 24.2737 19.4531 23.7891V9.72656C19.4531 9.24193 19.8474 8.84766 20.332 8.84766H27.3633C27.8479 8.84766 28.2422 9.24193 28.2422 9.72656V23.7891Z" fill="#2D3748"/><path d="M24.7266 21.1523H22.9688C22.4834 21.1523 22.0898 21.5459 22.0898 22.0312C22.0898 22.5166 22.4834 22.9102 22.9688 22.9102H24.7266C25.212 22.9102 25.6055 22.5166 25.6055 22.0312C25.6055 21.5459 25.212 21.1523 24.7266 21.1523Z" fill="#4299E1"/><path d="M23.8477 12.3633C24.3331 12.3633 24.7266 11.9698 24.7266 11.4844C24.7266 10.999 24.3331 10.6055 23.8477 10.6055C23.3622 10.6055 22.9688 10.999 22.9688 11.4844C22.9688 11.9698 23.3622 12.3633 23.8477 12.3633Z" fill="#4299E1"/>
+                            </svg>    
+            
+                            <h1 class="mt-4 font-semibold text-xl text-gray-800">Fully Responsive Components</h1>
+                            
+                            <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
+                        </div>
+                        
+                        <div>
+                            <svg class="h-8 w-8" viewBox="0 0 30 30" fill="none">
+                                <g clip-path="url(#clip0)"><path d="M26.599 4.339a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM7.151 25.661a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM23.486 13.163a8.636 8.636 0 00-1.19-2.873l1.123-1.123-2.592-2.59L19.705 7.7a8.636 8.636 0 00-2.873-1.19V4.921h-3.664v1.586a8.634 8.634 0 00-2.873 1.19l-1.122-1.12-2.592 2.589 1.123 1.123a8.636 8.636 0 00-1.19 2.873H4.922l-.002 3.663h1.592A8.626 8.626 0 007.704 19.7l-1.127 1.127 2.59 2.591 1.128-1.127a8.623 8.623 0 002.873 1.19v1.597h3.664v-1.597a8.628 8.628 0 002.873-1.19l1.128 1.128 2.59-2.592-1.127-1.127a8.627 8.627 0 001.19-2.873h1.593v-3.664h-1.593zM15 19.256a4.255 4.255 0 110-8.511 4.255 4.255 0 010 8.51z" fill="#4299E1"/><path d="M5.276 23.2c-.42 0-.823.105-1.182.302A13.853 13.853 0 011.172 15C1.172 7.375 7.375 1.172 15 1.172c.927 0 1.854.092 2.754.274a.586.586 0 00.232-1.149A15.111 15.111 0 0015 0C10.993 0 7.226 1.56 4.393 4.393A14.902 14.902 0 000 15c0 3.37 1.144 6.66 3.228 9.296-.268.4-.413.872-.413 1.365 0 .657.257 1.275.721 1.74a2.444 2.444 0 001.74.721c.658 0 1.276-.256 1.74-.721.465-.465.721-1.083.721-1.74s-.256-1.276-.72-1.74a2.445 2.445 0 00-1.74-.72zm.912 3.373a1.28 1.28 0 01-.912.377 1.28 1.28 0 01-.911-.377 1.28 1.28 0 01-.378-.912c0-.344.134-.668.378-.912a1.28 1.28 0 01.911-.377c.345 0 .668.134.912.378.243.243.377.567.377.911 0 .344-.134.668-.377.912zM26.772 5.703a2.465 2.465 0 00-.308-3.104 2.446 2.446 0 00-1.74-.721c-.658 0-1.276.256-1.74.72a2.445 2.445 0 00-.721 1.74c0 .658.256 1.276.72 1.741.465.465 1.083.72 1.74.72.42 0 .824-.104 1.183-.3A13.854 13.854 0 0128.828 15c0 7.625-6.203 13.828-13.828 13.828-.918 0-1.836-.09-2.728-.269a.586.586 0 00-.23 1.15c.968.193 1.963.291 2.958.291 4.007 0 7.773-1.56 10.607-4.393A14.902 14.902 0 0030 15c0-3.37-1.145-6.66-3.228-9.297zm-2.96-.452a1.28 1.28 0 01-.377-.912c0-.344.134-.668.377-.911a1.28 1.28 0 01.912-.378 1.29 1.29 0 010 2.578 1.28 1.28 0 01-.912-.377z" fill="#2D3748"/><path d="M12.582 25.078c0 .324.263.586.586.586h3.664a.586.586 0 00.586-.586v-1.136a9.179 9.179 0 002.199-.911l.802.802a.586.586 0 00.829 0l2.59-2.592a.586.586 0 000-.828l-.802-.802a9.169 9.169 0 00.911-2.199h1.132a.586.586 0 00.586-.585v-3.664a.586.586 0 00-.586-.586h-1.132a9.17 9.17 0 00-.911-2.199l.797-.797a.587.587 0 000-.829l-2.592-2.59a.586.586 0 00-.829 0l-.795.797a9.177 9.177 0 00-2.2-.912V4.922a.586.586 0 00-.585-.586h-3.664a.586.586 0 00-.586.586v1.126a9.169 9.169 0 00-2.199.91l-.796-.795a.586.586 0 00-.828 0l-2.592 2.59a.585.585 0 000 .828l.797.797a9.173 9.173 0 00-.911 2.199h-1.13a.586.586 0 00-.586.585l-.002 3.664a.585.585 0 00.586.586h1.132c.207.77.512 1.507.911 2.2l-.801.8a.586.586 0 000 .83l2.59 2.59a.586.586 0 00.829 0l.801-.801a9.185 9.185 0 002.2.911v1.136zm-1.97-3.28a.586.586 0 00-.732.078l-.713.714-1.761-1.763.712-.713a.586.586 0 00.078-.732 8.02 8.02 0 01-1.11-2.679.586.586 0 00-.572-.462H5.507l.002-2.492h1.005a.586.586 0 00.572-.463 8.022 8.022 0 011.11-2.678.586.586 0 00-.078-.733l-.708-.708 1.763-1.761.707.707c.196.196.5.228.733.078a8.016 8.016 0 012.678-1.11.586.586 0 00.463-.573v-1h2.492v1c0 .277.193.515.463.573a8.024 8.024 0 012.678 1.11c.232.15.537.118.732-.078l.708-.707 1.762 1.761-.708.708a.586.586 0 00-.078.732 8.027 8.027 0 011.11 2.679c.058.27.297.463.573.463h1.007v2.492h-1.007a.586.586 0 00-.573.462 8.02 8.02 0 01-1.11 2.679.586.586 0 00.078.732l.713.713-1.761 1.762-.714-.713a.586.586 0 00-.732-.078 8.027 8.027 0 01-2.678 1.11.586.586 0 00-.463.573v1.011h-2.492v-1.01a.586.586 0 00-.463-.574 8.021 8.021 0 01-2.678-1.11z" fill="#2D3748"/><path d="M19.841 15A4.847 4.847 0 0015 10.158 4.847 4.847 0 0010.158 15 4.847 4.847 0 0015 19.841 4.847 4.847 0 0019.841 15zm-8.51 0A3.674 3.674 0 0115 11.33 3.674 3.674 0 0118.67 15 3.674 3.674 0 0115 18.67 3.674 3.674 0 0111.33 15z" fill="#2D3748"/><path d="M20.395 2.216a.59.59 0 00.415-.172.593.593 0 00.171-.415.59.59 0 00-.586-.586.589.589 0 00-.586.586.589.589 0 00.586.587zM9.63 27.794a.59.59 0 00-.586.586.59.59 0 00.586.586.59.59 0 00.586-.586.59.59 0 00-.586-.585z" fill="#4299E1"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h30v30H0z"/></clipPath></defs>
+                            </svg>
+                        
+                            <h1 class="mt-4 font-semibold text-xl text-gray-800">RTL Languages Support</h1>
+                        
+                            <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Feature',
+                code:  `
+        <section class="bg-white">
+            <div class="container mx-auto px-6 py-8">
+                <div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+                    <div>
+                        <svg class="h-8 w-8" viewBox="0 0 30 30" fill="none">
+                            <path d="M29.6931 14.2283L22.7556 6.87823C22.3292 6.426 21.6175 6.40538 21.1652 6.83212C20.7137 7.25851 20.6927 7.9706 21.1195 8.42248L27.3284 15L21.1195 21.5783C20.6927 22.0302 20.7137 22.7419 21.1652 23.1687C21.3827 23.3738 21.6606 23.4754 21.9374 23.4754C22.2363 23.4754 22.5348 23.3569 22.7557 23.1233L29.6932 15.7729C30.1022 15.339 30.1023 14.6618 29.6931 14.2283Z" fill="#2D3748"/><path d="M8.88087 21.578L2.67236 15L8.88087 8.42215C9.30726 7.97028 9.28664 7.25812 8.83476 6.83179C8.38323 6.4054 7.67073 6.42603 7.2444 6.87791L0.306858 14.2279C-0.102245 14.6614 -0.102245 15.3391 0.306858 15.7726L7.24475 23.123C7.466 23.3574 7.76413 23.4755 8.06302 23.4755C8.33976 23.4755 8.61767 23.3735 8.83476 23.1684C9.28705 22.742 9.30726 22.0299 8.88087 21.578Z" fill="#2D3748"/><path d="M16.8201 3.08774C16.2062 2.99476 15.6317 3.41622 15.5379 4.03011L12.2379 25.6302C12.1441 26.2445 12.566 26.8186 13.1803 26.9124C13.238 26.921 13.295 26.9252 13.3516 26.9252C13.898 26.9252 14.3773 26.5266 14.4624 25.97L17.7624 4.3699C17.8562 3.7556 17.4343 3.1815 16.8201 3.08774Z" fill="#4299E1"/>
+                        </svg>
+        
+                        <h1 class="mt-4 font-semibold text-xl text-gray-800">Default Taiwindcss Config</h1>
+        
+                        <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
+                    </div>
+        
+                    <div>
+                        <svg class="h-8 w-8" viewBox="0 0 30 30" fill="none">
+                            <path d="M27.3633 7.08984H26.4844V6.21094C26.4844 4.75705 25.3015 3.57422 23.8477 3.57422H4.39453C2.94064 3.57422 1.75781 4.75705 1.75781 6.21094V21.1523H0.878906C0.393516 21.1523 0 21.5459 0 22.0312V23.7891C0 25.2429 1.18283 26.4258 2.63672 26.4258H27.3633C28.8172 26.4258 30 25.2429 30 23.7891V9.72656C30 8.27268 28.8172 7.08984 27.3633 7.08984ZM3.51562 6.21094C3.51562 5.72631 3.9099 5.33203 4.39453 5.33203H23.8477C24.3323 5.33203 24.7266 5.72631 24.7266 6.21094V7.08984H20.332C18.8781 7.08984 17.6953 8.27268 17.6953 9.72656V21.1523H3.51562V6.21094ZM1.75781 23.7891V22.9102H17.6953V23.7891C17.6953 24.0971 17.7489 24.3929 17.8465 24.668H2.63672C2.15209 24.668 1.75781 24.2737 1.75781 23.7891ZM28.2422 23.7891C28.2422 24.2737 27.8479 24.668 27.3633 24.668H20.332C19.8474 24.668 19.4531 24.2737 19.4531 23.7891V9.72656C19.4531 9.24193 19.8474 8.84766 20.332 8.84766H27.3633C27.8479 8.84766 28.2422 9.24193 28.2422 9.72656V23.7891Z" fill="#2D3748"/><path d="M24.7266 21.1523H22.9688C22.4834 21.1523 22.0898 21.5459 22.0898 22.0312C22.0898 22.5166 22.4834 22.9102 22.9688 22.9102H24.7266C25.212 22.9102 25.6055 22.5166 25.6055 22.0312C25.6055 21.5459 25.212 21.1523 24.7266 21.1523Z" fill="#4299E1"/><path d="M23.8477 12.3633C24.3331 12.3633 24.7266 11.9698 24.7266 11.4844C24.7266 10.999 24.3331 10.6055 23.8477 10.6055C23.3622 10.6055 22.9688 10.999 22.9688 11.4844C22.9688 11.9698 23.3622 12.3633 23.8477 12.3633Z" fill="#4299E1"/>
+                        </svg>    
+        
+                        <h1 class="mt-4 font-semibold text-xl text-gray-800">Fully Responsive Components</h1>
+                        
+                        <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
+                    </div>
+                    
+                    <div>
+                        <svg class="h-8 w-8" viewBox="0 0 30 30" fill="none">
+                            <g clip-path="url(#clip0)"><path d="M26.599 4.339a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM7.151 25.661a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM23.486 13.163a8.636 8.636 0 00-1.19-2.873l1.123-1.123-2.592-2.59L19.705 7.7a8.636 8.636 0 00-2.873-1.19V4.921h-3.664v1.586a8.634 8.634 0 00-2.873 1.19l-1.122-1.12-2.592 2.589 1.123 1.123a8.636 8.636 0 00-1.19 2.873H4.922l-.002 3.663h1.592A8.626 8.626 0 007.704 19.7l-1.127 1.127 2.59 2.591 1.128-1.127a8.623 8.623 0 002.873 1.19v1.597h3.664v-1.597a8.628 8.628 0 002.873-1.19l1.128 1.128 2.59-2.592-1.127-1.127a8.627 8.627 0 001.19-2.873h1.593v-3.664h-1.593zM15 19.256a4.255 4.255 0 110-8.511 4.255 4.255 0 010 8.51z" fill="#4299E1"/><path d="M5.276 23.2c-.42 0-.823.105-1.182.302A13.853 13.853 0 011.172 15C1.172 7.375 7.375 1.172 15 1.172c.927 0 1.854.092 2.754.274a.586.586 0 00.232-1.149A15.111 15.111 0 0015 0C10.993 0 7.226 1.56 4.393 4.393A14.902 14.902 0 000 15c0 3.37 1.144 6.66 3.228 9.296-.268.4-.413.872-.413 1.365 0 .657.257 1.275.721 1.74a2.444 2.444 0 001.74.721c.658 0 1.276-.256 1.74-.721.465-.465.721-1.083.721-1.74s-.256-1.276-.72-1.74a2.445 2.445 0 00-1.74-.72zm.912 3.373a1.28 1.28 0 01-.912.377 1.28 1.28 0 01-.911-.377 1.28 1.28 0 01-.378-.912c0-.344.134-.668.378-.912a1.28 1.28 0 01.911-.377c.345 0 .668.134.912.378.243.243.377.567.377.911 0 .344-.134.668-.377.912zM26.772 5.703a2.465 2.465 0 00-.308-3.104 2.446 2.446 0 00-1.74-.721c-.658 0-1.276.256-1.74.72a2.445 2.445 0 00-.721 1.74c0 .658.256 1.276.72 1.741.465.465 1.083.72 1.74.72.42 0 .824-.104 1.183-.3A13.854 13.854 0 0128.828 15c0 7.625-6.203 13.828-13.828 13.828-.918 0-1.836-.09-2.728-.269a.586.586 0 00-.23 1.15c.968.193 1.963.291 2.958.291 4.007 0 7.773-1.56 10.607-4.393A14.902 14.902 0 0030 15c0-3.37-1.145-6.66-3.228-9.297zm-2.96-.452a1.28 1.28 0 01-.377-.912c0-.344.134-.668.377-.911a1.28 1.28 0 01.912-.378 1.29 1.29 0 010 2.578 1.28 1.28 0 01-.912-.377z" fill="#2D3748"/><path d="M12.582 25.078c0 .324.263.586.586.586h3.664a.586.586 0 00.586-.586v-1.136a9.179 9.179 0 002.199-.911l.802.802a.586.586 0 00.829 0l2.59-2.592a.586.586 0 000-.828l-.802-.802a9.169 9.169 0 00.911-2.199h1.132a.586.586 0 00.586-.585v-3.664a.586.586 0 00-.586-.586h-1.132a9.17 9.17 0 00-.911-2.199l.797-.797a.587.587 0 000-.829l-2.592-2.59a.586.586 0 00-.829 0l-.795.797a9.177 9.177 0 00-2.2-.912V4.922a.586.586 0 00-.585-.586h-3.664a.586.586 0 00-.586.586v1.126a9.169 9.169 0 00-2.199.91l-.796-.795a.586.586 0 00-.828 0l-2.592 2.59a.585.585 0 000 .828l.797.797a9.173 9.173 0 00-.911 2.199h-1.13a.586.586 0 00-.586.585l-.002 3.664a.585.585 0 00.586.586h1.132c.207.77.512 1.507.911 2.2l-.801.8a.586.586 0 000 .83l2.59 2.59a.586.586 0 00.829 0l.801-.801a9.185 9.185 0 002.2.911v1.136zm-1.97-3.28a.586.586 0 00-.732.078l-.713.714-1.761-1.763.712-.713a.586.586 0 00.078-.732 8.02 8.02 0 01-1.11-2.679.586.586 0 00-.572-.462H5.507l.002-2.492h1.005a.586.586 0 00.572-.463 8.022 8.022 0 011.11-2.678.586.586 0 00-.078-.733l-.708-.708 1.763-1.761.707.707c.196.196.5.228.733.078a8.016 8.016 0 012.678-1.11.586.586 0 00.463-.573v-1h2.492v1c0 .277.193.515.463.573a8.024 8.024 0 012.678 1.11c.232.15.537.118.732-.078l.708-.707 1.762 1.761-.708.708a.586.586 0 00-.078.732 8.027 8.027 0 011.11 2.679c.058.27.297.463.573.463h1.007v2.492h-1.007a.586.586 0 00-.573.462 8.02 8.02 0 01-1.11 2.679.586.586 0 00.078.732l.713.713-1.761 1.762-.714-.713a.586.586 0 00-.732-.078 8.027 8.027 0 01-2.678 1.11.586.586 0 00-.463.573v1.011h-2.492v-1.01a.586.586 0 00-.463-.574 8.021 8.021 0 01-2.678-1.11z" fill="#2D3748"/><path d="M19.841 15A4.847 4.847 0 0015 10.158 4.847 4.847 0 0010.158 15 4.847 4.847 0 0015 19.841 4.847 4.847 0 0019.841 15zm-8.51 0A3.674 3.674 0 0115 11.33 3.674 3.674 0 0118.67 15 3.674 3.674 0 0115 18.67 3.674 3.674 0 0111.33 15z" fill="#2D3748"/><path d="M20.395 2.216a.59.59 0 00.415-.172.593.593 0 00.171-.415.59.59 0 00-.586-.586.589.589 0 00-.586.586.589.589 0 00.586.587zM9.63 27.794a.59.59 0 00-.586.586.59.59 0 00.586.586.59.59 0 00.586-.586.59.59 0 00-.586-.585z" fill="#4299E1"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h30v30H0z"/></clipPath></defs>
+                        </svg>
+                    
+                        <h1 class="mt-4 font-semibold text-xl text-gray-800">RTL Languages Support</h1>
+                    
+                        <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
+                    </div>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/utilities/ViewComponent.vue b/src/components/utilities/ViewComponent.vue
index 4ebac01..c1794c7 100644
--- a/src/components/utilities/ViewComponent.vue
+++ b/src/components/utilities/ViewComponent.vue
@@ -2,7 +2,11 @@
     <div class="bg-gray-300 border rounded-md overflow-hidden mb-12">
         <div class="bg-white px-4 py-2 border-b">
             <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="text-gray-700 font-medium capitalize md:text-lg">{{ name }}</div>
+                <div class="flex items-center">
+                    <h3 class="text-gray-700 font-medium capitalize md:text-lg">{{ name }}</h3>
+
+                    <span v-if="mark" class="mx-4 px-2 text-xs rounded-full bg-green-300 text-green-600">New</span>
+                </div>
 
                 <div class="mt-4 md:mt-0">
                     <button @click="rtl =! rtl" class="rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'" aria-label="Rtl">
@@ -56,7 +60,7 @@
 import CodeSnippet from "./CodeSnippet";
 
 export default {
-    props: ['name' , 'code'],
+    props: ['name' , 'code' , 'mark'],
 
     components: {
         CodeSnippet