From 8b543359f078034628175fa4f483ca92797b1529 Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Sun, 7 Feb 2021 17:48:55 +0200
Subject: [PATCH] Add transition colors

---
 src/components/ui/Alerts/ErrorFullWidth.vue   |  20 +--
 src/components/ui/Alerts/InfoFullWidth.vue    |  20 +--
 src/components/ui/Alerts/SuccessFullWidth.vue |  20 +--
 src/components/ui/Alerts/WarningFullWidth.vue |  20 +--
 .../ui/Authentication/LoginWithSideImage.vue  |  84 ++++-----
 .../ui/Authentication/SimpleLogin.vue         |  56 +++---
 src/components/ui/Buttons/Primary.vue         |   6 +-
 src/components/ui/Buttons/WithIcon.vue        |  10 +-
 src/components/ui/Buttons/WithMenu.vue        |  26 +--
 src/components/ui/Cards/Article.vue           |  32 ++--
 src/components/ui/Cards/Product.vue           |  24 +--
 .../ui/Cards/ProductWithEvaluation.vue        |  48 +++---
 src/components/ui/Cards/SimpleProduct.vue     |  28 +--
 src/components/ui/Dropdowns/Notification.vue  |  66 ++++----
 src/components/ui/Dropdowns/Simple.vue        |  34 ++--
 .../ui/Footers/WithSubscribeForm.vue          |  40 ++---
 src/components/ui/Forms/Contact.vue           |  84 ++++-----
 src/components/ui/Forms/Newsletter.vue        |  28 +--
 src/components/ui/Forms/Simple.vue            |  32 ++--
 src/components/ui/Forms/SimpleNewsletter.vue  |  16 +-
 src/components/ui/Heros/ECommerce.vue         |  64 +++----
 src/components/ui/Heros/WithBGImage.vue       |  52 +++---
 src/components/ui/Heros/WithImage.vue         |  84 ++++-----
 src/components/ui/Heros/WithPattern.vue       |  56 +++---
 src/components/ui/Heros/WithSideImage.vue     |  52 +++---
 src/components/ui/Navbars/WithAvatar.vue      |  60 +++----
 src/components/ui/Navbars/WithCategories.vue  | 160 +++++++++---------
 src/components/ui/Navbars/WithSearch.vue      |  48 +++---
 src/components/ui/Paginations/Simple.vue      |  24 +--
 .../ui/Sections/ParagraphWithImage.vue        |  12 +-
 src/components/ui/Sidebars/WithAvatar.vue     |  52 +++---
 src/components/ui/Sidebars/WithSearch.vue     |  76 ++++-----
 32 files changed, 717 insertions(+), 717 deletions(-)

diff --git a/src/components/ui/Alerts/ErrorFullWidth.vue b/src/components/ui/Alerts/ErrorFullWidth.vue
index 32cc1de..c7c870e 100644
--- a/src/components/ui/Alerts/ErrorFullWidth.vue
+++ b/src/components/ui/Alerts/ErrorFullWidth.vue
@@ -1,18 +1,18 @@
 <template>
     <view-component :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="w-full text-white bg-red-500">
+                <div class="container flex items-center justify-between px-6 py-4 mx-auto">
                     <div class="flex">
-                        <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                        <svg viewBox="0 0 40 40" class="w-6 h-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">
+                    <button class="p-1 transition-colors duration-200 transform rounded-md hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                        <svg class="w-5 h-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>
@@ -28,18 +28,18 @@
             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="w-full text-white bg-red-500">
+            <div class="container flex items-center justify-between px-6 py-4 mx-auto">
                 <div class="flex">
-                    <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                    <svg viewBox="0 0 40 40" class="w-6 h-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">
+                <button class="p-1 transition-colors duration-200 transform rounded-md hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                    <svg class="w-5 h-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>
diff --git a/src/components/ui/Alerts/InfoFullWidth.vue b/src/components/ui/Alerts/InfoFullWidth.vue
index 6d5d8d2..d08e95f 100644
--- a/src/components/ui/Alerts/InfoFullWidth.vue
+++ b/src/components/ui/Alerts/InfoFullWidth.vue
@@ -1,18 +1,18 @@
 <template>
     <view-component :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="w-full text-white bg-blue-500">
+                <div class="container flex items-center justify-between px-6 py-4 mx-auto">
                     <div class="flex">
-                        <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                        <svg viewBox="0 0 40 40" class="w-6 h-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">
+                    <button class="p-1 transition-colors duration-200 transform rounded-md hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                        <svg class="w-5 h-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>
@@ -28,18 +28,18 @@
             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="w-full text-white bg-blue-500">
+            <div class="container flex items-center justify-between px-6 py-4 mx-auto">
                 <div class="flex">
-                    <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                    <svg viewBox="0 0 40 40" class="w-6 h-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">
+                <button class="p-1 transition-colors duration-200 transform rounded-md hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                    <svg class="w-5 h-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>
diff --git a/src/components/ui/Alerts/SuccessFullWidth.vue b/src/components/ui/Alerts/SuccessFullWidth.vue
index 7fa6cd8..8d61b6f 100644
--- a/src/components/ui/Alerts/SuccessFullWidth.vue
+++ b/src/components/ui/Alerts/SuccessFullWidth.vue
@@ -1,18 +1,18 @@
 <template>
     <view-component :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="w-full text-white bg-green-500">
+                <div class="container flex items-center justify-between px-6 py-4 mx-auto">
                     <div class="flex">
-                        <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                        <svg viewBox="0 0 40 40" class="w-6 h-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 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">
+                    <button class="p-1 transition-colors duration-200 transform rounded-md hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                        <svg class="w-5 h-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>
@@ -28,18 +28,18 @@
             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="w-full text-white bg-green-500">
+            <div class="container flex items-center justify-between px-6 py-4 mx-auto">
                 <div class="flex">
-                    <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                    <svg viewBox="0 0 40 40" class="w-6 h-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 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">
+                <button class="p-1 transition-colors duration-200 transform rounded-md hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                    <svg class="w-5 h-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>
diff --git a/src/components/ui/Alerts/WarningFullWidth.vue b/src/components/ui/Alerts/WarningFullWidth.vue
index 37ff0e0..5404b45 100644
--- a/src/components/ui/Alerts/WarningFullWidth.vue
+++ b/src/components/ui/Alerts/WarningFullWidth.vue
@@ -1,18 +1,18 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <div class="w-full bg-yellow-400 text-white">
-                <div class="flex justify-between items-center container mx-auto py-4 px-6">
+            <div class="w-full text-white bg-yellow-400">
+                <div class="container flex items-center justify-between px-6 py-4 mx-auto">
                     <div class="flex">
