diff --git a/package-lock.json b/package-lock.json
index 06590d8..669f5bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -691,21 +691,21 @@
             }
         },
         "node_modules/@primevue/auto-import-resolver": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/@primevue/auto-import-resolver/-/auto-import-resolver-4.0.1.tgz",
-            "integrity": "sha512-jz4o8o2A8gWxBwgcfQ0B5JjK3KQxlWNEaUWEaBRM28NkdZrBjB/q7aYSKQixE7OnitZgALW2//eHU1yuenu1vw==",
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/@primevue/auto-import-resolver/-/auto-import-resolver-4.0.2.tgz",
+            "integrity": "sha512-RVCwZVK4Yzx8K3fFvF3O7CX+EirkmxAx3+ZWbatSMT+zRUhsdNFKh5jcPYJk/yGs/hI4lh8lTOqhFf2uXCflQg==",
             "dev": true,
             "dependencies": {
-                "@primevue/metadata": "4.0.1"
+                "@primevue/metadata": "4.0.2"
             },
             "engines": {
                 "node": ">=12.11.0"
             }
         },
         "node_modules/@primevue/core": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.1.tgz",
-            "integrity": "sha512-BreY1LybcRmzI8zXktqKVoq1eMeH//Ab4NUpzyFMdRKq4QoTvVuYMrlS9PGlQi+c9RmAcb6rzIIpcczqEGEAaw==",
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.2.tgz",
+            "integrity": "sha512-SpCIQ1LG6B66cecmZt1UdFeY7tbdJrgnhncADolfE9fcCyTSBtbaVLLhCV2E4Q9myMwCFE5KQxqazA4rdLWk4w==",
             "dependencies": {
                 "@primeuix/styled": "^0.0.5",
                 "@primeuix/utils": "^0.0.5"
@@ -718,30 +718,30 @@
             }
         },
         "node_modules/@primevue/icons": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.1.tgz",
-            "integrity": "sha512-tK3cYOSabRiSmAMuivw2QM/oG1ER5RGL9k7Vua7arQiwBghyPg04J/XllJ9SjORyNIY+dwbLuNyUwLKty4S0Hg==",
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.2.tgz",
+            "integrity": "sha512-S1VEpMsx4uUAsTjZtII03LQqgocYwSKbXMF0YDFWybY8r5LaHaveVZxS/i+KbsCLaL18BXJw0L/7L1eQdJHzaA==",
             "dependencies": {
                 "@primeuix/utils": "^0.0.5",
-                "@primevue/core": "4.0.1"
+                "@primevue/core": "4.0.2"
             },
             "engines": {
                 "node": ">=12.11.0"
             }
         },
         "node_modules/@primevue/metadata": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/@primevue/metadata/-/metadata-4.0.1.tgz",
-            "integrity": "sha512-iVgEioi81JNdUb7PG28RXu0XxYj0OUcR+JcCv7adsvDyoZENuupHysnic4BFVsmKnhaSBQxFVhBh5kbQVK1eIw==",
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/@primevue/metadata/-/metadata-4.0.2.tgz",
+            "integrity": "sha512-zJ5fZNKDuuOf86qNm4NbVzoW/d3n9p8lnt1qsqIMEXWrlGjhRbGg+vbjUKhiUpgKNvwy+HsnAnRFnPCyxuByfQ==",
             "dev": true,
             "engines": {
                 "node": ">=12.11.0"
             }
         },
         "node_modules/@primevue/themes": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.1.tgz",
-            "integrity": "sha512-DIfQTH/SMY5/ekZM3wnAaC2Te69X9fwVmyxjyAf6yS3e8V9l/jj1BGjinHPlDE0n1G6daHC6qruX4QIR6Jtpwg==",
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.2.tgz",
+            "integrity": "sha512-DGrdFOWRUb8/qDX+Hjkg0SkU2hvo6EmEE5/fA/+NSlLAemj5fcR8r3wo9jhFMIU0QVNl17jZycuL5taU0H72BA==",
             "dependencies": {
                 "@primeuix/styled": "^0.0.5"
             },
