diff --git a/src/components/dashboard/BestSellingWidget.vue b/src/components/dashboard/BestSellingWidget.vue
index 682dded..0bfd48e 100644
--- a/src/components/dashboard/BestSellingWidget.vue
+++ b/src/components/dashboard/BestSellingWidget.vue
@@ -15,7 +15,7 @@ const items = ref([
             <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.menu.toggle($event)"></Button>
-                <Menu ref="menu" popup :model="items" class="!min-w-40"></Menu>
+                <Menu ref="menu" popup :model="items" class="min-w-40!"></Menu>
             </div>
         </div>
         <ul class="list-none p-0 m-0">
diff --git a/src/components/dashboard/NotificationsWidget.vue b/src/components/dashboard/NotificationsWidget.vue
index 37acdab..ef0be02 100644
--- a/src/components/dashboard/NotificationsWidget.vue
+++ b/src/components/dashboard/NotificationsWidget.vue
@@ -15,7 +15,7 @@ const items = ref([
             <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.menu.toggle($event)"></Button>
-                <Menu ref="menu" popup :model="items" class="!min-w-40"></Menu>
+                <Menu ref="menu" popup :model="items" class="min-w-40!"></Menu>
             </div>
         </div>
 
@@ -23,7 +23,7 @@ const items = ref([
         <ul class="p-0 mx-0 mt-0 mb-6 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-blue-100 dark:bg-blue-400/10 rounded-full mr-4 shrink-0">
-                    <i class="pi pi-dollar !text-xl text-blue-500"></i>
+                    <i class="pi pi-dollar text-xl! text-blue-500"></i>
                 </div>
                 <span class="text-surface-900 dark:text-surface-0 leading-normal"
                     >Richard Jones
@@ -32,7 +32,7 @@ const items = ref([
             </li>
             <li class="flex items-center py-2">
                 <div class="w-12 h-12 flex items-center justify-center bg-orange-100 dark:bg-orange-400/10 rounded-full mr-4 shrink-0">
-                    <i class="pi pi-download !text-xl text-orange-500"></i>
+                    <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-primary font-bold">$2500.00</span> has been initiated.</span>
             </li>
@@ -42,7 +42,7 @@ const items = ref([
         <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 dark:bg-blue-400/10 rounded-full mr-4 shrink-0">
-                    <i class="pi pi-dollar !text-xl text-blue-500"></i>
+                    <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
@@ -51,7 +51,7 @@ const items = ref([
             </li>
             <li class="flex items-center py-2 border-b border-surface">
                 <div class="w-12 h-12 flex items-center justify-center bg-pink-100 dark:bg-pink-400/10 rounded-full mr-4 shrink-0">
-                    <i class="pi pi-question !text-xl text-pink-500"></i>
+                    <i class="pi pi-question text-xl! text-pink-500"></i>
                 </div>
                 <span class="text-surface-900 dark:text-surface-0 leading-normal"
                     >Jane Davis
@@ -63,13 +63,13 @@ const items = ref([
         <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 dark:bg-green-400/10 rounded-full mr-4 shrink-0">
-                    <i class="pi pi-arrow-up !text-xl text-green-500"></i>
+                    <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 dark:bg-purple-400/10 rounded-full mr-4 shrink-0">
-                    <i class="pi pi-heart !text-xl text-purple-500"></i>
+                    <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>
diff --git a/src/components/dashboard/StatsWidget.vue b/src/components/dashboard/StatsWidget.vue
index 3d49e7a..c901af1 100644
--- a/src/components/dashboard/StatsWidget.vue
+++ b/src/components/dashboard/StatsWidget.vue
@@ -7,7 +7,7 @@
                     <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152</div>
                 </div>
                 <div class="flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
-                    <i class="pi pi-shopping-cart text-blue-500 !text-xl"></i>
+                    <i class="pi pi-shopping-cart text-blue-500 text-xl!"></i>
                 </div>
             </div>
             <span class="text-primary font-medium">24 new </span>
@@ -22,7 +22,7 @@
                     <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 dark:bg-orange-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
-                    <i class="pi pi-dollar 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>
@@ -37,7 +37,7 @@
                     <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 dark:bg-cyan-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
-                    <i class="pi pi-users 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>
@@ -52,7 +52,7 @@
                     <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">152 Unread</div>
                 </div>
                 <div class="flex items-center justify-center bg-purple-100 dark:bg-purple-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">
-                    <i class="pi pi-comment text-purple-500 !text-xl"></i>
+                    <i class="pi pi-comment text-purple-500 text-xl!"></i>
                 </div>
             </div>
             <span class="text-primary font-medium">85 </span>
diff --git a/src/components/landing/FeaturesWidget.vue b/src/components/landing/FeaturesWidget.vue
index c5349da..6352155 100644
--- a/src/components/landing/FeaturesWidget.vue
+++ b/src/components/landing/FeaturesWidget.vue
@@ -10,7 +10,7 @@
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-yellow-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-users !text-2xl text-yellow-700"></i>
+                            <i class="pi pi-fw pi-users text-2xl! text-yellow-700"></i>
                         </div>
                         <h5 class="mb-2 text-surface-900 dark:text-surface-0">Easy to Use</h5>
                         <span class="text-surface-600 dark:text-surface-200">Posuere morbi leo urna molestie.</span>
@@ -22,7 +22,7 @@
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-cyan-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-palette !text-2xl text-cyan-700"></i>
+                            <i class="pi pi-fw pi-palette text-2xl! text-cyan-700"></i>
                         </div>
                         <h5 class="mb-2 text-surface-900 dark:text-surface-0">Fresh Design</h5>
                         <span class="text-surface-600 dark:text-surface-200">Semper risus in hendrerit.</span>
@@ -34,7 +34,7 @@
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-indigo-200" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-map !text-2xl text-indigo-700"></i>
+                            <i class="pi pi-fw pi-map text-2xl! text-indigo-700"></i>
                         </div>
                         <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Well Documented</div>
                         <span class="text-surface-600 dark:text-surface-200">Non arcu risus quis varius quam quisque.</span>
@@ -46,7 +46,7 @@
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-slate-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-id-card !text-2xl text-slate-700"></i>
+                            <i class="pi pi-fw pi-id-card text-2xl! text-slate-700"></i>
                         </div>
                         <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Responsive Layout</div>
                         <span class="text-surface-600 dark:text-surface-200">Nulla malesuada pellentesque elit.</span>
@@ -58,7 +58,7 @@
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-orange-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-star !text-2xl text-orange-700"></i>
+                            <i class="pi pi-fw pi-star text-2xl! text-orange-700"></i>
                         </div>
                         <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Clean Code</div>
                         <span class="text-surface-600 dark:text-surface-200">Condimentum lacinia quis vel eros.</span>
@@ -70,7 +70,7 @@
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-pink-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-moon !text-2xl text-pink-700"></i>
+                            <i class="pi pi-fw pi-moon text-2xl! text-pink-700"></i>
                         </div>
                         <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Dark Mode</div>
                         <span class="text-surface-600 dark:text-surface-200">Convallis tellus id interdum velit laoreet.</span>
@@ -82,7 +82,7 @@
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-teal-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-shopping-cart !text-2xl text-teal-700"></i>
+                            <i class="pi pi-fw pi-shopping-cart text-2xl! text-teal-700"></i>
                         </div>
                         <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Ready to Use</div>
                         <span class="text-surface-600 dark:text-surface-200">Mauris sit amet massa vitae.</span>
@@ -94,7 +94,7 @@
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-blue-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-globe !text-2xl text-blue-700"></i>
+                            <i class="pi pi-fw pi-globe text-2xl! text-blue-700"></i>
                         </div>
                         <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Modern Practices</div>
                         <span class="text-surface-600 dark:text-surface-200">Elementum nibh tellus molestie nunc non.</span>
@@ -106,7 +106,7 @@
                 <div style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))">
                     <div class="p-4 bg-surface-0 dark:bg-surface-900 h-full" style="border-radius: 8px">
                         <div class="flex items-center justify-center bg-purple-200 mb-4" style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-eye !text-2xl text-purple-700"></i>
+                            <i class="pi pi-fw pi-eye text-2xl! text-purple-700"></i>
                         </div>
                         <div class="mt-6 mb-1 text-surface-900 dark:text-surface-0 text-xl font-semibold">Privacy</div>
                         <span class="text-surface-600 dark:text-surface-200">Neque egestas congue quisque.</span>
diff --git a/src/components/landing/HeroWidget.vue b/src/components/landing/HeroWidget.vue
index a850a03..fd74825 100644
--- a/src/components/landing/HeroWidget.vue
+++ b/src/components/landing/HeroWidget.vue
@@ -7,7 +7,7 @@
         <div class="mx-6 md:mx-20 mt-0 md:mt-6">
             <h1 class="text-6xl font-bold text-gray-900 leading-tight"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
             <p class="font-normal text-2xl leading-normal md:mt-4 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
-            <Button label="Get Started" as="router-link" to="/" rounded class="!text-xl mt-8 !px-4"></Button>
+            <Button label="Get Started" as="router-link" to="/" rounded class="text-xl! mt-8 px-4!"></Button>
         </div>
         <div class="flex justify-center md:justify-end">
             <img src="/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9/12 md:w-auto" />
diff --git a/src/components/landing/HighlightsWidget.vue b/src/components/landing/HighlightsWidget.vue
index abe0735..9ab0f13 100644
--- a/src/components/landing/HighlightsWidget.vue
+++ b/src/components/landing/HighlightsWidget.vue
@@ -12,7 +12,7 @@
 
             <div class="col-span-12 lg:col-span-6 my-auto flex flex-col lg:items-end text-center lg:text-right gap-4">
                 <div class="flex items-center justify-center bg-purple-200 self-center lg:self-end" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
-                    <i class="pi pi-fw pi-mobile !text-4xl text-purple-700"></i>
+                    <i class="pi pi-fw pi-mobile text-4xl! text-purple-700"></i>
                 </div>
                 <div class="leading-none text-surface-900 dark:text-surface-0 text-3xl font-normal">Congue Quisque Egestas</div>
                 <span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal ml-0 md:ml-2" style="max-width: 650px"
@@ -24,7 +24,7 @@
         <div class="grid grid-cols-12 gap-4 my-20 pt-2 md:pt-20">
             <div class="col-span-12 lg:col-span-6 my-auto flex flex-col text-center lg:text-left lg:items-start gap-4">
                 <div class="flex items-center justify-center bg-yellow-200 self-center lg:self-start" style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
-                    <i class="pi pi-fw pi-desktop !text-3xl text-yellow-700"></i>
+                    <i class="pi pi-fw pi-desktop text-3xl! text-yellow-700"></i>
                 </div>
                 <div class="leading-none text-surface-900 dark:text-surface-0 text-3xl font-normal">Celerisque Eu Ultrices</div>
                 <span class="text-surface-700 dark:text-surface-100 text-2xl leading-normal mr-0 md:mr-2" style="max-width: 650px"
diff --git a/src/components/landing/TopbarWidget.vue b/src/components/landing/TopbarWidget.vue
index 5c78976..09ed986 100644
--- a/src/components/landing/TopbarWidget.vue
+++ b/src/components/landing/TopbarWidget.vue
@@ -33,13 +33,13 @@ function smoothScroll(id) {
         <span class="text-surface-900 dark:text-surface-0 font-medium text-2xl leading-normal mr-20">SAKAI</span>
     </a>
     <Button
-        class="lg:!hidden"
+        class="lg:hidden!"
         text
         severity="secondary"
         rounded
         v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
     >
-        <i class="pi pi-bars !text-2xl"></i>
+        <i class="pi pi-bars text-2xl!"></i>
     </Button>
     <div class="items-center bg-surface-0 dark:bg-surface-900 grow justify-between hidden lg:flex absolute lg:static w-full left-0 top-full px-12 lg:px-0 z-20 rounded-border">
         <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row cursor-pointer gap-8">
diff --git a/src/views/pages/Crud.vue b/src/views/pages/Crud.vue
index 123869b..772e6af 100644
--- a/src/views/pages/Crud.vue
+++ b/src/views/pages/Crud.vue
@@ -264,7 +264,7 @@ function getStatusLabel(status) {
 
         <Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
             <div class="flex items-center gap-4">
-                <i class="pi pi-exclamation-triangle !text-3xl" />
+                <i class="pi pi-exclamation-triangle text-3xl!" />
                 <span v-if="product"
                     >Are you sure you want to delete <b>{{ product.name }}</b
                     >?</span
@@ -278,7 +278,7 @@ function getStatusLabel(status) {
 
         <Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
             <div class="flex items-center gap-4">
-                <i class="pi pi-exclamation-triangle !text-3xl" />
+                <i class="pi pi-exclamation-triangle text-3xl!" />
                 <span v-if="product">Are you sure you want to delete the selected products?</span>
             </div>
             <template #footer>
diff --git a/src/views/pages/Documentation.vue b/src/views/pages/Documentation.vue
index 2172cf1..8c2930f 100644
--- a/src/views/pages/Documentation.vue
+++ b/src/views/pages/Documentation.vue
@@ -120,11 +120,11 @@ import AppLayout from './AppLayout.vue';
 
         <p class="text-lg mb-4">As a final step, copy the following folders:</p>
         <ul class="leading-normal list-disc pl-8 text-lg mb-4">
-            <li><span class="text-primary font-medium">public/demo</span> <i class="pi pi-arrow-right !text-sm mr-1"></i> <span class="text-primary font-medium">public</span></li>
-            <li><span class="text-primary font-medium">src/components</span> <i class="pi pi-arrow-right !text-sm mr-1"></i> <span class="text-primary font-medium">components</span></li>
-            <li><span class="text-primary font-medium">src/service</span> <i class="pi pi-arrow-right !text-sm mr-1"></i> <span class="text-primary font-medium">service</span></li>
-            <li><span class="text-primary font-medium">src/views/uikit</span> <i class="pi pi-arrow-right !text-sm mr-1"></i> <span class="text-primary font-medium">pages/uikit</span></li>
-            <li><span class="text-primary font-medium">src/views/pages</span> <i class="pi pi-arrow-right !text-sm mr-1"></i> <span class="text-primary font-medium">pages</span></li>
+            <li><span class="text-primary font-medium">public/demo</span> <i class="pi pi-arrow-right text-sm! mr-1"></i> <span class="text-primary font-medium">public</span></li>
+            <li><span class="text-primary font-medium">src/components</span> <i class="pi pi-arrow-right text-sm! mr-1"></i> <span class="text-primary font-medium">components</span></li>
+            <li><span class="text-primary font-medium">src/service</span> <i class="pi pi-arrow-right text-sm! mr-1"></i> <span class="text-primary font-medium">service</span></li>
+            <li><span class="text-primary font-medium">src/views/uikit</span> <i class="pi pi-arrow-right text-sm! mr-1"></i> <span class="text-primary font-medium">pages/uikit</span></li>
+            <li><span class="text-primary font-medium">src/views/pages</span> <i class="pi pi-arrow-right text-sm! mr-1"></i> <span class="text-primary font-medium">pages</span></li>
         </ul>
     </div>
 </template>
diff --git a/src/views/pages/NotFound.vue b/src/views/pages/NotFound.vue
index 891a223..f7f7650 100644
--- a/src/views/pages/NotFound.vue
+++ b/src/views/pages/NotFound.vue
@@ -30,7 +30,7 @@ import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
                     <div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
                     <router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
                         <span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
-                            <i class="pi pi-fw pi-table !text-2xl"></i>
+                            <i class="pi pi-fw pi-table text-2xl!"></i>
                         </span>
                         <span class="ml-6 flex flex-col">
                             <span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0 block">Frequently Asked Questions</span>
@@ -39,7 +39,7 @@ import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
                     </router-link>
                     <router-link to="/" class="w-full flex items-center py-8 border-surface-300 dark:border-surface-500 border-b">
                         <span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
-                            <i class="pi pi-fw pi-question-circle !text-2xl"></i>
+                            <i class="pi pi-fw pi-question-circle text-2xl!"></i>
                         </span>
                         <span class="ml-6 flex flex-col">
                             <span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Solution Center</span>
@@ -48,7 +48,7 @@ import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
                     </router-link>
                     <router-link to="/" class="w-full flex items-center mb-8 py-8 border-surface-300 dark:border-surface-500 border-b">
                         <span class="flex justify-center items-center border-2 border-primary text-primary rounded-border" style="height: 3.5rem; width: 3.5rem">
-                            <i class="pi pi-fw pi-unlock !text-2xl"></i>
+                            <i class="pi pi-fw pi-unlock text-2xl!"></i>
                         </span>
                         <span class="ml-6 flex flex-col">
                             <span class="text-surface-900 dark:text-surface-0 lg:text-xl font-medium mb-0">Permission Manager</span>
diff --git a/src/views/pages/auth/Access.vue b/src/views/pages/auth/Access.vue
index 0c13448..914557a 100644
--- a/src/views/pages/auth/Access.vue
+++ b/src/views/pages/auth/Access.vue
@@ -10,7 +10,7 @@ import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
                 <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
                     <div class="gap-4 flex flex-col items-center">
                         <div class="flex justify-center items-center border-2 border-orange-500 rounded-full" style="width: 3.2rem; height: 3.2rem">
-                            <i class="text-orange-500 pi pi-fw pi-lock !text-2xl"></i>
+                            <i class="text-orange-500 pi pi-fw pi-lock text-2xl!"></i>
                         </div>
                         <h1 class="text-surface-900 dark:text-surface-0 font-bold text-4xl lg:text-5xl mb-2">Access Denied</h1>
                         <span class="text-muted-color mb-8">You do not have the necessary permisions. Please contact admins.</span>
diff --git a/src/views/pages/auth/Error.vue b/src/views/pages/auth/Error.vue
index 43857a0..cf0e496 100644
--- a/src/views/pages/auth/Error.vue
+++ b/src/views/pages/auth/Error.vue
@@ -10,7 +10,7 @@ import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
                 <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center" style="border-radius: 53px">
                     <div class="gap-4 flex flex-col items-center">
                         <div class="flex justify-center items-center border-2 border-pink-500 rounded-full" style="height: 3.2rem; width: 3.2rem">
-                            <i class="pi pi-fw pi-exclamation-circle !text-2xl text-pink-500"></i>
+                            <i class="pi pi-fw pi-exclamation-circle text-2xl! text-pink-500"></i>
                         </div>
                         <h1 class="text-surface-900 dark:text-surface-0 font-bold text-5xl mb-2">Error Occured</h1>
                         <span class="text-muted-color mb-8">Requested resource is not available.</span>
diff --git a/src/views/uikit/ListDoc.vue b/src/views/uikit/ListDoc.vue
index c534935..3f9f261 100644
--- a/src/views/uikit/ListDoc.vue
+++ b/src/views/uikit/ListDoc.vue
@@ -54,7 +54,7 @@ function getSeverity(product) {
                             <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface': 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>
+                                    <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">
@@ -97,7 +97,7 @@ function getSeverity(product) {
                                 <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>
+                                        <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">
diff --git a/src/views/uikit/PanelsDoc.vue b/src/views/uikit/PanelsDoc.vue
index b6559e3..22f1b05 100644
--- a/src/views/uikit/PanelsDoc.vue
+++ b/src/views/uikit/PanelsDoc.vue
@@ -185,8 +185,8 @@ function toggle() {
                     </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>
+                    <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>