-                        <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                        <svg viewBox="0 0 40 40" class="w-6 h-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 supported.</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">
+                    <button class="p-1 transition-colors duration-200 transform rounded-md hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                        <svg class="w-5 h-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>
@@ -28,18 +28,18 @@
             return {
                 name: 'Warning Full Width',
                 code: `
-        <div class="w-full bg-yellow-400 text-white">
-            <div class="flex justify-between items-center container mx-auto py-4 px-6">
+        <div class="w-full text-white bg-yellow-400">
+            <div class="container flex items-center justify-between px-6 py-4 mx-auto">
                 <div class="flex">
-                    <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                    <svg viewBox="0 0 40 40" class="w-6 h-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 supported.</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">
+                <button class="p-1 transition-colors duration-200 transform rounded-md hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                    <svg class="w-5 h-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>
diff --git a/src/components/ui/Authentication/LoginWithSideImage.vue b/src/components/ui/Authentication/LoginWithSideImage.vue
index 0731094..2ae6f97 100644
--- a/src/components/ui/Authentication/LoginWithSideImage.vue
+++ b/src/components/ui/Authentication/LoginWithSideImage.vue
@@ -1,17 +1,17 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
-                <div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1606660265514-358ebbadc80d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1575&q=80')"></div>
+            <div class="flex max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800 lg:max-w-4xl">
+                <div class="hidden bg-cover lg:block lg:w-1/2" style="background-image:url('https://images.unsplash.com/photo-1606660265514-358ebbadc80d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1575&q=80')"></div>
                 
-                <div class="w-full py-8 px-6 md:px-8 lg:w-1/2">
-                    <h2 class="text-2xl font-semibold text-gray-700 dark:text-white text-center">Brand</h2>
+                <div class="w-full px-6 py-8 md:px-8 lg:w-1/2">
+                    <h2 class="text-2xl font-semibold text-center text-gray-700 dark:text-white">Brand</h2>
 
-                    <p class="text-xl text-gray-600 dark:text-gray-200 text-center">Welcome back!</p>
+                    <p class="text-xl text-center text-gray-600 dark:text-gray-200">Welcome back!</p>
 
-                    <a href="#" class="flex items-center justify-center mt-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:hover:bg-gray-600">
+                    <a href="#" class="flex items-center justify-center mt-4 text-gray-600 rounded-lg shadow-md dark:bg-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                         <div class="px-4 py-3">
-                            <svg class="h-6 w-6" viewBox="0 0 40 40">
+                            <svg class="w-6 h-6" viewBox="0 0 40 40">
                                 <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#FFC107"/>
                                 <path d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z" fill="#FF3D00"/>
                                 <path d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z" fill="#4CAF50"/>
@@ -19,43 +19,43 @@
                             </svg>
                         </div>
 
-                        <span class="px-4 py-3 w-5/6 text-center font-bold">Sign in with Google</span>
+                        <span class="w-5/6 px-4 py-3 font-bold text-center">Sign in with Google</span>
                     </a>
 
-                    <div class="mt-4 flex items-center justify-between">
-                        <span class="border-b dark:border-gray-600 w-1/5 lg:w-1/4"></span>
+                    <div class="flex items-center justify-between mt-4">
+                        <span class="w-1/5 border-b dark:border-gray-600 lg:w-1/4"></span>
 
-                        <a href="#" class="text-xs text-center text-gray-500 dark:text-gray-400 uppercase hover:underline">or login with email</a>
+                        <a href="#" class="text-xs text-center text-gray-500 uppercase dark:text-gray-400 hover:underline">or login with email</a>
 
-                        <span class="border-b dark:border-gray-400 w-1/5 lg:w-1/4"></span>
+                        <span class="w-1/5 border-b dark:border-gray-400 lg:w-1/4"></span>
                     </div>
 
                     <div class="mt-4">
-                        <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label>
-                        <input id="LoggingEmailAddress" class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
+                        <label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200" for="LoggingEmailAddress">Email Address</label>
+                        <input id="LoggingEmailAddress" class="block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
                     </div>
 
                     <div class="mt-4">
                         <div class="flex justify-between">
-                            <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2" for="loggingPassword">Password</label>
+                            <label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200" for="loggingPassword">Password</label>
                             <a href="#" class="text-xs text-gray-500 dark:text-gray-300 hover:underline">Forget Password?</a>
                         </div>
 
-                        <input id="loggingPassword" class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password">
+                        <input id="loggingPassword" class="block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password">
                     </div>
 
                     <div class="mt-8">
-                        <button class="bg-gray-700 text-white py-2 px-4 w-full tracking-wide rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
+                        <button class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
                             Login
                         </button>
                     </div>
                     
-                    <div class="mt-4 flex items-center justify-between">
-                        <span class="border-b dark:border-gray-600 w-1/5 md:w-1/4"></span>
+                    <div class="flex items-center justify-between mt-4">
+                        <span class="w-1/5 border-b dark:border-gray-600 md:w-1/4"></span>
 
-                        <a href="#" class="text-xs text-gray-500 dark:text-gray-400 uppercase hover:underline">or sign up</a>
+                        <a href="#" class="text-xs text-gray-500 uppercase dark:text-gray-400 hover:underline">or sign up</a>
                         
-                        <span class="border-b dark:border-gray-600 w-1/5 md:w-1/4"></span>
+                        <span class="w-1/5 border-b dark:border-gray-600 md:w-1/4"></span>
                     </div>
                 </div>
             </div>
@@ -69,17 +69,17 @@
             return {
                 name: 'Login With Side Image',
                 code: `
-        <div class="flex max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
-            <div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1606660265514-358ebbadc80d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1575&q=80')"></div>
+        <div class="flex max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800 lg:max-w-4xl">
+            <div class="hidden bg-cover lg:block lg:w-1/2" style="background-image:url('https://images.unsplash.com/photo-1606660265514-358ebbadc80d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1575&q=80')"></div>
             
-            <div class="w-full py-8 px-6 md:px-8 lg:w-1/2">
-                <h2 class="text-2xl font-semibold text-gray-700 dark:text-white text-center">Brand</h2>
+            <div class="w-full px-6 py-8 md:px-8 lg:w-1/2">
+                <h2 class="text-2xl font-semibold text-center text-gray-700 dark:text-white">Brand</h2>
 
-                <p class="text-xl text-gray-600 dark:text-gray-200 text-center">Welcome back!</p>
+                <p class="text-xl text-center text-gray-600 dark:text-gray-200">Welcome back!</p>
 
-                <a href="#" class="flex items-center justify-center mt-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:hover:bg-gray-600">
+                <a href="#" class="flex items-center justify-center mt-4 text-gray-600 rounded-lg shadow-md dark:bg-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
                     <div class="px-4 py-3">
-                        <svg class="h-6 w-6" viewBox="0 0 40 40">
+                        <svg class="w-6 h-6" viewBox="0 0 40 40">
                             <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#FFC107"/>
                             <path d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z" fill="#FF3D00"/>
                             <path d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z" fill="#4CAF50"/>
@@ -87,43 +87,43 @@
                         </svg>
                     </div>
 
-                    <span class="px-4 py-3 w-5/6 text-center font-bold">Sign in with Google</span>
+                    <span class="w-5/6 px-4 py-3 font-bold text-center">Sign in with Google</span>
                 </a>
 
-                <div class="mt-4 flex items-center justify-between">
-                    <span class="border-b dark:border-gray-600 w-1/5 lg:w-1/4"></span>
+                <div class="flex items-center justify-between mt-4">
+                    <span class="w-1/5 border-b dark:border-gray-600 lg:w-1/4"></span>
 
-                    <a href="#" class="text-xs text-center text-gray-500 dark:text-gray-400 uppercase hover:underline">or login with email</a>
+                    <a href="#" class="text-xs text-center text-gray-500 uppercase dark:text-gray-400 hover:underline">or login with email</a>
 
-                    <span class="border-b dark:border-gray-400 w-1/5 lg:w-1/4"></span>
+                    <span class="w-1/5 border-b dark:border-gray-400 lg:w-1/4"></span>
                 </div>
 
                 <div class="mt-4">
-                    <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label>
-                    <input id="LoggingEmailAddress" class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
+                    <label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200" for="LoggingEmailAddress">Email Address</label>
+                    <input id="LoggingEmailAddress" class="block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
                 </div>
 
                 <div class="mt-4">
                     <div class="flex justify-between">
-                        <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2" for="loggingPassword">Password</label>
+                        <label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200" for="loggingPassword">Password</label>
                         <a href="#" class="text-xs text-gray-500 dark:text-gray-300 hover:underline">Forget Password?</a>
                     </div>
 
-                    <input id="loggingPassword" class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password">
+                    <input id="loggingPassword" class="block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password">
                 </div>
 
                 <div class="mt-8">
-                    <button class="bg-gray-700 text-white py-2 px-4 w-full tracking-wide rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
+                    <button class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
                         Login
                     </button>
                 </div>
                 
-                <div class="mt-4 flex items-center justify-between">
-                    <span class="border-b dark:border-gray-600 w-1/5 md:w-1/4"></span>
+                <div class="flex items-center justify-between mt-4">
+                    <span class="w-1/5 border-b dark:border-gray-600 md:w-1/4"></span>
 
-                    <a href="#" class="text-xs text-gray-500 dark:text-gray-400 uppercase hover:underline">or sign up</a>
+                    <a href="#" class="text-xs text-gray-500 uppercase dark:text-gray-400 hover:underline">or sign up</a>
                     
-                    <span class="border-b dark:border-gray-600 w-1/5 md:w-1/4"></span>
+                    <span class="w-1/5 border-b dark:border-gray-600 md:w-1/4"></span>
                 </div>
             </div>
         </div>`
diff --git a/src/components/ui/Authentication/SimpleLogin.vue b/src/components/ui/Authentication/SimpleLogin.vue
index bd551c8..e340f50 100644
--- a/src/components/ui/Authentication/SimpleLogin.vue
+++ b/src/components/ui/Authentication/SimpleLogin.vue
@@ -1,37 +1,37 @@
 <template>
      <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="bg-white dark:bg-gray-800 w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
-                <div class="py-4 px-6">
-                    <h2 class="text-center font-bold text-gray-700 dark:text-white text-3xl">Brand</h2>
+            <div class="w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
+                <div class="px-6 py-4">
+                    <h2 class="text-3xl font-bold text-center text-gray-700 dark:text-white">Brand</h2>
 
-                    <h3 class="mt-1 text-center font-medium text-gray-600 dark:text-gray-200 text-xl">Welcome Back</h3>
+                    <h3 class="mt-1 text-xl font-medium text-center text-gray-600 dark:text-gray-200">Welcome Back</h3>
 
                     <p class="mt-1 text-center text-gray-500 dark:text-gray-400">Login or create account</p>
 
                     <form>
-                        <div class="mt-4 w-full">
-                            <input class="w-full mt-2 py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address">
+                        <div class="w-full mt-4">
+                            <input class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address">
                         </div>
 
-                        <div class="mt-4 w-full">
-                            <input class="w-full mt-2 py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
+                        <div class="w-full mt-4">
+                            <input class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
                         </div>
 
-                        <div class="flex justify-between items-center mt-4">
-                            <a href="#" class="text-gray-600 dark:text-gray-200 text-sm hover:text-gray-500">Forget Password?</a>
+                        <div class="flex items-center justify-between mt-4">
+                            <a href="#" class="text-sm text-gray-600 dark:text-gray-200 hover:text-gray-500">Forget Password?</a>
 
-                            <button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
+                            <button class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none" type="button">
                                 Login
                             </button>
                         </div>
                     </form>
                 </div>
 
-                <div class="flex items-center justify-center py-4 bg-gray-100 dark:bg-gray-700 text-center">
-                    <span class="text-gray-600 dark:text-gray-200 text-sm">Don't have an account? </span>
+                <div class="flex items-center justify-center py-4 text-center bg-gray-100 dark:bg-gray-700">
+                    <span class="text-sm text-gray-600 dark:text-gray-200">Don't have an account? </span>
                     
-                    <a href="#" class="text-blue-600 dark:text-blue-400 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
+                    <a href="#" class="mx-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:text-blue-500">Register</a>
                 </div>
             </div>
         </div>
@@ -44,37 +44,37 @@
             return {
                 name: 'Simple Login',
                 code: `
-        <div class="bg-white dark:bg-gray-800 w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
-            <div class="py-4 px-6">
-                <h2 class="text-center font-bold text-gray-700 dark:text-white text-3xl">Brand</h2>
+        <div class="w-full max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <div class="px-6 py-4">
+                <h2 class="text-3xl font-bold text-center text-gray-700 dark:text-white">Brand</h2>
 
-                <h3 class="mt-1 text-center font-medium text-gray-600 dark:text-gray-200 text-xl">Welcome Back</h3>
+                <h3 class="mt-1 text-xl font-medium text-center text-gray-600 dark:text-gray-200">Welcome Back</h3>
 
                 <p class="mt-1 text-center text-gray-500 dark:text-gray-400">Login or create account</p>
 
                 <form>
-                    <div class="mt-4 w-full">
-                        <input class="w-full mt-2 py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address">
+                    <div class="w-full mt-4">
+                        <input class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address">
                     </div>
 
-                    <div class="mt-4 w-full">
-                        <input class="w-full mt-2 py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
+                    <div class="w-full mt-4">
+                        <input class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
                     </div>
 
-                    <div class="flex justify-between items-center mt-4">
-                        <a href="#" class="text-gray-600 dark:text-gray-200 text-sm hover:text-gray-500">Forget Password?</a>
+                    <div class="flex items-center justify-between mt-4">
+                        <a href="#" class="text-sm text-gray-600 dark:text-gray-200 hover:text-gray-500">Forget Password?</a>
 
-                        <button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
+                        <button class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none" type="button">
                             Login
                         </button>
                     </div>
                 </form>
             </div>
 
-            <div class="flex items-center justify-center py-4 bg-gray-100 dark:bg-gray-700 text-center">
-                <span class="text-gray-600 dark:text-gray-200 text-sm">Don't have an account? </span>
+            <div class="flex items-center justify-center py-4 text-center bg-gray-100 dark:bg-gray-700">
+                <span class="text-sm text-gray-600 dark:text-gray-200">Don't have an account? </span>
                 
-                <a href="#" class="text-blue-600 dark:text-blue-400 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
+                <a href="#" class="mx-2 text-sm font-bold text-blue-600 dark:text-blue-400 hover:text-blue-500">Register</a>
             </div>
         </div>`
             }
diff --git a/src/components/ui/Buttons/Primary.vue b/src/components/ui/Buttons/Primary.vue
index 582e495..390499e 100644
--- a/src/components/ui/Buttons/Primary.vue
+++ b/src/components/ui/Buttons/Primary.vue
@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
-        <div class="px-3 py-8 flex items-center justify-center" slot="component">
-            <button class="py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
+        <div class="flex items-center justify-center px-3 py-8" slot="component">
+            <button class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded dark:bg-gray-800 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
                 Primary
             </button>
         </div>
@@ -14,7 +14,7 @@
             return {
                 name: 'Primary',
                 code: `
-        <button class="py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
+        <button class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded dark:bg-gray-800 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
             Primary
         </button>`
             }
diff --git a/src/components/ui/Buttons/WithIcon.vue b/src/components/ui/Buttons/WithIcon.vue
index 16ba2ff..377bdc3 100644
--- a/src/components/ui/Buttons/WithIcon.vue
+++ b/src/components/ui/Buttons/WithIcon.vue
@@ -1,8 +1,8 @@
 <template>
     <view-component :name="name" :code="code">
-        <div class="px-3 py-6 flex items-center justify-center" slot="component">
-            <button class="flex items-center py-2 px-2 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
-                <svg class="h-5 w-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <div class="flex items-center justify-center px-3 py-6" slot="component">
+            <button class="flex items-center px-2 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded dark:bg-gray-800 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
+                <svg class="w-5 h-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
                 </svg>
                 <span class="mx-1">Refresh</span>
@@ -17,8 +17,8 @@
             return {
                 name: 'With Icon',
                 code: `
-        <button class="flex items-center py-2 px-2 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
-            <svg class="h-5 w-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <button class="flex items-center px-2 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded dark:bg-gray-800 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
+            <svg class="w-5 h-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                 <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
             </svg>
             <span class="mx-1">Refresh</span>
diff --git a/src/components/ui/Buttons/WithMenu.vue b/src/components/ui/Buttons/WithMenu.vue
index 30cca53..3389bfd 100644
--- a/src/components/ui/Buttons/WithMenu.vue
+++ b/src/components/ui/Buttons/WithMenu.vue
@@ -1,21 +1,21 @@
 <template>
     <view-component :name="name" :code="code">
-        <div class="px-3 pt-6 pb-40 flex justify-center" slot="component">
+        <div class="flex justify-center px-3 pt-6 pb-40" slot="component">
             <div class="flex items-center">
-                <button class="py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">Download</button>
+                <button class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded dark:bg-gray-800 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">Download</button>
                 
                 <span class="border border-transparent"></span>
 
                 <div class="relative">
-                    <button @click="menuOpen = !menuOpen" class="relative z-10 block bg-blue-600 dark:bg-gray-800 rounded p-2 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
-                        <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <button @click="menuOpen = !menuOpen" class="relative z-10 block p-2 transition-colors duration-200 transform bg-blue-600 rounded dark:bg-gray-800 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
+                        <svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
                         </svg>
                     </button>
 
-                    <div v-show="menuOpen" class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-md overflow-hidden shadow-xl z-20">
-                        <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 border-b dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">small <span class="text-gray-600 dark:text-gray-400">(640x426)</span></a>
-                        <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 border-b dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">medium <span class="text-gray-600 dark:text-gray-400">(1920x1280)</span></a>
+                    <div v-show="menuOpen" class="absolute right-0 z-20 w-48 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-700">
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b dark:text-gray-200 dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">small <span class="text-gray-600 dark:text-gray-400">(640x426)</span></a>
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b dark:text-gray-200 dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">medium <span class="text-gray-600 dark:text-gray-400">(1920x1280)</span></a>
                         <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600">large <span class="text-gray-600 dark:text-gray-400">(2400x1600)</span></a>
                     </div>
                 </div>
@@ -31,22 +31,22 @@
                 name: 'With Menu',
                 code: `
         <div class="flex items-center">
-            <button class="py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">Download</button>
+            <button class="px-4 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-600 rounded dark:bg-gray-800 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">Download</button>
             
             <span class="border border-transparent"></span>
 
             <div class="relative">
                 <!-- Menu toggle button --> 
-                <button class="relative z-10 block bg-blue-600 dark:bg-gray-800 rounded p-2 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
-                    <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <button class="relative z-10 block p-2 transition-colors duration-200 transform bg-blue-600 rounded dark:bg-gray-800 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
+                    <svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
                     </svg>
                 </button>
 
                 <!-- Menu list -->
-                <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-md overflow-hidden shadow-xl z-20">
-                    <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 border-b dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">small <span class="text-gray-600 dark:text-gray-400">(640x426)</span></a>
-                    <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 border-b dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">medium <span class="text-gray-600 dark:text-gray-400">(1920x1280)</span></a>
+                <div class="absolute right-0 z-20 w-48 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-700">
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b dark:text-gray-200 dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">small <span class="text-gray-600 dark:text-gray-400">(640x426)</span></a>
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b dark:text-gray-200 dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">medium <span class="text-gray-600 dark:text-gray-400">(1920x1280)</span></a>
                     <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600">large <span class="text-gray-600 dark:text-gray-400">(2400x1600)</span></a>
                 </div>
             </div>
diff --git a/src/components/ui/Cards/Article.vue b/src/components/ui/Cards/Article.vue
index 614f3d8..c70e990 100644
--- a/src/components/ui/Cards/Article.vue
+++ b/src/components/ui/Cards/Article.vue
@@ -1,23 +1,23 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-2xl mx-auto px-8 py-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
-                <div class="flex justify-between items-center">
-                    <span class="font-light text-gray-600 dark:text-gray-400 text-sm">Mar 10, 2019</span>
-                    <a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a>
+            <div class="max-w-2xl px-8 py-4 mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800">
+                <div class="flex items-center justify-between">
+                    <span class="text-sm font-light text-gray-600 dark:text-gray-400">Mar 10, 2019</span>
+                    <a class="px-3 py-1 text-sm font-bold text-gray-100 transition-colors duration-200 transform bg-gray-600 rounded cursor-pointer hover:bg-gray-500">Design</a>
                 </div>
 
                 <div class="mt-2">
-                    <a href="#" class="text-2xl text-gray-700 dark:text-white font-bold hover:text-gray-600 dark:hover:text-gray-200 hover:underline">Accessibility tools for designers and developers</a>
+                    <a href="#" class="text-2xl font-bold text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-200 hover:underline">Accessibility tools for designers and developers</a>
                     <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
                 </div>
                 
-                <div class="flex justify-between items-center mt-4">
+                <div class="flex items-center justify-between mt-4">
                     <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
 
                     <div class="flex items-center">
-                        <img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80" alt="avatar">
-                        <a class="text-gray-700 dark:text-gray-200 font-bold cursor-pointer">Khatab wedaa</a>
+                        <img class="hidden object-cover w-10 h-10 mx-4 rounded-full sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80" alt="avatar">
+                        <a class="font-bold text-gray-700 cursor-pointer dark:text-gray-200">Khatab wedaa</a>
                     </div>
                 </div>
             </div>
@@ -31,23 +31,23 @@
             return {
                 name: 'Article',
                 code: `
-        <div class="max-w-2xl mx-auto px-8 py-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
-            <div class="flex justify-between items-center">
-                <span class="font-light text-gray-600 dark:text-gray-400 text-sm">Mar 10, 2019</span>
-                <a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a>
+        <div class="max-w-2xl px-8 py-4 mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <div class="flex items-center justify-between">
+                <span class="text-sm font-light text-gray-600 dark:text-gray-400">Mar 10, 2019</span>
+                <a class="px-3 py-1 text-sm font-bold text-gray-100 transition-colors duration-200 transform bg-gray-600 rounded cursor-pointer hover:bg-gray-500">Design</a>
             </div>
 
             <div class="mt-2">
-                <a href="#" class="text-2xl text-gray-700 dark:text-white font-bold hover:text-gray-600 dark:hover:text-gray-200 hover:underline">Accessibility tools for designers and developers</a>
+                <a href="#" class="text-2xl font-bold text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-200 hover:underline">Accessibility tools for designers and developers</a>
                 <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
             </div>
             
-            <div class="flex justify-between items-center mt-4">
+            <div class="flex items-center justify-between mt-4">
                 <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
 
                 <div class="flex items-center">
-                    <img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80" alt="avatar">
-                    <a class="text-gray-700 dark:text-gray-200 font-bold cursor-pointer">Khatab wedaa</a>
+                    <img class="hidden object-cover w-10 h-10 mx-4 rounded-full sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80" alt="avatar">
+                    <a class="font-bold text-gray-700 cursor-pointer dark:text-gray-200">Khatab wedaa</a>
                 </div>
             </div>
         </div>`
diff --git a/src/components/ui/Cards/Product.vue b/src/components/ui/Cards/Product.vue
index 3191ce4..ef5f723 100644
--- a/src/components/ui/Cards/Product.vue
+++ b/src/components/ui/Cards/Product.vue
@@ -1,17 +1,17 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-xs mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
+            <div class="max-w-xs mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
                 <div class="px-4 py-2">
-                    <h1 class="text-gray-800 dark:text-white  font-bold text-3xl uppercase">NIKE AIR</h1>
-                    <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
+                    <h1 class="text-3xl font-bold text-gray-800 uppercase dark:text-white">NIKE AIR</h1>
+                    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
                 </div>
 
-                <img class="h-48 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80" alt="NIKE AIR">
+                <img class="object-cover w-full h-48 mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80" alt="NIKE AIR">
 
                 <div class="flex items-center justify-between px-4 py-2 bg-gray-900">
-                    <h1 class="text-white font-bold text-lg">$129</h1>
-                    <button class="px-2 py-1 bg-white text-xs text-gray-900 font-semibold rounded uppercase hover:bg-gray-200 focus:bg-gray-400">Add to cart</button>
+                    <h1 class="text-lg font-bold text-white">$129</h1>
+                    <button class="px-2 py-1 text-xs font-semibold text-gray-900 uppercase transition-colors duration-200 transform bg-white rounded hover:bg-gray-200 focus:bg-gray-400 focus:outline-none">Add to cart</button>
                 </div>
             </div>
         </div>
@@ -24,17 +24,17 @@
             return {
                 name: 'Product',
                 code: `
-        <div class="max-w-xs mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
+        <div class="max-w-xs mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
             <div class="px-4 py-2">
-                <h1 class="text-gray-800 dark:text-white  font-bold text-3xl uppercase">NIKE AIR</h1>
-                <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
+                <h1 class="text-3xl font-bold text-gray-800 uppercase dark:text-white">NIKE AIR</h1>
+                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
             </div>
 
-            <img class="h-48 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80" alt="NIKE AIR">
+            <img class="object-cover w-full h-48 mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80" alt="NIKE AIR">
 
             <div class="flex items-center justify-between px-4 py-2 bg-gray-900">
-                <h1 class="text-white font-bold text-lg">$129</h1>
-                <button class="px-2 py-1 bg-white text-xs text-gray-900 font-semibold rounded uppercase hover:bg-gray-200 focus:bg-gray-400">Add to cart</button>
+                <h1 class="text-lg font-bold text-white">$129</h1>
+                <button class="px-2 py-1 text-xs font-semibold text-gray-900 uppercase transition-colors duration-200 transform bg-white rounded hover:bg-gray-200 focus:bg-gray-400 focus:outline-none">Add to cart</button>
             </div>
         </div>`,
             }
diff --git a/src/components/ui/Cards/ProductWithEvaluation.vue b/src/components/ui/Cards/ProductWithEvaluation.vue
index 0b09479..be95fea 100644
--- a/src/components/ui/Cards/ProductWithEvaluation.vue
+++ b/src/components/ui/Cards/ProductWithEvaluation.vue
@@ -1,39 +1,39 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex max-w-md mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
+            <div class="flex max-w-md mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
                 <div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
 
                 <div class="w-2/3 p-4 md:p-4">
-                    <h1 class="text-gray-800 dark:text-white font-bold text-2xl">Backpack</h1>
+                    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Backpack</h1>
 
-                    <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
+                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
 
-                    <div class="flex item-center mt-2">
-                        <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
+                    <div class="flex mt-2 item-center">
+                        <svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-300" viewBox="0 0 24 24">
                             <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                         </svg>
 
-                        <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
+                        <svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-300" viewBox="0 0 24 24">
                             <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                         </svg>
 
-                        <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
+                        <svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-300" viewBox="0 0 24 24">
                             <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                         </svg>
 
-                        <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
+                        <svg class="w-5 h-5 text-gray-500 fill-current" viewBox="0 0 24 24">
                             <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                         </svg>
 
-                        <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
+                        <svg class="w-5 h-5 text-gray-500 fill-current" viewBox="0 0 24 24">
                             <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                         </svg>
                     </div>
 
-                    <div class="flex item-center justify-between mt-3">
-                        <h1 class="text-gray-700 dark:text-gray-200 font-bold text-lg md:text-xl">$220</h1>
-                        <button class="px-2 py-1 bg-gray-800 dark:bg-gray-700 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600 ">Add to Cart</button>
+                    <div class="flex justify-between mt-3 item-center">
+                        <h1 class="text-lg font-bold text-gray-700 dark:text-gray-200 md:text-xl">$220</h1>
+                        <button class="px-2 py-1 text-xs font-bold text-white uppercase transition-colors duration-200 transform bg-gray-800 rounded dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600">Add to Cart</button>
                     </div>
                 </div>
             </div>
@@ -48,39 +48,39 @@
             return {
                 name: 'Product With Evaluation',
                 code:`
-        <div class="flex max-w-md mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
+        <div class="flex max-w-md mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
             <div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
 
             <div class="w-2/3 p-4 md:p-4">
-                <h1 class="text-gray-800 dark:text-white font-bold text-2xl">Backpack</h1>
+                <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Backpack</h1>
 
-                <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
+                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
 
-                <div class="flex item-center mt-2">
-                    <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
+                <div class="flex mt-2 item-center">
+                    <svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-300" viewBox="0 0 24 24">
                         <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                     </svg>
 
-                    <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
+                    <svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-300" viewBox="0 0 24 24">
                         <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                     </svg>
 
-                    <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
+                    <svg class="w-5 h-5 text-gray-700 fill-current dark:text-gray-300" viewBox="0 0 24 24">
                         <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                     </svg>
 
-                    <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
+                    <svg class="w-5 h-5 text-gray-500 fill-current" viewBox="0 0 24 24">
                         <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                     </svg>
 
-                    <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
+                    <svg class="w-5 h-5 text-gray-500 fill-current" viewBox="0 0 24 24">
                         <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                     </svg>
                 </div>
 
-                <div class="flex item-center justify-between mt-3">
-                    <h1 class="text-gray-700 dark:text-gray-200 font-bold text-lg md:text-xl">$220</h1>
-                    <button class="px-2 py-1 bg-gray-800 dark:bg-gray-700 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600 ">Add to Cart</button>
+                <div class="flex justify-between mt-3 item-center">
+                    <h1 class="text-lg font-bold text-gray-700 dark:text-gray-200 md:text-xl">$220</h1>
+                    <button class="px-2 py-1 text-xs font-bold text-white uppercase transition-colors duration-200 transform bg-gray-800 rounded dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600">Add to Cart</button>
                 </div>
             </div>
         </div>`
diff --git a/src/components/ui/Cards/SimpleProduct.vue b/src/components/ui/Cards/SimpleProduct.vue
index a4d075a..91a3b2f 100644
--- a/src/components/ui/Cards/SimpleProduct.vue
+++ b/src/components/ui/Cards/SimpleProduct.vue
@@ -1,15 +1,15 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex flex-col justify-center items-center max-w-sm mx-auto">
-                <div class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1521903062400-b80f2cb8cb9d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80)"></div>
+            <div class="flex flex-col items-center justify-center max-w-sm mx-auto">
+                <div class="w-full h-64 bg-gray-300 bg-center bg-cover rounded-lg shadow-md" style="background-image: url(https://images.unsplash.com/photo-1521903062400-b80f2cb8cb9d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80)"></div>
 
-                <div class="w-56 md:w-64 bg-white dark:bg-gray-800 -mt-10 shadow-lg rounded-lg overflow-hidden">
-                    <h3 class="py-2 text-center font-bold uppercase tracking-wide text-gray-800 dark:text-white">Nike Revolt</h3>
+                <div class="w-56 -mt-10 overflow-hidden bg-white rounded-lg shadow-lg md:w-64 dark:bg-gray-800">
+                    <h3 class="py-2 font-bold tracking-wide text-center text-gray-800 uppercase dark:text-white">Nike Revolt</h3>
                     
-                    <div class="flex items-center justify-between py-2 px-3 bg-gray-200 dark:bg-gray-700">
-                        <span class="text-gray-800 dark:text-gray-200 font-bold">$129</span>
-                        <button class="bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700 dark:hover:bg-gray-600 focus:bg-gray-700 dark:focus:bg-gray-600 focus:outline-none">Add to cart</button>
+                    <div class="flex items-center justify-between px-3 py-2 bg-gray-200 dark:bg-gray-700">
+                        <span class="font-bold text-gray-800 dark:text-gray-200">$129</span>
+                        <button class="px-2 py-1 text-xs font-semibold text-white uppercase transition-colors duration-200 transform bg-gray-800 rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:bg-gray-700 dark:focus:bg-gray-600 focus:outline-none">Add to cart</button>
                     </div>
                 </div>
             </div>
@@ -23,15 +23,15 @@
             return {
                 name: 'Simple Product',
                 code: `
-        <div class="flex flex-col justify-center items-center max-w-sm mx-auto">
-            <div class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1521903062400-b80f2cb8cb9d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80)"></div>
+        <div class="flex flex-col items-center justify-center max-w-sm mx-auto">
+            <div class="w-full h-64 bg-gray-300 bg-center bg-cover rounded-lg shadow-md" style="background-image: url(https://images.unsplash.com/photo-1521903062400-b80f2cb8cb9d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80)"></div>
 