@@ -1546,9 +1546,9 @@
             "dev": true
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.5.1",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.1.tgz",
-            "integrity": "sha512-FKbOCOQ5QRB3VlIbl1LZQefWIYwszlBloaXcY2rbfpu9ioJnNh3TK03YtIDKDo3WKBi8u+YV4+Fn2CkEozgf4w==",
+            "version": "1.5.2",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.2.tgz",
+            "integrity": "sha512-kc4r3U3V3WLaaZqThjYz/Y6z8tJe+7K0bbjUVo3i+LWIypVdMx5nXCkwRe6SWbY6ILqLdc1rKcKmr3HoH7wjSQ==",
             "dev": true
         },
         "node_modules/emoji-regex": {
@@ -2898,14 +2898,14 @@
             "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
         },
         "node_modules/primevue": {
-            "version": "4.0.1",
-            "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.1.tgz",
-            "integrity": "sha512-mAIoOcx7pnqPOhohw+JYyuVO46R4hUMComFTNzjHabEIsUIyIgTXNtWqiSwbn7zE4hEhnPwNa9XX97XE4Cz+1g==",
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.2.tgz",
+            "integrity": "sha512-bf5In//ixosZDOcfJ0iaBXhtQSpNC/CuAOE2KHd/SgUKZdij3VRljQ+I9+Be/TTxfikIeKH7eZ4gzDbWiIZurw==",
             "dependencies": {
                 "@primeuix/styled": "^0.0.5",
                 "@primeuix/utils": "^0.0.5",
-                "@primevue/core": "4.0.1",
-                "@primevue/icons": "4.0.1"
+                "@primevue/core": "4.0.2",
+                "@primevue/icons": "4.0.2"
             },
             "engines": {
                 "node": ">=12.11.0"
@@ -3350,9 +3350,9 @@
             }
         },
         "node_modules/tailwindcss": {
-            "version": "3.4.6",
-            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.6.tgz",
-            "integrity": "sha512-1uRHzPB+Vzu57ocybfZ4jh5Q3SdlH7XW23J5sQoM9LhE9eIOlzxer/3XPSsycvih3rboRsvt0QCmzSrqyOYUIA==",
+            "version": "3.4.7",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.7.tgz",
+            "integrity": "sha512-rxWZbe87YJb4OcSopb7up2Ba4U82BoiSGUdoDr3Ydrg9ckxFS/YWsvhN323GMcddgU65QRy7JndC7ahhInhvlQ==",
             "dev": true,
             "dependencies": {
                 "@alloc/quick-lru": "^5.2.0",
diff --git a/src/router/index.js b/src/router/index.js
index 499c76a..a2e041c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,57 +21,57 @@ const router = createRouter({
                 {
                     path: '/uikit/input',
                     name: 'input',
-                    component: () => import('@/views/uikit/Input.vue')
+                    component: () => import('@/views/uikit/InputDoc.vue')
                 },
                 {
                     path: '/uikit/floatlabel',
                     name: 'floatlabel',
-                    component: () => import('@/views/uikit/FloatLabel.vue')
+                    component: () => import('@/views/uikit/FloatLabelDoc.vue')
                 },
                 {
                     path: '/uikit/invalidstate',
                     name: 'invalidstate',
-                    component: () => import('@/views/uikit/InvalidState.vue')
+                    component: () => import('@/views/uikit/InvalidStateDoc.vue')
                 },
                 {
                     path: '/uikit/button',
                     name: 'button',
-                    component: () => import('@/views/uikit/Button.vue')
+                    component: () => import('@/views/uikit/ButtonDoc.vue')
                 },
                 {
                     path: '/uikit/table',
                     name: 'table',
-                    component: () => import('@/views/uikit/Table.vue')
+                    component: () => import('@/views/uikit/TableDoc.vue')
                 },
                 {
                     path: '/uikit/list',
                     name: 'list',
-                    component: () => import('@/views/uikit/List.vue')
+                    component: () => import('@/views/uikit/ListDoc.vue')
                 },
                 {
                     path: '/uikit/tree',
                     name: 'tree',
-                    component: () => import('@/views/uikit/Tree.vue')
+                    component: () => import('@/views/uikit/TreeDoc.vue')
                 },
                 {
                     path: '/uikit/panel',
                     name: 'panel',
-                    component: () => import('@/views/uikit/Panels.vue')
+                    component: () => import('@/views/uikit/PanelsDoc.vue')
                 },
 
                 {
                     path: '/uikit/overlay',
                     name: 'overlay',
-                    component: () => import('@/views/uikit/Overlay.vue')
+                    component: () => import('@/views/uikit/OverlayDoc.vue')
                 },
                 {
                     path: '/uikit/media',
                     name: 'media',
-                    component: () => import('@/views/uikit/Media.vue')
+                    component: () => import('@/views/uikit/MediaDoc.vue')
                 },
                 {
                     path: '/uikit/menu',
-                    component: () => import('@/views/uikit/Menu.vue'),
+                    component: () => import('@/views/uikit/MenuDoc.vue'),
                     children: [
                         {
                             path: '/uikit/menu',
@@ -94,22 +94,22 @@ const router = createRouter({
                 {
                     path: '/uikit/message',
                     name: 'message',
-                    component: () => import('@/views/uikit/Messages.vue')
+                    component: () => import('@/views/uikit/MessagesDoc.vue')
                 },
                 {
                     path: '/uikit/file',
                     name: 'file',
-                    component: () => import('@/views/uikit/File.vue')
+                    component: () => import('@/views/uikit/FileDoc.vue')
                 },
                 {
                     path: '/uikit/charts',
                     name: 'charts',
-                    component: () => import('@/views/uikit/Chart.vue')
+                    component: () => import('@/views/uikit/ChartDoc.vue')
                 },
                 {
                     path: '/uikit/misc',
                     name: 'misc',
-                    component: () => import('@/views/uikit/Misc.vue')
+                    component: () => import('@/views/uikit/MiscDoc.vue')
                 },
                 {
                     path: '/blocks',
diff --git a/src/views/uikit/Button.vue b/src/views/uikit/Button.vue
deleted file mode 100644
index 7cb2f13..0000000
--- a/src/views/uikit/Button.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-
-const items = ref([
-    {
-        label: 'Update',
-        icon: 'pi pi-refresh'
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-times'
-    },
-    {
-        separator: true
-    },
-    {
-        label: 'Home',
-        icon: 'pi pi-home'
-    }
-]);
-
-const loading = ref([false, false, false]);
-
-const load = (index) => {
-    loading.value[index] = true;
-    setTimeout(() => (loading.value[index] = false), 1000);
-};
-</script>
-
-<template>
-    <div class="grid grid-cols-12 gap-4">
-        <div class="col-span-12 md:col-span-6">
-            <div class="card">
-                <h5>Default</h5>
-                <Button label="Submit" class="mr-2 mb-2"></Button>
-                <Button label="Disabled" class="mr-2 mb-2" :disabled="true"></Button>
-                <Button label="Link" class="p-button-link mr-2 mb-2" />
-            </div>
-
-            <div class="card">
-                <h5>Severities</h5>
-                <Button label="Primary" class="mb-2 mr-2" />
-                <Button label="Secondary" severity="secondary" class="mb-2 mr-2" />
-                <Button label="Success" severity="success" class="mb-2 mr-2" />
-                <Button label="Info" severity="info" class="mb-2 mr-2" />
-                <Button label="Warning" severity="warning" class="mb-2 mr-2" />
-                <Button label="Help" severity="help" class="mb-2 mr-2" />
-                <Button label="Danger" severity="danger" class="mb-2 mr-2" />
-                <Button label="Contrast" severity="contrast" class="mb-2 mr-2" />
-            </div>
-
-            <div class="card">
-                <h5>Text</h5>
-                <Button label="Primary" text class="mb-2 mr-2" />
-                <Button label="Secondary" severity="secondary" text class="mb-2 mr-2" />
-                <Button label="Success" severity="success" text class="mb-2 mr-2" />
-                <Button label="Info" severity="info" text class="mb-2 mr-2" />
-                <Button label="Warning" severity="warning" text class="mb-2 mr-2" />
-                <Button label="Help" severity="help" text class="mb-2 mr-2" />
-                <Button label="Danger" severity="danger" text class="mb-2 mr-2" />
-                <Button label="Plain" plain text class="mb-2 mr-2" />
-            </div>
-
-            <div class="card">
-                <h5>Outlined</h5>
-                <Button label="Primary" outlined class="mb-2 mr-2" />
-                <Button label="Secondary" severity="secondary" outlined class="mb-2 mr-2" />
-                <Button label="Success" severity="success" outlined class="mb-2 mr-2" />
-                <Button label="Info" severity="info" outlined class="mb-2 mr-2" />
-                <Button label="Warning" severity="warning" outlined class="mb-2 mr-2" />
-                <Button label="Help" severity="help" outlined class="mb-2 mr-2" />
-                <Button label="Danger" severity="danger" outlined class="mb-2 mr-2" />
-                <Button label="Contrast" severity="contrast" outlined class="mb-2 mr-2" />
-            </div>
-
-            <div class="card">
-                <h5>Button Group</h5>
-                <ButtonGroup>
-                    <Button label="Save" icon="pi pi-check" />
-                    <Button label="Delete" icon="pi pi-trash" />
-                    <Button label="Cancel" icon="pi pi-times" />
-                </ButtonGroup>
-            </div>
-
-            <div class="card">
-                <h5>SplitButton</h5>
-                <SplitButton label="Save" :model="items" class="mb-2 mr-2"></SplitButton>
-                <SplitButton label="Save" :model="items" severity="secondary" class="mb-2 mr-2"></SplitButton>
-                <SplitButton label="Save" :model="items" severity="success" class="mb-2 mr-2"></SplitButton>
-                <SplitButton label="Save" :model="items" severity="info" class="mb-2 mr-2"></SplitButton>
-                <SplitButton label="Save" :model="items" severity="warning" class="mb-2 mr-2"></SplitButton>
-                <SplitButton label="Save" :model="items" severity="help" class="mb-2 mr-2"></SplitButton>
-                <SplitButton label="Save" :model="items" severity="danger" class="mb-2 mr-2"></SplitButton>
-                <SplitButton label="Save" :model="items" severity="contrast" class="mb-2 mr-2"></SplitButton>
-            </div>
-
-            <div class="card">
-                <h5>Templating</h5>
-                <div class="flex flex-wrap gap-2">
-                    <Button type="button">
-                        <img alt="logo" src="/demo/images/logo-white.svg" style="width: 1.5rem" />
-                    </Button>
-                    <Button type="button" outlined severity="success">
-                        <img alt="logo" src="/demo/images/logo.svg" style="width: 1.5rem" />
-                        <span class="ml-2 text-bold">PrimeVue</span>
-                    </Button>
-                </div>
-            </div>
-        </div>
-
-        <div class="col-span-12 md:col-span-6">
-            <div class="card">
-                <h5>Icons</h5>
-                <Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button>
-                <Button label="Bookmark" icon="pi pi-bookmark" class="mr-2 mb-2"></Button>
-                <Button label="Bookmark" icon="pi pi-bookmark" iconPos="right" class="mr-2 mb-2"></Button>
-            </div>
-
-            <div class="card">
-                <h5>Raised</h5>
-                <Button label="Primary" raised class="mb-2 mr-2" />
-                <Button label="Secondary" severity="secondary" raised class="mb-2 mr-2" />
-                <Button label="Success" severity="success" raised class="mb-2 mr-2" />
-                <Button label="Info" severity="info" raised class="mb-2 mr-2" />
-                <Button label="Warning" severity="warning" raised class="mb-2 mr-2" />
-                <Button label="Help" severity="help" raised class="mb-2 mr-2" />
-                <Button label="Danger" severity="danger" raised class="mb-2 mr-2" />
-                <Button label="Contrast" severity="contrast" raised class="mb-2 mr-2" />
-            </div>
-
-            <div class="card">
-                <h5>Rounded</h5>
-                <Button label="Primary" rounded class="mb-2 mr-2" />
-                <Button label="Secondary" severity="secondary" rounded class="mb-2 mr-2" />
-                <Button label="Success" severity="success" rounded class="mb-2 mr-2" />
-                <Button label="Info" severity="info" rounded class="mb-2 mr-2" />
-                <Button label="Warning" severity="warning" rounded class="mb-2 mr-2" />
-                <Button label="Help" severity="help" rounded class="mb-2 mr-2" />
-                <Button label="Danger" severity="danger" rounded class="mb-2 mr-2" />
-                <Button label="Contrast" severity="contrast" rounded class="mb-2 mr-2" />
-            </div>
-
-            <div class="card">
-                <h5>Rounded Icons</h5>
-                <Button icon="pi pi-check" rounded class="mb-2 mr-2" />
-                <Button icon="pi pi-bookmark" severity="secondary" rounded class="mb-2 mr-2" />
-                <Button icon="pi pi-search" severity="success" rounded class="mb-2 mr-2" />
-                <Button icon="pi pi-user" severity="info" rounded class="mb-2 mr-2" />
-                <Button icon="pi pi-bell" severity="warning" rounded class="mb-2 mr-2" />
-                <Button icon="pi pi-heart" severity="help" rounded class="mb-2 mr-2" />
-                <Button icon="pi pi-times" severity="danger" rounded class="mb-2 mr-2" />
-            </div>
-
-            <div class="card">
-                <h5>Rounded Text</h5>
-                <Button icon="pi pi-check" text raised rounded class="mb-2 mr-2" />
-                <Button icon="pi pi-bookmark" severity="secondary" text raised rounded class="mb-2 mr-2" />
-                <Button icon="pi pi-search" severity="success" text raised rounded class="mb-2 mr-2" />
-                <Button icon="pi pi-user" severity="info" text raised rounded class="mb-2 mr-2" />
-                <Button icon="pi pi-bell" severity="warning" text raised rounded class="mb-2 mr-2" />
-                <Button icon="pi pi-heart" severity="help" text raised rounded class="mb-2 mr-2" />
-                <Button icon="pi pi-times" severity="danger" text raised rounded class="mb-2 mr-2" />
-            </div>
-
-            <div class="card">
-                <h5>Rounded Outlined</h5>
-                <Button icon="pi pi-check" rounded outlined class="mb-2 mr-2" />
-                <Button icon="pi pi-bookmark" severity="secondary" rounded outlined class="mb-2 mr-2" />
-                <Button icon="pi pi-search" severity="success" rounded outlined class="mb-2 mr-2" />
-                <Button icon="pi pi-user" severity="info" rounded outlined class="mb-2 mr-2" />
-                <Button icon="pi pi-bell" severity="warning" rounded outlined class="mb-2 mr-2" />
-                <Button icon="pi pi-heart" severity="help" rounded outlined class="mb-2 mr-2" />
-                <Button icon="pi pi-times" severity="danger" rounded outlined class="mb-2 mr-2" />
-            </div>
-
-            <div class="card">
-                <h5>Loading</h5>
-                <Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
-                <Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)" />
-                <Button type="button" class="mr-2 mb-2" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
-                <Button type="button" class="mr-2 mb-2" label="Search" :loading="loading[3]" @click="load(3)" />
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/src/views/uikit/ButtonDoc.vue b/src/views/uikit/ButtonDoc.vue
new file mode 100644
index 0000000..0b9fc40
--- /dev/null
+++ b/src/views/uikit/ButtonDoc.vue
@@ -0,0 +1,198 @@
+<script setup>
+import { ref } from 'vue';
+
+const items = ref([
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh'
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-times'
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Home',
+        icon: 'pi pi-home'
+    }
+]);
+
+const loading = ref([false, false, false]);
+
+const load = (index) => {
+    loading.value[index] = true;
+    setTimeout(() => (loading.value[index] = false), 1000);
+};
+</script>
+
+<template>
+    <div class="flex flex-col md:flex-row gap-6">
+        <div class="md:w-1/2">
+            <div class="card flex flex-col gap-2">
+                <h5>Default</h5>
+                <div class="flex flex-wrap gap-2">
+                    <Button label="Submit"></Button>
+                    <Button label="Disabled" :disabled="true"></Button>
+                    <Button label="Link" class="p-button-link" />
+                </div>
+            </div>
+            <div class="card flex flex-col gap-2">
+                <h5>Severities</h5>
+                <div class="flex flex-wrap gap-2">
+                    <Button label="Primary" />
+                    <Button label="Secondary" severity="secondary" />
+                    <Button label="Success" severity="success" />
+                    <Button label="Info" severity="info" />
+                    <Button label="Warn" severity="warn" />
+                    <Button label="Help" severity="help" />
+                    <Button label="Danger" severity="danger" />
+                    <Button label="Contrast" severity="contrast" />
+                </div>
+            </div>
+            <div class="card flex flex-col gap-2">
+                <h5>Text</h5>
+                <div class="flex flex-wrap gap-2">
+                    <Button label="Primary" text />
+                    <Button label="Secondary" severity="secondary" text />
+                    <Button label="Success" severity="success" text />
+                    <Button label="Info" severity="info" text />
+                    <Button label="Warn" severity="warn" text />
+                    <Button label="Help" severity="help" text />
+                    <Button label="Danger" severity="danger" text />
+                    <Button label="Plain" plain text />
+                </div>
+            </div>
+            <div class="card flex flex-col gap-2">
+                <h5>Outlined</h5>
+                <div class="flex flex-wrap gap-2">
+                    <Button label="Primary" outlined />
+                    <Button label="Secondary" severity="secondary" outlined />
+                    <Button label="Success" severity="success" outlined />
+                    <Button label="Info" severity="info" outlined />
+                    <Button label="warn" severity="warn" outlined />
+                    <Button label="Help" severity="help" outlined />
+                    <Button label="Danger" severity="danger" outlined />
+                    <Button label="Contrast" severity="contrast" outlined />
+                </div>
+            </div>
+            <div class="card flex flex-col gap-2">
+                <h5>Button Group</h5>
+                <div class="flex flex-wrap gap-2">
+                    <ButtonGroup>
+                        <Button label="Save" icon="pi pi-check" />
+                        <Button label="Delete" icon="pi pi-trash" />
+                        <Button label="Cancel" icon="pi pi-times" />
+                    </ButtonGroup>
+                </div>
+            </div>
+            <div class="card flex flex-col gap-2">
+                <h5>SplitButton</h5>
+                <div class="flex flex-wrap gap-2">
+                    <SplitButton label="Save" :model="items"></SplitButton>
+                    <SplitButton label="Save" :model="items" severity="secondary"></SplitButton>
+                    <SplitButton label="Save" :model="items" severity="success"></SplitButton>
+                    <SplitButton label="Save" :model="items" severity="info"></SplitButton>
+                    <SplitButton label="Save" :model="items" severity="warn"></SplitButton>
+                    <SplitButton label="Save" :model="items" severity="help"></SplitButton>
+                    <SplitButton label="Save" :model="items" severity="danger"></SplitButton>
+                    <SplitButton label="Save" :model="items" severity="contrast"></SplitButton>
+                </div>
+            </div>
+            <div class="card flex flex-col gap-2">
+                <h5>Templating</h5>
+                <div class="flex flex-wrap gap-2">
+                    <Button type="button">
+                        <img alt="logo" src="/demo/images/logo-white.svg" style="width: 1.5rem" />
+                    </Button>
+                    <Button type="button" outlined severity="success">
+                        <img alt="logo" src="/demo/images/logo.svg" style="width: 1.5rem" />
+                        <span class="ml-2 text-bold">PrimeVue</span>
+                    </Button>
+                </div>
+            </div>
+        </div>
+        <div class="md:w-1/2">
+            <div class="card flex flex-col gap-2">
+                <h5>Icons</h5>
+                <div class="flex flex-wrap gap-2">
+                    <Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button>
+                    <Button label="Bookmark" icon="pi pi-bookmark" class="mr-2 mb-2"></Button>
+                    <Button label="Bookmark" icon="pi pi-bookmark" iconPos="right" class="mr-2 mb-2"></Button>
+                </div>
+            </div>
+            <div class="card flex flex-col gap-2">
+                <h5>Raised</h5>
+                <div class="flex flex-wrap gap-2">
+                    <Button label="Primary" raised />
+                    <Button label="Secondary" severity="secondary" raised />
+                    <Button label="Success" severity="success" raised />
+                    <Button label="Info" severity="info" raised />
+                    <Button label="Warn" severity="warn" raised />
+                    <Button label="Help" severity="help" raised />
+                    <Button label="Danger" severity="danger" raised />
+                    <Button label="Contrast" severity="contrast" raised />
+                </div>
+            </div>
+            <div class="card flex flex-col gap-2">
+                <h5>Rounded</h5>
+                <div class="flex flex-wrap gap-2">
+                    <Button label="Primary" rounded />
+                    <Button label="Secondary" severity="secondary" rounded />
+                    <Button label="Success" severity="success" rounded />
+                    <Button label="Info" severity="info" rounded />
+                    <Button label="Warn" severity="warn" rounded />
+                    <Button label="Help" severity="help" rounded />
+                    <Button label="Danger" severity="danger" rounded />
+                    <Button label="Contrast" severity="contrast" rounded />
+                </div>
+            </div>
+            <div class="card flex flex-col gap-2">
+                <h5>Rounded Icons</h5>
+                <div class="flex flex-wrap gap-2">
+                    <Button icon="pi pi-check" rounded />
+                    <Button icon="pi pi-bookmark" severity="secondary" rounded />
+                    <Button icon="pi pi-search" severity="success" rounded />
+                    <Button icon="pi pi-user" severity="info" rounded />
+                    <Button icon="pi pi-bell" severity="warn" rounded />
+                    <Button icon="pi pi-heart" severity="help" rounded />
+                    <Button icon="pi pi-times" severity="danger" rounded />
+                </div>
+            </div>
+            <div class="card flex flex-col gap-2">
+                <h5>Rounded Text</h5>
+                <div class="flex flex-wrap gap-2">
+                    <Button icon="pi pi-check" text raised rounded />
+                    <Button icon="pi pi-bookmark" severity="secondary" text raised rounded />
+                    <Button icon="pi pi-search" severity="success" text raised rounded />
+                    <Button icon="pi pi-user" severity="info" text raised rounded />
+                    <Button icon="pi pi-bell" severity="warn" text raised rounded />
+                    <Button icon="pi pi-heart" severity="help" text raised rounded />
+                    <Button icon="pi pi-times" severity="danger" text raised rounded />
+                </div>
+            </div>
+            <div class="card flex flex-col gap-2">
+                <h5>Rounded Outlined</h5>
+                <div class="flex flex-wrap gap-2">
+                    <Button icon="pi pi-check" rounded outlined />
+                    <Button icon="pi pi-bookmark" severity="secondary" rounded outlined />
+                    <Button icon="pi pi-search" severity="success" rounded outlined />
+                    <Button icon="pi pi-user" severity="info" rounded outlined />
+                    <Button icon="pi pi-bell" severity="warn" rounded outlined />
+                    <Button icon="pi pi-heart" severity="help" rounded outlined />
+                    <Button icon="pi pi-times" severity="danger" rounded outlined />
+                </div>
+            </div>
+            <div class="card flex flex-col gap-2">
+                <h5>Loading</h5>
+                <div class="flex flex-wrap gap-2">
+                    <Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
+                    <Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)" />
+                    <Button type="button" class="mr-2 mb-2" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
+                    <Button type="button" class="mr-2 mb-2" label="Search" :loading="loading[3]" @click="load(3)" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/views/uikit/Chart.vue b/src/views/uikit/ChartDoc.vue
similarity index 91%
rename from src/views/uikit/Chart.vue
rename to src/views/uikit/ChartDoc.vue
index 86b187d..6503faf 100644
--- a/src/views/uikit/Chart.vue
+++ b/src/views/uikit/ChartDoc.vue
@@ -33,14 +33,14 @@ const setChart = () => {
         datasets: [
             {
                 label: 'My First dataset',
-                backgroundColor: documentStyle.getPropertyValue('--primary-500'),
-                borderColor: documentStyle.getPropertyValue('--primary-500'),
+                backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
+                borderColor: documentStyle.getPropertyValue('--p-primary-500'),
                 data: [65, 59, 80, 81, 56, 55, 40]
             },
             {
                 label: 'My Second dataset',
-                backgroundColor: documentStyle.getPropertyValue('--primary-200'),
-                borderColor: documentStyle.getPropertyValue('--primary-200'),
+                backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
+                borderColor: documentStyle.getPropertyValue('--p-primary-200'),
                 data: [28, 48, 40, 19, 86, 27, 90]
             }
         ]
@@ -83,8 +83,8 @@ const setChart = () => {
         datasets: [
             {
                 data: [540, 325, 702],
-                backgroundColor: [documentStyle.getPropertyValue('--indigo-500'), documentStyle.getPropertyValue('--purple-500'), documentStyle.getPropertyValue('--teal-500')],
-                hoverBackgroundColor: [documentStyle.getPropertyValue('--indigo-400'), documentStyle.getPropertyValue('--purple-400'), documentStyle.getPropertyValue('--teal-400')]
+                backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500')],
+                hoverBackgroundColor: [documentStyle.getPropertyValue('--p-indigo-400'), documentStyle.getPropertyValue('--p-purple-400'), documentStyle.getPropertyValue('--p-teal-400')]
             }
         ]
     };
@@ -107,16 +107,16 @@ const setChart = () => {
                 label: 'First Dataset',
                 data: [65, 59, 80, 81, 56, 55, 40],
                 fill: false,
-                backgroundColor: documentStyle.getPropertyValue('--primary-500'),
-                borderColor: documentStyle.getPropertyValue('--primary-500'),
+                backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
+                borderColor: documentStyle.getPropertyValue('--p-primary-500'),
                 tension: 0.4
             },
             {
                 label: 'Second Dataset',
                 data: [28, 48, 40, 19, 86, 27, 90],
                 fill: false,
-                backgroundColor: documentStyle.getPropertyValue('--primary-200'),
-                borderColor: documentStyle.getPropertyValue('--primary-200'),
+                backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
+                borderColor: documentStyle.getPropertyValue('--p-primary-200'),
                 tension: 0.4
             }
         ]
@@ -156,7 +156,7 @@ const setChart = () => {
         datasets: [
             {
                 data: [11, 16, 7, 3],
-                backgroundColor: [documentStyle.getPropertyValue('--indigo-500'), documentStyle.getPropertyValue('--purple-500'), documentStyle.getPropertyValue('--teal-500'), documentStyle.getPropertyValue('--orange-500')],
+                backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500'), documentStyle.getPropertyValue('--p-orange-500')],
                 label: 'My dataset'
             }
         ],
@@ -185,20 +185,20 @@ const setChart = () => {
         datasets: [
             {
                 label: 'My First dataset',
-                borderColor: documentStyle.getPropertyValue('--indigo-400'),
-                pointBackgroundColor: documentStyle.getPropertyValue('--indigo-400'),
-                pointBorderColor: documentStyle.getPropertyValue('--indigo-400'),
+                borderColor: documentStyle.getPropertyValue('--p-indigo-400'),
+                pointBackgroundColor: documentStyle.getPropertyValue('--p-indigo-400'),
+                pointBorderColor: documentStyle.getPropertyValue('--p-indigo-400'),
                 pointHoverBackgroundColor: textColor,
-                pointHoverBorderColor: documentStyle.getPropertyValue('--indigo-400'),
+                pointHoverBorderColor: documentStyle.getPropertyValue('--p-indigo-400'),
                 data: [65, 59, 90, 81, 56, 55, 40]
             },
             {
                 label: 'My Second dataset',
-                borderColor: documentStyle.getPropertyValue('--purple-400'),
-                pointBackgroundColor: documentStyle.getPropertyValue('--purple-400'),
-                pointBorderColor: documentStyle.getPropertyValue('--purple-400'),
+                borderColor: documentStyle.getPropertyValue('--p-purple-400'),
+                pointBackgroundColor: documentStyle.getPropertyValue('--p-purple-400'),
+                pointBorderColor: documentStyle.getPropertyValue('--p-purple-400'),
                 pointHoverBackgroundColor: textColor,
-                pointHoverBorderColor: documentStyle.getPropertyValue('--purple-400'),
+                pointHoverBorderColor: documentStyle.getPropertyValue('--p-purple-400'),
                 data: [28, 48, 40, 19, 96, 27, 100]
             }
         ]
diff --git a/src/views/uikit/File.vue b/src/views/uikit/FileDoc.vue
similarity index 58%
rename from src/views/uikit/File.vue
rename to src/views/uikit/FileDoc.vue
index 5bded8b..e705c3d 100644
--- a/src/views/uikit/File.vue
+++ b/src/views/uikit/FileDoc.vue
@@ -14,9 +14,14 @@ const onUpload = () => {
             <div class="card">
                 <h5>Advanced</h5>
                 <FileUpload name="demo[]" @uploader="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" customUpload />
-
+            </div>
+            <div class="card">
                 <h5>Basic</h5>
-                <FileUpload mode="basic" name="demo[]" accept="image/*" :maxFileSize="1000000" @uploader="onUpload" customUpload />
+                <div class="card flex flex-col gap-6 items-center justify-center">
+                    <Toast />
+                    <FileUpload ref="fileupload" mode="basic" name="demo[]" url="/api/upload" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
+                    <Button label="Upload" @click="upload" severity="secondary" />
+                </div>
             </div>
         </div>
     </div>
diff --git a/src/views/uikit/FloatLabel.vue b/src/views/uikit/FloatLabel.vue
deleted file mode 100644
index 2c50b6c..0000000
--- a/src/views/uikit/FloatLabel.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CountryService } from '@/service/CountryService';
-
-const countries = ref([]);
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-const filteredCountries = ref(null);
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-const value4 = ref(null);
-const value5 = ref(null);
-const value6 = ref(null);
-const value7 = ref(null);
-const value8 = ref(null);
-const value9 = ref(null);
-const value10 = ref(null);
-const countryService = new CountryService();
-
-onMounted(() => {
-    countryService.getCountries().then((data) => (countries.value = data));
-});
-
-const searchCountry = (event) => {
-    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
-    const filtered = [];
-    const query = event.query;
-    for (let i = 0; i < countries.value.length; i++) {
-        const country = countries.value[i];
-        if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
-            filtered.push(country);
-        }
-    }
-    filteredCountries.value = filtered;
-};
-</script>
-
-<template>
-    <div class="card">
-        <h5>Float Label</h5>
-        <div class="grid grid-cols-12 gap-4 p-fluid mt-4">
-            <div class="field col-span-12 md:col-span-4">
-                <FloatLabel>
-                    <InputText type="text" id="inputtext" v-model="value1" />
-                    <label for="inputtext">InputText</label>
-                </FloatLabel>
-            </div>
-            <div class="field col-span-12 md:col-span-4">
-                <FloatLabel>
-                    <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></AutoComplete>
-                    <label for="autocomplete">AutoComplete</label>
-                </FloatLabel>
-            </div>
-            <div class="field col-span-12 md:col-span-4">
-                <FloatLabel>
-                    <Calendar inputId="calendar" v-model="value3"></Calendar>
-                    <label for="calendar">Calendar</label>
-                </FloatLabel>
-            </div>
-            <div class="field col-span-12 md:col-span-4">
-                <FloatLabel>
-                    <Chips inputId="chips" v-model="value4"></Chips>
-                    <label for="chips">Chips</label>
-                </FloatLabel>
-            </div>
-            <div class="field col-span-12 md:col-span-4">
-                <FloatLabel>
-                    <InputMask id="inputmask" mask="99/99/9999" v-model="value5"></InputMask>
-                    <label for="inputmask">InputMask</label>
-                </FloatLabel>
-            </div>
-            <div class="field col-span-12 md:col-span-4">
-                <FloatLabel>
-                    <InputNumber id="inputnumber" v-model="value6"></InputNumber>
-                    <label for="inputnumber">InputNumber</label>
-                </FloatLabel>
-            </div>
-            <div class="field col-span-12 md:col-span-4">
-                <InputGroup>
-                    <InputGroupAddon>
-                        <i class="pi pi-user"></i>
-                    </InputGroupAddon>
-                    <FloatLabel>
-                        <InputText type="text" id="inputgroup" v-model="value7" />
-                        <label for="inputgroup">InputGroup</label>
-                    </FloatLabel>
-                </InputGroup>
-            </div>
-            <div class="field col-span-12 md:col-span-4">
-                <FloatLabel>
-                    <Dropdown id="dropdown" :options="cities" v-model="value8" optionLabel="name"></Dropdown>
-                    <label for="dropdown">Dropdown</label>
-                </FloatLabel>
-            </div>
-            <div class="field col-span-12 md:col-span-4">
-                <FloatLabel>
-                    <MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false"></MultiSelect>
-                    <label for="multiselect">MultiSelect</label>
-                </FloatLabel>
-            </div>
-            <div class="field col-span-12 md:col-span-4">
-                <FloatLabel>
-                    <Textarea inputId="textarea" rows="3" cols="30" v-model="value10"></Textarea>
-                    <label for="textarea">Textarea</label>
-                </FloatLabel>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/src/views/uikit/FloatLabelDoc.vue b/src/views/uikit/FloatLabelDoc.vue
new file mode 100644
index 0000000..0d98caa
--- /dev/null
+++ b/src/views/uikit/FloatLabelDoc.vue
@@ -0,0 +1,104 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CountryService } from '@/service/CountryService';
+
+const countries = ref([]);
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+const filteredCountries = ref(null);
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const value4 = ref(null);
+const value5 = ref(null);
+const value6 = ref(null);
+const value7 = ref(null);
+const value8 = ref(null);
+const value9 = ref(null);
+const value10 = ref(null);
+const countryService = new CountryService();
+
+onMounted(() => {
+    countryService.getCountries().then((data) => (countries.value = data));
+});
+
+const searchCountry = (event) => {
+    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
+    const filtered = [];
+    const query = event.query;
+    for (let i = 0; i < countries.value.length; i++) {
+        const country = countries.value[i];
+        if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
+            filtered.push(country);
+        }
+    }
+    filteredCountries.value = filtered;
+};
+</script>
+
+<template>
+    <div class="card">
+        <h5>Float Label</h5>
+        <div class="flex flex-col md:flex-row gap-6">
+            <FloatLabel class="md:w-1/3">
+                <InputText type="text" id="inputtext" v-model="value1" fluid />
+                <label for="inputtext">InputText</label>
+            </FloatLabel>
+            <FloatLabel class="md:w-1/3">
+                <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" fluid inputClass="w-full" />
+                <label for="autocomplete">AutoComplete</label>
+            </FloatLabel>
+            <FloatLabel class="md:w-1/3">
+                <DatePicker inputId="calendar" v-model="value3" fluid />
+                <label for="calendar">DatePicker</label>
+            </FloatLabel>
+        </div>
+
+        <div class="flex flex-col md:flex-row gap-6 mt-6">
+            <FloatLabel class="md:w-1/3">
+                <AutoComplete inputId="chips" v-model="value4" multiple :typeahead="false" fluid />
+                <label for="chips">Chips</label>
+            </FloatLabel>
+            <FloatLabel class="md:w-1/3">
+                <InputMask id="inputmask" mask="99/99/9999" v-model="value5" fluid />
+                <label for="inputmask">InputMask</label>
+            </FloatLabel>
+            <FloatLabel class="md:w-1/3">
+                <InputNumber id="inputnumber" v-model="value6" fluid />
+                <label for="inputnumber">InputNumber</label>
+            </FloatLabel>
+        </div>
+
+        <div class="flex flex-col md:flex-row gap-6 mt-6">
+            <InputGroup class="md:!w-1/3">
+                <InputGroupAddon>
+                    <i class="pi pi-user"></i>
+                </InputGroupAddon>
+                <FloatLabel>
+                    <InputText type="text" id="inputgroup" v-model="value7" fluid />
+                    <label for="inputgroup">InputGroup</label>
+                </FloatLabel>
+            </InputGroup>
+            <FloatLabel class="md:w-1/3">
+                <Select id="dropdown" :options="cities" v-model="value8" optionLabel="name" class="w-full" />
+                <label for="dropdown">Select</label>
+            </FloatLabel>
+            <FloatLabel class="md:w-1/3">
+                <MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false" fluid />
+                <label for="multiselect">MultiSelect</label>
+            </FloatLabel>
+        </div>
+
+        <div class="flex flex-col md:flex-row gap-6 mt-6">
+            <FloatLabel class="md:w-1/3">
+                <Textarea inputId="textarea" rows="3" cols="30" v-model="value10" fluid />
+                <label for="textarea">Textarea</label>
+            </FloatLabel>
+        </div>
+    </div>
+</template>
diff --git a/src/views/uikit/FormLayout.vue b/src/views/uikit/FormLayout.vue
index 9beb469..a9b442a 100644
--- a/src/views/uikit/FormLayout.vue
+++ b/src/views/uikit/FormLayout.vue
@@ -11,111 +11,111 @@ const dropdownItem = ref(null);
 </script>
 
 <template>
-    <div class="grid grid-cols-12 gap-4">
-        <div class="col-span-12 md:col-span-6">
-            <div class="card p-fluid">
-                <h5>Vertical</h5>
-                <div class="field">
-                    <label for="name1">Name</label>
-                    <InputText id="name1" type="text" />
+    <Fluid>
+        <div class="flex flex-col md:flex-row gap-6">
+            <div class="md:w-1/2">
+                <div class="card flex flex-col gap-4">
+                    <h5>Vertical</h5>
+                    <div class="flex flex-col gap-2">
+                        <label for="name1">Name</label>
+                        <InputText id="name1" type="text" />
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <label for="email1">Email</label>
+                        <InputText id="email1" type="text" />
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <label for="age1">Age</label>
+                        <InputText id="age1" type="text" />
+                    </div>
                 </div>
-                <div class="field">
-                    <label for="email1">Email</label>
-                    <InputText id="email1" type="text" />
-                </div>
-                <div class="field">
-                    <label for="age1">Age</label>
-                    <InputText id="age1" type="text" />
+
+                <div class="card flex flex-col gap-4">
+                    <h5>Vertical Grid</h5>
+                    <div class="flex flex-wrap gap-4">
+                        <div class="flex flex-col grow basis-0 gap-2">
+                            <label for="name2">Name</label>
+                            <InputText id="name2" type="text" />
+                        </div>
+                        <div class="flex flex-col grow basis-0 gap-2">
+                            <label for="email2">Email</label>
+                            <InputText id="email2" type="text" />
+                        </div>
+                    </div>
                 </div>
             </div>
-
-            <div class="card p-fluid">
-                <h5>Vertical Grid</h5>
-                <div class="formgrid grid grid-cols-12 gap-4">
-                    <div class="field col">
-                        <label for="name2">Name</label>
-                        <InputText id="name2" type="text" />
+            <div class="md:w-1/2">
+                <div class="card flex flex-col gap-4">
+                    <h5>Horizontal</h5>
+                    <div class="grid grid-cols-12 gap-2">
+                        <label for="name3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Name</label>
+                        <div class="col-span-12 md:col-span-10">
+                            <InputText id="name3" type="text" />
+                        </div>
                     </div>
-                    <div class="field col">
-                        <label for="email2">Email</label>
-                        <InputText id="email2" type="text" />
+                    <div class="grid grid-cols-12 gap-2">
+                        <label for="email3" class="flex items-center col-span-12 mb-2 md:col-span-2 md:mb-0">Email</label>
+                        <div class="col-span-12 md:col-span-10">
+                            <InputText id="email3" type="text" />
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card flex flex-col gap-4">
+                    <h5>Inline</h5>
+                    <div class="flex flex-wrap items-start gap-4">
+                        <div class="field">
+                            <label for="firstname1" class="sr-only">Firstname</label>
+                            <InputText id="firstname1" type="text" placeholder="Firstname" />
+                        </div>
+                        <div class="field">
+                            <label for="lastname1" class="sr-only">Lastname</label>
+                            <InputText id="lastname1" type="text" placeholder="Lastname" />
+                        </div>
+                        <Button label="Submit"></Button>
+                    </div>
+                </div>
+                <div class="card flex flex-col gap-4">
+                    <h5>Help Text</h5>
+                    <div class="flex flex-wrap gap-2">
+                        <label for="username">Username</label>
+                        <InputText id="username" type="text" />
+                        <small>Enter your username to reset your password.</small>
                     </div>
                 </div>
             </div>
         </div>
 
-        <div class="col-span-12 md:col-span-6">
-            <div class="card p-fluid">
-                <h5>Horizontal</h5>
-                <div class="field grid grid-cols-12 gap-4">
-                    <label for="name3" class="col-span-12 mb-2 md:col-span-2 md:mb-0">Name</label>
-                    <div class="col-span-12 md:col-span-10">
-                        <InputText id="name3" type="text" />
-                    </div>
-                </div>
-                <div class="field grid grid-cols-12 gap-4">
-                    <label for="email3" class="col-span-12 mb-2 md:col-span-2 md:mb-0">Email</label>
-                    <div class="col-span-12 md:col-span-10">
-                        <InputText id="email3" type="text" />
-                    </div>
-                </div>
-            </div>
-
-            <div class="card">
-                <h5>Inline</h5>
-                <div class="formgroup-inline">
-                    <div class="field">
-                        <label for="firstname1" class="p-sr-only">Firstname</label>
-                        <InputText id="firstname1" type="text" placeholder="Firstname" />
-                    </div>
-                    <div class="field">
-                        <label for="lastname1" class="p-sr-only">Lastname</label>
-                        <InputText id="lastname1" type="text" placeholder="Lastname" />
-                    </div>
-                    <Button label="Submit"></Button>
-                </div>
-            </div>
-
-            <div class="card">
-                <h5>Help Text</h5>
-                <div class="field p-fluid">
-                    <label for="username">Username</label>
-                    <InputText id="username" type="text" />
-                    <small>Enter your username to reset your password.</small>
-                </div>
-            </div>
-        </div>
-
-        <div class="col-span-12">
-            <div class="card">
+        <div class="flex mt-6">
+            <div class="card flex flex-col gap-4 w-full">
                 <h5>Advanced</h5>
-                <div class="p-fluid formgrid grid grid-cols-12 gap-4">
-                    <div class="field col-span-12 md:col-span-6">
+                <div class="flex flex-col md:flex-row gap-4">
+                    <div class="flex flex-wrap gap-2 w-full">
                         <label for="firstname2">Firstname</label>
                         <InputText id="firstname2" type="text" />
                     </div>
-                    <div class="field col-span-12 md:col-span-6">
+                    <div class="flex flex-wrap gap-2 w-full">
                         <label for="lastname2">Lastname</label>
                         <InputText id="lastname2" type="text" />
                     </div>
-                    <div class="field col-span-12">
-                        <label for="address">Address</label>
-                        <Textarea id="address" rows="4" />
-                    </div>
-                    <div class="field col-span-12 md:col-span-6">
-                        <label for="city">City</label>
-                        <InputText id="city" type="text" />
-                    </div>
-                    <div class="field col-span-12 md:col-span-3">
+                </div>
+
+                <div class="flex flex-wrap">
+                    <label for="address">Address</label>
+                    <Textarea id="address" rows="4" />
+                </div>
+
+                <div class="flex flex-col md:flex-row gap-4">
+                    <div class="flex flex-wrap gap-2 w-full">
                         <label for="state">State</label>
-                        <Dropdown id="state" v-model="dropdownItem" :options="dropdownItems" optionLabel="name" placeholder="Select One"></Dropdown>
+                        <Select id="state" v-model="dropdownItem" :options="dropdownItems" optionLabel="name" placeholder="Select One" class="w-full"></Select>
                     </div>
-                    <div class="field col-span-12 md:col-span-3">
+                    <div class="flex flex-wrap gap-2 w-full">
                         <label for="zip">Zip</label>
                         <InputText id="zip" type="text" />
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </Fluid>
 </template>
diff --git a/src/views/uikit/Input.vue b/src/views/uikit/Input.vue
deleted file mode 100644
index 252b2bf..0000000
--- a/src/views/uikit/Input.vue
+++ /dev/null
@@ -1,300 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CountryService } from '@/service/CountryService';
-import { NodeService } from '@/service/NodeService';
-
-const floatValue = ref(null);
-const autoValue = ref(null);
-const selectedAutoValue = ref(null);
-const autoFilteredValue = ref([]);
-const calendarValue = ref(null);
-const inputNumberValue = ref(null);
-const chipsValue = ref(null);
-const sliderValue = ref(50);
-const ratingValue = ref(null);
-const colorValue = ref('#1976D2');
-const radioValue = ref(null);
-const checkboxValue = ref([]);
-const switchValue = ref(false);
-const listboxValues = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-const listboxValue = ref(null);
-const dropdownValues = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-const dropdownValue = ref(null);
-const multiselectValues = ref([
-    { name: 'Australia', code: 'AU' },
-    { name: 'Brazil', code: 'BR' },
-    { name: 'China', code: 'CN' },
-    { name: 'Egypt', code: 'EG' },
-    { name: 'France', code: 'FR' },
-    { name: 'Germany', code: 'DE' },
-    { name: 'India', code: 'IN' },
-    { name: 'Japan', code: 'JP' },
-    { name: 'Spain', code: 'ES' },
-    { name: 'United States', code: 'US' }
-]);
-
-const multiselectValue = ref(null);
-const toggleValue = ref(false);
-const selectButtonValue1 = ref(null);
-const selectButtonValues1 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
-const selectButtonValue2 = ref(null);
-const selectButtonValues2 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
-const knobValue = ref(50);
-const inputGroupValue = ref(false);
-const treeSelectNodes = ref(null);
-const selectedNode = ref(null);
-const countryService = new CountryService();
-const nodeService = new NodeService();
-
-onMounted(() => {
-    countryService.getCountries().then((data) => (autoValue.value = data));
-    nodeService.getTreeNodes().then((data) => (treeSelectNodes.value = data));
-});
-
-const searchCountry = (event) => {
-    setTimeout(() => {
-        if (!event.query.trim().length) {
-            autoFilteredValue.value = [...autoValue.value];
-        } else {
-            autoFilteredValue.value = autoValue.value.filter((country) => {
-                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-            });
-        }
-    }, 250);
-};
-</script>
-<template>
-    <div class="grid grid-cols-12 gap-4">
-        <div class="col-span-12 md:col-span-6">
-            <div class="card">
-                <h5>InputText</h5>
-                <div class="grid grid-cols-12 gap-4 formgrid">
-                    <div class="col-span-12 mb-2 lg:col-span-4 lg:mb-0">
-                        <InputText type="text" placeholder="Default" fluid></InputText>
-                    </div>
-                    <div class="col-span-12 mb-2 lg:col-span-4 lg:mb-0">
-                        <InputText type="text" placeholder="Disabled" :disabled="true" fluid></InputText>
-                    </div>
-                    <div class="col-span-12 mb-2 lg:col-span-4 lg:mb-0">
-                        <InputText type="text" placeholder="Invalid" invalid fluid />
-                    </div>
-                </div>
-
-                <h5>Icons</h5>
-                <div class="grid grid-cols-12 gap-4 formgrid">
-                    <div class="col-span-12 mb-2 lg:col-span-6 lg:mb-0">
-                        <IconField>
-                            <InputIcon class="pi pi-user" />
-                            <InputText type="text" placeholder="Username" />
-                        </IconField>
-                    </div>
-                    <div class="col-span-12 mb-2 lg:col-span-6 lg:mb-0">
-                        <IconField iconPosition="left">
-                            <InputText type="text" placeholder="Search" />
-                            <InputIcon class="pi pi-search" />
-                        </IconField>
-                    </div>
-                </div>
-
-                <h5>Float Label</h5>
-                <FloatLabel>
-                    <InputText id="username" type="text" v-model="floatValue" />
-                    <label for="username">Username</label>
-                </FloatLabel>
-
-                <h5>Textarea</h5>
-                <Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
-
-                <h5>AutoComplete</h5>
-                <AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue"
-                    :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" />
-
-                <h5>Calendar</h5>
-                <Calendar :showIcon="true" :showButtonBar="true" v-model="calendarValue"></Calendar>
-
-                <h5>Spinner</h5>
-                <InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber>
-
-                <h5>Chips</h5>
-                <Chips v-model="chipsValue" />
-            </div>
-
-            <div class="card">
-                <div class="grid grid-cols-12 gap-4">
-                    <div class="col-span-12">
-                        <h5>Slider</h5>
-                        <InputText v-model.number="sliderValue" />
-                        <Slider v-model="sliderValue" />
-                    </div>
-                    <div class="col-span-12 md:col-span-6">
-                        <h5>Rating</h5>
-                        <Rating v-model="ratingValue" />
-                    </div>
-                    <div class="col-span-12 md:col-span-6">
-                        <h5>ColorPicker</h5>
-                        <ColorPicker style="width: 2rem" v-model="colorValue" />
-                    </div>
-                    <div class="col-span-12">
-                        <h5>Knob</h5>
-                        <Knob v-model="knobValue" :step="10" :min="-50" :max="50" valueTemplate="{value}%" />
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="col-span-12 md:col-span-6">
-            <div class="card">
-                <h5>RadioButton</h5>
-                <div class="grid grid-cols-12 gap-4">
-                    <div class="col-span-12 md:col-span-4">
-                        <div class="field-radiobutton mb-0">
-                            <RadioButton id="option1" name="option" value="Chicago" v-model="radioValue" />
-                            <label for="option1">Chicago</label>
-                        </div>
-                    </div>
-                    <div class="col-span-12 md:col-span-4">
-                        <div class="field-radiobutton mb-0">
-                            <RadioButton id="option2" name="option" value="Los Angeles" v-model="radioValue" />
-                            <label for="option2">Los Angeles</label>
-                        </div>
-                    </div>
-                    <div class="col-span-12 md:col-span-4">
-                        <div class="field-radiobutton mb-0">
-                            <RadioButton id="option3" name="option" value="New York" v-model="radioValue" />
-                            <label for="option3">New York</label>
-                        </div>
-                    </div>
-                </div>
-
-                <h5>Checkbox</h5>
-                <div class="grid grid-cols-12 gap-4">
-                    <div class="col-span-12 md:col-span-4">
-                        <div class="field-checkbox mb-0">
-                            <Checkbox id="checkOption1" name="option" value="Chicago" v-model="checkboxValue" />
-                            <label for="checkOption1">Chicago</label>
-                        </div>
-                    </div>
-                    <div class="col-span-12 md:col-span-4">
-                        <div class="field-checkbox mb-0">
-                            <Checkbox id="checkOption2" name="option" value="Los Angeles" v-model="checkboxValue" />
-                            <label for="checkOption2">Los Angeles</label>
-                        </div>
-                    </div>
-                    <div class="col-span-12 md:col-span-4">
-                        <div class="field-checkbox mb-0">
-                            <Checkbox id="checkOption3" name="option" value="New York" v-model="checkboxValue" />
-                            <label for="checkOption3">New York</label>
-                        </div>
-                    </div>
-                </div>
-
-                <h5>Input Switch</h5>
-                <InputSwitch v-model="switchValue" />
-            </div>
-
-            <div class="card">
-                <h5>Listbox</h5>
-                <Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true" />
-
-                <h5>Dropdown</h5>
-                <Dropdown v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
-
-                <h5>MultiSelect</h5>
-                <MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name"
-                    placeholder="Select Countries" :filter="true">
-                    <template #value="slotProps">
-                        <div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast text-primary rounded-border mr-2"
-                            v-for="option of slotProps.value" :key="option.code">
-                            <span :class="'mr-2 flag flag-' + option.code.toLowerCase()"
-                                style="width: 18px; height: 12px" />
-                            <div>{{ option.name }}</div>
-                        </div>
-                        <template v-if="!slotProps.value || slotProps.value.length === 0">
-                            <div class="p-1">Select Countries</div>
-                        </template>
-                    </template>
-                    <template #option="slotProps">
-                        <div class="flex items-center">
-                            <span :class="'mr-2 flag flag-' + slotProps.option.code.toLowerCase()"
-                                style="width: 18px; height: 12px" />
-                            <div>{{ slotProps.option.name }}</div>
-                        </div>
-                    </template>
-                </MultiSelect>
-
-                <h5>TreeSelect</h5>
-                <TreeSelect v-model="selectedNode" :options="treeSelectNodes" placeholder="Select Item"></TreeSelect>
-            </div>
-
-            <div class="card">
-                <h5>ToggleButton</h5>
-                <ToggleButton v-model="toggleValue" onLabel="Yes" offLabel="No" :style="{ width: '10em' }" />
-
-                <h5>SelectButton</h5>
-                <SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />
-
-                <h5>SelectButton - Multiple</h5>
-                <SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name"
-                    :multiple="true" />
-            </div>
-        </div>
-
-        <div class="col-span-12">
-            <div class="card">
-                <h5>Input Groups</h5>
-                <div class="grid grid-cols-12 gap-4 p-fluid">
-                    <div class="col-span-12 md:col-span-6">
-                        <InputGroup>
-                            <InputGroupAddon>
-                                <i class="pi pi-user"></i>
-                            </InputGroupAddon>
-                            <InputText placeholder="Username" />
-                        </InputGroup>
-                    </div>
-
-                    <div class="col-span-12 md:col-span-6">
-                        <InputGroup>
-                            <InputGroupAddon>
-                                <i class="pi pi-clock"></i>
-                            </InputGroupAddon>
-                            <InputGroupAddon>
-                                <i class="pi pi-star-fill"></i>
-                            </InputGroupAddon>
-                            <InputNumber placeholder="Price" />
-                            <InputGroupAddon>$</InputGroupAddon>
-                            <InputGroupAddon>.00</InputGroupAddon>
-                        </InputGroup>
-                    </div>
-
-                    <div class="col-span-12 md:col-span-6">
-                        <InputGroup>
-                            <Button label="Search" />
-                            <InputText placeholder="Keyword" />
-                        </InputGroup>
-                    </div>
-
-                    <div class="col-span-12 md:col-span-6">
-                        <InputGroup>
-                            <InputGroupAddon>
-                                <Checkbox v-model="inputGroupValue" :binary="true" />
-                            </InputGroupAddon>
-                            <InputText placeholder="Confirm" />
-                        </InputGroup>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/src/views/uikit/InputDoc.vue b/src/views/uikit/InputDoc.vue
new file mode 100644
index 0000000..c32d8c7
--- /dev/null
+++ b/src/views/uikit/InputDoc.vue
@@ -0,0 +1,259 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CountryService } from '@/service/CountryService';
+import { NodeService } from '@/service/NodeService';
+
+const floatValue = ref(null);
+const autoValue = ref(null);
+const selectedAutoValue = ref(null);
+const autoFilteredValue = ref([]);
+const calendarValue = ref(null);
+const inputNumberValue = ref(null);
+const chipsValue = ref(null);
+const sliderValue = ref(50);
+const ratingValue = ref(null);
+const colorValue = ref('#1976D2');
+const radioValue = ref(null);
+const checkboxValue = ref([]);
+const switchValue = ref(false);
+const listboxValues = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+const listboxValue = ref(null);
+const dropdownValues = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+const dropdownValue = ref(null);
+const multiselectValues = ref([
+    { name: 'Australia', code: 'AU' },
+    { name: 'Brazil', code: 'BR' },
+    { name: 'China', code: 'CN' },
+    { name: 'Egypt', code: 'EG' },
+    { name: 'France', code: 'FR' },
+    { name: 'Germany', code: 'DE' },
+    { name: 'India', code: 'IN' },
+    { name: 'Japan', code: 'JP' },
+    { name: 'Spain', code: 'ES' },
+    { name: 'United States', code: 'US' }
+]);
+
+const multiselectValue = ref(null);
+const toggleValue = ref(false);
+const selectButtonValue1 = ref(null);
+const selectButtonValues1 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
+const selectButtonValue2 = ref(null);
+const selectButtonValues2 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
+const knobValue = ref(50);
+const inputGroupValue = ref(false);
+const treeSelectNodes = ref(null);
+const selectedNode = ref(null);
+const countryService = new CountryService();
+const nodeService = new NodeService();
+
+onMounted(() => {
+    countryService.getCountries().then((data) => (autoValue.value = data));
+    nodeService.getTreeNodes().then((data) => (treeSelectNodes.value = data));
+});
+
+const searchCountry = (event) => {
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            autoFilteredValue.value = [...autoValue.value];
+        } else {
+            autoFilteredValue.value = autoValue.value.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
+};
+</script>
+
+<template>
+    <div class="flex flex-col md:flex-row gap-6">
+        <div class="md:w-1/2">
+            <div class="card flex flex-col gap-4">
+                <h5>InputText</h5>
+                <div class="flex flex-col md:flex-row gap-4">
+                    <InputText type="text" placeholder="Default" fluid />
+                    <InputText type="text" placeholder="Disabled" :disabled="true" fluid />
+                    <InputText type="text" placeholder="Invalid" invalid fluid />
+                </div>
+
+                <h5 class="mt-6">Icons</h5>
+                <IconField>
+                    <InputIcon class="pi pi-user" />
+                    <InputText type="text" placeholder="Username" fluid />
+                </IconField>
+                <IconField iconPosition="left">
+                    <InputText type="text" placeholder="Search" fluid />
+                    <InputIcon class="pi pi-search" />
+                </IconField>
+
+                <h5 class="mt-6">Float Label</h5>
+                <FloatLabel>
+                    <InputText id="username" type="text" v-model="floatValue" fluid />
+                    <label for="username">Username</label>
+                </FloatLabel>
+
+                <h5 class="mt-6">Textarea</h5>
+                <Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" fluid />
+
+                <h5 class="mt-6">AutoComplete</h5>
+                <AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" fluid />
+
+                <h5 class="mt-6">DatePicker</h5>
+                <DatePicker :showIcon="true" :showButtonBar="true" v-model="calendarValue" fluid></DatePicker>
+
+                <h5 class="mt-6">Spinner</h5>
+                <InputNumber v-model="inputNumberValue" showButtons mode="decimal" fluid></InputNumber>
+
+                <h5 class="mt-6">Chips</h5>
+                <AutoComplete v-model="chipsValue" :typeahead="false" multiple fluid />
+            </div>
+
+            <div class="card flex flex-col gap-4">
+                <h5>Slider</h5>
+                <InputText v-model.number="sliderValue" fluid />
+                <Slider v-model="sliderValue" />
+
+                <div class="flex flex-row mt-6">
+                    <div class="flex flex-col gap-4 w-1/2">
+                        <h5>Rating</h5>
+                        <Rating v-model="ratingValue" />
+                    </div>
+                    <div class="flex flex-col gap-4 w-1/2">
+                        <h5>ColorPicker</h5>
+                        <ColorPicker style="width: 2rem" v-model="colorValue" />
+                    </div>
+                </div>
+
+                <h5 class="mt-6">Knob</h5>
+                <Knob v-model="knobValue" :step="10" :min="-50" :max="50" valueTemplate="{value}%" />
+            </div>
+        </div>
+        <div class="md:w-1/2">
+            <div class="card flex flex-col gap-4">
+                <h5>RadioButton</h5>
+                <div class="flex flex-col md:flex-row gap-4">
+                    <div class="flex items-center">
+                        <RadioButton id="option1" name="option" value="Chicago" v-model="radioValue" />
+                        <label for="option1" class="leading-none ml-2">Chicago</label>
+                    </div>
+                    <div class="flex items-center">
+                        <RadioButton id="option2" name="option" value="Los Angeles" v-model="radioValue" />
+                        <label for="option2" class="leading-none ml-2">Los Angeles</label>
+                    </div>
+                    <div class="flex items-center">
+                        <RadioButton id="option3" name="option" value="New York" v-model="radioValue" />
+                        <label for="option3" class="leading-none ml-2">New York</label>
+                    </div>
+                </div>
+
+                <h5 class="mt-6">Checkbox</h5>
+                <div class="flex flex-col md:flex-row gap-4">
+                    <div class="flex items-center">
+                        <Checkbox id="checkOption1" name="option" value="Chicago" v-model="checkboxValue" />
+                        <label for="checkOption1" class="ml-2">Chicago</label>
+                    </div>
+                    <div class="flex items-center">
+                        <Checkbox id="checkOption2" name="option" value="Los Angeles" v-model="checkboxValue" />
+                        <label for="checkOption2" class="ml-2">Los Angeles</label>
+                    </div>
+                    <div class="flex items-center">
+                        <Checkbox id="checkOption3" name="option" value="New York" v-model="checkboxValue" />
+                        <label for="checkOption3" class="ml-2">New York</label>
+                    </div>
+                </div>
+
+                <h5 class="mt-6">Input Switch</h5>
+                <ToggleSwitch v-model="switchValue" />
+            </div>
+
+            <div class="card flex flex-col gap-4">
+                <h5>Listbox</h5>
+                <Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true" />
+
+                <h5 class="mt-6">Select</h5>
+                <Select v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" fluid />
+
+                <h5 class="mt-6">MultiSelect</h5>
+                <MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true" fluid>
+                    <template #value="slotProps">
+                        <div class="inline-flex items-center py-1 px-2 bg-primary text-primary-contrast rounded-border mr-2" v-for="option of slotProps.value" :key="option.code">
+                            <span :class="'mr-2 flag flag-' + option.code.toLowerCase()" style="width: 18px; height: 12px" />
+                            <div>{{ option.name }}</div>
+                        </div>
+                        <template v-if="!slotProps.value || slotProps.value.length === 0">
+                            <div class="p-1">Select Countries</div>
+                        </template>
+                    </template>
+                    <template #option="slotProps">
+                        <div class="flex items-center">
+                            <span :class="'mr-2 flag flag-' + slotProps.option.code.toLowerCase()" style="width: 18px; height: 12px" />
+                            <div>{{ slotProps.option.name }}</div>
+                        </div>
+                    </template>
+                </MultiSelect>
+
+                <h5 class="mt-6">TreeSelect</h5>
+                <TreeSelect v-model="selectedNode" :options="treeSelectNodes" placeholder="Select Item" fluid></TreeSelect>
+            </div>
+
+            <div class="card flex flex-col gap-4">
+                <h5>ToggleButton</h5>
+                <ToggleButton v-model="toggleValue" onLabel="Yes" offLabel="No" :style="{ width: '10em' }" />
+
+                <h5 class="mt-6">SelectButton</h5>
+                <SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />
+
+                <h5 class="mt-6">SelectButton - Multiple</h5>
+                <SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true" />
+            </div>
+        </div>
+    </div>
+
+    <div class="flex mt-6">
+        <div class="card flex flex-col gap-4 w-full">
+            <h5>Input Groups</h5>
+            <div class="flex flex-col md:flex-row gap-4">
+                <InputGroup>
+                    <InputGroupAddon>
+                        <i class="pi pi-user"></i>
+                    </InputGroupAddon>
+                    <InputText placeholder="Username" fluid />
+                </InputGroup>
+                <InputGroup>
+                    <InputGroupAddon>
+                        <i class="pi pi-clock"></i>
+                    </InputGroupAddon>
+                    <InputGroupAddon>
+                        <i class="pi pi-star-fill"></i>
+                    </InputGroupAddon>
+                    <InputNumber placeholder="Price" fluid />
+                    <InputGroupAddon>$</InputGroupAddon>
+                    <InputGroupAddon>.00</InputGroupAddon>
+                </InputGroup>
+            </div>
+            <div class="flex flex-col md:flex-row gap-4">
+                <InputGroup>
+                    <Button label="Search" />
+                    <InputText placeholder="Keyword" fluid />
+                </InputGroup>
+                <InputGroup>
+                    <InputGroupAddon>
+                        <Checkbox v-model="inputGroupValue" :binary="true" />
+                    </InputGroupAddon>
+                    <InputText placeholder="Confirm" fluid />
+                </InputGroup>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/views/uikit/InvalidState.vue b/src/views/uikit/InvalidState.vue
deleted file mode 100644
index 31fa5ab..0000000
--- a/src/views/uikit/InvalidState.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CountryService } from '@/service/CountryService';
-
-const countries = ref(null);
-const filteredCountries = ref(null);
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-const value4 = ref(null);
-const value5 = ref(null);
-const value6 = ref(null);
-const value7 = ref(null);
-const value8 = ref(null);
-const value9 = ref(null);
-const value10 = ref(null);
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-const countryService = new CountryService();
-
-onMounted(() => {
-    countryService.getCountries().then((data) => {
-        countries.value = data;
-    });
-});
-
-const searchCountry = (event) => {
-    setTimeout(() => {
-        if (!event.query.trim().length) {
-            filteredCountries.value = [...countries];
-        } else {
-            filteredCountries.value = countries.value.filter((country) => {
-                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-            });
-        }
-    }, 250);
-};
-</script>
-
-<template>
-    <div class="grid grid-cols-12 gap-4 p-fluid">
-        <div class="col">
-            <div class="card">
-                <h5>Invalid State</h5>
-                <div class="p-fluid grid grid-cols-12 gap-4">
-                    <div class="col-span-12 md:col-span-6">
-                        <div class="field">
-                            <label for="inputtext">InputText</label>
-                            <InputText id="inputtext" type="text" v-model="value1" invalid />
-                        </div>
-                        <div class="field">
-                            <label for="autocomplete">AutoComplete</label>
-                            <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" invalid />
-                        </div>
-                        <div class="field">
-                            <label for="calendar">Calendar</label>
-                            <Calendar id="calendar" v-model="value3" invalid :showIcon="true" />
-                        </div>
-                        <div class="field">
-                            <label for="chips">Chips</label>
-                            <Chips id="chips" v-model="value4" invalid />
-                        </div>
-                        <div class="field">
-                            <label for="password">Password</label>
-                            <Password id="password" v-model="value10" invalid />
-                        </div>
-                    </div>
-
-                    <div class="col-span-12 md:col-span-6">
-                        <div class="field">
-                            <label for="inputmask">InputMask</label>
-                            <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid />
-                        </div>
-                        <div class="field">
-                            <label for="inputnumber">InputNumber</label>
-                            <InputNumber id="inputnumber" v-model="value6" invalid />
-                        </div>
-                        <div class="field">
-                            <label for="dropdown">Dropdown</label>
-                            <Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" invalid />
-                        </div>
-                        <div class="field">
-                            <label for="multiselect">MultiSelect</label>
-                            <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" invalid />
-                        </div>
-                        <div class="field">
-                            <label for="textarea">Textarea</label>
-                            <Textarea id="textarea" v-model="value9" rows="3" invalid />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/src/views/uikit/InvalidStateDoc.vue b/src/views/uikit/InvalidStateDoc.vue
new file mode 100644
index 0000000..b1ddc5c
--- /dev/null
+++ b/src/views/uikit/InvalidStateDoc.vue
@@ -0,0 +1,94 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CountryService } from '@/service/CountryService';
+
+const countries = ref(null);
+const filteredCountries = ref(null);
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const value4 = ref(null);
+const value5 = ref(null);
+const value6 = ref(null);
+const value7 = ref(null);
+const value8 = ref(null);
+const value9 = ref(null);
+const value10 = ref(null);
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+const countryService = new CountryService();
+
+onMounted(() => {
+    countryService.getCountries().then((data) => {
+        countries.value = data;
+    });
+});
+
+const searchCountry = (event) => {
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            filteredCountries.value = [...countries];
+        } else {
+            filteredCountries.value = countries.value.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
+};
+</script>
+
+<template>
+    <div class="card">
+        <h5>Invalid State</h5>
+        <div class="flex flex-col md:flex-row gap-6">
+            <div class="md:w-1/2">
+                <div class="flex flex-col gap-2">
+                    <label for="inputtext">InputText</label>
+                    <InputText id="inputtext" type="text" v-model="value1" invalid fluid />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="autocomplete">AutoComplete</label>
+                    <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" invalid inputClass="w-full" />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="calendar">DatePicker</label>
+                    <DatePicker id="calendar" v-model="value3" invalid :showIcon="true" fluid />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="chips">Chips</label>
+                    <AutoComplete id="chips" v-model="value4" invalid fluid multiple :typeahead="false" />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="password">Password</label>
+                    <Password id="password" v-model="value10" invalid fluid />
+                </div>
+            </div>
+            <div class="md:w-1/2">
+                <div class="flex flex-col gap-2">
+                    <label for="inputmask">InputMask</label>
+                    <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" invalid fluid />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="inputnumber">InputNumber</label>
+                    <InputNumber id="inputnumber" v-model="value6" invalid fluid />
+                </div>
+                <div class="flex flex-col gap-2"></div>
+                <label for="dropdown">Select</label>
+                <Select id="dropdown" v-model="value7" :options="cities" optionLabel="name" invalid fluid />
+                <div class="flex flex-col gap-2">
+                    <label for="multiselect">MultiSelect</label>
+                    <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" invalid fluid />
+                </div>
+                <div class="flex flex-col gap-2">
+                    <label for="textarea">Textarea</label>
+                    <Textarea id="textarea" v-model="value9" rows="3" invalid fluid />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/views/uikit/List.vue b/src/views/uikit/List.vue
deleted file mode 100644
index 22dea38..0000000
--- a/src/views/uikit/List.vue
+++ /dev/null
@@ -1,191 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService';
-
-const picklistValue = ref([
-    [
-        { name: 'San Francisco', code: 'SF' },
-        { name: 'London', code: 'LDN' },
-        { name: 'Paris', code: 'PRS' },
-        { name: 'Istanbul', code: 'IST' },
-        { name: 'Berlin', code: 'BRL' },
-        { name: 'Barcelona', code: 'BRC' },
-        { name: 'Rome', code: 'RM' }
-    ],
-    []
-]);
-
-const orderlistValue = ref([
-    { name: 'San Francisco', code: 'SF' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Paris', code: 'PRS' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Berlin', code: 'BRL' },
-    { name: 'Barcelona', code: 'BRC' },
-    { name: 'Rome', code: 'RM' }
-]);
-
-const dataviewValue = ref(null);
-const layout = ref('grid grid-cols-12 gap-4');
-const sortKey = ref(null);
-const sortOrder = ref(null);
-const sortField = ref(null);
-const sortOptions = ref([
-    { label: 'Price High to Low', value: '!price' },
-    { label: 'Price Low to High', value: 'price' }
-]);
-
-const productService = new ProductService();
-
-onMounted(() => {
-    productService.getProductsSmall().then((data) => (dataviewValue.value = data));
-});
-
-const onSortChange = (event) => {
-    const value = event.value.value;
-    const sortValue = event.value;
-
-    if (value.indexOf('!') === 0) {
-        sortOrder.value = -1;
-        sortField.value = value.substring(1, value.length);
-        sortKey.value = sortValue;
-    } else {
-        sortOrder.value = 1;
-        sortField.value = value;
-        sortKey.value = sortValue;
-    }
-};
-
-const getSeverity = (product) => {
-    switch (product.inventoryStatus) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warning';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-</script>
-
-<template>
-    <div class="grid grid-cols-12 gap-4">
-        <div class="col-span-12">
-            <div class="card">
-                <h5>DataView</h5>
-                <DataView :value="dataviewValue" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
-                    <template #header>
-                        <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                            <div class="col-span-6 text-left">
-                                <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
-                            </div>
-                            <div class="col-span-6 text-right">
-                                <DataViewLayoutOptions v-model="layout" />
-                            </div>
-                        </div>
-                    </template>
-
-                    <template #list="slotProps">
-                        <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                            <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                                <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                                    <div class="md:w-40 relative">
-                                        <img class="block xl:block mx-auto rounded-border w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
-                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
-                                    </div>
-                                    <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
-                                        <div class="flex flex-row md:flex-col justify-between items-start gap-2">
-                                            <div>
-                                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                                <div class="text-lg font-medium text-surface-900 dark:text-surface-0 mt-2">{{ item.name }}</div>
-                                            </div>
-                                            <div class="bg-surface-100 dark:bg-surface-700 p-1" style="border-radius: 30px">
-                                                <div class="bg-surface-0 dark:bg-surface-900 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                                    <span class="text-surface-900 dark:text-surface-0 font-medium text-sm">{{ item.rating }}</span>
-                                                    <i class="pi pi-star-fill text-yellow-500"></i>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="flex flex-col md:items-end gap-8">
-                                            <span class="text-xl font-semibold text-surface-900 dark:text-surface-0">${{ item.price }}</span>
-                                            <div class="flex flex-row-reverse md:flex-row gap-2">
-                                                <Button icon="pi pi-heart" outlined></Button>
-                                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-
-                    <template #grid="slotProps">
-                        <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                            <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 p-2">
-                                <div class="p-6 border border-surface bg-surface-0 dark:bg-surface-900 rounded-border flex flex-col">
-                                    <div class="bg-surface-50 dark:bg-surface-800 flex justify-center rounded-border p-4">
-                                        <div class="relative mx-auto">
-                                            <img class="rounded-border w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
-                                            <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
-                                        </div>
-                                    </div>
-                                    <div class="pt-6">
-                                        <div class="flex flex-row justify-between items-start gap-2">
-                                            <div>
-                                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
-                                                <div class="text-lg font-medium text-surface-900 dark:text-surface-0 mt-1">{{ item.name }}</div>
-                                            </div>
-                                            <div class="bg-surface-100 dark:bg-surface-700 p-1" style="border-radius: 30px">
-                                                <div class="bg-surface-0 dark:bg-surface-900 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
-                                                    <span class="text-surface-900 dark:text-surface-0 font-medium text-sm">{{ item.rating }}</span>
-                                                    <i class="pi pi-star-fill text-yellow-500"></i>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="flex flex-col gap-6 mt-6">
-                                            <span class="text-2xl font-semibold text-surface-900 dark:text-surface-0">${{ item.price }}</span>
-                                            <div class="flex gap-2">
-                                                <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
-                                                <Button icon="pi pi-heart" outlined></Button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </DataView>
-            </div>
-        </div>
-
-        <div class="col-span-12 lg:col-span-8">
-            <div class="card">
-                <h5>PickList</h5>
-                <PickList v-model="picklistValue" listStyle="height:250px" dataKey="code">
-                    <template #sourceheader> From </template>
-                    <template #targetheader> To </template>
-                    <template #item="slotProps">
-                        <div>{{ slotProps.item.name }}</div>
-                    </template>
-                </PickList>
-            </div>
-        </div>
-
-        <div class="col-span-12 lg:col-span-4">
-            <div class="card">
-                <h5>OrderList</h5>
-                <OrderList v-model="orderlistValue" listStyle="height:250px" dataKey="code" :rows="10">
-                    <template #header> Cities </template>
-                    <template #item="slotProps">
-                        <div>{{ slotProps.item.name }}</div>
-                    </template>
-                </OrderList>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/src/views/uikit/ListDoc.vue b/src/views/uikit/ListDoc.vue
new file mode 100644
index 0000000..16079d1
--- /dev/null
+++ b/src/views/uikit/ListDoc.vue
@@ -0,0 +1,167 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
+
+const picklistValue = ref([
+    [
+        { name: 'San Francisco', code: 'SF' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Paris', code: 'PRS' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Berlin', code: 'BRL' },
+        { name: 'Barcelona', code: 'BRC' },
+        { name: 'Rome', code: 'RM' }
+    ],
+    []
+]);
+
+const orderlistValue = ref([
+    { name: 'San Francisco', code: 'SF' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Paris', code: 'PRS' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Berlin', code: 'BRL' },
+    { name: 'Barcelona', code: 'BRC' },
+    { name: 'Rome', code: 'RM' }
+]);
+
+const products = ref(null);
+const options = ref(['list', 'grid']);
+const layout = ref('grid');
+const productService = new ProductService();
+
+onMounted(() => {
+    productService.getProductsSmall().then((data) => (products.value = data));
+});
+
+const getSeverity = (product) => {
+    switch (product.inventoryStatus) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warning';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+</script>
+
+<template>
+    <div class="flex flex-col gap-6">
+        <div class="card">
+            <h5>DataView</h5>
+            <DataView :value="products" :layout="layout">
+                <template #header>
+                    <div class="flex justify-end">
+                        <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                            <template #option="{ option }">
+                                <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
+                            </template>
+                        </SelectButton>
+                    </div>
+                </template>
+
+                <template #list="slotProps">
+                    <div class="flex flex-col">
+                        <div v-for="(item, index) in slotProps.items" :key="index">
+                            <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
+                                <div class="md:w-40 relative">
+                                    <img class="block xl:block mx-auto rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                </div>
+                                <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+                                    <div class="flex flex-row md:flex-col justify-between items-start gap-2">
+                                        <div>
+                                            <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                            <div class="text-lg font-medium mt-2">{{ item.name }}</div>
+                                        </div>
+                                        <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                            <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                                <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                                <i class="pi pi-star-fill text-yellow-500"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="flex flex-col md:items-end gap-8">
+                                        <span class="text-xl font-semibold">${{ item.price }}</span>
+                                        <div class="flex flex-row-reverse md:flex-row gap-2">
+                                            <Button icon="pi pi-heart" outlined></Button>
+                                            <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto md:flex-initial whitespace-nowrap"></Button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+
+                <template #grid="slotProps">
+                    <div class="grid grid-cols-12 gap-4">
+                        <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
+                            <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
+                                <div class="bg-surface-50 flex justify-center rounded p-4">
+                                    <div class="relative mx-auto">
+                                        <img class="rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                    </div>
+                                </div>
+                                <div class="pt-6">
+                                    <div class="flex flex-row justify-between items-start gap-2">
+                                        <div>
+                                            <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ item.category }}</span>
+                                            <div class="text-lg font-medium mt-1">{{ item.name }}</div>
+                                        </div>
+                                        <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                                            <div class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
+                                                <span class="text-surface-900 font-medium text-sm">{{ item.rating }}</span>
+                                                <i class="pi pi-star-fill text-yellow-500"></i>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="flex flex-col gap-6 mt-6">
+                                        <span class="text-2xl font-semibold">${{ item.price }}</span>
+                                        <div class="flex gap-2">
+                                            <Button icon="pi pi-shopping-cart" label="Buy Now" :disabled="item.inventoryStatus === 'OUTOFSTOCK'" class="flex-auto whitespace-nowrap"></Button>
+                                            <Button icon="pi pi-heart" outlined></Button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </DataView>
+        </div>
+
+        <div class="flex flex-col lg:flex-row gap-4">
+            <div class="lg:w-2/3">
+                <div class="card">
+                    <h5>PickList</h5>
+                    <PickList v-model="picklistValue" breakpoint="1400px" dataKey="id">
+                        <template #option="{ option }">
+                            {{ option.name }}
+                        </template>
+                    </PickList>
+                </div>
+            </div>
+
+            <div class="lg:w-1/3">
+                <div class="card">
+                    <h5>OrderList</h5>
+                    <div class="lg:flex lg:justify-center">
+                        <OrderList v-model="orderlistValue" breakpoint="1400px" dataKey="id" pt:pcList:root="w-full">
+                            <template #option="{ option }">
+                                {{ option.name }}
+                            </template>
+                        </OrderList>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/views/uikit/Media.vue b/src/views/uikit/Media.vue
deleted file mode 100644
index 505f9a6..0000000
--- a/src/views/uikit/Media.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<script setup>
-import { ProductService } from '@/service/ProductService';
-import { PhotoService } from '@/service/PhotoService';
-import { ref, onMounted } from 'vue';
-
-const products = ref([]);
-const images = ref([]);
-const galleriaResponsiveOptions = ref([
-    {
-        breakpoint: '1024px',
-        numVisible: 5
-    },
-    {
-        breakpoint: '960px',
-        numVisible: 4
-    },
-    {
-        breakpoint: '768px',
-        numVisible: 3
-    },
-    {
-        breakpoint: '560px',
-        numVisible: 1
-    }
-]);
-const carouselResponsiveOptions = ref([
-    {
-        breakpoint: '1024px',
-        numVisible: 3,
-        numScroll: 3
-    },
-    {
-        breakpoint: '768px',
-        numVisible: 2,
-        numScroll: 2
-    },
-    {
-        breakpoint: '560px',
-        numVisible: 1,
-        numScroll: 1
-    }
-]);
-
-const productService = new ProductService();
-const photoService = new PhotoService();
-
-onMounted(() => {
-    productService.getProductsSmall().then((data) => (products.value = data));
-    photoService.getImages().then((data) => (images.value = data));
-});
-
-const getSeverity = (status) => {
-    switch (status) {
-        case 'INSTOCK':
-            return 'success';
-
-        case 'LOWSTOCK':
-            return 'warning';
-
-        case 'OUTOFSTOCK':
-            return 'danger';
-
-        default:
-            return null;
-    }
-};
-</script>
-
-<template>
-    <div class="grid grid-cols-12 gap-4 p-fluid">
-        <div class="col-span-12">
-            <div class="card">
-                <h5>Carousel</h5>
-                <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="carouselResponsiveOptions">
-                    <template #item="slotProps">
-                        <div class="border border-surface rounded-border m-2 p-4">
-                            <div class="mb-4">
-                                <div class="relative mx-auto">
-                                    <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded-border" />
-                                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
-                                </div>
-                            </div>
-                            <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
-                            <div class="flex justify-between items-center">
-                                <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
-                                <span>
-                                    <Button icon="pi pi-heart" severity="secondary" outlined />
-                                    <Button icon="pi pi-shopping-cart" class="ml-2" />
-                                </span>
-                            </div>
-                        </div>
-                    </template>
-                </Carousel>
-            </div>
-        </div>
-
-        <div class="col-span-12">
-            <div class="card">
-                <h5>Image</h5>
-                <div class="flex justify-center">
-                    <Image :src="'/demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
-                </div>
-            </div>
-        </div>
-
-        <div class="col-span-12">
-            <div class="card">
-                <h5>Galleria</h5>
-                <Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7"
-                    :circular="true" containerStyle="max-width: 800px; margin: auto">
-                    <template #item="slotProps">
-                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt"
-                            style="width: 100%; display: block" />
-                    </template>
-                    <template #thumbnail="slotProps">
-                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt"
-                            tyle="width: 100%; display: block;" />
-                    </template>
-                </Galleria>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/src/views/uikit/MediaDoc.vue b/src/views/uikit/MediaDoc.vue
new file mode 100644
index 0000000..94e45ff
--- /dev/null
+++ b/src/views/uikit/MediaDoc.vue
@@ -0,0 +1,112 @@
+<script setup>
+import { ProductService } from '@/service/ProductService';
+import { PhotoService } from '@/service/PhotoService';
+import { ref, onMounted } from 'vue';
+
+const products = ref([]);
+const images = ref([]);
+const galleriaResponsiveOptions = ref([
+    {
+        breakpoint: '1024px',
+        numVisible: 5
+    },
+    {
+        breakpoint: '960px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '768px',
+        numVisible: 3
+    },
+    {
+        breakpoint: '560px',
+        numVisible: 1
+    }
+]);
+const carouselResponsiveOptions = ref([
+    {
+        breakpoint: '1024px',
+        numVisible: 3,
+        numScroll: 3
+    },
+    {
+        breakpoint: '768px',
+        numVisible: 2,
+        numScroll: 2
+    },
+    {
+        breakpoint: '560px',
+        numVisible: 1,
+        numScroll: 1
+    }
+]);
+
+const productService = new ProductService();
+const photoService = new PhotoService();
+
+onMounted(() => {
+    productService.getProductsSmall().then((data) => (products.value = data));
+    photoService.getImages().then((data) => (images.value = data));
+});
+
+const getSeverity = (status) => {
+    switch (status) {
+        case 'INSTOCK':
+            return 'success';
+
+        case 'LOWSTOCK':
+            return 'warning';
+
+        case 'OUTOFSTOCK':
+            return 'danger';
+
+        default:
+            return null;
+    }
+};
+</script>
+
+<template>
+    <div class="card">
+        <h5>Carousel</h5>
+        <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="carouselResponsiveOptions">
+            <template #item="slotProps">
+                <div class="border border-surface-200 dark:border-surface-700 rounded m-2 p-4">
+                    <div class="mb-4">
+                        <div class="relative mx-auto">
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full rounded" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
+                        </div>
+                    </div>
+                    <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-between items-center">
+                        <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
+                        <span>
+                            <Button icon="pi pi-heart" severity="secondary" outlined />
+                            <Button icon="pi pi-shopping-cart" class="ml-2" />
+                        </span>
+                    </div>
+                </div>
+            </template>
+        </Carousel>
+    </div>
+
+    <div class="card">
+        <h5>Image</h5>
+        <div class="flex justify-center">
+            <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
+        </div>
+    </div>
+
+    <div class="card">
+        <h5>Galleria</h5>
+        <Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+            </template>
+            <template #thumbnail="slotProps">
+                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+            </template>
+        </Galleria>
+    </div>
+</template>
diff --git a/src/views/uikit/Menu.vue b/src/views/uikit/MenuDoc.vue
similarity index 65%
rename from src/views/uikit/Menu.vue
rename to src/views/uikit/MenuDoc.vue
index 08667a9..36d5103 100644
--- a/src/views/uikit/Menu.vue
+++ b/src/views/uikit/MenuDoc.vue
@@ -440,88 +440,141 @@ const onContextRightClick = (event) => {
 </script>
 
 <template>
-    <div class="grid grid-cols-12 gap-4 p-fluid">
-        <div class="col-span-12">
-            <div class="card card-w-title">
-                <h5>Menubar</h5>
-                <Menubar :model="nestedMenuitems">
-                    <template #end>
-                        <IconField iconPosition="left">
-                            <InputIcon class="pi pi-search" />
-                            <InputText type="text" placeholder="Search" />
-                        </IconField>
-                    </template>
-                </Menubar>
-            </div>
-        </div>
+    <div class="card">
+        <h5 class="mb-2">Menubar</h5>
+        <Menubar :model="nestedMenuitems">
+            <template #end>
+                <IconField iconPosition="left">
+                    <InputIcon class="pi pi-search" />
+                    <InputText type="text" placeholder="Search" />
+                </IconField>
+            </template>
+        </Menubar>
+    </div>
 
-        <div class="col-span-12">
-            <div class="card card-w-title">
-                <h5>Breadcrumb</h5>
-                <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
-            </div>
-        </div>
+    <div class="card">
+        <h5 class="mb-2">Breadcrumb</h5>
+        <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
+    </div>
 
-        <div class="col-span-12 md:col-span-6">
-            <div class="card card-w-title">
-                <h5>Steps</h5>
-                <p>Steps and TabMenu are integrated with the same child routes.</p>
-                <Steps :model="nestedRouteItems" :readonly="false" />
-                <router-view />
-            </div>
-        </div>
-
-        <div class="col-span-12 md:col-span-6">
-            <div class="card card-w-title">
-                <h5>TabMenu</h5>
-                <p>Steps and TabMenu are integrated with the same child routes.</p>
-                <TabMenu :model="nestedRouteItems" />
-                <router-view />
-            </div>
-        </div>
-
-        <div class="col-span-12 md:col-span-4">
+    <div class="flex flex-col md:flex-row gap-4">
+        <div class="md:w-1/2">
             <div class="card">
-                <h5>Tiered Menu</h5>
+                <h5 class="mb-2">Stepper</h5>
+                <Stepper value="1">
+                    <StepList>
+                        <Step value="1">Header I</Step>
+                        <Step value="2">Header II</Step>
+                        <Step value="3">Header III</Step>
+                    </StepList>
+                    <StepPanels>
+                        <StepPanel v-slot="{ activateCallback }" value="1">
+                            <div class="flex flex-col h-48">
+                                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content I</div>
+                            </div>
+                            <div class="flex pt-6 justify-end">
+                                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('2')" />
+                            </div>
+                        </StepPanel>
+                        <StepPanel v-slot="{ activateCallback }" value="2">
+                            <div class="flex flex-col h-48">
+                                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content II</div>
+                            </div>
+                            <div class="flex pt-6 justify-between">
+                                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('1')" />
+                                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="activateCallback('3')" />
+                            </div>
+                        </StepPanel>
+                        <StepPanel v-slot="{ activateCallback }" value="3">
+                            <div class="flex flex-col h-48">
+                                <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">Content III</div>
+                            </div>
+                            <div class="pt-6">
+                                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="activateCallback('2')" />
+                            </div>
+                        </StepPanel>
+                    </StepPanels>
+                </Stepper>
+            </div>
+        </div>
+        <div class="md:w-1/2">
+            <div class="card">
+                <h5 class="mb-2">Tabs</h5>
+                <Tabs value="0">
+                    <TabList>
+                        <Tab value="0">Header I</Tab>
+                        <Tab value="1">Header II</Tab>
+                        <Tab value="2">Header III</Tab>
+                    </TabList>
+                    <TabPanels>
+                        <TabPanel value="0">
+                            <p class="m-0">
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                                commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+                                id est laborum.
+                            </p>
+                        </TabPanel>
+                        <TabPanel value="1">
+                            <p class="m-0">
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                            </p>
+                        </TabPanel>
+                        <TabPanel value="2">
+                            <p class="m-0">
+                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
+                                in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
+                                minus.
+                            </p>
+                        </TabPanel>
+                    </TabPanels>
+                </Tabs>
+            </div>
+        </div>
+    </div>
+
+    <div class="flex flex-col md:flex-row gap-4 mt-6">
+        <div class="md:w-1/3">
+            <div class="card">
+                <h5 class="mb-2">Tiered Menu</h5>
                 <TieredMenu :model="tieredMenuItems" />
             </div>
         </div>
-
-        <div class="col-span-12 md:col-span-4">
+        <div class="md:w-1/3">
             <div class="card">
-                <h5>Plain Menu</h5>
+                <h5 class="mb-2">Plain Menu</h5>
                 <Menu :model="menuitems" />
             </div>
         </div>
-
-        <div class="col-span-12 md:col-span-4">
+        <div class="md:w-1/3">
             <div class="card">
-                <h5>Overlay Menu</h5>
+                <h5 class="mb-2">Overlay Menu</h5>
 
                 <Menu ref="menu" :model="overlayMenuItems" :popup="true" />
                 <Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto" />
             </div>
 
             <div class="card" @contextmenu="onContextRightClick">
-                <h5>ContextMenu</h5>
+                <h5 class="mb-2">ContextMenu</h5>
                 Right click to display.
                 <ContextMenu ref="contextMenu" :model="contextMenuItems" />
             </div>
         </div>
+    </div>
 
-        <div class="col-span-12 md:col-span-6">
+    <div class="flex flex-col md:flex-row gap-4 mt-6">
+        <div class="md:w-1/2">
             <div class="card">
-                <h5>MegaMenu - Horizontal</h5>
+                <h5 class="mb-2">MegaMenu - Horizontal</h5>
                 <MegaMenu :model="megamenuItems" />
 
-                <h5 style="margin-top: 1.55em">MegaMenu - Vertical</h5>
+                <h5 class="mb-2 mt-8">MegaMenu - Vertical</h5>
                 <MegaMenu :model="megamenuItems" orientation="vertical" />
             </div>
         </div>
-
-        <div class="col-span-12 md:col-span-6">
+        <div class="md:w-1/2">
             <div class="card">
-                <h5>PanelMenu</h5>
+                <h5 class="mb-2">PanelMenu</h5>
                 <PanelMenu :model="panelMenuitems" />
             </div>
         </div>
diff --git a/src/views/uikit/Messages.vue b/src/views/uikit/Messages.vue
deleted file mode 100644
index c25171c..0000000
--- a/src/views/uikit/Messages.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useToast } from 'primevue/usetoast';
-
-const toast = useToast();
-const message = ref([]);
-const username = ref(null);
-const email = ref(null);
-const count = ref(0);
-
-const addMessage = (type) => {
-    if (type === 'success') {
-        message.value = [{ severity: 'success', detail: 'Success Message', content: 'Message sent', id: count.value++ }];
-    } else if (type === 'info') {
-        message.value = [{ severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: count.value++ }];
-    } else if (type === 'warn') {
-        message.value = [{ severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: count.value++ }];
-    } else if (type === 'error') {
-        message.value = [{ severity: 'error', detail: 'Error Message', content: 'Validation failed', id: count.value++ }];
-    }
-};
-
-const showSuccess = () => {
-    toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Detail', life: 3000 });
-};
-
-const showInfo = () => {
-    toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Detail', life: 3000 });
-};
-
-const showWarn = () => {
-    toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Detail', life: 3000 });
-};
-
-const showError = () => {
-    toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Detail', life: 3000 });
-};
-</script>
-
-<template>
-    <div class="grid grid-cols-12 gap-4">
-        <div class="col-span-12 lg:col-span-6">
-            <div class="card">
-                <h5>Toast</h5>
-                <Button @click="showSuccess()" label="Success" class="mr-2" severity="success" />
-                <Button @click="showInfo()" label="Info" class="mr-2" severity="info" />
-                <Button @click="showWarn()" label="Warn" class="mr-2" severity="warning" />
-                <Button @click="showError()" label="Error" class="mr-2" severity="danger" />
-            </div>
-        </div>
-
-        <div class="col-span-12 lg:col-span-6">
-            <div class="card">
-                <h5>Messages</h5>
-                <Button label="Success" @click="addMessage('success')" class="mr-2" severity="success" />
-                <Button label="Info" @click="addMessage('info')" class="mr-2" severity="info" />
-                <Button label="Warn" @click="addMessage('warn')" class="mr-2" severity="warning" />
-                <Button label="Error" @click="addMessage('error')" class="mr-2" severity="danger" />
-
-                <transition-group name="p-message" tag="div">
-                    <Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message>
-                </transition-group>
-            </div>
-        </div>
-
-        <div class="col-span-12 lg:col-span-8">
-            <div class="card">
-                <h5>Inline</h5>
-                <div class="field grid grid-cols-12 gap-4">
-                    <label for="username1" class="col-fixed w-36">Username</label>
-                    <div class="col">
-                        <InputText id="username1" v-model="username" :required="true" invalid class="mr-2"></InputText>
-                        <InlineMessage>Username is required</InlineMessage>
-                    </div>
-                </div>
-                <div class="field grid grid-cols-12 gap-4">
-                    <label for="email" class="col-fixed w-36">Email</label>
-                    <div class="col">
-                        <InputText id="email" v-model="email" :required="true" invalid class="mr-2"></InputText>
-                        <InlineMessage />
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="col-span-12 lg:col-span-4">
-            <div class="card">
-                <h5>Help Text</h5>
-                <div class="field p-fluid">
-                    <label for="username2">Username</label>
-                    <InputText id="username2" type="username" class="p-error" aria-describedby="username-help" />
-                    <small id="username-help" class="p-error">Enter your username to reset your password.</small>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/src/views/uikit/MessagesDoc.vue b/src/views/uikit/MessagesDoc.vue
new file mode 100644
index 0000000..2c9ab01
--- /dev/null
+++ b/src/views/uikit/MessagesDoc.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+
+const toast = useToast();
+const message = ref([]);
+const username = ref(null);
+const email = ref(null);
+const count = ref(0);
+
+const addMessage = (type) => {
+    if (type === 'success') {
+        message.value = [{ severity: 'success', detail: 'Success Message', content: 'Message sent', id: count.value++ }];
+    } else if (type === 'info') {
+        message.value = [{ severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: count.value++ }];
+    } else if (type === 'warn') {
+        message.value = [{ severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: count.value++ }];
+    } else if (type === 'error') {
+        message.value = [{ severity: 'error', detail: 'Error Message', content: 'Validation failed', id: count.value++ }];
+    }
+};
+
+const showSuccess = () => {
+    toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Detail', life: 3000 });
+};
+
+const showInfo = () => {
+    toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Detail', life: 3000 });
+};
+
+const showWarn = () => {
+    toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Detail', life: 3000 });
+};
+
+const showError = () => {
+    toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Detail', life: 3000 });
+};
+</script>
+
+<template>
+    <div class="flex flex-col md:flex-row gap-4">
+        <div class="card md:w-1/2">
+            <h5 class="mb-2">Toast</h5>
+            <div class="flex flex-wrap gap-2">
+                <Button @click="showSuccess()" label="Success" severity="success" />
+                <Button @click="showInfo()" label="Info" severity="info" />
+                <Button @click="showWarn()" label="Warn" severity="warning" />
+                <Button @click="showError()" label="Error" severity="danger" />
+            </div>
+        </div>
+        <div class="card md:w-1/2">
+            <h5 class="mb-2">Messages</h5>
+            <div class="flex flex-wrap gap-2 mb-4">
+                <Button label="Success" @click="addMessage('success')" severity="success" />
+                <Button label="Info" @click="addMessage('info')" severity="info" />
+                <Button label="Warn" @click="addMessage('warn')" severity="warning" />
+                <Button label="Error" @click="addMessage('error')" severity="danger" />
+            </div>
+
+            <transition-group name="p-message" tag="div">
+                <Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{ msg.content }}</Message>
+            </transition-group>
+        </div>
+    </div>
+
+    <div class="flex flex-col md:flex-row gap-4 mt-6">
+        <div class="card md:w-1/2">
+            <h5 class="mb-2">Inline</h5>
+            <div class="flex flex-wrap mb-4 gap-2">
+                <InputText v-model="username" placeholder="Username" aria-label="username" invalid />
+                <Message severity="error">Username is required</Message>
+            </div>
+            <div class="flex flex-wrap gap-2">
+                <InputText v-model="email" placeholder="Email" aria-label="email" invalid />
+                <Message severity="error" icon="pi pi-times-circle" />
+            </div>
+        </div>
+        <div class="card md:w-1/2">
+            <h5 class="mb-2">Help Text</h5>
+            <div class="flex flex-col gap-2">
+                <label for="username">Username</label>
+                <InputText id="username" v-model="value" aria-describedby="username-help" />
+                <small id="username-help">Enter your username to reset your password.</small>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/views/uikit/Misc.vue b/src/views/uikit/MiscDoc.vue
similarity index 64%
rename from src/views/uikit/Misc.vue
rename to src/views/uikit/MiscDoc.vue
index 735851f..06ea295 100644
--- a/src/views/uikit/Misc.vue
+++ b/src/views/uikit/MiscDoc.vue
@@ -28,53 +28,60 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-    <div class="grid grid-cols-12 gap-4">
-        <div class="col-span-12">
-            <div class="card">
-                <h5>ProgressBar</h5>
-                <div class="grid grid-cols-12 gap-4">
-                    <div class="col">
-                        <ProgressBar :value="value"></ProgressBar>
-                    </div>
-                    <div class="col">
-                        <ProgressBar :value="50" :showValue="false"></ProgressBar>
-                    </div>
-                </div>
+    <div class="card">
+        <h5>ProgressBar</h5>
+        <div class="flex flex-col md:flex-row gap-4">
+            <div class="md:w-1/2">
+                <ProgressBar :value="value"></ProgressBar>
+            </div>
+            <div class="md:w-1/2">
+                <ProgressBar :value="50" :showValue="false"></ProgressBar>
             </div>
         </div>
-        <div class="col-span-12 lg:col-span-6">
+    </div>
+
+    <div class="flex flex-col md:flex-row gap-4 mt-4">
+        <div class="md:w-1/2">
             <div class="card">
-                <h4>Badge</h4>
-                <h5>Numbers</h5>
-                <div class="badges">
-                    <Badge :value="2" class="mr-2"></Badge>
-                    <Badge :value="8" severity="success" class="mr-2"></Badge>
-                    <Badge :value="4" severity="info" class="mr-2"></Badge>
-                    <Badge :value="12" severity="warning" class="mr-2"></Badge>
+                <h4 class="mb-2">Badge</h4>
+                <h5 class="mb-2">Numbers</h5>
+                <div class="flex gap-2">
+                    <Badge :value="2"></Badge>
+                    <Badge :value="8" severity="success"></Badge>
+                    <Badge :value="4" severity="info"></Badge>
+                    <Badge :value="12" severity="warn"></Badge>
                     <Badge :value="3" severity="danger"></Badge>
                 </div>
 
-                <h5>Positioned Badge</h5>
-                <i class="pi pi-bell mr-6 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
-                <i class="pi pi-calendar mr-6 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
-                <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
+                <h5 class="my-4">Positioned Badge</h5>
+                <div class="flex gap-6">
+                    <OverlayBadge value="2">
+                        <i class="pi pi-bell" style="font-size: 2rem" />
+                    </OverlayBadge>
+                    <OverlayBadge value="4" severity="danger">
+                        <i class="pi pi-calendar" style="font-size: 2rem" />
+                    </OverlayBadge>
+                    <OverlayBadge severity="danger">
+                        <i class="pi pi-envelope" style="font-size: 2rem" />
+                    </OverlayBadge>
+                </div>
 
-                <h5>Inline Button Badge</h5>
+                <h5 class="my-4">Inline Button Badge</h5>
                 <Button label="Emails" badge="8" class="mr-2"></Button>
-                <Button label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger"></Button>
+                <Button label="Messages" icon="pi pi-users" severity="warn" badge="8" badgeClass="p-badge-danger"></Button>
 
-                <h5>Sizes</h5>
-                <div class="badges">
-                    <Badge :value="2" class="mr-2"></Badge>
-                    <Badge :value="4" size="large" severity="warning" class="mr-2"></Badge>
+                <h5 class="my-4">Sizes</h5>
+                <div class="flex items-start gap-2">
+                    <Badge :value="2"></Badge>
+                    <Badge :value="4" size="large" severity="warn"></Badge>
                     <Badge :value="6" size="xlarge" severity="success"></Badge>
                 </div>
             </div>
 
             <div class="card">
                 <h4>Avatar</h4>
-                <h5>Avatar Group</h5>
-                <AvatarGroup class="mb-4">
+                <h5 class="my-4">Avatar Group</h5>
+                <AvatarGroup>
                     <Avatar :image="'/demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
                     <Avatar :image="'/demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
                     <Avatar :image="'/demo/images/avatar/onyamalimba.png'" size="large" shape="circle"></Avatar>
@@ -83,13 +90,15 @@ onBeforeUnmount(() => {
                     <Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
                 </AvatarGroup>
 
-                <h5>Label - Circle</h5>
+                <h5 class="my-4">Label - Circle</h5>
                 <Avatar label="P" class="mr-2" size="xlarge" shape="circle"></Avatar>
                 <Avatar label="V" class="mr-2" size="large" :style="{ 'background-color': '#2196F3', color: '#ffffff' }" shape="circle"></Avatar>
                 <Avatar label="U" class="mr-2" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }" shape="circle"></Avatar>
 
-                <h5>Icon - Badge</h5>
-                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" v-badge.success="4"></Avatar>
+                <h5 class="my-4">Icon - Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar label="U" size="xlarge" />
+                </OverlayBadge>
             </div>
 
             <div class="card">
@@ -106,29 +115,35 @@ onBeforeUnmount(() => {
                 </ScrollPanel>
             </div>
         </div>
-        <div class="col-span-12 lg:col-span-6">
+        <div class="md:w-1/2">
             <div class="card">
                 <h4>Tag</h4>
                 <h5>Tags</h5>
-                <Tag class="mr-2" value="Primary"></Tag>
-                <Tag class="mr-2" severity="success" value="Success"></Tag>
-                <Tag class="mr-2" severity="info" value="Info"></Tag>
-                <Tag class="mr-2" severity="warning" value="Warning"></Tag>
-                <Tag severity="danger" value="Danger"></Tag>
+                <div class="flex gap-2">
+                    <Tag value="Primary"></Tag>
+                    <Tag severity="success" value="Success"></Tag>
+                    <Tag severity="info" value="Info"></Tag>
+                    <Tag severity="warn" value="Warn"></Tag>
+                    <Tag severity="danger" value="Danger"></Tag>
+                </div>
 
                 <h5>Pills</h5>
-                <Tag class="mr-2" value="Primary" :rounded="true"></Tag>
-                <Tag class="mr-2" severity="success" value="Success" :rounded="true"></Tag>
-                <Tag class="mr-2" severity="info" value="Info" :rounded="true"></Tag>
-                <Tag class="mr-2" severity="warning" value="Warning" :rounded="true"></Tag>
-                <Tag severity="danger" value="Danger" :rounded="true"></Tag>
+                <div class="flex gap-2">
+                    <Tag value="Primary" :rounded="true"></Tag>
+                    <Tag severity="success" value="Success" :rounded="true"></Tag>
+                    <Tag severity="info" value="Info" :rounded="true"></Tag>
+                    <Tag severity="warn" value="warn" :rounded="true"></Tag>
+                    <Tag severity="danger" value="Danger" :rounded="true"></Tag>
+                </div>
 
                 <h5>Icons</h5>
-                <Tag class="mr-2" icon="pi pi-user" value="Primary"></Tag>
-                <Tag class="mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
-                <Tag class="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
-                <Tag class="mr-2" con="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
-                <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+                <div class="flex gap-2">
+                    <Tag icon="pi pi-user" value="Primary"></Tag>
+                    <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
+                    <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+                    <Tag con="pi pi-exclamation-triangle" severity="warn" value="warn"></Tag>
+                    <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+                </div>
             </div>
 
             <div class="card">
diff --git a/src/views/uikit/Overlay.vue b/src/views/uikit/Overlay.vue
deleted file mode 100644
index 90cc953..0000000
--- a/src/views/uikit/Overlay.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useToast } from 'primevue/usetoast';
-import { useConfirm } from 'primevue/useconfirm';
-import { ProductService } from '@/service/ProductService';
-
-const display = ref(false);
-const displayConfirmation = ref(false);
-const visibleLeft = ref(false);
-const visibleRight = ref(false);
-const visibleTop = ref(false);
-const visibleBottom = ref(false);
-const visibleFull = ref(false);
-const products = ref(null);
-const selectedProduct = ref(null);
-const op = ref(null);
-const op2 = ref(null);
-const popup = ref(null);
-
-const productService = new ProductService();
-const toast = useToast();
-const confirmPopup = useConfirm();
-
-onMounted(() => {
-    productService.getProductsSmall().then((data) => (products.value = data));
-});
-
-const open = () => {
-    display.value = true;
-};
-
-const close = () => {
-    display.value = false;
-};
-
-const openConfirmation = () => {
-    displayConfirmation.value = true;
-};
-
-const closeConfirmation = () => {
-    displayConfirmation.value = false;
-};
-
-const toggle = (event) => {
-    op.value.toggle(event);
-};
-
-const toggleDataTable = (event) => {
-    op2.value.toggle(event);
-};
-
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-};
-
-const onProductSelect = (event) => {
-    op.value.hide();
-    toast.add({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 });
-};
-
-const confirm = (event) => {
-    confirmPopup.require({
-        target: event.target,
-        message: 'Are you sure you want to proceed?',
-        icon: 'pi pi-exclamation-triangle',
-        accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
-        },
-        reject: () => {
-            toast.add({ severity: 'info', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
-        }
-    });
-};
-</script>
-
-<template>
-    <div class="grid grid-cols-12 gap-4">
-        <div class="col-span-12 lg:col-span-6">
-            <div class="card p-fluid">
-                <h5>Dialog</h5>
-                <Dialog header="Dialog" v-model:visible="display" :breakpoints="{ '960px': '75vw' }" :style="{ width: '30vw' }" :modal="true">
-                    <p class="leading-normal m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                    <template #footer>
-                        <Button label="Ok" @click="close" icon="pi pi-check" class="p-button-outlined" />
-                    </template>
-                </Dialog>
-                <Button label="Show" icon="pi pi-external-link" style="width: auto" @click="open" />
-            </div>
-            <div class="card p-fluid">
-                <h5>Overlay Panel</h5>
-                <div class="flex flex-wrap gap-2">
-                    <div>
-                        <Button type="button" label="Image" @click="toggle" class="p-button-success" />
-                        <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
-                            <img src="/demo/images/nature/nature9.jpg" alt="Nature 9" />
-                        </OverlayPanel>
-                    </div>
-                    <div>
-                        <Button type="button" label="DataTable" @click="toggleDataTable" class="p-button-success" />
-                        <OverlayPanel ref="op2" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
-                            <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll">
-                                <Column field="name" header="Name" :sortable="true" headerStyle="min-width:12rem;"> </Column>
-                                <Column header="Image" headerStyle="min-width:5rem;">
-                                    <template #body="slotProps">
-                                        <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="50" class="shadow" />
-                                    </template>
-                                </Column>
-                                <Column field="price" header="Price" :sortable="true" headerStyle="min-width:8rem;">
-                                    <template #body="slotProps">
-                                        {{ formatCurrency(slotProps.data.price) }}
-                                    </template>
-                                </Column>
-                            </DataTable>
-                        </OverlayPanel>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="col-span-12 lg:col-span-6">
-            <div class="card p-fluid">
-                <h5>Confirmation</h5>
-                <Button label="Delete" icon="pi pi-trash" class="p-button-danger" style="width: auto" @click="openConfirmation" />
-                <Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{ width: '350px' }" :modal="true">
-                    <div class="flex items-center justify-center">
-                        <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
-                        <span>Are you sure you want to proceed?</span>
-                    </div>
-                    <template #footer>
-                        <Button label="No" icon="pi pi-times" @click="closeConfirmation" class="p-button-text" />
-                        <Button label="Yes" icon="pi pi-check" @click="closeConfirmation" class="p-button-text" autofocus />
-                    </template>
-                </Dialog>
-            </div>
-            <div class="card">
-                <h5 class="font-bold text-xl">Sidebar</h5>
-                <Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
-                    <h1 style="font-weight: normal">Left Sidebar</h1>
-                </Sidebar>
-
-                <Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
-                    <h1 style="font-weight: normal">Right Sidebar</h1>
-                </Sidebar>
-
-                <Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
-                    <h1 style="font-weight: normal">Top Sidebar</h1>
-                </Sidebar>
-
-                <Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
-                    <h1 style="font-weight: normal">Bottom Sidebar</h1>
-                </Sidebar>
-
-                <Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
-                    <h1 style="font-weight: normal">Full Screen</h1>
-                </Sidebar>
-
-                <Button icon="pi pi-arrow-right" class="p-button-warning" @click="visibleLeft = true" style="margin-right: 0.25em" />
-                <Button icon="pi pi-arrow-left" class="p-button-warning" @click="visibleRight = true" style="margin-right: 0.25em" />
-                <Button icon="pi pi-arrow-down" class="p-button-warning" @click="visibleTop = true" style="margin-right: 0.25em" />
-                <Button icon="pi pi-arrow-up" class="p-button-warning" @click="visibleBottom = true" style="margin-right: 0.25em" />
-                <Button icon="pi pi-external-link" class="p-button-warning" @click="visibleFull = true" />
-            </div>
-        </div>
-        <div class="col-span-12 lg:col-span-6">
-            <div class="card">
-                <h5>Tooltip</h5>
-                <div class="formgroup-inline">
-                    <div class="field">
-                        <InputText type="text" placeholder="Username" v-tooltip="'Your username'" />
-                    </div>
-
-                    <Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
-                </div>
-            </div>
-        </div>
-        <div class="col-span-12 lg:col-span-6">
-            <div class="card">
-                <h5>ConfirmPopup</h5>
-                <ConfirmPopup></ConfirmPopup>
-                <Button ref="popup" @click="confirm($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/src/views/uikit/OverlayDoc.vue b/src/views/uikit/OverlayDoc.vue
new file mode 100644
index 0000000..7a3c6b1
--- /dev/null
+++ b/src/views/uikit/OverlayDoc.vue
@@ -0,0 +1,197 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+import { ProductService } from '@/service/ProductService';
+
+const display = ref(false);
+const displayConfirmation = ref(false);
+const visibleLeft = ref(false);
+const visibleRight = ref(false);
+const visibleTop = ref(false);
+const visibleBottom = ref(false);
+const visibleFull = ref(false);
+const products = ref(null);
+const selectedProduct = ref(null);
+const op = ref(null);
+const op2 = ref(null);
+const popup = ref(null);
+
+const productService = new ProductService();
+const toast = useToast();
+const confirmPopup = useConfirm();
+
+onMounted(() => {
+    productService.getProductsSmall().then((data) => (products.value = data));
+});
+
+const open = () => {
+    display.value = true;
+};
+
+const close = () => {
+    display.value = false;
+};
+
+const openConfirmation = () => {
+    displayConfirmation.value = true;
+};
+
+const closeConfirmation = () => {
+    displayConfirmation.value = false;
+};
+
+const toggle = (event) => {
+    op.value.toggle(event);
+};
+
+const toggleDataTable = (event) => {
+    op2.value.toggle(event);
+};
+
+const onProductSelect = (event) => {
+    op.value.hide();
+    toast.add({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 });
+};
+
+const confirm = (event) => {
+    confirmPopup.require({
+        target: event.target,
+        message: 'Are you sure you want to proceed?',
+        icon: 'pi pi-exclamation-triangle',
+        rejectProps: {
+            label: 'Cancel',
+            severity: 'secondary',
+            outlined: true
+        },
+        acceptProps: {
+            label: 'Save'
+        },
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'info', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+</script>
+
+<template>
+    <div class="flex flex-col md:flex-row gap-6">
+        <div class="md:w-1/2">
+            <div class="card">
+                <h5 class="mb-4">Dialog</h5>
+                <Dialog header="Dialog" v-model:visible="display" :breakpoints="{ '960px': '75vw' }" :style="{ width: '30vw' }" :modal="true">
+                    <p class="leading-normal m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                    <template #footer>
+                        <Button label="Ok" @click="close" icon="pi pi-check" class="p-button-outlined" />
+                    </template>
+                </Dialog>
+                <Button label="Show" icon="pi pi-external-link" style="width: auto" @click="open" />
+            </div>
+
+            <div class="card">
+                <h5 class="mb-4">Popover</h5>
+                <div class="flex flex-wrap gap-2">
+                    <Button type="button" label="Image" @click="toggle" severity="success" />
+                    <Popover ref="op">
+                        <img src="https://primefaces.org/cdn/primevue/images/nature/nature9.jpg" alt="Image" />
+                    </Popover>
+
+                    <Button type="button" label="DataTable" @click="toggleDataTable" severity="success" />
+                    <Popover ref="op2" id="overlay_panel" style="width: 450px">
+                        <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
+                            <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
+                            <Column header="Image">
+                                <template #body="slotProps">
+                                    <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-16 shadow-sm" />
+                                </template>
+                            </Column>
+                            <Column field="price" header="Price" sortable style="min-width: 8rem">
+                                <template #body="slotProps"> $ {{ slotProps.data.price }} </template>
+                            </Column>
+                        </DataTable>
+                    </Popover>
+                </div>
+            </div>
+
+            <div class="card">
+                <h5 class="mb-4">Tooltip</h5>
+                <div class="inline-flex gap-4">
+                    <InputText type="text" placeholder="Username" v-tooltip="'Your username'" />
+                    <Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
+                </div>
+            </div>
+        </div>
+        <div class="md:w-1/2">
+            <div class="card">
+                <h5 class="mb-4">Drawer</h5>
+                <Drawer v-model:visible="visibleLeft" header="Drawer">
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </Drawer>
+
+                <Drawer v-model:visible="visibleRight" header="Drawer" position="right">
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </Drawer>
+
+                <Drawer v-model:visible="visibleTop" header="Drawer" position="top">
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </Drawer>
+
+                <Drawer v-model:visible="visibleBottom" header="Drawer" position="bottom">
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </Drawer>
+
+                <Drawer v-model:visible="visibleFull" header="Drawer" position="full">
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </Drawer>
+
+                <Button icon="pi pi-arrow-right" severity="warn" @click="visibleLeft = true" style="margin-right: 0.25em" />
+                <Button icon="pi pi-arrow-left" severity="warn" @click="visibleRight = true" style="margin-right: 0.25em" />
+                <Button icon="pi pi-arrow-down" severity="warn" @click="visibleTop = true" style="margin-right: 0.25em" />
+                <Button icon="pi pi-arrow-up" severity="warn" @click="visibleBottom = true" style="margin-right: 0.25em" />
+                <Button icon="pi pi-external-link" severity="warn" @click="visibleFull = true" />
+            </div>
+
+            <div class="card">
+                <h5 class="mb-4">ConfirmPopup</h5>
+                <ConfirmPopup></ConfirmPopup>
+                <Button ref="popup" @click="confirm($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
+            </div>
+
+            <div class="card">
+                <h5 class="mb-4">Confirmation</h5>
+                <Button label="Delete" icon="pi pi-trash" severity="danger" style="width: auto" @click="openConfirmation" />
+                <Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{ width: '350px' }" :modal="true">
+                    <div class="flex items-center justify-center">
+                        <i class="pi pi-exclamation-triangle mr-4" style="font-size: 2rem" />
+                        <span>Are you sure you want to proceed?</span>
+                    </div>
+                    <template #footer>
+                        <Button label="No" icon="pi pi-times" @click="closeConfirmation" class="p-button-text" />
+                        <Button label="Yes" icon="pi pi-check" @click="closeConfirmation" class="p-button-text" autofocus />
+                    </template>
+                </Dialog>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/views/uikit/Panels.vue b/src/views/uikit/Panels.vue
deleted file mode 100644
index 8879e31..0000000
--- a/src/views/uikit/Panels.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-
-const toolbarItems = ref([
-    {
-        label: 'Save',
-        icon: 'pi pi-check'
-    },
-    {
-        label: 'Update',
-        icon: 'pi pi-upload'
-    },
-    {
-        label: 'Delete',
-        icon: 'pi pi-trash'
-    },
-    {
-        label: 'Home Page',
-        icon: 'pi pi-home'
-    }
-]);
-const cardMenu = ref([
-    { label: 'Save', icon: 'pi pi-fw pi-check' },
-    { label: 'Update', icon: 'pi pi-fw pi-refresh' },
-    { label: 'Delete', icon: 'pi pi-fw pi-trash' }
-]);
-const menuRef = ref(null);
-
-const toggle = () => {
-    menuRef.value.toggle(event);
-};
-</script>
-
-<template>
-    <div class="grid grid-cols-12 gap-4">
-        <div class="col-span-12">
-            <div class="card">
-                <h5>Toolbar</h5>
-                <Toolbar>
-                    <template v-slot:start>
-                        <Button label="New" icon="pi pi-plus" class="mr-2" />
-                        <Button label="Open" icon="pi pi-folder-open" class="p-button-secondary mr-2" />
-
-                        <i class="pi pi-bars p-toolbar-separator mr-2"></i>
-
-                        <Button icon="pi pi-check" class="p-button-success mr-2" />
-                        <Button icon="pi pi-trash" class="p-button-warning mr-2" />
-                        <Button icon="pi pi-print" class="p-button-danger" />
-                    </template>
-                    <template v-slot:end>
-                        <SplitButton label="Options" :model="toolbarItems"></SplitButton>
-                    </template>
-                </Toolbar>
-            </div>
-        </div>
-        <div class="col-span-12 md:col-span-6">
-            <div class="card">
-                <h5>AccordionPanel</h5>
-                <Accordion :activeIndex="0">
-                    <AccordionTab header="Header I">
-                        <p class="leading-normal m-0">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-                            laborum.
-                        </p>
-                    </AccordionTab>
-                    <AccordionTab header="Header II">
-                        <p class="leading-normal m-0">
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
-                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                        </p>
-                    </AccordionTab>
-                    <AccordionTab header="Header III">
-                        <p class="leading-normal m-0">
-                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
-                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                        </p>
-                    </AccordionTab>
-                </Accordion>
-            </div>
-            <div class="card">
-                <h5>TabView</h5>
-                <TabView>
-                    <TabPanel header="Header I">
-                        <p class="leading-normal m-0">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-                            laborum.
-                        </p></TabPanel
-                    >
-                    <TabPanel header="Header II">
-                        <p class="leading-normal m-0">
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
-                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                        </p>
-                    </TabPanel>
-                    <TabPanel header="Header III">
-                        <p class="leading-normal m-0">
-                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
-                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                        </p>
-                    </TabPanel>
-                </TabView>
-            </div>
-        </div>
-        <div class="col-span-12 md:col-span-6">
-            <div class="card">
-                <h5>Panel</h5>
-                <Panel header="Header" :toggleable="true">
-                    <p class="leading-normal m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </Panel>
-            </div>
-            <div class="card">
-                <h5>Fieldset</h5>
-                <Fieldset legend="Legend" :toggleable="true">
-                    <p class="leading-normal m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </Fieldset>
-            </div>
-
-            <Card>
-                <template v-slot:title>
-                    <div class="flex items-center justify-between mb-0">
-                        <h5>Card</h5>
-                        <Button icon="pi pi-plus" class="p-button-text" @click="toggle" />
-                    </div>
-                    <Menu id="config_menu" ref="menuRef" :model="cardMenu" :popup="true" />
-                </template>
-
-                <template v-slot:content>
-                    <p class="leading-normal m-0">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                </template>
-            </Card>
-        </div>
-
-        <div class="col-span-12">
-            <div class="card">
-                <h5>Divider</h5>
-                <div class="grid grid-cols-12 gap-4">
-                    <div class="col-span-5 flex items-center justify-center">
-                        <div class="p-fluid">
-                            <div class="field">
-                                <label for="username">Username</label>
-                                <InputText id="username" type="text" />
-                            </div>
-                            <div class="field">
-                                <label for="password">Password</label>
-                                <InputText id="password" type="password" />
-                            </div>
-                            <Button label="Login" class="mt-2"></Button>
-                        </div>
-                    </div>
-
-                    <div class="col-span-2">
-                        <Divider layout="vertical">
-                            <b>OR</b>
-                        </Divider>
-                    </div>
-                    <div class="col-span-5 items-center justify-center">
-                        <p class="leading-normal m-0">
-                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
-                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-                        </p>
-
-                        <Divider layout="horizontal" align="center">
-                            <span class="p-tag">Badge</span>
-                        </Divider>
-
-                        <p class="leading-normal m-0">
-                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
-                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-                        </p>
-
-                        <Divider align="right">
-                            <Button label="Button" icon="pi pi-search" class="p-button-outlined"></Button>
-                        </Divider>
-
-                        <p class="leading-normal m-0">
-                            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
-                            voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="col-span-12">
-            <div class="card">
-                <h5>Splitter</h5>
-
-                <Splitter style="height: 300px" class="mb-8">
-                    <SplitterPanel :size="30" :minSize="10">
-                        <div className="h-full flex items-center justify-center">Panel 1</div>
-                    </SplitterPanel>
-                    <SplitterPanel :size="70">
-                        <Splitter layout="vertical">
-                            <SplitterPanel :size="15">
-                                <div className="h-full flex items-center justify-center">Panel 2</div>
-                            </SplitterPanel>
-                            <SplitterPanel :size="50">
-                                <div className="h-full flex items-center justify-center">Panel 3</div>
-                            </SplitterPanel>
-                        </Splitter>
-                    </SplitterPanel>
-                </Splitter>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/src/views/uikit/PanelsDoc.vue b/src/views/uikit/PanelsDoc.vue
new file mode 100644
index 0000000..9401a74
--- /dev/null
+++ b/src/views/uikit/PanelsDoc.vue
@@ -0,0 +1,217 @@
+<script setup>
+import { ref } from 'vue';
+
+const items = ref([
+    {
+        label: 'Save',
+        icon: 'pi pi-check'
+    },
+    {
+        label: 'Update',
+        icon: 'pi pi-upload'
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-trash'
+    },
+    {
+        label: 'Home Page',
+        icon: 'pi pi-home'
+    }
+]);
+const cardMenu = ref([
+    { label: 'Save', icon: 'pi pi-fw pi-check' },
+    { label: 'Update', icon: 'pi pi-fw pi-refresh' },
+    { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+]);
+const menuRef = ref(null);
+
+const toggle = () => {
+    menuRef.value.toggle(event);
+};
+</script>
+
+<template>
+    <div class="flex flex-col gap-4">
+        <div class="card">
+            <h5>Toolbar</h5>
+            <Toolbar>
+                <template #start>
+                    <Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
+                    <Button icon="pi pi-print" class="mr-2" severity="secondary" text />
+                    <Button icon="pi pi-upload" severity="secondary" text />
+                </template>
+
+                <template #center>
+                    <IconField>
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
+                        <InputText placeholder="Search" />
+                    </IconField>
+                </template>
+
+                <template #end> <SplitButton label="Save" :model="items"></SplitButton></template>
+            </Toolbar>
+        </div>
+
+        <div class="flex flex-col md:flex-row gap-4">
+            <div class="md:w-1/2">
+                <div class="card">
+                    <h5>Accordion</h5>
+                    <Accordion value="0">
+                        <AccordionPanel value="0">
+                            <AccordionHeader>Header I</AccordionHeader>
+                            <AccordionContent>
+                                <p class="m-0">
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                                    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+                                    anim id est laborum.
+                                </p>
+                            </AccordionContent>
+                        </AccordionPanel>
+                        <AccordionPanel value="1">
+                            <AccordionHeader>Header II</AccordionHeader>
+                            <AccordionContent>
+                                <p class="m-0">
+                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
+                                    explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non
+                                    numquam eius modi.
+                                </p>
+                            </AccordionContent>
+                        </AccordionPanel>
+                        <AccordionPanel value="2">
+                            <AccordionHeader>Header III</AccordionHeader>
+                            <AccordionContent>
+                                <p class="m-0">
+                                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
+                                    sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
+                                    impedit quo minus.
+                                </p>
+                            </AccordionContent>
+                        </AccordionPanel>
+                    </Accordion>
+                </div>
+                <div class="card">
+                    <h5>Tabs</h5>
+                    <Tabs value="0">
+                        <TabList>
+                            <Tab value="0">Header I</Tab>
+                            <Tab value="1">Header II</Tab>
+                            <Tab value="2">Header III</Tab>
+                        </TabList>
+                        <TabPanels>
+                            <TabPanel value="0">
+                                <p class="m-0">
+                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                                    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+                                    anim id est laborum.
+                                </p>
+                            </TabPanel>
+                            <TabPanel value="1">
+                                <p class="m-0">
+                                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
+                                    explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non
+                                    numquam eius modi.
+                                </p>
+                            </TabPanel>
+                            <TabPanel value="2">
+                                <p class="m-0">
+                                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
+                                    sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
+                                    impedit quo minus.
+                                </p>
+                            </TabPanel>
+                        </TabPanels>
+                    </Tabs>
+                </div>
+            </div>
+            <div class="md:w-1/2 mt-6 md:mt-0">
+                <div class="card">
+                    <h5>Panel</h5>
+                    <Panel header="Header" :toggleable="true">
+                        <p class="leading-normal m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </Panel>
+                </div>
+                <div class="card">
+                    <h5>Fieldset</h5>
+                    <Fieldset legend="Legend" :toggleable="true">
+                        <p class="leading-normal m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </Fieldset>
+                </div>
+
+                <Card>
+                    <template v-slot:title>
+                        <div class="flex items-center justify-between mb-0">
+                            <h5>Card</h5>
+                            <Button icon="pi pi-plus" class="p-button-text" @click="toggle" />
+                        </div>
+                        <Menu id="config_menu" ref="menuRef" :model="cardMenu" :popup="true" />
+                    </template>
+
+                    <template v-slot:content>
+                        <p class="leading-normal m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </template>
+                </Card>
+            </div>
+        </div>
+
+        <div class="card mt-4">
+            <h5>Divider</h5>
+            <div class="flex flex-col md:flex-row">
+                <div class="w-full md:w-5/12 flex flex-col items-center justify-center gap-3 py-5">
+                    <div class="flex flex-col gap-2">
+                        <label for="username">Username</label>
+                        <InputText id="username" type="text" />
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <label for="password">Password</label>
+                        <InputText id="password" type="password" />
+                    </div>
+                    <div class="flex">
+                        <Button label="Login" icon="pi pi-user" class="w-full max-w-[17.35rem] mx-auto"></Button>
+                    </div>
+                </div>
+                <div class="w-full md:w-2/12">
+                    <Divider layout="vertical" class="!hidden md:flex"><b>OR</b></Divider>
+                    <Divider layout="horizontal" class="flex md:!hidden" align="center"><b>OR</b></Divider>
+                </div>
+                <div class="w-full md:w-5/12 flex items-center justify-center py-5">
+                    <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <h5>Splitter</h5>
+
+            <Splitter style="height: 300px" class="mb-8">
+                <SplitterPanel :size="30" :minSize="10">
+                    <div className="h-full flex items-center justify-center">Panel 1</div>
+                </SplitterPanel>
+                <SplitterPanel :size="70">
+                    <Splitter layout="vertical">
+                        <SplitterPanel :size="15">
+                            <div className="h-full flex items-center justify-center">Panel 2</div>
+                        </SplitterPanel>
+                        <SplitterPanel :size="50">
+                            <div className="h-full flex items-center justify-center">Panel 3</div>
+                        </SplitterPanel>
+                    </Splitter>
+                </SplitterPanel>
+            </Splitter>
+        </div>
+    </div>
+</template>
diff --git a/src/views/uikit/Table.vue b/src/views/uikit/Table.vue
deleted file mode 100644
index a336b68..0000000
--- a/src/views/uikit/Table.vue
+++ /dev/null
@@ -1,449 +0,0 @@
-<script setup>
-import { ref, onBeforeMount, reactive } from 'vue';
-import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
-import { CustomerService } from '@/service/CustomerService';
-import { ProductService } from '@/service/ProductService';
-
-const customer1 = ref(null);
-const customer2 = ref(null);
-const customer3 = ref(null);
-const filters1 = ref(null);
-const loading1 = ref(null);
-const loading2 = ref(null);
-const idFrozen = ref(false);
-const products = ref(null);
-const expandedRows = ref([]);
-const statuses = reactive(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
-const representatives = reactive([
-    { name: 'Amy Elsner', image: 'amyelsner.png' },
-    { name: 'Anna Fali', image: 'annafali.png' },
-    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-    { name: 'Onyama Limba', image: 'onyamalimba.png' },
-    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-]);
-
-const customerService = new CustomerService();
-const productService = new ProductService();
-
-const getBadgeSeverity = (inventoryStatus) => {
-    switch (inventoryStatus.toLowerCase()) {
-        case 'instock':
-            return 'success';
-        case 'lowstock':
-            return 'warning';
-        case 'outofstock':
-            return 'danger';
-        default:
-            return 'info';
-    }
-};
-const getSeverity = (status) => {
-    switch (status) {
-        case 'unqualified':
-            return 'danger';
-
-        case 'qualified':
-            return 'success';
-
-        case 'new':
-            return 'info';
-
-        case 'negotiation':
-            return 'warning';
-
-        case 'renewal':
-            return null;
-    }
-};
-
-onBeforeMount(() => {
-    productService.getProductsWithOrdersSmall().then((data) => (products.value = data));
-    customerService.getCustomersLarge().then((data) => {
-        customer1.value = data;
-        loading1.value = false;
-        customer1.value.forEach((customer) => (customer.date = new Date(customer.date)));
-    });
-    customerService.getCustomersLarge().then((data) => (customer2.value = data));
-    customerService.getCustomersMedium().then((data) => (customer3.value = data));
-    loading2.value = false;
-
-    initFilters1();
-});
-
-const initFilters1 = () => {
-    filters1.value = {
-        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-        representative: { value: null, matchMode: FilterMatchMode.IN },
-        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-        activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
-        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-    };
-};
-
-const clearFilter1 = () => {
-    initFilters1();
-};
-const expandAll = () => {
-    expandedRows.value = products.value.reduce((acc, p) => (acc[p.id] = true) && acc, {});
-};
-const collapseAll = () => {
-    expandedRows.value = null;
-};
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-};
-
-const formatDate = (value) => {
-    return value.toLocaleDateString('en-US', {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric'
-    });
-};
-const calculateCustomerTotal = (name) => {
-    let total = 0;
-    if (customer3.value) {
-        for (let customer of customer3.value) {
-            if (customer.representative.name === name) {
-                total++;
-            }
-        }
-    }
-
-    return total;
-};
-</script>
-
-<template>
-    <div class="grid grid-cols-12 gap-4">
-        <div class="col-span-12">
-            <div class="card">
-                <h5>Filter Menu</h5>
-                <DataTable :value="customer1" :paginator="true" :rows="10" dataKey="id" :rowHover="true"
-                    v-model:filters="filters1" filterDisplay="menu" :loading="loading1" :filters="filters1"
-                    :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"
-                    showGridlines>
-                    <template #header>
-                        <div class="flex justify-between flex-col sm:flex-row">
-                            <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined
-                                @click="clearFilter1()" />
-                            <IconField iconPosition="left">
-                                <InputIcon class="pi pi-search" />
-                                <InputText v-model="filters1['global'].value" placeholder="Keyword Search"
-                                    style="width: 100%" />
-                            </IconField>
-                        </div>
-                    </template>
-                    <template #empty> No customers found. </template>
-                    <template #loading> Loading customers data. Please wait. </template>
-                    <Column field="name" header="Name" style="min-width: 12rem">
-                        <template #body="{ data }">
-                            {{ data.name }}
-                        </template>
-                        <template #filter="{ filterModel }">
-                            <InputText type="text" v-model="filterModel.value" class="p-column-filter"
-                                placeholder="Search by name" />
-                        </template>
-                    </Column>
-                    <Column header="Country" filterField="country.name" style="min-width: 12rem">
-                        <template #body="{ data }">
-                            <div class="flex items-center gap-2">
-                                <img alt="flag" src="/demo/images/flag/flag_placeholder.png"
-                                    :class="`flag flag-${data.country.code}`" style="width: 24px" />
-                                <span>{{ data.country.name }}</span>
-                            </div>
-                        </template>
-                        <template #filter="{ filterModel }">
-                            <InputText type="text" v-model="filterModel.value" class="p-column-filter"
-                                placeholder="Search by country" />
-                        </template>
-                        <template #filterclear="{ filterCallback }">
-                            <Button type="button" icon="pi pi-times" @click="filterCallback()"
-                                severity="secondary"></Button>
-                        </template>
-                        <template #filterapply="{ filterCallback }">
-                            <Button type="button" icon="pi pi-check" @click="filterCallback()"
-                                severity="success"></Button>
-                        </template>
-                    </Column>
-                    <Column header="Agent" filterField="representative" :showFilterMatchModes="false"
-                        :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
-                        <template #body="{ data }">
-                            <div class="flex items-center gap-2">
-                                <img :alt="data.representative.name"
-                                    :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`"
-                                    style="width: 32px" />
-                                <span>{{ data.representative.name }}</span>
-                            </div>
-                        </template>
-                        <template #filter="{ filterModel }">
-                            <div class="mb-4 text-bold">Agent Picker</div>
-                            <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name"
-                                placeholder="Any" class="p-column-filter">
-                                <template #option="slotProps">
-                                    <div class="p-multiselect-representative-option">
-                                        <img :alt="slotProps.option.name"
-                                            :src="'/demo/images/avatar/' + slotProps.option.image" width="32"
-                                            style="vertical-align: middle" />
-                                        <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{
-                    slotProps.option.name }}</span>
-                                    </div>
-                                </template>
-                            </MultiSelect>
-                        </template>
-                    </Column>
-                    <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
-                        <template #body="{ data }">
-                            {{ formatDate(data.date) }}
-                        </template>
-                        <template #filter="{ filterModel }">
-                            <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
-                        </template>
-                    </Column>
-                    <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
-                        <template #body="{ data }">
-                            {{ formatCurrency(data.balance) }}
-                        </template>
-                        <template #filter="{ filterModel }">
-                            <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
-                        </template>
-                    </Column>
-                    <Column field="status" header="Status" :filterMenuStyle="{ width: '14rem' }"
-                        style="min-width: 12rem">
-                        <template #body="{ data }">
-                            <Tag :severity="getSeverity(data.status)">{{ data.status.toUpperCase() }}</Tag>
-                        </template>
-                        <template #filter="{ filterModel }">
-                            <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Any"
-                                class="p-column-filter" :showClear="true">
-                                <template #value="slotProps">
-                                    <Tag :severity="getSeverity(slotProps.value)" v-if="slotProps.value">{{
-                    slotProps.value }} </Tag>
-                                    <span v-else>{{ slotProps.placeholder }}</span>
-                                </template>
-                                <template #option="slotProps">
-                                    <Tag :severity="getSeverity(slotProps.option)">{{ slotProps.option.toUpperCase() }}
-                                    </Tag>
-                                </template>
-                            </Dropdown>
-                        </template>
-                    </Column>
-                    <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
-                        <template #body="{ data }">
-                            <ProgressBar :value="data.activity" :showValue="false" style="height: 0.5rem"></ProgressBar>
-                        </template>
-                        <template #filter="{ filterModel }">
-                            <Slider v-model="filterModel.value" :range="true" class="m-4"></Slider>
-                            <div class="flex items-center justify-between px-2">
-                                <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
-                                <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
-                            </div>
-                        </template>
-                    </Column>
-                    <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center"
-                        style="min-width: 8rem">
-                        <template #body="{ data }">
-                            <i class="pi"
-                                :class="{ 'text-green-500 pi-check-circle': data.verified, 'text-pink-500 pi-times-circle': !data.verified }"></i>
-                        </template>
-                        <template #filter="{ filterModel }">
-                            <TriStateCheckbox v-model="filterModel.value" />
-                        </template>
-                    </Column>
-                </DataTable>
-            </div>
-        </div>
-
-        <div class="col-span-12">
-            <div class="card">
-                <h5>Frozen Columns</h5>
-                <ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id"
-                    offLabel="Freeze Id" style="width: 10rem" />
-
-                <DataTable :value="customer2" :scrollable="true" scrollHeight="400px" :loading="loading2"
-                    scrollDirection="both" class="mt-4">
-                    <Column field="name" header="Name" style="min-width: 200px" frozen></Column>
-                    <Column field="id" header="Id" style="min-width: 100px" :frozen="idFrozen"></Column>
-                    <Column field="country.name" header="Country" :style="{ width: '200px' }">
-                        <template #body="{ data }">
-                            <div class="flex items-center gap-2">
-                                <img alt="flag" src="/demo/images/flag/flag_placeholder.png"
-                                    :class="`flag flag-${data.country.code}`" style="width: 24px" />
-                                <span>{{ data.country.name }}</span>
-                            </div>
-                        </template>
-                    </Column>
-                    <Column field="date" header="Date" style="min-width: 200px"></Column>
-                    <Column field="company" header="Company" style="min-width: 200px"></Column>
-                    <Column field="status" header="Status" style="min-width: 200px">
-                        <template #body="{ data }">
-                            <Tag :severity="getSeverity(data.status)">{{ data.status.toUpperCase() }}</Tag>
-                        </template>
-                    </Column>
-                    <Column field="activity" header="Activity" style="min-width: 200px"></Column>
-                    <Column field="representative.name" header="Representative" style="min-width: 200px">
-                        <template #body="{ data }">
-                            <div class="flex items-center gap-2">
-                                <img :alt="data.representative.name"
-                                    :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`"
-                                    style="width: 32px" />
-                                <span>{{ data.representative.name }}</span>
-                            </div>
-                        </template>
-                    </Column>
-                    <Column field="balance" header="Balance" style="min-width: 200px" frozen alignFrozen="right">
-                        <template #body="{ data }">
-                            <span class="text-bold">{{ formatCurrency(data.balance) }}</span>
-                        </template>
-                    </Column>
-                </DataTable>
-            </div>
-        </div>
-
-        <div class="col-span-12">
-            <div class="card">
-                <h5>Row Expand</h5>
-                <DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id"
-                    tableStyle="min-width: 60rem">
-                    <template #header>
-                        <div>
-                            <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2 mb-2" />
-                            <Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" class="mb-2" />
-                        </div>
-                    </template>
-                    <Column :expander="true" headerStyle="width: 3rem" />
-                    <Column field="name" header="Name" :sortable="true">
-                        <template #body="slotProps">
-                            {{ slotProps.data.name }}
-                        </template>
-                    </Column>
-                    <Column header="Image">
-                        <template #body="slotProps">
-                            <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image"
-                                class="shadow" width="100" />
-                        </template>
-                    </Column>
-                    <Column field="price" header="Price" :sortable="true">
-                        <template #body="slotProps">
-                            {{ formatCurrency(slotProps.data.price) }}
-                        </template>
-                    </Column>
-                    <Column field="category" header="Category" :sortable="true">
-                        <template #body="slotProps">
-                            {{ formatCurrency(slotProps.data.category) }}
-                        </template>
-                    </Column>
-                    <Column field="rating" header="Reviews" :sortable="true">
-                        <template #body="slotProps">
-                            <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
-                        </template>
-                    </Column>
-                    <Column field="inventoryStatus" header="Status" :sortable="true">
-                        <template #body="slotProps">
-                            <Tag :severity="getBadgeSeverity(slotProps.data.inventoryStatus)">{{
-                    slotProps.data.inventoryStatus }}</Tag>
-                        </template>
-                    </Column>
-                    <template #expansion="slotProps">
-                        <div class="p-4">
-                            <h5>Orders for {{ slotProps.data.name }}</h5>
-                            <DataTable :value="slotProps.data.orders">
-                                <Column field="id" header="Id" :sortable="true">
-                                    <template #body="slotProps">
-                                        {{ slotProps.data.id }}
-                                    </template>
-                                </Column>
-                                <Column field="customer" header="Customer" :sortable="true">
-                                    <template #body="slotProps">
-                                        {{ slotProps.data.customer }}
-                                    </template>
-                                </Column>
-                                <Column field="date" header="Date" :sortable="true">
-                                    <template #body="slotProps">
-                                        {{ slotProps.data.date }}
-                                    </template>
-                                </Column>
-                                <Column field="amount" header="Amount" :sortable="true">
-                                    <template #body="slotProps">
-                                        {{ formatCurrency(slotProps.data.amount) }}
-                                    </template>
-                                </Column>
-                                <Column field="status" header="Status" :sortable="true">
-                                    <template #body="slotProps">
-                                        <span
-                                            :class="'order-badge order-' + (slotProps.data.status ? slotProps.data.status.toLowerCase() : '')">{{
-                    slotProps.data.status }}</span>
-                                    </template>
-                                </Column>
-                                <Column headerStyle="width:4rem">
-                                    <template #body>
-                                        <Button icon="pi pi-search" />
-                                    </template>
-                                </Column>
-                            </DataTable>
-                        </div>
-                    </template>
-                </DataTable>
-            </div>
-        </div>
-
-        <div class="col-span-12">
-            <div class="card">
-                <h5>Subheader Grouping</h5>
-                <DataTable :value="customer3" rowGroupMode="subheader" groupRowsBy="representative.name"
-                    sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px">
-                    <Column field="representative.name" header="Representative"></Column>
-                    <Column field="name" header="Name" style="min-width: 200px"></Column>
-                    <Column field="country" header="Country" style="min-width: 200px">
-                        <template #body="{ data }">
-                            <div class="flex items-center gap-2">
-                                <img alt="flag" src="/demo/images/flag/flag_placeholder.png"
-                                    :class="`flag flag-${data.country.code}`" style="width: 24px" />
-                                <span>{{ data.country.name }}</span>
-                            </div>
-                        </template>
-                    </Column>
-                    <Column field="company" header="Company" style="min-width: 200px"></Column>
-                    <Column field="status" header="Status" style="min-width: 200px">
-                        <template #body="slotProps">
-                            <Tag :severity="getSeverity(slotProps.data.status)">{{ slotProps.data.status.toUpperCase()
-                                }}</Tag>
-                        </template>
-                    </Column>
-                    <Column field="date" header="Date" style="min-width: 200px"></Column>
-                    <template #groupheader="slotProps">
-                        <div class="flex items-center gap-2">
-                            <img :alt="slotProps.data.representative.name"
-                                :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32"
-                                style="vertical-align: middle" />
-                            <span>{{ slotProps.data.representative.name }}</span>
-                        </div>
-                    </template>
-                    <template #groupfooter="slotProps">
-                        <td style="text-align: right" class="text-bold pr-12">Total Customers: {{
-                            calculateCustomerTotal(slotProps.data.representative.name) }}</td>
-                    </template>
-                </DataTable>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped lang="scss">
-:deep(.p-datatable-frozen-tbody) {
-    font-weight: bold;
-}
-
-:deep(.p-datatable-scrollable .p-frozen-column) {
-    font-weight: bold;
-}
-</style>
diff --git a/src/views/uikit/TableDoc.vue b/src/views/uikit/TableDoc.vue
new file mode 100644
index 0000000..f695419
--- /dev/null
+++ b/src/views/uikit/TableDoc.vue
@@ -0,0 +1,381 @@
+<script setup>
+import { ref, onBeforeMount, reactive } from 'vue';
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
+import { CustomerService } from '@/service/CustomerService';
+import { ProductService } from '@/service/ProductService';
+
+const customers1 = ref(null);
+const customers2 = ref(null);
+const customers3 = ref(null);
+const filters1 = ref(null);
+const loading1 = ref(null);
+const balanceFrozen = ref(false);
+const products = ref(null);
+const expandedRows = ref([]);
+const statuses = reactive(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
+const representatives = reactive([
+    { name: 'Amy Elsner', image: 'amyelsner.png' },
+    { name: 'Anna Fali', image: 'annafali.png' },
+    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+    { name: 'Onyama Limba', image: 'onyamalimba.png' },
+    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+]);
+
+const customerService = new CustomerService();
+const productService = new ProductService();
+
+const getOrderSeverity = (order) => {
+    switch (order.status) {
+        case 'DELIVERED':
+            return 'success';
+
+        case 'CANCELLED':
+            return 'danger';
+
+        case 'PENDING':
+            return 'warn';
+
+        case 'RETURNED':
+            return 'info';
+
+        default:
+            return null;
+    }
+};
+
+const getSeverity = (status) => {
+    switch (status) {
+        case 'unqualified':
+            return 'danger';
+
+        case 'qualified':
+            return 'success';
+
+        case 'new':
+            return 'info';
+
+        case 'negotiation':
+            return 'warn';
+
+        case 'renewal':
+            return null;
+    }
+};
+
+onBeforeMount(() => {
+    productService.getProductsWithOrdersSmall().then((data) => (products.value = data));
+    customerService.getCustomersLarge().then((data) => {
+        customers1.value = data;
+        loading1.value = false;
+        customers1.value.forEach((customer) => (customer.date = new Date(customer.date)));
+    });
+    customerService.getCustomersLarge().then((data) => (customers2.value = data));
+    customerService.getCustomersMedium().then((data) => (customers3.value = data));
+
+    initFilters1();
+});
+
+const initFilters1 = () => {
+    filters1.value = {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    };
+};
+
+const expandAll = () => {
+    expandedRows.value = products.value.reduce((acc, p) => (acc[p.id] = true) && acc, {});
+};
+
+const collapseAll = () => {
+    expandedRows.value = null;
+};
+
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+
+const formatDate = (value) => {
+    return value.toLocaleDateString('en-US', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+    });
+};
+
+const calculateCustomerTotal = (name) => {
+    let total = 0;
+    if (customers3.value) {
+        for (let customer of customers3.value) {
+            if (customer.representative.name === name) {
+                total++;
+            }
+        }
+    }
+
+    return total;
+};
+</script>
+
+<template>
+    <div class="card">
+        <h5>Filter Menu</h5>
+        <DataTable
+            :value="customers1"
+            :paginator="true"
+            :rows="10"
+            dataKey="id"
+            :rowHover="true"
+            v-model:filters="filters1"
+            filterDisplay="menu"
+            :loading="loading1"
+            :filters="filters1"
+            :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"
+            showGridlines
+        >
+            <template #header>
+                <div class="flex justify-between">
+                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
+                    <IconField>
+                        <InputIcon>
+                            <i class="pi pi-search" />
+                        </InputIcon>
+                        <InputText v-model="filters1['global'].value" placeholder="Keyword Search" />
+                    </IconField>
+                </div>
+            </template>
+            <template #empty> No customers found. </template>
+            <template #loading> Loading customers data. Please wait. </template>
+            <Column field="name" header="Name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    {{ data.name }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
+                </template>
+            </Column>
+            <Column header="Country" filterField="country.name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code}`" style="width: 24px" />
+                        <span>{{ data.country.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
+                </template>
+                <template #filterclear="{ filterCallback }">
+                    <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
+                </template>
+                <template #filterapply="{ filterCallback }">
+                    <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
+                </template>
+                <template #filterfooter>
+                    <div class="px-4 pt-0 pb-4 text-center">Customized Buttons</div>
+                </template>
+            </Column>
+            <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
+                        <span>{{ data.representative.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-2">
+                                <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </MultiSelect>
+                </template>
+            </Column>
+            <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatDate(data.date) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
+                </template>
+            </Column>
+            <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatCurrency(data.balance) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
+                </template>
+            </Column>
+            <Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                </template>
+                <template #filter="{ filterModel }">
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
+                        <template #option="slotProps">
+                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                        </template>
+                    </Select>
+                </template>
+            </Column>
+            <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
+                </template>
+                <template #filter="{ filterModel }">
+                    <Slider v-model="filterModel.value" range class="m-4"></Slider>
+                    <div class="flex items-center justify-between px-2">
+                        <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
+                        <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
+                <template #body="{ data }">
+                    <i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
+                </template>
+                <template #filter="{ filterModel }">
+                    <label for="verified-filter" class="font-bold"> Verified </label>
+                    <Checkbox v-model="filterModel.value" :indeterminate="filterModel.value === null" binary inputId="verified-filter" />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+
+    <div class="card">
+        <h5>Frozen Columns</h5>
+        <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
+
+        <DataTable :value="customers2" scrollable scrollHeight="400px" class="mt-6">
+            <Column field="name" header="Name" style="min-width: 200px" frozen class="font-bold"></Column>
+            <Column field="id" header="Id" style="min-width: 100px"></Column>
+            <Column field="name" header="Name" style="min-width: 200px"></Column>
+            <Column field="country.name" header="Country" style="min-width: 200px"></Column>
+            <Column field="date" header="Date" style="min-width: 200px"></Column>
+            <Column field="company" header="Company" style="min-width: 200px"></Column>
+            <Column field="status" header="Status" style="min-width: 200px"></Column>
+            <Column field="activity" header="Activity" style="min-width: 200px"></Column>
+            <Column field="representative.name" header="Representative" style="min-width: 200px"></Column>
+            <Column field="balance" header="Balance" style="min-width: 200px" alignFrozen="right" :frozen="balanceFrozen">
+                <template #body="{ data }">
+                    <span class="font-bold">{{ formatCurrency(data.balance) }}</span>
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+
+    <div class="card">
+        <h5>Row Expand</h5>
+        <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" tableStyle="min-width: 60rem">
+            <template #header>
+                <div class="flex flex-wrap justify-end gap-2">
+                    <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
+                    <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+                </div>
+            </template>
+            <Column expander style="width: 5rem" />
+            <Column field="name" header="Name"></Column>
+            <Column header="Image">
+                <template #body="slotProps">
+                    <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="shadow-lg" width="64" />
+                </template>
+            </Column>
+            <Column field="price" header="Price">
+                <template #body="slotProps">
+                    {{ formatCurrency(slotProps.data.price) }}
+                </template>
+            </Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="rating" header="Reviews">
+                <template #body="slotProps">
+                    <Rating :modelValue="slotProps.data.rating" readonly />
+                </template>
+            </Column>
+            <Column header="Status">
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data)" />
+                </template>
+            </Column>
+            <template #expansion="slotProps">
+                <div class="p-4">
+                    <h5>Orders for {{ slotProps.data.name }}</h5>
+                    <DataTable :value="slotProps.data.orders">
+                        <Column field="id" header="Id" sortable></Column>
+                        <Column field="customer" header="Customer" sortable></Column>
+                        <Column field="date" header="Date" sortable></Column>
+                        <Column field="amount" header="Amount" sortable>
+                            <template #body="slotProps">
+                                {{ formatCurrency(slotProps.data.amount) }}
+                            </template>
+                        </Column>
+                        <Column field="status" header="Status" sortable>
+                            <template #body="slotProps">
+                                <Tag :value="slotProps.data.status.toLowerCase()" :severity="getOrderSeverity(slotProps.data)" />
+                            </template>
+                        </Column>
+                        <Column headerStyle="width:4rem">
+                            <template #body>
+                                <Button icon="pi pi-search" />
+                            </template>
+                        </Column>
+                    </DataTable>
+                </div>
+            </template>
+        </DataTable>
+    </div>
+
+    <div class="card">
+        <h5>Subheader Grouping</h5>
+        <DataTable :value="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+            <template #groupheader="slotProps">
+                <div class="flex items-center gap-2">
+                    <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" />
+                    <span>{{ slotProps.data.representative.name }}</span>
+                </div>
+            </template>
+            <Column field="representative.name" header="Representative"></Column>
+            <Column field="name" header="Name" style="min-width: 200px"></Column>
+            <Column field="country" header="Country" style="min-width: 200px">
+                <template #body="slotProps">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.data.country.code}`" style="width: 24px" />
+                        <span>{{ slotProps.data.country.name }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="company" header="Company" style="min-width: 200px"></Column>
+            <Column field="status" header="Status" style="min-width: 200px">
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
+                </template>
+            </Column>
+            <Column field="date" header="Date" style="min-width: 200px"></Column>
+            <template #groupfooter="slotProps">
+                <div class="flex justify-end font-bold w-full">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</div>
+            </template>
+        </DataTable>
+    </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.p-datatable-frozen-tbody) {
+    font-weight: bold;
+}
+
+:deep(.p-datatable-scrollable .p-frozen-column) {
+    font-weight: bold;
+}
+</style>
diff --git a/src/views/uikit/Tree.vue b/src/views/uikit/Tree.vue
deleted file mode 100644
index 816a269..0000000
--- a/src/views/uikit/Tree.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-const treeValue = ref(null);
-const selectedTreeValue = ref(null);
-const treeTableValue = ref(null);
-const selectedTreeTableValue = ref(null);
-const nodeService = new NodeService();
-
-onMounted(() => {
-    nodeService.getTreeNodes().then((data) => (treeValue.value = data));
-    nodeService.getTreeTableNodes().then((data) => (treeTableValue.value = data));
-});
-</script>
-
-<template>
-    <div class="grid grid-cols-12 gap-4">
-        <div class="col-span-12">
-            <div class="card">
-                <h5>Tree</h5>
-                <Tree :value="treeValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeValue"></Tree>
-            </div>
-        </div>
-        <div class="col-span-12">
-            <div class="card">
-                <h5>TreeTable</h5>
-                <TreeTable :value="treeTableValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeTableValue">
-                    <template #header> FileSystem </template>
-                    <Column field="name" header="Name" :expander="true"></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
-                </TreeTable>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/src/views/uikit/TreeDoc.vue b/src/views/uikit/TreeDoc.vue
new file mode 100644
index 0000000..1371530
--- /dev/null
+++ b/src/views/uikit/TreeDoc.vue
@@ -0,0 +1,32 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+const treeValue = ref(null);
+const selectedTreeValue = ref(null);
+const treeTableValue = ref(null);
+const selectedTreeTableValue = ref(null);
+const nodeService = new NodeService();
+
+onMounted(() => {
+    nodeService.getTreeNodes().then((data) => (treeValue.value = data));
+    nodeService.getTreeTableNodes().then((data) => (treeTableValue.value = data));
+});
+</script>
+
+<template>
+    <div class="card">
+        <h5 class="mb-4">Tree</h5>
+        <Tree :value="treeValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeValue"></Tree>
+    </div>
+
+    <div class="card">
+        <h5 class="mb-4">TreeTable</h5>
+        <TreeTable :value="treeTableValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeTableValue">
+            <template #header> FileSystem </template>
+            <Column field="name" header="Name" :expander="true"></Column>
+            <Column field="size" header="Size"></Column>
+            <Column field="type" header="Type"></Column>
+        </TreeTable>
+    </div>
+</template>
diff --git a/tailwind.config.js b/tailwind.config.js
index ef1ab87..85a7bdf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,8 +2,14 @@
 module.exports = {
     darkMode: ['selector', '[class*="app-dark"]'],
     content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+    plugins: [require('tailwindcss-primeui')],
     theme: {
-        extend: {}
-    },
-    plugins: [require('tailwindcss-primeui')]
+        screens: {
+            sm: '576px',
+            md: '768px',
+            lg: '992px',
+            xl: '1200px',
+            '2xl': '1920px'
+        }
+    }
 };