diff --git a/src/layout/AppConfigurator.vue b/src/layout/AppConfigurator.vue
index 2969958..59617b9 100644
--- a/src/layout/AppConfigurator.vue
+++ b/src/layout/AppConfigurator.vue
@@ -3,15 +3,13 @@ import { useLayout } from '@/layout/composables/layout';
 import { $t, updatePreset, updateSurfacePalette } from '@primevue/themes';
 import Aura from '@primevue/themes/aura';
 import Lara from '@primevue/themes/lara';
-import Nora from '@primevue/themes/nora';
 import { ref } from 'vue';
 
 const { layoutConfig, setPrimary, setSurface, setPreset, isDarkTheme, setMenuMode } = useLayout();
 
 const presets = {
     Aura,
-    Lara,
-    Nora
+    Lara
 };
 const preset = ref(layoutConfig.preset);
 const presetOptions = ref(Object.keys(presets));
@@ -129,79 +127,41 @@ function getPresetExt() {
             }
         };
     } else {
-        if (layoutConfig.preset === 'Nora') {
-            return {
-                semantic: {
-                    primary: color.palette,
-                    colorScheme: {
-                        light: {
-                            primary: {
-                                color: '{primary.600}',
-                                contrastColor: '#ffffff',
-                                hoverColor: '{primary.700}',
-                                activeColor: '{primary.800}'
-                            },
-                            highlight: {
-                                background: '{primary.600}',
-                                focusBackground: '{primary.700}',
-                                color: '#ffffff',
-                                focusColor: '#ffffff'
-                            }
+        return {
+            semantic: {
+                primary: color.palette,
+                colorScheme: {
+                    light: {
+                        primary: {
+                            color: '{primary.500}',
+                            contrastColor: '#ffffff',
+                            hoverColor: '{primary.600}',
+                            activeColor: '{primary.700}'
                         },
-                        dark: {
-                            primary: {
-                                color: '{primary.500}',
-                                contrastColor: '{surface.900}',
-                                hoverColor: '{primary.400}',
-                                activeColor: '{primary.300}'
-                            },
-                            highlight: {
-                                background: '{primary.500}',
-                                focusBackground: '{primary.400}',
-                                color: '{surface.900}',
-                                focusColor: '{surface.900}'
-                            }
+                        highlight: {
+                            background: '{primary.50}',
+                            focusBackground: '{primary.100}',
+                            color: '{primary.700}',
+                            focusColor: '{primary.800}'
+                        }
+                    },
+                    dark: {
+                        primary: {
+                            color: '{primary.400}',
+                            contrastColor: '{surface.900}',
+                            hoverColor: '{primary.300}',
+                            activeColor: '{primary.200}'
+                        },
+                        highlight: {
+                            background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+                            focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
+                            color: 'rgba(255,255,255,.87)',
+                            focusColor: 'rgba(255,255,255,.87)'
                         }
                     }
                 }
-            };
-        } else {
-            return {
-                semantic: {
-                    primary: color.palette,
-                    colorScheme: {
-                        light: {
-                            primary: {
-                                color: '{primary.500}',
-                                contrastColor: '#ffffff',
-                                hoverColor: '{primary.600}',
-                                activeColor: '{primary.700}'
-                            },
-                            highlight: {
-                                background: '{primary.50}',
-                                focusBackground: '{primary.100}',
-                                color: '{primary.700}',
-                                focusColor: '{primary.800}'
-                            }
-                        },
-                        dark: {
-                            primary: {
-                                color: '{primary.400}',
-                                contrastColor: '{surface.900}',
-                                hoverColor: '{primary.300}',
-                                activeColor: '{primary.200}'
-                            },
-                            highlight: {
-                                background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
-                                focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
-                                color: 'rgba(255,255,255,.87)',
-                                focusColor: 'rgba(255,255,255,.87)'
-                            }
-                        }
-                    }
-                }
-            };
-        }
+            }
+        };
     }
 }
 
diff --git a/src/layout/AppFooter.vue b/src/layout/AppFooter.vue
index bbee57e..487141c 100644
--- a/src/layout/AppFooter.vue
+++ b/src/layout/AppFooter.vue
@@ -3,6 +3,6 @@
 <template>
     <div class="layout-footer">
         SAKAI by
-        <span class="font-medium">PrimeVue</span>
+        <a href="https://primevue.org" target="_blank" rel="noopener noreferrer" class="text-primary font-bold hover:underline">PrimeVue</a>
     </div>
 </template>
diff --git a/src/layout/AppMenu.vue b/src/layout/AppMenu.vue
index 73ec9f2..bd43eae 100644
--- a/src/layout/AppMenu.vue
+++ b/src/layout/AppMenu.vue
@@ -120,12 +120,12 @@ const model = ref([
         items: [
             {
                 label: 'Documentation',
-                icon: 'pi pi-fw pi-question',
+                icon: 'pi pi-fw pi-book',
                 to: '/documentation'
             },
             {
                 label: 'View Source',
-                icon: 'pi pi-fw pi-search',
+                icon: 'pi pi-fw pi-github',
                 url: 'https://github.com/primefaces/sakai-vue',
                 target: '_blank'
             }
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 5163434..12bda47 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -11,7 +11,7 @@ const chartOptions = ref(null);
 
 const items = ref([
     { label: 'Add New', icon: 'pi pi-fw pi-plus' },
-    { label: 'Remove', icon: 'pi pi-fw pi-minus' }
+    { label: 'Remove', icon: 'pi pi-fw pi-trash' }
 ]);
 
 onMounted(() => {
@@ -28,21 +28,21 @@ function setChartData() {
         datasets: [
             {
                 type: 'bar',
-                label: 'Personal Wallet',
+                label: 'Subscriptions',
                 backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-400') + ' 100%, #fff)',
                 data: [4000, 10000, 15000, 4000],
                 barThickness: 32
             },
             {
                 type: 'bar',
-                label: 'Corporate Wallet',
+                label: 'Advertising',
                 backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-300') + ' 100%, transparent)',
                 data: [2100, 8400, 2400, 7500],
                 barThickness: 32
             },
             {
                 type: 'bar',
-                label: 'Investment Wallet',
+                label: 'Affiliate',
                 backgroundColor: 'color-mix(in srgb, ' + documentStyle.getPropertyValue('--p-primary-200') + ' 100%, transparent)',
                 data: [4100, 5200, 3400, 7400],
                 borderRadius: {
@@ -130,7 +130,7 @@ watch([getPrimary, getSurface], () => {
                         <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">$2.100</div>
                     </div>
                     <div class="flex items-center justify-center bg-orange-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
-                        <i class="pi pi-map-marker text-orange-500 !text-xl"></i>
+                        <i class="pi pi-dollar text-orange-500 !text-xl"></i>
                     </div>
                 </div>
                 <span class="text-primary font-medium">%52+ </span>
@@ -145,7 +145,7 @@ watch([getPrimary, getSurface], () => {
                         <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">28441</div>
                     </div>
                     <div class="flex items-center justify-center bg-cyan-100 rounded-border" style="width: 2.5rem; height: 2.5rem">
-                        <i class="pi pi-inbox text-cyan-500 !text-xl"></i>
+                        <i class="pi pi-users text-cyan-500 !text-xl"></i>
                     </div>
                 </div>
                 <span class="text-primary font-medium">520 </span>
@@ -195,7 +195,7 @@ watch([getPrimary, getSurface], () => {
                     <div class="font-semibold text-xl">Best Selling Products</div>
                     <div>
                         <Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu2.toggle($event)"></Button>
-                        <Menu ref="menu2" :popup="true" :model="items"></Menu>
+                        <Menu ref="menu2" :popup="true" :model="items" class="!min-w-40"></Menu>
                     </div>
                 </div>
                 <ul class="list-none p-0 m-0">
@@ -276,7 +276,7 @@ watch([getPrimary, getSurface], () => {
         </div>
         <div class="col-span-12 xl:col-span-6">
             <div class="card">
-                <div class="font-semibold text-xl mb-4">Sales Overview</div>
+                <div class="font-semibold text-xl mb-4">Revenue Stream</div>
                 <Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
             </div>
             <div class="card">
@@ -284,7 +284,7 @@ watch([getPrimary, getSurface], () => {
                     <div class="font-semibold text-xl">Notifications</div>
                     <div>
                         <Button icon="pi pi-ellipsis-v" class="p-button-text p-button-plain p-button-rounded" @click="$refs.menu1.toggle($event)"></Button>
-                        <Menu ref="menu1" :popup="true" :model="items"></Menu>
+                        <Menu ref="menu1" :popup="true" :model="items" class="!min-w-40"></Menu>
                     </div>
                 </div>
 
@@ -296,26 +296,26 @@ watch([getPrimary, getSurface], () => {
                         </div>
                         <span class="text-surface-900 dark:text-surface-0 leading-normal"
                             >Richard Jones
-                            <span class="text-surface-700 dark:text-surface-100">has purchased a blue t-shirt for <span class="text-blue-500">79$</span></span>
+                            <span class="text-surface-700 dark:text-surface-100">has purchased a blue t-shirt for <span class="text-primary font-bold">$79.00</span></span>
                         </span>
                     </li>
                     <li class="flex items-center py-2">
                         <div class="w-12 h-12 flex items-center justify-center bg-orange-100 rounded-full mr-4 shrink-0">
                             <i class="pi pi-download !text-xl text-orange-500"></i>
                         </div>
-                        <span class="text-surface-700 dark:text-surface-100 leading-normal">Your request for withdrawal of <span class="text-blue-500 font-medium">2500$</span> has been initiated.</span>
+                        <span class="text-surface-700 dark:text-surface-100 leading-normal">Your request for withdrawal of <span class="text-primary font-bold">$2500.00</span> has been initiated.</span>
                     </li>
                 </ul>
 
                 <span class="block text-muted-color font-medium mb-4">YESTERDAY</span>
-                <ul class="p-0 m-0 list-none">
+                <ul class="p-0 m-0 list-none mb-6">
                     <li class="flex items-center py-2 border-b border-surface">
                         <div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full mr-4 shrink-0">
                             <i class="pi pi-dollar !text-xl text-blue-500"></i>
                         </div>
                         <span class="text-surface-900 dark:text-surface-0 leading-normal"
                             >Keyser Wick
-                            <span class="text-surface-700 dark:text-surface-100">has purchased a black jacket for <span class="text-blue-500">59$</span></span>
+                            <span class="text-surface-700 dark:text-surface-100">has purchased a black jacket for <span class="text-primary font-bold">$59.00</span></span>
                         </span>
                     </li>
                     <li class="flex items-center py-2 border-b border-surface">
@@ -328,6 +328,21 @@ watch([getPrimary, getSurface], () => {
                         </span>
                     </li>
                 </ul>
+                <span class="block text-muted-color font-medium mb-4">LAST WEEK</span>
+                <ul class="p-0 m-0 list-none">
+                    <li class="flex items-center py-2 border-b border-surface">
+                        <div class="w-12 h-12 flex items-center justify-center bg-green-100 rounded-full mr-4 shrink-0">
+                            <i class="pi pi-arrow-up !text-xl text-green-500"></i>
+                        </div>
+                        <span class="text-surface-900 dark:text-surface-0 leading-normal">Your revenue has increased by <span class="text-primary font-bold">%25</span>.</span>
+                    </li>
+                    <li class="flex items-center py-2 border-b border-surface">
+                        <div class="w-12 h-12 flex items-center justify-center bg-purple-100 rounded-full mr-4 shrink-0">
+                            <i class="pi pi-heart !text-xl text-purple-500"></i>
+                        </div>
+                        <span class="text-surface-900 dark:text-surface-0 leading-normal"><span class="text-primary font-bold">12</span> users have added your products to their wishlist.</span>
+                    </li>
+                </ul>
             </div>
         </div>
     </div>
diff --git a/src/views/pages/Crud.vue b/src/views/pages/Crud.vue
index a750138..74d91f8 100644
--- a/src/views/pages/Crud.vue
+++ b/src/views/pages/Crud.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService';
 import { FilterMatchMode } from '@primevue/core/api';
 import { useToast } from 'primevue/usetoast';
-import { ProductService } from '@/service/ProductService';
+import { onMounted, ref } from 'vue';
 
 onMounted(() => {
     ProductService.getProducts().then((data) => (products.value = data));
@@ -128,13 +128,12 @@ const getStatusLabel = (status) => {
         <div class="card">
             <Toolbar class="mb-6">
                 <template #start>
-                    <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
-                    <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+                    <Button label="New" icon="pi pi-plus" severity="secondary" class="mr-2" @click="openNew" />
+                    <Button label="Delete" icon="pi pi-trash" severity="secondary" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
                 <template #end>
-                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2" auto />
-                    <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
+                    <Button label="Export" icon="pi pi-upload" severity="secondary" @click="exportCSV($event)" />
                 </template>
             </Toolbar>
 
diff --git a/src/views/pages/auth/Error.vue b/src/views/pages/auth/Error.vue
index 37b1539..43857a0 100644
--- a/src/views/pages/auth/Error.vue
+++ b/src/views/pages/auth/Error.vue
@@ -16,7 +16,7 @@ import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
                         <span class="text-muted-color mb-8">Requested resource is not available.</span>
                         <img src="/demo/images/error/asset-error.svg" alt="Error" class="mb-8" width="80%" />
                         <div class="col-span-12 mt-8 text-center">
-                            <Button as="router-link" label="Go to Dashboard" to="/" severity="info" />
+                            <Button as="router-link" label="Go to Dashboard" to="/" severity="danger" />
                         </div>
                     </div>
                 </div>
diff --git a/src/views/pages/auth/Login.vue b/src/views/pages/auth/Login.vue
index f518f1e..48da712 100644
--- a/src/views/pages/auth/Login.vue
+++ b/src/views/pages/auth/Login.vue
@@ -40,7 +40,7 @@ const checked = ref(false);
                         <InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" v-model="email" />
 
                         <label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
-                        <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="mb-4" fluid></Password>
+                        <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="mb-4" fluid :feedback="false"></Password>
 
                         <div class="flex items-center justify-between mt-2 mb-8 gap-8">
                             <div class="flex items-center">
diff --git a/src/views/uikit/ButtonDoc.vue b/src/views/uikit/ButtonDoc.vue
index 586b02b..77c96f1 100644
--- a/src/views/uikit/ButtonDoc.vue
+++ b/src/views/uikit/ButtonDoc.vue
@@ -30,7 +30,7 @@ const load = (index) => {
 <template>
     <div class="flex flex-col md:flex-row gap-8">
         <div class="md:w-1/2">
-            <div class="card flex flex-col gap-2">
+            <div class="card flex flex-col gap-4">
                 <div class="font-semibold text-xl">Default</div>
                 <div class="flex flex-wrap gap-2">
                     <Button label="Submit"></Button>
@@ -38,7 +38,7 @@ const load = (index) => {
                     <Button label="Link" class="p-button-link" />
                 </div>
             </div>
-            <div class="card flex flex-col gap-2">
+            <div class="card flex flex-col gap-4">
                 <div class="font-semibold text-xl">Severities</div>
                 <div class="flex flex-wrap gap-2">
                     <Button label="Primary" />
@@ -51,7 +51,7 @@ const load = (index) => {
                     <Button label="Contrast" severity="contrast" />
                 </div>
             </div>
-            <div class="card flex flex-col gap-2">
+            <div class="card flex flex-col gap-4">
                 <div class="font-semibold text-xl">Text</div>
                 <div class="flex flex-wrap gap-2">
                     <Button label="Primary" text />
@@ -64,7 +64,7 @@ const load = (index) => {
                     <Button label="Plain" plain text />
                 </div>
             </div>
-            <div class="card flex flex-col gap-2">
+            <div class="card flex flex-col gap-4">
                 <div class="font-semibold text-xl">Outlined</div>
                 <div class="flex flex-wrap gap-2">
                     <Button label="Primary" outlined />
@@ -77,7 +77,7 @@ const load = (index) => {
                     <Button label="Contrast" severity="contrast" outlined />
                 </div>
             </div>
-            <div class="card flex flex-col gap-2">
+            <div class="card flex flex-col gap-4">
                 <div class="font-semibold text-xl">Group</div>
                 <div class="flex flex-wrap gap-2">
                     <ButtonGroup>
@@ -87,7 +87,7 @@ const load = (index) => {
                     </ButtonGroup>
                 </div>
             </div>
-            <div class="card flex flex-col gap-2">
+            <div class="card flex flex-col gap-4">
                 <div class="font-semibold text-xl">SplitButton</div>
                 <div class="flex flex-wrap gap-2">
                     <SplitButton label="Save" :model="items"></SplitButton>
@@ -100,7 +100,7 @@ const load = (index) => {
                     <SplitButton label="Save" :model="items" severity="contrast"></SplitButton>
                 </div>
             </div>
-            <div class="card flex flex-col gap-2">
+            <div class="card flex flex-col gap-4">
                 <div class="font-semibold text-xl">Templating</div>
                 <div class="flex flex-wrap gap-2">
                     <Button type="button">
@@ -114,7 +114,7 @@ const load = (index) => {
             </div>
         </div>
         <div class="md:w-1/2">
-            <div class="card flex flex-col gap-2">
+            <div class="card flex flex-col gap-4">
                 <div class="font-semibold text-xl">Icons</div>
                 <div class="flex flex-wrap gap-2">
                     <Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button>
@@ -122,7 +122,7 @@ const load = (index) => {
                     <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">
+            <div class="card flex flex-col gap-4">
                 <div class="font-semibold text-xl">Raised</div>
                 <div class="flex flex-wrap gap-2">
                     <Button label="Primary" raised />
@@ -135,7 +135,7 @@ const load = (index) => {
                     <Button label="Contrast" severity="contrast" raised />
                 </div>
             </div>
-            <div class="card flex flex-col gap-2">
+            <div class="card flex flex-col gap-4">
                 <div class="font-semibold text-xl">Rounded</div>
                 <div class="flex flex-wrap gap-2">
                     <Button label="Primary" rounded />
@@ -148,7 +148,7 @@ const load = (index) => {
                     <Button label="Contrast" severity="contrast" rounded />
                 </div>
             </div>
-            <div class="card flex flex-col gap-2">
+            <div class="card flex flex-col gap-4">
                 <div class="font-semibold text-xl">Rounded Icons</div>
                 <div class="flex flex-wrap gap-2">
                     <Button icon="pi pi-check" rounded />
@@ -160,7 +160,7 @@ const load = (index) => {
                     <Button icon="pi pi-times" severity="danger" rounded />
                 </div>
             </div>
-            <div class="card flex flex-col gap-2">
+            <div class="card flex flex-col gap-4">
                 <div class="font-semibold text-xl">Rounded Text</div>
                 <div class="flex flex-wrap gap-2">
                     <Button icon="pi pi-check" text raised rounded />
@@ -172,7 +172,7 @@ const load = (index) => {
                     <Button icon="pi pi-times" severity="danger" text raised rounded />
                 </div>
             </div>
-            <div class="card flex flex-col gap-2">
+            <div class="card flex flex-col gap-4">
                 <div class="font-semibold text-xl">Rounded Outlined</div>
                 <div class="flex flex-wrap gap-2">
                     <Button icon="pi pi-check" rounded outlined />
@@ -184,7 +184,7 @@ const load = (index) => {
                     <Button icon="pi pi-times" severity="danger" rounded outlined />
                 </div>
             </div>
-            <div class="card flex flex-col gap-2">
+            <div class="card flex flex-col gap-4">
                 <div class="font-semibold text-xl">Loading</div>
                 <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)" />
diff --git a/src/views/uikit/MediaDoc.vue b/src/views/uikit/MediaDoc.vue
index c30e897..c45a300 100644
--- a/src/views/uikit/MediaDoc.vue
+++ b/src/views/uikit/MediaDoc.vue
@@ -72,7 +72,9 @@ const getSeverity = (status) => {
                     <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 class="dark:bg-surface-900 absolute rounded-border" style="left: 5px; top: 5px">
+                                <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
+                            </div>
                         </div>
                     </div>
                     <div class="mb-4 font-medium">{{ slotProps.data.name }}</div>
diff --git a/src/views/uikit/MenuDoc.vue b/src/views/uikit/MenuDoc.vue
index 2cfa155..315c4da 100644
--- a/src/views/uikit/MenuDoc.vue
+++ b/src/views/uikit/MenuDoc.vue
@@ -439,7 +439,7 @@ const onContextRightClick = (event) => {
         <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
     </div>
 
-    <div class="flex flex-col md:flex-row gap-4">
+    <div class="flex flex-col md:flex-row gap-8">
         <div class="md:w-1/2">
             <div class="card">
                 <div class="font-semibold text-xl mb-4">Steps</div>
diff --git a/src/views/uikit/MessagesDoc.vue b/src/views/uikit/MessagesDoc.vue
index 159e403..0d7e589 100644
--- a/src/views/uikit/MessagesDoc.vue
+++ b/src/views/uikit/MessagesDoc.vue
@@ -6,19 +6,6 @@ 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 });
@@ -38,40 +25,44 @@ const showError = () => {
 </script>
 
 <template>
-    <div class="flex flex-col md:flex-row gap-4">
-        <div class="card md:w-1/2">
-            <div class="font-semibold text-xl mb-4">Toast</div>
-            <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 class="flex flex-col md:flex-row gap-8">
+        <div class="md:w-1/2">
+            <div class="card">
+                <div class="font-semibold text-xl mb-4">Toast</div>
+                <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="warn" />
+                    <Button @click="showError()" label="Error" severity="danger" />
+                </div>
 
-            <div class="font-semibold text-xl mt-4 mb-4">Inline</div>
-            <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 class="font-semibold text-xl mt-4 mb-4">Inline</div>
+                <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>
-        <div class="card md:w-1/2">
-            <div class="font-semibold text-xl mb-4">Message</div>
-            <div class="flex flex-col gap-4 mb-4">
-                <Message severity="success">Success Message</Message>
-                <Message severity="info">Info Message</Message>
-                <Message severity="warn">Warn Message</Message>
-                <Message severity="error">Error Message</Message>
-                <Message severity="secondary">Secondary Message</Message>
-                <Message severity="contrast">Contrast Message</Message>
-            </div>
+        <div class="md:w-1/2">
+            <div class="card">
+                <div class="font-semibold text-xl mb-4">Message</div>
+                <div class="flex flex-col gap-4 mb-4">
+                    <Message severity="success">Success Message</Message>
+                    <Message severity="info">Info Message</Message>
+                    <Message severity="warn">Warn Message</Message>
+                    <Message severity="error">Error Message</Message>
+                    <Message severity="secondary">Secondary Message</Message>
+                    <Message severity="contrast">Contrast Message</Message>
+                </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>
+                <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>
 </template>
diff --git a/src/views/uikit/TableDoc.vue b/src/views/uikit/TableDoc.vue
index 372fa66..e585b3f 100644
--- a/src/views/uikit/TableDoc.vue
+++ b/src/views/uikit/TableDoc.vue
@@ -194,9 +194,6 @@ const calculateCustomerTotal = (name) => {
                 <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 }">