-            <div class="w-56 md:w-64 bg-white dark:bg-gray-800 -mt-10 shadow-lg rounded-lg overflow-hidden">
-                <h3 class="py-2 text-center font-bold uppercase tracking-wide text-gray-800 dark:text-white">Nike Revolt</h3>
+            <div class="w-56 -mt-10 overflow-hidden bg-white rounded-lg shadow-lg md:w-64 dark:bg-gray-800">
+                <h3 class="py-2 font-bold tracking-wide text-center text-gray-800 uppercase dark:text-white">Nike Revolt</h3>
                 
-                <div class="flex items-center justify-between py-2 px-3 bg-gray-200 dark:bg-gray-700">
-                    <span class="text-gray-800 dark:text-gray-200 font-bold">$129</span>
-                    <button class="bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700 dark:hover:bg-gray-600 focus:bg-gray-700 dark:focus:bg-gray-600 focus:outline-none">Add to cart</button>
+                <div class="flex items-center justify-between px-3 py-2 bg-gray-200 dark:bg-gray-700">
+                    <span class="font-bold text-gray-800 dark:text-gray-200">$129</span>
+                    <button class="px-2 py-1 text-xs font-semibold text-white uppercase transition-colors duration-200 transform bg-gray-800 rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:bg-gray-700 dark:focus:bg-gray-600 focus:outline-none">Add to cart</button>
                 </div>
             </div>
         </div>`
diff --git a/src/components/ui/Dropdowns/Notification.vue b/src/components/ui/Dropdowns/Notification.vue
index b065fcf..fcec768 100644
--- a/src/components/ui/Dropdowns/Notification.vue
+++ b/src/components/ui/Dropdowns/Notification.vue
@@ -1,43 +1,43 @@
 <template>
     <view-component :name="name" :code="code">
-        <div class="px-3 pt-6 pb-96 flex justify-end md:justify-center" slot="component">
+        <div class="flex justify-end px-3 pt-6 pb-96 md:justify-center" slot="component">
             <div class="relative">
                 <!-- Dropdown toggle button -->
-                <button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block rounded-md bg-white dark:bg-gray-800 p-2 focus:outline-none">
-                    <svg class="h-5 w-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block p-2 bg-white rounded-md dark:bg-gray-800 focus:outline-none">
+                    <svg class="w-5 h-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                         <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
                     </svg>
                 </button>
 
                 <!-- Dropdown menu -->
-                <div v-show="dropdownOpen" class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg overflow-hidden z-20">
+                <div v-show="dropdownOpen" class="absolute right-0 z-20 mt-2 overflow-hidden bg-white rounded-md shadow-lg w-80 dark:bg-gray-800">
                     <div class="py-2">
-                        <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
-                            <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
-                            <p class="text-gray-600 dark:text-white text-sm mx-2">
+                        <a href="#" class="flex items-center px-4 py-3 -mx-2 transition-colors duration-200 transform border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700">
+                            <img class="object-cover w-8 h-8 mx-1 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
+                            <p class="mx-2 text-sm text-gray-600 dark:text-white">
                                 <span class="font-bold" href="#">Sara Salah</span> replied on the <span class="font-bold text-blue-500" href="#">Upload Image</span> artical . 2m
                             </p>
                         </a>
-                        <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
-                            <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="avatar">
-                            <p class="text-gray-600 dark:text-white text-sm mx-2">
+                        <a href="#" class="flex items-center px-4 py-3 -mx-2 transition-colors duration-200 transform border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700">
+                            <img class="object-cover w-8 h-8 mx-1 rounded-full" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="avatar">
+                            <p class="mx-2 text-sm text-gray-600 dark:text-white">
                                 <span class="font-bold" href="#">Slick Net</span> start following you . 45m
                             </p>
                         </a>
-                        <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
-                            <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
-                            <p class="text-gray-600 dark:text-white text-sm mx-2">
+                        <a href="#" class="flex items-center px-4 py-3 -mx-2 transition-colors duration-200 transform border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700">
+                            <img class="object-cover w-8 h-8 mx-1 rounded-full" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
+                            <p class="mx-2 text-sm text-gray-600 dark:text-white">
                                 <span class="font-bold" href="#">Jane Doe</span> Like Your reply on <span class="font-bold text-blue-500" href="#">Test with TDD</span> artical . 1h
                             </p>
                         </a>
-                        <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 -mx-2">
-                            <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80" alt="avatar">
-                            <p class="text-gray-600 dark:text-white text-sm mx-2">
+                        <a href="#" class="flex items-center px-4 py-3 -mx-2 transition-colors duration-200 transform hover:bg-gray-100 dark:hover:bg-gray-700">
+                            <img class="object-cover w-8 h-8 mx-1 rounded-full" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80" alt="avatar">
+                            <p class="mx-2 text-sm text-gray-600 dark:text-white">
                                 <span class="font-bold" href="#">Abigail Bennett</span> start following you . 3h
                             </p>
                         </a>
                     </div>
-                    <a href="#" class="block bg-gray-800 dark:bg-gray-700 text-white text-center hover:underline font-bold py-2">See all notifications</a>
+                    <a href="#" class="block py-2 font-bold text-center text-white bg-gray-800 dark:bg-gray-700 hover:underline">See all notifications</a>
                 </div>
             </div>
         </div>
@@ -52,41 +52,41 @@
                 code: `
         <div class="relative">
             <!-- Dropdown toggle button -->
-            <button class="relative z-10 block rounded-md bg-white dark:bg-gray-800 p-2 focus:outline-none">
-                <svg class="h-5 w-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <button class="relative z-10 block p-2 bg-white rounded-md dark:bg-gray-800 focus:outline-none">
+                <svg class="w-5 h-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
                 </svg>
             </button>
 
             <!-- Dropdown menu -->
-            <div class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg overflow-hidden z-20">
+            <div class="absolute right-0 z-20 mt-2 overflow-hidden bg-white rounded-md shadow-lg w-80 dark:bg-gray-800">
                 <div class="py-2">
-                    <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
-                        <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
-                        <p class="text-gray-600 dark:text-white text-sm mx-2">
+                    <a href="#" class="flex items-center px-4 py-3 -mx-2 transition-colors duration-200 transform border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700">
+                        <img class="object-cover w-8 h-8 mx-1 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
+                        <p class="mx-2 text-sm text-gray-600 dark:text-white">
                             <span class="font-bold" href="#">Sara Salah</span> replied on the <span class="font-bold text-blue-500" href="#">Upload Image</span> artical . 2m
                         </p>
                     </a>
-                    <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
-                        <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="avatar">
-                        <p class="text-gray-600 dark:text-white text-sm mx-2">
+                    <a href="#" class="flex items-center px-4 py-3 -mx-2 transition-colors duration-200 transform border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700">
+                        <img class="object-cover w-8 h-8 mx-1 rounded-full" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="avatar">
+                        <p class="mx-2 text-sm text-gray-600 dark:text-white">
                             <span class="font-bold" href="#">Slick Net</span> start following you . 45m
                         </p>
                     </a>
-                    <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
-                        <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
-                        <p class="text-gray-600 dark:text-white text-sm mx-2">
+                    <a href="#" class="flex items-center px-4 py-3 -mx-2 transition-colors duration-200 transform border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700">
+                        <img class="object-cover w-8 h-8 mx-1 rounded-full" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
+                        <p class="mx-2 text-sm text-gray-600 dark:text-white">
                             <span class="font-bold" href="#">Jane Doe</span> Like Your reply on <span class="font-bold text-blue-500" href="#">Test with TDD</span> artical . 1h
                         </p>
                     </a>
-                    <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 -mx-2">
-                        <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80" alt="avatar">
-                        <p class="text-gray-600 dark:text-white text-sm mx-2">
+                    <a href="#" class="flex items-center px-4 py-3 -mx-2 transition-colors duration-200 transform hover:bg-gray-100 dark:hover:bg-gray-700">
+                        <img class="object-cover w-8 h-8 mx-1 rounded-full" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80" alt="avatar">
+                        <p class="mx-2 text-sm text-gray-600 dark:text-white">
                             <span class="font-bold" href="#">Abigail Bennett</span> start following you . 3h
                         </p>
                     </a>
                 </div>
-                <a href="#" class="block bg-gray-800 dark:bg-gray-700 text-white text-center hover:underline font-bold py-2">See all notifications</a>
+                <a href="#" class="block py-2 font-bold text-center text-white bg-gray-800 dark:bg-gray-700 hover:underline">See all notifications</a>
             </div>
         </div>`,
                 dropdownOpen: true
diff --git a/src/components/ui/Dropdowns/Simple.vue b/src/components/ui/Dropdowns/Simple.vue
index c15eedf..514afca 100644
--- a/src/components/ui/Dropdowns/Simple.vue
+++ b/src/components/ui/Dropdowns/Simple.vue
@@ -1,29 +1,29 @@
 <template>
     <view-component :name="name" :code="code">
-        <div class="px-3 pt-6 pb-56 flex justify-end sm:justify-center" slot="component">
+        <div class="flex justify-end px-3 pt-6 pb-56 sm:justify-center" slot="component">
             <div class="relative">
                 <!-- Dropdown toggle button -->
-                <button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block rounded-md bg-white dark:bg-gray-800 p-2 focus:outline-none">
-                    <svg class="h-5 w-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block p-2 bg-white rounded-md dark:bg-gray-800 focus:outline-none">
+                    <svg class="w-5 h-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                         <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                     </svg>
                 </button>
 
                 <!-- Dropdown menu -->
-                <div v-show="dropdownOpen" class="absolute right-0 mt-2 py-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl z-20">
-                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
+                <div v-show="dropdownOpen" class="absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl dark:bg-gray-800">
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                         your profile
                     </a>
-                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                         Your projects
                     </a>
-                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                         Help
                     </a>
-                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                         Settings
                     </a>
-                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                         Sign Out
                     </a>
                 </div>
@@ -40,27 +40,27 @@
                 code: `
         <div class="relative">
             <!-- Dropdown toggle button -->
-            <button class="relative z-10 block rounded-md bg-white dark:bg-gray-800 p-2 focus:outline-none">
-                <svg class="h-5 w-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <button class="relative z-10 block p-2 bg-white rounded-md dark:bg-gray-800 focus:outline-none">
+                <svg class="w-5 h-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                 </svg>
             </button>
 
             <!-- Dropdown menu -->
-            <div class="absolute right-0 mt-2 py-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl z-20">
-                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
+            <div class="absolute right-0 z-20 w-48 py-2 mt-2 bg-white rounded-md shadow-xl dark:bg-gray-800">
+                <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                     your profile
                 </a>
-                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
+                <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                     Your projects
                 </a>
-                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
+                <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                     Help
                 </a>
-                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
+                <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                     Settings
                 </a>
-                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
+                <a href="#" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                     Sign Out
                 </a>
             </div>
diff --git a/src/components/ui/Footers/WithSubscribeForm.vue b/src/components/ui/Footers/WithSubscribeForm.vue
index 2768755..e5f7a3f 100644
--- a/src/components/ui/Footers/WithSubscribeForm.vue
+++ b/src/components/ui/Footers/WithSubscribeForm.vue
@@ -1,22 +1,22 @@
 <template>
      <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <footer class="flex justify-center px-4 text-gray-800 dark:text-white bg-white dark:bg-gray-800">
+            <footer class="flex justify-center px-4 text-gray-800 bg-white dark:text-white dark:bg-gray-800">
                 <div class="container py-6">
-                    <h1 class="text-center text-lg font-bold lg:text-2xl">
+                    <h1 class="text-lg font-bold text-center lg:text-2xl">
                         Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
                     </h1>
 
                     <div class="flex justify-center mt-6">
-                        <div class="bg-white border focus-within:ring focus-within:border-blue-500 rounded-md">
+                        <div class="bg-white border rounded-md focus-within:ring focus-within:border-blue-500">
                             <div class="flex flex-wrap justify-between md:flex-row">
-                                <input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none focus:placeholder-transparent" placeholder="Enter your email" aria-label="Enter your email">
-                                <button class="w-full m-1 p-2 text-sm text-white bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
+                                <input type="email" class="p-2 m-1 text-sm text-gray-700 appearance-none focus:outline-none focus:placeholder-transparent" placeholder="Enter your email" aria-label="Enter your email">
+                                <button class="w-full p-2 m-1 text-sm font-semibold text-white uppercase transition-colors duration-200 transform bg-gray-800 rounded lg:w-auto hover:bg-gray-700">subscribe</button>
                             </div>
                         </div>
                     </div>
 
-                    <hr class="h-px mt-6 bg-gray-200 dark:bg-gray-700 border-none">
+                    <hr class="h-px mt-6 bg-gray-200 border-none dark:bg-gray-700">
 
                     <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
                         <div>
@@ -25,10 +25,10 @@
 
                         <div class="flex mt-4 md:m-0">
                             <div class="-mx-4">
-                                <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">About</a>
-                                <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Blog</a>
-                                <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">News</a>
-                                <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Contact</a>
+                                <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">About</a>
+                                <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Blog</a>
+                                <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">News</a>
+                                <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Contact</a>
                             </div>
                         </div>
                     </div>
@@ -44,22 +44,22 @@
             return {
                 name: 'With Subscribe Form',
                 code: `
-        <footer class="flex justify-center px-4 text-gray-800 dark:text-white bg-white dark:bg-gray-800">
+        <footer class="flex justify-center px-4 text-gray-800 bg-white dark:text-white dark:bg-gray-800">
             <div class="container py-6">
-                <h1 class="text-center text-lg font-bold lg:text-2xl">
+                <h1 class="text-lg font-bold text-center lg:text-2xl">
                     Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
                 </h1>
 
                 <div class="flex justify-center mt-6">
-                    <div class="bg-white border focus-within:ring focus-within:border-blue-500 rounded-md">
+                    <div class="bg-white border rounded-md focus-within:ring focus-within:border-blue-500">
                         <div class="flex flex-wrap justify-between md:flex-row">
-                            <input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none focus:placeholder-transparent" placeholder="Enter your email" aria-label="Enter your email">
-                            <button class="w-full m-1 p-2 text-sm text-white bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
+                            <input type="email" class="p-2 m-1 text-sm text-gray-700 appearance-none focus:outline-none focus:placeholder-transparent" placeholder="Enter your email" aria-label="Enter your email">
+                            <button class="w-full p-2 m-1 text-sm font-semibold text-white uppercase transition-colors duration-200 transform bg-gray-800 rounded lg:w-auto hover:bg-gray-700">subscribe</button>
                         </div>
                     </div>
                 </div>
 
-                <hr class="h-px mt-6 border-gray-300 dark:bg-gray-700 border-none">
+                <hr class="h-px mt-6 border-gray-300 border-none dark:bg-gray-700">
 
                 <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
                     <div>
@@ -68,10 +68,10 @@
 
                     <div class="flex mt-4 md:m-0">
                         <div class="-mx-4">
-                            <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">About</a>
-                            <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Blog</a>
-                            <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">News</a>
-                            <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Contact</a>
+                            <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">About</a>
+                            <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Blog</a>
+                            <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">News</a>
+                            <a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Contact</a>
                         </div>
                     </div>
                 </div>
diff --git a/src/components/ui/Forms/Contact.vue b/src/components/ui/Forms/Contact.vue
index 69fd5f7..3240c9d 100644
--- a/src/components/ui/Forms/Contact.vue
+++ b/src/components/ui/Forms/Contact.vue
@@ -1,29 +1,29 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <section class="max-w-2xl w-full mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md px-6 py-4">
+            <section class="w-full max-w-2xl px-6 py-4 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
                 <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Get in touch</h2>
-                <p class="text-gray-600 dark:text-gray-400 text-center mt-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
+                <p class="mt-3 text-center text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                 
-                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mt-6">
-                    <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
-                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <div class="grid grid-cols-1 gap-6 mt-6 sm:grid-cols-2 md:grid-cols-3">
+                    <a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-md dark:text-gray-200 hover:bg-blue-200 dark:hover:bg-blue-500">
+                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                             <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
                         </svg>
 
                         <span class="mt-2">121 Street, NY</span>
                     </a>
 
-                    <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
-                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-md dark:text-gray-200 hover:bg-blue-200 dark:hover:bg-blue-500">
+                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                             <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                         </svg>
 
                         <span class="mt-2">+2499999666600</span>
                     </a>
 
-                    <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
-                        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-md dark:text-gray-200 hover:bg-blue-200 dark:hover:bg-blue-500">
+                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                             <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                             <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                         </svg>
@@ -32,29 +32,29 @@
                     </a>
                 </div>
                 
-                <div class=" mt-6">
-                    <div class="md:flex items-center -mx-2">
-                        <div class="mx-2 w-full">
-                            <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Name</label>
+                <div class="mt-6 ">
+                    <div class="items-center -mx-2 md:flex">
+                        <div class="w-full mx-2">
+                            <label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200">Name</label>
 
-                            <input class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text">
+                            <input class="block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text">
                         </div>
 
-                        <div class="mx-2 w-full mt-4 md:mt-0">
-                            <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">E-mail</label>
+                        <div class="w-full mx-2 mt-4 md:mt-0">
+                            <label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200">E-mail</label>
 
-                            <input class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
+                            <input class="block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
                         </div>
                     </div>
 
-                    <div class="mt-4 w-full">
-                        <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Message</label>
+                    <div class="w-full mt-4">
+                        <label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200">Message</label>
 
-                        <textarea class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full h-40 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"></textarea>
+                        <textarea class="block w-full h-40 px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"></textarea>
                     </div>
 
                     <div class="flex justify-center mt-6">
-                        <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Send Message</button>
+                        <button class="px-4 py-2 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Send Message</button>
                     </div>
                 </div>
             </section>
@@ -68,29 +68,29 @@
             return {
                 name: 'Contact',
                 code: `
-        <section class="max-w-2xl w-full mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md px-6 py-4">
+        <section class="w-full max-w-2xl px-6 py-4 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
             <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Get in touch</h2>
-            <p class="text-gray-600 dark:text-gray-400 text-center mt-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
+            <p class="mt-3 text-center text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
             
-            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mt-6">
-                <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
-                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <div class="grid grid-cols-1 gap-6 mt-6 sm:grid-cols-2 md:grid-cols-3">
+                <a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-md dark:text-gray-200 hover:bg-blue-200 dark:hover:bg-blue-500">
+                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                         <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
                     </svg>
 
                     <span class="mt-2">121 Street, NY</span>
                 </a>
 
-                <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
-                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-md dark:text-gray-200 hover:bg-blue-200 dark:hover:bg-blue-500">
+                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                         <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                     </svg>
 
                     <span class="mt-2">+2499999666600</span>
                 </a>
 
-                <a href="#" class="flex flex-col items-center py-3 px-4 text-gray-700 dark:text-gray-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-500">
-                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-md dark:text-gray-200 hover:bg-blue-200 dark:hover:bg-blue-500">
+                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                         <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                         <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                     </svg>
@@ -99,29 +99,29 @@
                 </a>
             </div>
             
-            <div class=" mt-6">
-                <div class="md:flex items-center -mx-2">
-                    <div class="mx-2 w-full">
-                        <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Name</label>
+            <div class="mt-6 ">
+                <div class="items-center -mx-2 md:flex">
+                    <div class="w-full mx-2">
+                        <label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200">Name</label>
 
-                        <input class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text">
+                        <input class="block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="text">
                     </div>
 
-                    <div class="mx-2 w-full mt-4 md:mt-0">
-                        <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">E-mail</label>
+                    <div class="w-full mx-2 mt-4 md:mt-0">
+                        <label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200">E-mail</label>
 
-                        <input class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
+                        <input class="block w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
                     </div>
                 </div>
 
-                <div class="mt-4 w-full">
-                    <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2">Message</label>
+                <div class="w-full mt-4">
+                    <label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200">Message</label>
 
-                    <textarea class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full h-40 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"></textarea>
+                    <textarea class="block w-full h-40 px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"></textarea>
                 </div>
 
                 <div class="flex justify-center mt-6">
-                    <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Send Message</button>
+                    <button class="px-4 py-2 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Send Message</button>
                 </div>
             </div>
         </section>`
diff --git a/src/components/ui/Forms/Newsletter.vue b/src/components/ui/Forms/Newsletter.vue
index e54ded3..4942541 100644
--- a/src/components/ui/Forms/Newsletter.vue
+++ b/src/components/ui/Forms/Newsletter.vue
@@ -1,21 +1,21 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <section class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
+            <section class="flex flex-col max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800 md:flex-row md:h-48">
                 <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
-                    <div class="py-6 px-6 md:px-8 md:py-0">
-                        <h2 class="text-gray-700 dark:text-white text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
+                    <div class="px-6 py-6 md:px-8 md:py-0">
+                        <h2 class="text-lg font-bold text-gray-700 dark:text-white md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
                         
-                        <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
+                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
                     </div>
                 </div>
 
                 <div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2">
                     <form>
-                        <div class="flex flex-col rounded-lg border dark:border-gray-600 overflow-hidden lg:flex-row">
-                            <input class="py-3 px-6 bg-white dark:bg-gray-800 text-gray-700 outline-none placeholder-gray-500 dark:placeholder-gray-400 focus:placeholder-transparent dark:focus:placeholder-transparent" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
+                        <div class="flex flex-col overflow-hidden border rounded-lg dark:border-gray-600 lg:flex-row">
+                            <input class="px-6 py-3 text-gray-700 placeholder-gray-500 bg-white outline-none dark:bg-gray-800 dark:placeholder-gray-400 focus:placeholder-transparent dark:focus:placeholder-transparent" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
                             
-                            <button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-medium tracking-wider uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
+                            <button class="px-4 py-3 text-sm font-medium tracking-wider text-gray-100 uppercase transition-colors duration-200 transform bg-gray-700 hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
                         </div>
                     </form>
                 </div>
@@ -30,21 +30,21 @@
             return {
                 name: 'Newsletter',
                 code: `
-        <section class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
+        <section class="flex flex-col max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800 md:flex-row md:h-48">
             <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
-                <div class="py-6 px-6 md:px-8 md:py-0">
-                    <h2 class="text-gray-700 dark:text-white text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
+                <div class="px-6 py-6 md:px-8 md:py-0">
+                    <h2 class="text-lg font-bold text-gray-700 dark:text-white md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
                     
-                    <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
+                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
                 </div>
             </div>
 
             <div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2">
                 <form>
-                    <div class="flex flex-col rounded-lg border dark:border-gray-600 overflow-hidden lg:flex-row">
-                        <input class="py-3 px-6 bg-white dark:bg-gray-800 text-gray-700 outline-none placeholder-gray-500 dark:placeholder-gray-400 focus:placeholder-transparent dark:focus:placeholder-transparent" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
+                    <div class="flex flex-col overflow-hidden border rounded-lg dark:border-gray-600 lg:flex-row">
+                        <input class="px-6 py-3 text-gray-700 placeholder-gray-500 bg-white outline-none dark:bg-gray-800 dark:placeholder-gray-400 focus:placeholder-transparent dark:focus:placeholder-transparent" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
                         
-                        <button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-medium tracking-wider uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
+                        <button class="px-4 py-3 text-sm font-medium tracking-wider text-gray-100 uppercase transition-colors duration-200 transform bg-gray-700 hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
                     </div>
                 </form>
             </div>
diff --git a/src/components/ui/Forms/Simple.vue b/src/components/ui/Forms/Simple.vue
index c549e6e..2f16ba3 100644
--- a/src/components/ui/Forms/Simple.vue
+++ b/src/components/ui/Forms/Simple.vue
@@ -1,34 +1,34 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <section class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
-                <h2 class="text-lg text-gray-700 dark:text-white font-semibold capitalize">Account settings</h2>
+            <section class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
+                <h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white">Account settings</h2>
                 
                 <form>
-                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
+                    <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
                         <div>
                             <label class="text-gray-700 dark:text-gray-200" for="username">Username</label>
-                            <input id="username" type="text" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
+                            <input id="username" type="text" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                         </div>
 
                         <div>
                             <label class="text-gray-700 dark:text-gray-200" for="emailAddress">Email Address</label>
-                            <input id="emailAddress" type="email" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
+                            <input id="emailAddress" type="email" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                         </div>
 
                         <div>
                             <label class="text-gray-700 dark:text-gray-200" for="password">Password</label>
-                            <input id="password" type="password" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
+                            <input id="password" type="password" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                         </div>
 
                         <div>
                             <label class="text-gray-700 dark:text-gray-200" for="passwordConfirmation">Password Confirmation</label>
-                            <input id="passwordConfirmation" type="password" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
+                            <input id="passwordConfirmation" type="password" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                         </div>
                     </div>
 
                     <div class="flex justify-end mt-6">
-                        <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Update Account Information</button>
+                        <button class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Save</button>
                     </div>
                 </form>
             </section>
@@ -42,34 +42,34 @@
             return {
                 name: 'Simple',
                 code: `
-        <section class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
-            <h2 class="text-lg text-gray-700 dark:text-white font-semibold capitalize">Account settings</h2>
+        <section class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800">
+            <h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white">Account settings</h2>
             
             <form>
-                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
+                <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
                     <div>
                         <label class="text-gray-700 dark:text-gray-200" for="username">Username</label>
-                        <input id="username" type="text" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
+                        <input id="username" type="text" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                     </div>
 
                     <div>
                         <label class="text-gray-700 dark:text-gray-200" for="emailAddress">Email Address</label>
-                        <input id="emailAddress" type="email" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
+                        <input id="emailAddress" type="email" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                     </div>
 
                     <div>
                         <label class="text-gray-700 dark:text-gray-200" for="password">Password</label>
-                        <input id="password" type="password" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
+                        <input id="password" type="password" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                     </div>
 
                     <div>
                         <label class="text-gray-700 dark:text-gray-200" for="passwordConfirmation">Password Confirmation</label>
-                        <input id="passwordConfirmation" type="password" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
+                        <input id="passwordConfirmation" type="password" class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                     </div>
                 </div>
 
                 <div class="flex justify-end mt-6">
-                    <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Update Account Information</button>
+                    <button class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Save</button>
                 </div>
             </form>
         </section>`
diff --git a/src/components/ui/Forms/SimpleNewsletter.vue b/src/components/ui/Forms/SimpleNewsletter.vue
index 6056731..34bb038 100644
--- a/src/components/ui/Forms/SimpleNewsletter.vue
+++ b/src/components/ui/Forms/SimpleNewsletter.vue
@@ -2,14 +2,14 @@
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <section class="bg-white dark:bg-gray-800">
-                <div class="max-w-3xl mx-auto px-6 py-16 text-center">
+                <div class="max-w-3xl px-6 py-16 mx-auto text-center">
                     <h1 class="text-3xl font-semibold text-gray-800 dark:text-gray-100">Want to see Back in action?</h1>
                     <p class="max-w-md mx-auto mt-5 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, minus tempora nemo quos</p>
 
-                    <div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:justify-center sm:space-x-4 mt-8">
-                        <input id="email" type="text" class="py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
+                    <div class="flex flex-col mt-8 space-y-3 sm:space-y-0 sm:flex-row sm:justify-center sm:space-x-4">
+                        <input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
                         
-                        <button class="py-2 px-4 capitalize tracking-wide bg-indigo-700 text-sm text-white font-medium rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">
+                        <button class="px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-700 rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">
                             Get Started
                         </button>
                     </div>
@@ -26,14 +26,14 @@
                 name: 'Simple Newsletter',
                 code: `
         <section class="bg-white dark:bg-gray-800">
-            <div class="max-w-3xl mx-auto px-6 py-16 text-center">
+            <div class="max-w-3xl px-6 py-16 mx-auto text-center">
                 <h1 class="text-3xl font-semibold text-gray-800 dark:text-gray-100">Want to see Back in action?</h1>
                 <p class="max-w-md mx-auto mt-5 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, minus tempora nemo quos</p>
 
-                <div class="flex flex-col space-y-3 sm:space-y-0 sm:flex-row sm:justify-center sm:space-x-4 mt-8">
-                    <input id="email" type="text" class="py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
+                <div class="flex flex-col mt-8 space-y-3 sm:space-y-0 sm:flex-row sm:justify-center sm:space-x-4">
+                    <input id="email" type="text" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Email Address">
                     
-                    <button class="py-2 px-4 capitalize tracking-wide bg-indigo-700 text-sm text-white font-medium rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">
+                    <button class="px-4 py-2 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-700 rounded-md hover:bg-indigo-600 focus:outline-none focus:bg-indigo-600">
                         Get Started
                     </button>
                 </div>
diff --git a/src/components/ui/Heros/ECommerce.vue b/src/components/ui/Heros/ECommerce.vue
index d8917d0..5806c92 100644
--- a/src/components/ui/Heros/ECommerce.vue
+++ b/src/components/ui/Heros/ECommerce.vue
@@ -3,54 +3,54 @@
         <div class="py-6" slot="component">
             <header class="bg-white dark:bg-gray-800">
                 <nav class="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 class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
+                        <div class="flex items-center justify-between">
                             <div>
-                                <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                                <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
 
                             <div class="flex md:hidden">
                                 <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
-                                    <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                    <svg viewBox="0 0 24 24" class="w-6 h-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="isOpen ? '' : 'hidden'" class="items-center md:flex">
                             <div class="flex flex-col md:flex-row md:mx-6">
-                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
-                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
-                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
-                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
+                                <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
+                                <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
+                                <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
+                                <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
                             </div>
 
                             <div class="flex justify-center md:block">
                                 <a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
-                                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <svg class="w-5 h-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>
+                                    <span class="absolute top-0 left-0 p-1 text-xs text-white bg-indigo-500 rounded-full"></span>
                                 </a>
                             </div>
                         </div>
                     </div>
                 </nav>
 
-                <div class="container mx-auto px-6 py-16">
-                    <div class="md:flex items-center">
+                <div class="container px-6 py-16 mx-auto">
+                    <div class="items-center md:flex">
                         <div class="w-full md:w-1/2">
                             <div class="max-w-lg">
-                                <h1 class="text-gray-800 dark:text-white text-2xl font-semibold uppercase md:text-3xl">Best Place To Choose Your Clothes</h1>
+                                <h1 class="text-2xl font-semibold text-gray-800 uppercase dark:text-white md:text-3xl">Best Place To Choose Your Clothes</h1>
                                 <p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p>
-                                <button class="mt-6 px-3 py-2 bg-indigo-600 text-white text-xs uppercase font-medium rounded hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
+                                <button class="px-3 py-2 mt-6 text-xs font-medium text-white uppercase transition-colors duration-200 transform bg-indigo-600 rounded hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
                             </div>
                         </div>
                 
                         <div class="flex items-center justify-center w-full mt-6 md:mt-0 md:w-1/2">
-                            <img class="max-w-2xl w-full h-full" src="../../../assets/svg/Catalogue-pana.svg" alt="">
+                            <img class="w-full h-full max-w-2xl" src="../../../assets/svg/Catalogue-pana.svg" alt="">
                         </div>
                     </div>
                 </div>
@@ -68,16 +68,16 @@
                 code: `
         <header class="bg-white dark:bg-gray-800">
             <nav class="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 class="container px-6 py-3 mx-auto md:flex md:justify-between md:items-center">
+                    <div class="flex items-center justify-between">
                         <div>
-                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
                         
                         <!-- Mobile menu button -->
                         <div class="flex md:hidden">
                             <button type="button" class=""text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
-                                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                <svg viewBox="0 0 24 24" class="w-6 h-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>
@@ -85,39 +85,39 @@
                     </div>
 
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                    <div class="md:flex items-center">
+                    <div class="items-center md:flex">
                         <div class="flex flex-col md:flex-row md:mx-6">
-                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
-                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
-                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
-                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
+                            <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
+                            <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
+                            <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
+                            <a class="my-1 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
                         </div>
 
                         <div class="flex justify-center md:block">
                             <a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
-                                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <svg class="w-5 h-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>
+                                <span class="absolute top-0 left-0 p-1 text-xs text-white bg-indigo-500 rounded-full"></span>
                             </a>
                         </div>
                     </div>
                 </div>
             </nav>
 
-            <div class="container mx-auto px-6 py-16">
-                <div class="md:flex items-center">
+            <div class="container px-6 py-16 mx-auto">
+                <div class="items-center md:flex">
                     <div class="w-full md:w-1/2">
                         <div class="max-w-lg">
-                            <h1 class="text-gray-800 dark:text-white text-2xl font-semibold uppercase md:text-3xl">Best Place To Choose Your Clothes</h1>
+                            <h1 class="text-2xl font-semibold text-gray-800 uppercase dark:text-white md:text-3xl">Best Place To Choose Your Clothes</h1>
                             <p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p>
-                            <button class="mt-4 px-3 py-2 bg-indigo-600 text-white text-sm uppercase font-medium rounded hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
+                            <button class="px-3 py-2 mt-4 text-sm font-medium text-white uppercase bg-indigo-600 rounded hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
                         </div>
                     </div>
             
                     <div class="flex items-center justify-center w-full mt-6 md:mt-0 md:w-1/2">
-                        <img class="max-w-2xl w-full h-full" src="../../../assets/svg/Catalogue-pana.svg" alt="">
+                        <img class="w-full h-full max-w-2xl" src="../../../assets/svg/Catalogue-pana.svg" alt="">
                     </div>
                 </div>
             </div>
diff --git a/src/components/ui/Heros/WithBGImage.vue b/src/components/ui/Heros/WithBGImage.vue
index 16421cb..847b986 100644
--- a/src/components/ui/Heros/WithBGImage.vue
+++ b/src/components/ui/Heros/WithBGImage.vue
@@ -2,17 +2,17 @@
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <header>
-                <nav class="bg-white dark:bg-gray-800 shadow">
-                    <div class="container mx-auto px-6 py-3 ">
+                <nav class="bg-white shadow dark:bg-gray-800">
+                    <div class="container px-6 py-3 mx-auto ">
                         <div class="md:flex md:items-center md:justify-between">
-                            <div class="flex justify-between items-center">
+                            <div class="flex items-center justify-between">
                                 <div class="text-xl font-semibold text-gray-700">
-                                    <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                                    <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                                 </div>
 
                                 <div class="flex md:hidden">
                                     <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
-                                        <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                        <svg viewBox="0 0 24 24" class="w-6 h-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>
@@ -20,20 +20,20 @@
                             </div>
 
                             <div :class="!isOpen ? 'hidden' : ''" class="-mx-4 md:flex md:items-center">
-                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Web developers</a>
-                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Web Designers</a>
-                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">UI/UX Designers</a>
-                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Contact</a>
+                                <a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Web developers</a>
+                                <a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Web Designers</a>
+                                <a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">UI/UX Designers</a>
+                                <a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Contact</a>
                             </div>
                         </div>
                     </div>
                 </nav>
 
-                <div class="h-128 w-full bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);">
-                    <div class="flex items-center justify-center h-full w-full bg-gray-900 bg-opacity-50">
+                <div class="w-full bg-center bg-cover h-128" style="background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);">
+                    <div class="flex items-center justify-center w-full h-full bg-gray-900 bg-opacity-50">
                         <div class="text-center">
-                            <h1 class="text-white text-2xl font-semibold uppercase md:text-3xl">Build Your new <span class="underline text-blue-400">Saas</span></h1>
-                            <button class="mt-4 px-4 py-2 bg-blue-600 text-white text-sm uppercase font-medium rounded hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
+                            <h1 class="text-2xl font-semibold text-white uppercase md:text-3xl">Build Your new <span class="text-blue-400 underline">Saas</span></h1>
+                            <button class="px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
                         </div>
                     </div>
                 </div>
@@ -50,18 +50,18 @@
                 isOpen: false,
                 code: `
         <header>
-            <nav class="bg-white dark:bg-gray-800 shadow">
-                <div class="container mx-auto px-6 py-3 ">
+            <nav class="bg-white shadow dark:bg-gray-800">
+                <div class="container px-6 py-3 mx-auto ">
                     <div class="md:flex md:items-center md:justify-between">
-                        <div class="flex justify-between items-center">
+                        <div class="flex items-center justify-between">
                             <div class="text-xl font-semibold text-gray-700">
-                                <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                                <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
 
                             <!-- Mobile menu button -->
                             <div class="flex md:hidden">
                                 <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
-                                    <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                    <svg viewBox="0 0 24 24" class="w-6 h-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>
@@ -70,20 +70,20 @@
 
                         <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                         <div class="hidden -mx-4 md:flex md:items-center">
-                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Web developers</a>
-                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Web Designers</a>
-                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">UI/UX Designers</a>
-                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Contact</a>
+                            <a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Web developers</a>
+                            <a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Web Designers</a>
+                            <a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">UI/UX Designers</a>
+                            <a href="#" class="block mx-4 mt-2 text-sm text-gray-700 capitalize md:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400">Contact</a>
                         </div>
                     </div>
                 </div>
             </nav>
 
-            <div class="h-128 w-full bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);">
-                <div class="flex items-center justify-center h-full w-full bg-gray-900 bg-opacity-50">
+            <div class="w-full bg-center bg-cover h-128" style="background-image: url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);">
+                <div class="flex items-center justify-center w-full h-full bg-gray-900 bg-opacity-50">
                     <div class="text-center">
-                        <h1 class="text-white text-2xl font-semibold uppercase md:text-3xl">Build Your new <span class="underline text-blue-400">Saas</span></h1>
-                        <button class="mt-4 px-4 py-2 bg-blue-600 text-white text-sm uppercase font-medium rounded hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
+                        <h1 class="text-2xl font-semibold text-white uppercase md:text-3xl">Build Your new <span class="text-blue-400 underline">Saas</span></h1>
+                        <button class="px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded hover:bg-blue-500 focus:outline-none focus:bg-blue-500">Start project</button>
                     </div>
                 </div>
             </div>
diff --git a/src/components/ui/Heros/WithImage.vue b/src/components/ui/Heros/WithImage.vue
index 6b127dd..ac46e74 100644
--- a/src/components/ui/Heros/WithImage.vue
+++ b/src/components/ui/Heros/WithImage.vue
@@ -3,16 +3,16 @@
         <div class="py-6" slot="component">
             <header class="bg-white dark:bg-gray-800">
                 <nav class="border-b dark:border-gray-700">
-                    <div class="container mx-auto px-6 py-4 md:flex md:justify-between md:items-center">
-                        <div class="flex justify-between items-center">
+                    <div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
+                        <div class="flex items-center justify-between">
                             <div>
-                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
                             
                             <!-- Mobile menu button -->
                             <div @click="isOpen = !isOpen" class="flex md:hidden">
                                 <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
-                                    <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                    <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
                                         <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"></path>
                                     </svg>
                                 </button>
@@ -20,14 +20,14 @@
                         </div>
 
                         <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                        <div :class="isOpen ? '' : 'hidden'" class="md:flex items-center">
-                            <div class="flex flex-col space-y-8 mt-4 md:flex-row md:items-center md:mt-0 md:space-y-0 md:space-x-16">
-                                <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
-                                <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
-                                <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
-                                <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
+                        <div :class="isOpen ? '' : 'hidden'" class="items-center md:flex">
+                            <div class="flex flex-col mt-4 space-y-8 md:flex-row md:items-center md:mt-0 md:space-y-0 md:space-x-16">
+                                <a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
+                                <a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
+                                <a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
+                                <a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
 
-                                <button class="flex items-center py-2 px-5 text-center capitalize tracking-wide text-sm bg-gray-700 text-white font-medium rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
+                                <button class="flex items-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
                                     Get in touch
                                 </button>
                             </div>
@@ -35,14 +35,14 @@
                     </div>
                 </nav>
 
-                <div class="container mx-auto md:h-128 px-6 py-10 md:py-16 flex flex-col space-y-6 md:flex-row md:items-center md:space-x-6">
+                <div class="container flex flex-col px-6 py-10 mx-auto space-y-6 md:h-128 md:py-16 md:flex-row md:items-center md:space-x-6">
                     <div class="w-full md:w-1/2">
                         <div class="max-w-lg">
-                            <h1 class="text-gray-800 dark:text-white text-2xl font-medium md:text-4xl tracking-wide">Find your premium new glasses exported from US</h1>
+                            <h1 class="text-2xl font-medium tracking-wide text-gray-800 dark:text-white md:text-4xl">Find your premium new glasses exported from US</h1>
                             <p class="mt-2 text-gray-600 dark:text-gray-300">We work with the best remunated glasses dealers in US to find your new glasses.</p>
-                            <div class="mt-8 grid sm:grid-cols-2 gap-6">
+                            <div class="grid gap-6 mt-8 sm:grid-cols-2">
                                 <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
-                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                     </svg>
 
@@ -50,7 +50,7 @@
                                 </div>
 
                                 <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
-                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                     </svg>
 
@@ -58,7 +58,7 @@
                                 </div>
 
                                 <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
-                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                     </svg>
 
@@ -66,7 +66,7 @@
                                 </div>
 
                                 <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
-                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                     </svg>
 
@@ -74,7 +74,7 @@
                                 </div>
 
                                 <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
-                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                     </svg>
 
@@ -82,7 +82,7 @@
                                 </div>
 
                                 <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
-                                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                     </svg>
 
@@ -93,7 +93,7 @@
                     </div>
             
                     <div class="flex items-center justify-center w-full h-96 md:w-1/2">
-                        <img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1555181126-cf46a03827c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="glasses photo">
+                        <img class="object-cover w-full h-full max-w-2xl rounded" src="https://images.unsplash.com/photo-1555181126-cf46a03827c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="glasses photo">
                     </div>
                 </div>
             </header>
@@ -110,16 +110,16 @@
                 code: `
         <header class="bg-white dark:bg-gray-800">
             <nav class="border-b dark:border-gray-700">
-                <div class="container mx-auto px-6 py-4 md:flex md:justify-between md:items-center">
-                    <div class="flex justify-between items-center">
+                <div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
+                    <div class="flex items-center justify-between">
                         <div>
-                        <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                        <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
                         
                         <!-- Mobile menu button -->
                         <div class="md:hidden">
                             <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
-                                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
                                     <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"></path>
                                 </svg>
                             </button>
@@ -127,14 +127,14 @@
                     </div>
 
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                    <div class="md:flex items-center">
-                        <div class="flex flex-col space-y-8 mt-4 md:flex-row md:items-center md:mt-0 md:space-y-0 md:space-x-16">
-                            <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
-                            <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
-                            <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
-                            <a class="block text-gray-700 dark:text-gray-200 font-medium hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
+                    <div class="items-center md:flex">
+                        <div class="flex flex-col mt-4 space-y-8 md:flex-row md:items-center md:mt-0 md:space-y-0 md:space-x-16">
+                            <a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">glasses Search</a>
+                            <a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">How it works!</a>
+                            <a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
+                            <a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
 
-                            <button class="flex items-center py-2 px-5 text-center capitalize tracking-wide text-sm bg-gray-700 text-white font-medium rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
+                            <button class="flex items-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
                                 Get in touch
                             </button>
                         </div>
@@ -142,14 +142,14 @@
                 </div>
             </nav>
 
-            <div class="container mx-auto md:h-128 px-6 py-10 md:py-16 flex flex-col space-y-6 md:flex-row md:items-center md:space-x-6">
+            <div class="container flex flex-col px-6 py-10 mx-auto space-y-6 md:h-128 md:py-16 md:flex-row md:items-center md:space-x-6">
                 <div class="w-full md:w-1/2">
                     <div class="max-w-lg">
-                        <h1 class="text-gray-800 dark:text-white text-2xl font-medium md:text-4xl tracking-wide">Find your premium new glasses exported from US</h1>
+                        <h1 class="text-2xl font-medium tracking-wide text-gray-800 dark:text-white md:text-4xl">Find your premium new glasses exported from US</h1>
                         <p class="mt-2 text-gray-600 dark:text-gray-300">We work with the best remunated glasses dealers in US to find your new glasses.</p>
-                        <div class="mt-8 grid sm:grid-cols-2 gap-6">
+                        <div class="grid gap-6 mt-8 sm:grid-cols-2">
                             <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
-                                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                 </svg>
 
@@ -157,7 +157,7 @@
                             </div>
 
                             <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
-                                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                 </svg>
 
@@ -165,7 +165,7 @@
                             </div>
 
                             <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
-                                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                 </svg>
 
@@ -173,7 +173,7 @@
                             </div>
 
                             <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
-                                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                 </svg>
 
@@ -181,7 +181,7 @@
                             </div>
 
                             <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
-                                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                 </svg>
 
@@ -189,7 +189,7 @@
                             </div>
 
                             <div class="flex items-center space-x-6 text-gray-800 dark:text-gray-200">
-                                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                 </svg>
 
@@ -200,7 +200,7 @@
                 </div>
         
                 <div class="flex items-center justify-center w-full h-96 md:w-1/2">
-                    <img class="max-w-2xl w-full h-full rounded object-cover" src="https://images.unsplash.com/photo-1555181126-cf46a03827c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="glasses photo">
+                    <img class="object-cover w-full h-full max-w-2xl rounded" src="https://images.unsplash.com/photo-1555181126-cf46a03827c0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="glasses photo">
                 </div>
             </div>
         </header>`,
diff --git a/src/components/ui/Heros/WithPattern.vue b/src/components/ui/Heros/WithPattern.vue
index be18bac..4dd646c 100644
--- a/src/components/ui/Heros/WithPattern.vue
+++ b/src/components/ui/Heros/WithPattern.vue
@@ -1,20 +1,20 @@
 <template>
      <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <header class="pattern bg-gray-900">
-                <div class="container mx-auto px-6">
+            <header class="bg-gray-900 pattern">
+                <div class="container px-6 mx-auto">
                     <nav class="flex flex-col py-2 sm:flex-row sm:justify-between sm:items-center">
                         <div>
                             <a href="#" class="text-2xl font-semibold text-white hover:text-gray-300">Brand</a>
                         </div>
 
-                        <div class="flex items-center -mx-2 mt-2 sm:mt-0">
-                            <a href="#" class="px-3 py-1 border-2 font-semibold rounded text-sm text-white hover:bg-gray-700">Sign In</a>
-                            <a href="#" class="mx-2 px-3 py-2 font-semibold bg-black rounded text-sm text-white hover:bg-gray-800">Sign Up</a>
+                        <div class="flex items-center mt-2 -mx-2 sm:mt-0">
+                            <a href="#" class="px-3 py-1 text-sm font-semibold text-white transition-colors duration-200 transform border-2 rounded hover:bg-gray-700">Sign In</a>
+                            <a href="#" class="px-3 py-2 mx-2 text-sm font-semibold text-white transition-colors duration-200 transform bg-black rounded hover:bg-gray-800">Sign Up</a>
                         </div>
                     </nav>
 
-                    <div class="flex items-center flex-col py-6 md:h-128 md:flex-row">
+                    <div class="flex flex-col items-center py-6 md:h-128 md:flex-row">
                         <div class="md:w-1/2">
                             <h2 class="text-4xl font-semibold text-gray-100">Brand</h2>
 
@@ -22,24 +22,24 @@
                                 Hello <span class="text-indigo-400">Guest</span>
                             </h3>
 
-                            <p class="text-gray-100 mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
+                            <p class="mt-3 text-gray-100">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
                         </div>
 
-                        <div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0">
-                            <div class="max-w-sm bg-white dark:bg-gray-800 rounded-lg">
+                        <div class="flex mt-8 md:w-1/2 md:justify-end md:mt-0">
+                            <div class="max-w-sm bg-white rounded-lg dark:bg-gray-800">
                                 <div class="p-5 text-center">
                                     <h2 class="text-2xl font-semibold text-gray-700 dark:text-white fo">Sign In</h2>
 
                                     <form action="#">
                                         <div class="mt-4">
-                                            <input class="w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email address" aria-label="Email address">
-                                            <input class="mt-4 w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
+                                            <input class="w-full px-4 py-2 text-gray-700 placeholder-gray-500 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email address" aria-label="Email address">
+                                            <input class="w-full px-4 py-2 mt-4 text-gray-700 placeholder-gray-500 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
                                         </div>
 
-                                        <div class="mt-4 flex items-center justify-between">
-                                            <a href="#" class="text-gray-600 dark:text-gray-200 text-sm hover:underline">Forget Password?</a>
+                                        <div class="flex items-center justify-between mt-4">
+                                            <a href="#" class="text-sm text-gray-600 dark:text-gray-200 hover:underline">Forget Password?</a>
 
-                                            <button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:bg-gray-800 dark:focus:bg-gray-700">Login</button>
+                                            <button class="px-4 py-2 font-semibold text-white transition-colors duration-200 transform bg-gray-900 rounded hover:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:bg-gray-800 dark:focus:bg-gray-700">Login</button>
                                         </div>
                                     </form>
                                 </div>
@@ -65,20 +65,20 @@
         }
         </style>
 
-        <header class="pattern bg-gray-900">
-            <div class="container mx-auto px-6">
+        <header class="bg-gray-900 pattern">
+            <div class="container px-6 mx-auto">
                 <nav class="flex flex-col py-2 sm:flex-row sm:justify-between sm:items-center">
                     <div>
                         <a href="#" class="text-2xl font-semibold text-white hover:text-gray-300">Brand</a>
                     </div>
 
-                    <div class="flex items-center -mx-2 mt-2 sm:mt-0">
-                        <a href="#" class="px-3 py-1 border-2 font-semibold rounded text-sm text-white hover:bg-gray-700">Sign In</a>
-                        <a href="#" class="mx-2 px-3 py-2 font-semibold bg-black rounded text-sm text-white hover:bg-gray-800">Sign Up</a>
+                    <div class="flex items-center mt-2 -mx-2 sm:mt-0">
+                        <a href="#" class="px-3 py-1 text-sm font-semibold text-white transition-colors duration-200 transform border-2 rounded hover:bg-gray-700">Sign In</a>
+                        <a href="#" class="px-3 py-2 mx-2 text-sm font-semibold text-white transition-colors duration-200 transform bg-black rounded hover:bg-gray-800">Sign Up</a>
                     </div>
                 </nav>
 
-                <div class="flex items-center flex-col py-6 md:h-128 md:flex-row">
+                <div class="flex flex-col items-center py-6 md:h-128 md:flex-row">
                     <div class="md:w-1/2">
                         <h2 class="text-4xl font-semibold text-gray-100">Brand</h2>
 
@@ -86,24 +86,24 @@
                             Hello <span class="text-indigo-400">Guest</span>
                         </h3>
 
-                        <p class="text-gray-100 mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
+                        <p class="mt-3 text-gray-100">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
                     </div>
 
-                    <div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0">
-                        <div class="max-w-sm bg-white dark:bg-gray-800 rounded-lg">
+                    <div class="flex mt-8 md:w-1/2 md:justify-end md:mt-0">
+                        <div class="max-w-sm bg-white rounded-lg dark:bg-gray-800">
                             <div class="p-5 text-center">
                                 <h2 class="text-2xl font-semibold text-gray-700 dark:text-white fo">Sign In</h2>
 
                                 <form action="#">
                                     <div class="mt-4">
-                                        <input class="w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email address" aria-label="Email address">
-                                        <input class="mt-4 w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
+                                        <input class="block w-full px-4 py-2 text-gray-700 placeholder-gray-500 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email address" aria-label="Email address">
+                                        <input class="block w-full px-4 py-2 mt-4 text-gray-700 placeholder-gray-500 bg-white border border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
                                     </div>
 
-                                    <div class="mt-4 flex items-center justify-between">
-                                        <a href="#" class="text-gray-600 dark:text-gray-200 text-sm hover:underline">Forget Password?</a>
+                                    <div class="flex items-center justify-between mt-4">
+                                        <a href="#" class="text-sm text-gray-600 dark:text-gray-200 hover:underline">Forget Password?</a>
 
-                                        <button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:bg-gray-800 dark:focus:bg-gray-700">Login</button>
+                                        <button class="px-4 py-2 font-semibold text-white transition-colors duration-200 transform bg-gray-900 rounded hover:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:bg-gray-800 dark:focus:bg-gray-700">Login</button>
                                     </div>
                                 </form>
                             </div>
diff --git a/src/components/ui/Heros/WithSideImage.vue b/src/components/ui/Heros/WithSideImage.vue
index 18967d3..a92a75d 100644
--- a/src/components/ui/Heros/WithSideImage.vue
+++ b/src/components/ui/Heros/WithSideImage.vue
@@ -3,16 +3,16 @@
         <div class="py-6" slot="component">
             <header class="bg-white dark:bg-gray-800">
                 <nav class="px-6 py-3 shadow">
-                    <div class="md:flex items-center justify-between">
-                        <div class="flex justify-between items-center">
+                    <div class="items-center justify-between md:flex">
+                        <div class="flex items-center justify-between">
                             <div>
-                                <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                                <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
                     
                             <!-- Mobile menu button -->
                             <div class="md:hidden">
                                 <button type="button" @click="isOpen = !isOpen" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
-                                    <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                    <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
                                         <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"></path>
                                     </svg>
                                 </button>
@@ -20,31 +20,31 @@
                         </div>
                     
                         <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                        <div :class="!isOpen ? 'hidden' : ''" class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
-                            <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
-                            <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
-                            <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                        <div :class="!isOpen ? 'hidden' : ''" class="flex flex-col mt-2 -mx-2 md:mt-0 md:flex-row md:block">
+                            <a href="#" class="px-2 py-2 text-sm text-gray-800 rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
+                            <a href="#" class="px-2 py-2 text-sm text-gray-800 rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
+                            <a href="#" class="px-2 py-2 text-sm text-gray-800 rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
                         </div>
                     </div>
                 </nav>
 
                 <div class="md:flex">
-                    <div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
+                    <div class="flex items-center justify-center w-full px-6 py-8 md:h-128 md:w-1/2">
                         <div class="max-w-xl">
                             <h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
                                 
                             <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
 
                             <div class="flex mt-6">
-                                <a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-700">Get Started</a>
-                                <a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a>
+                                <a href="#" class="block px-3 py-2 text-xs font-semibold text-white transition-colors duration-200 transform bg-gray-900 rounded hover:bg-gray-700">Get Started</a>
+                                <a href="#" class="block px-3 py-2 mx-4 text-xs font-semibold text-gray-700 transition-colors duration-200 transform bg-gray-200 rounded hover:bg-gray-300">Learn More</a>
                             </div>
                         </div>
                     </div>
                     
                     <div class="w-full h-64 md:w-1/2 md:h-auto">
-                        <div class="h-full w-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
-                            <div class="h-full w-full bg-black opacity-25"></div>
+                        <div class="w-full h-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
+                            <div class="w-full h-full bg-black opacity-25"></div>
                         </div>
                     </div>
                 </div>
@@ -62,16 +62,16 @@
                 code: `
         <header class="bg-white dark:bg-gray-800">
             <nav class="px-6 py-3 shadow">
-                <div class="md:flex items-center justify-between">
-                    <div class="flex justify-between items-center">
+                <div class="items-center justify-between md:flex">
+                    <div class="flex items-center justify-between">
                         <div>
-                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
                 
                         <!-- Mobile menu button -->
                         <div class="md:hidden">
                             <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
-                                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
                                     <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"></path>
                                 </svg>
                             </button>
@@ -79,31 +79,31 @@
                     </div>
                 
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                    <div class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
-                        <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
-                        <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
-                        <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                    <div class="flex flex-col mt-2 -mx-2 md:mt-0 md:flex-row md:block">
+                        <a href="#" class="px-2 py-2 text-sm text-gray-800 rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
+                        <a href="#" class="px-2 py-2 text-sm text-gray-800 rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
+                        <a href="#" class="px-2 py-2 text-sm text-gray-800 rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
                     </div>
                 </div>
             </nav>
 
             <div class="md:flex">
-                <div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
+                <div class="flex items-center justify-center w-full px-6 py-8 md:h-128 md:w-1/2">
                     <div class="max-w-xl">
                         <h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
                             
                         <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
 
                         <div class="flex mt-6">
-                            <a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-700">Get Started</a>
-                            <a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a>
+                            <a href="#" class="block px-3 py-2 text-xs font-semibold text-white transition-colors duration-200 transform bg-gray-900 rounded hover:bg-gray-700">Get Started</a>
+                            <a href="#" class="block px-3 py-2 mx-4 text-xs font-semibold text-gray-700 transition-colors duration-200 transform bg-gray-200 rounded hover:bg-gray-300">Learn More</a>
                         </div>
                     </div>
                 </div>
                 
                 <div class="w-full h-64 md:w-1/2 md:h-auto">
-                    <div class="h-full w-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
-                        <div class="h-full w-full bg-black opacity-25"></div>
+                    <div class="w-full h-full bg-cover" style="background-image: url(https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80)">
+                        <div class="w-full h-full bg-black opacity-25"></div>
                     </div>
                 </div>
             </div>
diff --git a/src/components/ui/Navbars/WithAvatar.vue b/src/components/ui/Navbars/WithAvatar.vue
index a906066..0b65328 100644
--- a/src/components/ui/Navbars/WithAvatar.vue
+++ b/src/components/ui/Navbars/WithAvatar.vue
@@ -1,18 +1,18 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <nav class="bg-white dark:bg-gray-800 shadow">
-                <div class="container mx-auto px-6 py-3">
+            <nav class="bg-white shadow dark:bg-gray-800">
+                <div class="container px-6 py-3 mx-auto">
                     <div class="md:flex md:items-center md:justify-between">
-                        <div class="flex justify-between items-center">
+                        <div class="flex items-center justify-between">
                             <div class="text-xl font-semibold text-gray-700">
-                                <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                                <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
 
                             <!-- Mobile menu button -->
                             <div class="flex md:hidden">
                                 <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
-                                    <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                    <svg viewBox="0 0 24 24" class="w-6 h-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>
@@ -20,27 +20,27 @@
                         </div>
 
                         <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                        <div :class="!isOpen ? 'hidden' : ''" class="md:flex md:items-center md:justify-between flex-1">
+                        <div :class="!isOpen ? 'hidden' : ''" class="flex-1 md:flex md:items-center md:justify-between">
                             <div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
-                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
-                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>
-                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Random Item</a>
-                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Experts</a>
+                                <a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
+                                <a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>
+                                <a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Random Item</a>
+                                <a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Experts</a>
                             </div>
 
                             <div class="flex items-center mt-4 md:mt-0">
-                                <button class="mx-4 hidden md:block text-gray-600 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 focus:text-gray-700 dark:focus:text-gray-400 focus:outline-none" aria-label="show notifications">
-                                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <button class="hidden mx-4 text-gray-600 md:block dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 focus:text-gray-700 dark:focus:text-gray-400 focus:outline-none" aria-label="show notifications">
+                                    <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                         <path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                     </svg>
                                 </button>
 
                                 <button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
-                                    <div class="h-8 w-8 overflow-hidden rounded-full border-2  border-gray-400">
-                                        <img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar">
+                                    <div class="w-8 h-8 overflow-hidden border-2 border-gray-400 rounded-full">
+                                        <img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="object-cover w-full h-full" alt="avatar">
                                     </div>
 
-                                    <h3 class="mx-2 text-sm text-gray-700 dark:text-gray-200 font-medium md:hidden">Khatab wedaa</h3>
+                                    <h3 class="mx-2 text-sm font-medium text-gray-700 dark:text-gray-200 md:hidden">Khatab wedaa</h3>
                                 </button>
                             </div>
                         </div>
@@ -58,18 +58,18 @@
                 name: 'With Avatar',
                 isOpen: false,
                 code: `
-        <nav class="bg-white dark:bg-gray-800 shadow">
-            <div class="container mx-auto px-6 py-3">
+        <nav class="bg-white shadow dark:bg-gray-800">
+            <div class="container px-6 py-3 mx-auto">
                 <div class="md:flex md:items-center md:justify-between">
-                    <div class="flex justify-between items-center">
+                    <div class="flex items-center justify-between">
                         <div class="text-xl font-semibold text-gray-700">
-                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
 
                         <!-- Mobile menu button -->
                         <div class="flex md:hidden">
                             <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
-                                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                <svg viewBox="0 0 24 24" class="w-6 h-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>
@@ -77,27 +77,27 @@
                     </div>
 
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                    <div class="md:flex md:items-center md:justify-between flex-1">
+                    <div class="flex-1 md:flex md:items-center md:justify-between">
                         <div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
-                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
-                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>
-                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Random Item</a>
-                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Experts</a>
+                            <a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
+                            <a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>
+                            <a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Random Item</a>
+                            <a href="#" class="px-2 py-1 mx-2 mt-2 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded-md md:mt-0 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700">Experts</a>
                         </div>
 
                         <div class="flex items-center mt-4 md:mt-0">
-                            <button class="mx-4 hidden md:block text-gray-600 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 focus:text-gray-700 dark:focus:text-gray-400 focus:outline-none" aria-label="show notifications">
-                                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <button class="hidden mx-4 text-gray-600 md:block dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 focus:text-gray-700 dark:focus:text-gray-400 focus:outline-none" aria-label="show notifications">
+                                <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                 </svg>
                             </button>
 
                             <button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
-                                <div class="h-8 w-8 overflow-hidden rounded-full border-2  border-gray-400">
-                                    <img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar">
+                                <div class="w-8 h-8 overflow-hidden border-2 border-gray-400 rounded-full">
+                                    <img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="object-cover w-full h-full" alt="avatar">
                                 </div>
 
-                                <h3 class="mx-2 text-sm text-gray-700 dark:text-gray-200 font-medium md:hidden">Khatab wedaa</h3>
+                                <h3 class="mx-2 text-sm font-medium text-gray-700 dark:text-gray-200 md:hidden">Khatab wedaa</h3>
                             </button>
                         </div>
                     </div>
diff --git a/src/components/ui/Navbars/WithCategories.vue b/src/components/ui/Navbars/WithCategories.vue
index 41faba8..846b90c 100644
--- a/src/components/ui/Navbars/WithCategories.vue
+++ b/src/components/ui/Navbars/WithCategories.vue
@@ -1,23 +1,23 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <nav class="bg-white dark:bg-gray-800 shadow">
-                <div class="container mx-auto px-6 py-3">
+            <nav class="bg-white shadow dark:bg-gray-800">
+                <div class="container px-6 py-3 mx-auto">
                     <div class="flex flex-col md:flex-row md:justify-between md:items-center">
-                        <div class="flex justify-between items-center">
+                        <div class="flex items-center justify-between">
                             <div class="flex items-center">
-                                <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                                <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
 
                                 <!-- Search input on desktop screen -->
-                                <div class="mx-10 hidden md:block">
+                                <div class="hidden mx-10 md:block">
                                     <div class="relative">
-                                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
-                                            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                            <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                                                 <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                             </svg>
                                         </span>
 
-                                        <input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+                                        <input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
                                     </div>
                                 </div>
                             </div>
@@ -25,7 +25,7 @@
                             <!-- Mobile menu button -->
                             <div class="flex md:hidden">
                                 <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
-                                    <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                    <svg viewBox="0 0 24 24" class="w-6 h-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>
@@ -33,55 +33,55 @@
                         </div>
 
                         <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                        <div class="md:flex items-center" :class="isOpen ? 'block' : 'hidden'">
+                        <div class="items-center md:flex" :class="isOpen ? 'block' : 'hidden'">
                             <div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
-                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
-                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
-                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
-                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
+                                <a class="my-1 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
+                                <a class="my-1 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
+                                <a class="my-1 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
+                                <a class="my-1 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
                             </div>
 
                             <div class="flex items-center py-2 -mx-1 md:mx-0">
-                                <a class="block w-1/2 px-3 py-2 mx-1 rounded text-center text-sm bg-gray-500 font-medium text-white leading-5 hover:bg-blue-600 md:mx-2 md:w-auto" href="#">Login</a>
-                                <a class="block w-1/2 px-3 py-2 mx-1 rounded text-center text-sm bg-blue-500 font-medium text-white leading-5 hover:bg-blue-600 md:mx-0 md:w-auto" href="#">Join free</a>
+                                <a class="block w-1/2 px-3 py-2 mx-1 text-sm font-medium leading-5 text-center text-white transition-colors duration-200 transform bg-gray-500 rounded hover:bg-blue-600 md:mx-2 md:w-auto" href="#">Login</a>
+                                <a class="block w-1/2 px-3 py-2 mx-1 text-sm font-medium leading-5 text-center text-white transition-colors duration-200 transform bg-blue-500 rounded hover:bg-blue-600 md:mx-0 md:w-auto" href="#">Join free</a>
                             </div>
 
                             <!-- Search input on mobile screen -->
                             <div class="mt-3 md:hidden">
                                <div class="relative">
-                                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
-                                        <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                        <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                                             <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                         </svg>
                                     </span>
 
-                                    <input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+                                    <input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
                                 </div>
                             </div>
                         </div>
                     </div>
 
-                    <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-nowrap scroll-hidden">
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">News</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Articles</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Videos</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Tricks</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHP</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Laravel</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Vue</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">React</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Tailwindcss</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Meraki UI</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">CPP</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">JavaScript</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Ruby</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Mysql</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Pest</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHPUnit</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Netlify</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">VS Code</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHPStorm</a>
-                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Sublime</a>
+                    <div class="py-3 mt-3 -mx-3 overflow-y-auto whitespace-nowrap scroll-hidden">
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">News</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Articles</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Videos</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Tricks</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">PHP</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Laravel</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Vue</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">React</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Tailwindcss</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Meraki UI</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">CPP</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">JavaScript</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Ruby</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Mysql</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Pest</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">PHPUnit</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Netlify</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">VS Code</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">PHPStorm</a>
+                        <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Sublime</a>
                     </div>
                 </div>
             </nav>
@@ -104,23 +104,23 @@
         }
         </style>
 
-        <nav class="bg-white dark:bg-gray-800 shadow">
-            <div class="container mx-auto px-6 py-3">
+        <nav class="bg-white shadow dark:bg-gray-800">
+            <div class="container px-6 py-3 mx-auto">
                 <div class="flex flex-col md:flex-row md:justify-between md:items-center">
-                    <div class="flex justify-between items-center">
+                    <div class="flex items-center justify-between">
                         <div class="flex items-center">
-                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
 
                             <!-- Search input on desktop screen -->
-                            <div class="mx-10 hidden md:block">
+                            <div class="hidden mx-10 md:block">
                                 <div class="relative">
-                                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
-                                        <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                        <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                                             <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                         </svg>
                                     </span>
 
-                                    <input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+                                    <input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
                                 </div>
                             </div>
                         </div>
@@ -128,7 +128,7 @@
                         <!-- Mobile menu button -->
                         <div class="flex md:hidden">
                             <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
-                                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                <svg viewBox="0 0 24 24" class="w-6 h-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>
@@ -136,55 +136,55 @@
                     </div>
 
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                    <div class="md:flex items-center">
+                    <div class="items-center md:flex">
                         <div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
-                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
-                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
-                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
-                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
+                            <a class="my-1 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
+                            <a class="my-1 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
+                            <a class="my-1 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
+                            <a class="my-1 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
                         </div>
 
                         <div class="flex items-center py-2 -mx-1 md:mx-0">
-                            <a class="block w-1/2 px-3 py-2 mx-1 rounded text-center text-sm bg-gray-500 font-medium text-white leading-5 hover:bg-blue-600 md:mx-2 md:w-auto" href="#">Login</a>
-                            <a class="block w-1/2 px-3 py-2 mx-1 rounded text-center text-sm bg-blue-500 font-medium text-white leading-5 hover:bg-blue-600 md:mx-0 md:w-auto" href="#">Join free</a>
+                            <a class="block w-1/2 px-3 py-2 mx-1 text-sm font-medium leading-5 text-center text-white transition-colors duration-200 transform bg-gray-500 rounded hover:bg-blue-600 md:mx-2 md:w-auto" href="#">Login</a>
+                            <a class="block w-1/2 px-3 py-2 mx-1 text-sm font-medium leading-5 text-center text-white transition-colors duration-200 transform bg-blue-500 rounded hover:bg-blue-600 md:mx-0 md:w-auto" href="#">Join free</a>
                         </div>
 
                         <!-- Search input on mobile screen -->
                         <div class="mt-3 md:hidden">
                             <div class="relative">
-                                <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
-                                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                    <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                                         <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                     </svg>
                                 </span>
 
-                                <input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+                                <input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
                             </div>
                         </div>
                     </div>
                 </div>
 
-                <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-nowrap scroll-hidden">
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">News</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Articles</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Videos</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Tricks</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHP</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Laravel</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Vue</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">React</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Tailwindcss</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Meraki UI</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">CPP</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">JavaScript</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Ruby</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Mysql</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Pest</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHPUnit</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Netlify</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">VS Code</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHPStorm</a>
-                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Sublime</a>
+                <div class="py-3 mt-3 -mx-3 overflow-y-auto whitespace-nowrap scroll-hidden">
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">News</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Articles</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Videos</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Tricks</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">PHP</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Laravel</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Vue</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">React</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Tailwindcss</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Meraki UI</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">CPP</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">JavaScript</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Ruby</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Mysql</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Pest</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">PHPUnit</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Netlify</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">VS Code</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">PHPStorm</a>
+                    <a class="mx-4 text-sm leading-5 text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:my-0" href="#">Sublime</a>
                 </div>
             </div>
         </nav>`,
diff --git a/src/components/ui/Navbars/WithSearch.vue b/src/components/ui/Navbars/WithSearch.vue
index e0fbe5f..c90f652 100644
--- a/src/components/ui/Navbars/WithSearch.vue
+++ b/src/components/ui/Navbars/WithSearch.vue
@@ -1,17 +1,17 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <nav class="bg-white dark:bg-gray-800 shadow">
-                <div class="container mx-auto px-6 py-3 md:flex">
-                    <div class="flex justify-between items-center">
+            <nav class="bg-white shadow dark:bg-gray-800">
+                <div class="container px-6 py-3 mx-auto md:flex">
+                    <div class="flex items-center justify-between">
                         <div>
-                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                            <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
                         
                         <!-- Mobile menu button -->
                         <div class="flex md:hidden">
                             <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
-                                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                <svg viewBox="0 0 24 24" class="w-6 h-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>
@@ -20,20 +20,20 @@
 
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                     <div :class="!isOpen ? 'hidden' : ''" class="w-full md:flex md:items-center md:justify-between">
-                        <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-700 dark:text-gray-200 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 dark:text-gray-200 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 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
+                        <div class="flex flex-col px-2 py-3 -mx-4 md:flex-row md:mx-0 md:py-0">
+                            <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
+                            <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
+                            <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
                         </div>
 
                         <div class="relative">
-                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
-                                <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                                     <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                 </svg>
                             </span>
 
-                            <input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+                            <input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
                         </div>
                     </div>
                 </div>
@@ -49,17 +49,17 @@
                 name: 'With Search',
                 isOpen: false,
                 code: `
-        <nav class="bg-white dark:bg-gray-800 shadow">
-            <div class="container mx-auto px-6 py-3 md:flex">
-                <div class="flex justify-between items-center">
+        <nav class="bg-white shadow dark:bg-gray-800">
+            <div class="container px-6 py-3 mx-auto md:flex">
+                <div class="flex items-center justify-between">
                     <div>
-                        <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
+                        <a class="text-xl font-bold text-gray-800 dark:text-white md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                     </div>
                     
                     <!-- Mobile menu button -->
                     <div class="flex md:hidden">
                         <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
-                            <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                            <svg viewBox="0 0 24 24" class="w-6 h-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>
@@ -68,20 +68,20 @@
 
                 <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                 <div class="w-full md:flex md:items-center md:justify-between">
-                    <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-700 dark:text-gray-200 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 dark:text-gray-200 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 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
+                    <div class="flex flex-col px-2 py-3 -mx-4 md:flex-row md:mx-0 md:py-0">
+                        <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
+                        <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
+                        <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
                     </div>
                     
                     <div class="relative">
-                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
-                            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                            <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                                 <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                             </svg>
                         </span>
 
-                        <input type="text" class="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+                        <input type="text" class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
                     </div>
                 </div>
             </div>
diff --git a/src/components/ui/Paginations/Simple.vue b/src/components/ui/Paginations/Simple.vue
index 8c869cc..9100496 100644
--- a/src/components/ui/Paginations/Simple.vue
+++ b/src/components/ui/Paginations/Simple.vue
@@ -1,25 +1,25 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex justify-center items-center">
+            <div class="flex items-center justify-center">
                 <div class="flex">
-                    <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-600 rounded-md cursor-not-allowed">
+                    <a href="#" class="flex items-center px-4 py-2 mx-1 text-gray-500 bg-white rounded-md cursor-not-allowed dark:bg-gray-800 dark:text-gray-600">
                         previous
                     </a>
 
-                    <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
+                    <a href="#" class="flex items-center px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md dark:bg-gray-800 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200">
                         1
                     </a>
 
-                    <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
+                    <a href="#" class="flex items-center px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md dark:bg-gray-800 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200">
                         2
                     </a>
 
-                    <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
+                    <a href="#" class="flex items-center px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md dark:bg-gray-800 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200">
                         3
                     </a>
 
-                    <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
+                    <a href="#" class="flex items-center px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md dark:bg-gray-800 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200">
                         Next
                     </a>
                 </div>
@@ -32,26 +32,26 @@
     export default {
         data() {
             return {
-                name: 'Pagination',
+                name: 'Simple',
                 code: `
         <div class="flex">
-            <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-600 rounded-md cursor-not-allowed">
+            <a href="#" class="flex items-center px-4 py-2 mx-1 text-gray-500 bg-white rounded-md cursor-not-allowed dark:bg-gray-800 dark:text-gray-600">
                 previous
             </a>
 
-            <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
+            <a href="#" class="flex items-center px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md dark:bg-gray-800 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200">
                 1
             </a>
 
-            <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
+            <a href="#" class="flex items-center px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md dark:bg-gray-800 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200">
                 2
             </a>
 
-            <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
+            <a href="#" class="flex items-center px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md dark:bg-gray-800 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200">
                 3
             </a>
 
-            <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
+            <a href="#" class="flex items-center px-4 py-2 mx-1 text-gray-700 transition-colors duration-200 transform bg-white rounded-md dark:bg-gray-800 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200">
                 Next
             </a>
         </div>`
diff --git a/src/components/ui/Sections/ParagraphWithImage.vue b/src/components/ui/Sections/ParagraphWithImage.vue
index 93c42a7..01b9985 100644
--- a/src/components/ui/Sections/ParagraphWithImage.vue
+++ b/src/components/ui/Sections/ParagraphWithImage.vue
@@ -7,12 +7,12 @@
                         <div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80')"></div>
                     </div>
 
-                    <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
-                        <h2 class="text-2xl text-gray-800 dark:text-white font-bold md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
+                    <div class="max-w-xl px-6 py-12 lg:max-w-5xl lg:w-1/2">
+                        <h2 class="text-2xl font-bold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
                         <p class="mt-4 text-gray-600 dark:text-gray-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
                         
                         <div class="mt-8">
-                            <a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded hover:bg-gray-700">Start Now</a>
+                            <a href="#" class="px-5 py-2 font-semibold text-gray-100 transition-colors duration-200 transform bg-gray-900 rounded hover:bg-gray-700">Start Now</a>
                         </div>
                     </div>
                 </div>
@@ -33,12 +33,12 @@
                     <div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80')"></div>
                 </div>
 
-                <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
-                    <h2 class="text-2xl text-gray-800 dark:text-white font-bold md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
+                <div class="max-w-xl px-6 py-12 lg:max-w-5xl lg:w-1/2">
+                    <h2 class="text-2xl font-bold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
                     <p class="mt-4 text-gray-600 dark:text-gray-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
                     
                     <div class="mt-8">
-                        <a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded hover:bg-gray-800">Start Now</a>
+                        <a href="#" class="px-5 py-2 font-semibold text-gray-100 transition-colors duration-200 transform bg-gray-900 rounded hover:bg-gray-700">Start Now</a>
                     </div>
                 </div>
             </div>
diff --git a/src/components/ui/Sidebars/WithAvatar.vue b/src/components/ui/Sidebars/WithAvatar.vue
index c1b62e2..a4cdf42 100644
--- a/src/components/ui/Sidebars/WithAvatar.vue
+++ b/src/components/ui/Sidebars/WithAvatar.vue
@@ -1,27 +1,27 @@
 <template>
     <view-component :name="name" :code="code">
         <div slot="component">
-            <div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 py-8">
+            <div class="flex flex-col w-64 h-screen py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600">
                 <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Brand</h2>
 
-                <div class="flex flex-col items-center -mx-2 mt-6">
-                    <img class="mx-2 h-24 w-24 rounded-full object-cover" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
-                    <h4 class="mt-2 mx-2 text-gray-800 dark:text-gray-200 font-medium hover:underline">John Doe</h4>
-                    <p class="mt-1 mx-2 text-gray-600 dark:text-gray-400 text-sm font-medium hover:underline">john@example.com</p>
+                <div class="flex flex-col items-center mt-6 -mx-2">
+                    <img class="object-cover w-24 h-24 mx-2 rounded-full" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
+                    <h4 class="mx-2 mt-2 font-medium text-gray-800 dark:text-gray-200 hover:underline">John Doe</h4>
+                    <p class="mx-2 mt-1 text-sm font-medium text-gray-600 dark:text-gray-400 hover:underline">john@example.com</p>
                 </div>
                 
                 <div class="flex flex-col justify-between flex-1 mt-6">
                     <nav>
-                        <a class="flex items-center  py-2 px-4 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200" href="#">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <a class="flex items-center px-4 py-2 text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-200" href="#">
+                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             </svg>
 
                             <span class="mx-4 font-medium">Dashboard</span>
                         </a>
 
-                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400  hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             <path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             </svg>
@@ -29,16 +29,16 @@
                             <span class="mx-4 font-medium">Accounts</span>
                         </a>
 
-                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400  hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             </svg>
 
                             <span class="mx-4 font-medium">Tickets</span>
                         </a>
 
-                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400  hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             </svg>
@@ -58,27 +58,27 @@
             return {
                 name: 'With Avatar',
                 code: `
-        <div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 py-8">
+        <div class="flex flex-col w-64 h-screen py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600">
             <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-white">Brand</h2>
 
-            <div class="flex flex-col items-center -mx-2 mt-6">
-                <img class="mx-2 h-24 w-24 rounded-full object-cover" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
-                <h4 class="mt-2 mx-2 text-gray-800 dark:text-gray-200 font-medium hover:underline">John Doe</h4>
-                <p class="mt-1 mx-2 text-gray-600 dark:text-gray-400 text-sm font-medium hover:underline">john@example.com</p>
+            <div class="flex flex-col items-center mt-6 -mx-2">
+                <img class="object-cover w-24 h-24 mx-2 rounded-full" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
+                <h4 class="mx-2 mt-2 font-medium text-gray-800 dark:text-gray-200 hover:underline">John Doe</h4>
+                <p class="mx-2 mt-1 text-sm font-medium text-gray-600 dark:text-gray-400 hover:underline">john@example.com</p>
             </div>
             
             <div class="flex flex-col justify-between flex-1 mt-6">
                 <nav>
-                    <a class="flex items-center  py-2 px-4 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200" href="#">
-                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="flex items-center px-4 py-2 text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-200" href="#">
+                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
 
                         <span class="mx-4 font-medium">Dashboard</span>
                     </a>
 
-                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400  hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         <path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
@@ -86,16 +86,16 @@
                         <span class="mx-4 font-medium">Accounts</span>
                     </a>
 
-                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400  hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
 
                         <span class="mx-4 font-medium">Tickets</span>
                     </a>
 
-                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400  hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
diff --git a/src/components/ui/Sidebars/WithSearch.vue b/src/components/ui/Sidebars/WithSearch.vue
index 19e5852..7092f3f 100644
--- a/src/components/ui/Sidebars/WithSearch.vue
+++ b/src/components/ui/Sidebars/WithSearch.vue
@@ -1,31 +1,31 @@
 <template>
     <view-component :name="name" :code="code">
         <div slot="component">
-             <div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 px-4 py-8">
+             <div class="flex flex-col w-64 h-screen px-4 py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600">
                 <h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
 
                 <div class="relative mt-6">
-                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
-                        <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                        <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                             <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                         </svg>
                     </span>
 
-                    <input type="text" class="pl-10 pr-4 py-2 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+                    <input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
                 </div>
                 
                 <div class="flex flex-col justify-between flex-1 mt-6">
                     <nav>
-                        <a class="flex items-center rounded py-2 px-4 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200" href="#">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <a class="flex items-center px-4 py-2 text-gray-700 bg-gray-200 rounded dark:bg-gray-700 dark:text-gray-200" href="#">
+                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             </svg>
 
                             <span class="mx-4 font-medium">Dashboard</span>
                         </a>
 
-                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             <path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             </svg>
@@ -33,16 +33,16 @@
                             <span class="mx-4 font-medium">Accounts</span>
                         </a>
 
-                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             </svg>
 
                             <span class="mx-4 font-medium">Tickets</span>
                         </a>
 
-                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             </svg>
@@ -52,16 +52,16 @@
 
                         <hr class="my-6 dark:border-gray-600" />
 
-                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             </svg>
 
                             <span class="mx-4 font-medium">Tickets</span>
                         </a>
 
-                        <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                             </svg>
@@ -70,9 +70,9 @@
                         </a>
                     </nav>
 
-                    <div class="flex items-center -mx-2 px-4">
-                        <img class="mx-2 h-9 w-9 rounded-full object-cover" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
-                        <h4 class="mx-2 text-gray-800 dark:text-gray-200 font-medium hover:underline">John Doe</h4>
+                    <div class="flex items-center px-4 -mx-2">
+                        <img class="object-cover mx-2 rounded-full h-9 w-9" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
+                        <h4 class="mx-2 font-medium text-gray-800 dark:text-gray-200 hover:underline">John Doe</h4>
                     </div>
                 </div>
             </div>
@@ -86,31 +86,31 @@
             return {
                 name: 'With Search',
                 code: `
-        <div class="flex flex-col w-64 h-screen border-r bg-white dark:bg-gray-800 dark:border-gray-600 px-4 py-8">
+        <div class="flex flex-col w-64 h-screen px-4 py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600">
             <h2 class="text-3xl font-semibold text-gray-800 dark:text-white">Brand</h2>
 
             <div class="relative mt-6">
-                <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
-                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
+                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                         <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                     </svg>
                 </span>
 
-                <input type="text" class="pl-10 pr-4 py-3 w-full bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-md focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
+                <input type="text" class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" placeholder="Search">
             </div>
             
             <div class="flex flex-col justify-between flex-1 mt-6">
                 <nav>
-                    <a class="flex items-center rounded py-2 px-4 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200" href="#">
-                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="flex items-center px-4 py-2 text-gray-700 bg-gray-200 rounded dark:bg-gray-700 dark:text-gray-200" href="#">
+                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
 
                         <span class="mx-4 font-medium">Dashboard</span>
                     </a>
 
-                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         <path d="M12 14C8.13401 14 5 17.134 5 21H19C19 17.134 15.866 14 12 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
@@ -118,16 +118,16 @@
                         <span class="mx-4 font-medium">Accounts</span>
                     </a>
 
-                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
 
                         <span class="mx-4 font-medium">Tickets</span>
                     </a>
 
-                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
@@ -137,16 +137,16 @@
 
                     <hr class="my-6 dark:border-gray-600" />
 
-                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M15 5V7M15 11V13M15 17V19M5 5C3.89543 5 3 5.89543 3 7V10C4.10457 10 5 10.8954 5 12C5 13.1046 4.10457 14 3 14V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V14C19.8954 14 19 13.1046 19 12C19 10.8954 19.8954 10 21 10V7C21 5.89543 20.1046 5 19 5H5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
 
                         <span class="mx-4 font-medium">Tickets</span>
                     </a>
 
-                    <a class="flex items-center mt-5 py-2 px-4 text-gray-600 dark:text-gray-400 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
-                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
+                        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M10.3246 4.31731C10.751 2.5609 13.249 2.5609 13.6754 4.31731C13.9508 5.45193 15.2507 5.99038 16.2478 5.38285C17.7913 4.44239 19.5576 6.2087 18.6172 7.75218C18.0096 8.74925 18.5481 10.0492 19.6827 10.3246C21.4391 10.751 21.4391 13.249 19.6827 13.6754C18.5481 13.9508 18.0096 15.2507 18.6172 16.2478C19.5576 17.7913 17.7913 19.5576 16.2478 18.6172C15.2507 18.0096 13.9508 18.5481 13.6754 19.6827C13.249 21.4391 10.751 21.4391 10.3246 19.6827C10.0492 18.5481 8.74926 18.0096 7.75219 18.6172C6.2087 19.5576 4.44239 17.7913 5.38285 16.2478C5.99038 15.2507 5.45193 13.9508 4.31731 13.6754C2.5609 13.249 2.5609 10.751 4.31731 10.3246C5.45193 10.0492 5.99037 8.74926 5.38285 7.75218C4.44239 6.2087 6.2087 4.44239 7.75219 5.38285C8.74926 5.99037 10.0492 5.45193 10.3246 4.31731Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         <path d="M15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                         </svg>
@@ -155,9 +155,9 @@
                     </a>
                 </nav>
 
-                <div class="flex items-center -mx-2 px-4">
-                    <img class="mx-2 h-9 w-9 rounded-full object-cover" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
-                    <h4 class="mx-2 text-gray-800 dark:text-gray-200 font-medium hover:underline">John Doe</h4>
+                <div class="flex items-center px-4 -mx-2">
+                    <img class="object-cover mx-2 rounded-full h-9 w-9" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
+                    <h4 class="mx-2 font-medium text-gray-800 dark:text-gray-200 hover:underline">John Doe</h4>
                 </div>
             </div>
         </div>`