diff --git a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
index a06d1bcb..cfb3b2e6 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
@@ -74,9 +74,10 @@
                 w-8
                 h-8
                 ml-2
-                text-sm text-black
-                bg-white
-                rounded
+                text-sm text-white
+                bg-white/20
+                rounded-lg
+                hover:bg-white/30
                 md:h-9 md:w-9
               "
             >
@@ -143,7 +144,7 @@
           <template #activator>
             <img
               :src="previewAvatar"
-              class="block w-8 h-8 rounded md:h-9 md:w-9 object-cover"
+              class="block w-8 h-8 rounded-full ring-2 ring-white/30 md:h-9 md:w-9 object-cover"
             />
           </template>
 
diff --git a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
index ecb64c3e..18bd7507 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
@@ -78,7 +78,7 @@
             >
               <div
                 v-if="menu[0] && menu[0].group_label"
-                class="px-4 pt-4 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider border-t border-gray-200"
+                class="px-4 mt-6 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider"
               >
                 {{ $t(menu[0].group_label) }}
               </div>
@@ -88,9 +88,9 @@
                 :to="item.link"
                 :class="[
                   hasActiveUrl(item.link)
-                    ? 'text-primary-500 border-l-primary-500 bg-gray-100 '
-                    : 'text-black border-l-transparent',
-                  'cursor-pointer px-0 pl-4 py-3 flex items-center border-l-4 border-solid text-sm not-italic font-medium',
+                    ? 'text-primary-600 bg-primary-50 font-semibold'
+                    : 'text-gray-600 hover:bg-gray-50',
+                  'cursor-pointer mx-3 px-3 py-2.5 flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
                 ]"
                 @click="globalStore.setSidebarVisibility(false)"
               >
@@ -98,9 +98,9 @@
                   :name="item.icon"
                   :class="[
                     hasActiveUrl(item.link)
-                      ? 'text-primary-500 '
+                      ? 'text-primary-500'
                       : 'text-gray-400',
-                    'mr-4 shrink-0 h-5 w-5',
+                    'mr-3 shrink-0 h-5 w-5',
                   ]"
                   @click="globalStore.setSidebarVisibility(false)"
                 />
@@ -138,7 +138,7 @@
     >
       <div
         v-if="menu[0] && menu[0].group_label"
-        class="px-6 pt-4 pb-1 text-xs font-semibold text-gray-400 uppercase tracking-wider border-t border-gray-200"
+        class="px-6 mt-6 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider"
       >
         {{ $t(menu[0].group_label) }}
       </div>
@@ -148,18 +148,18 @@
         :to="item.link"
         :class="[
           hasActiveUrl(item.link)
-            ? 'text-primary-500 border-l-primary-500 bg-gray-100 '
-            : 'text-black border-l-transparent',
-          'cursor-pointer px-0 pl-6 hover:bg-gray-50 py-3 group flex items-center border-l-4 border-solid text-sm not-italic font-medium',
+            ? 'text-primary-600 bg-primary-50 font-semibold'
+            : 'text-gray-600 hover:bg-gray-50',
+          'cursor-pointer mx-3 px-3 py-2.5 group flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
         ]"
       >
         <BaseIcon
           :name="item.icon"
           :class="[
             hasActiveUrl(item.link)
-              ? 'text-primary-500 group-hover:text-primary-500 '
-              : 'text-gray-400 group-hover:text-black',
-            'mr-4 shrink-0 h-5 w-5 ',
+              ? 'text-primary-500'
+              : 'text-gray-400 group-hover:text-gray-600',
+            'mr-3 shrink-0 h-5 w-5',
           ]"
         />
 
diff --git a/resources/scripts/admin/views/dashboard/DashboardChart.vue b/resources/scripts/admin/views/dashboard/DashboardChart.vue
index 3d972c72..9867a82b 100644
--- a/resources/scripts/admin/views/dashboard/DashboardChart.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardChart.vue
@@ -2,7 +2,7 @@
   <div>
     <div
       v-if="dashboardStore.isDashboardDataLoaded"
-      class="grid grid-cols-10 mt-8 bg-white rounded shadow"
+      class="grid grid-cols-10 mt-8 bg-white rounded-xl shadow-sm border border-gray-100"
     >
       <!-- Chart -->
       <div
diff --git a/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue b/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue
index 5a79bde6..04d10b7d 100644
--- a/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue
@@ -5,22 +5,24 @@
       relative
       flex
       justify-between
-      p-3
+      p-5
       bg-white
-      rounded
-      shadow
-      hover:bg-gray-50
-      xl:p-4
+      rounded-xl
+      shadow-sm
+      border border-gray-100
+      hover:shadow-md
+      transition-shadow
+      xl:p-6
       lg:col-span-2
     "
     :class="{ 'lg:!col-span-3': large }"
     :to="route"
   >
     <div>
-      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
+      <span class="text-2xl font-bold leading-tight text-gray-900 xl:text-3xl">
         <slot />
       </span>
-      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
+      <span class="block mt-1 text-sm font-medium leading-tight text-gray-500 xl:text-base">
         {{ label }}
       </span>
     </div>
diff --git a/resources/scripts/admin/views/dashboard/DashboardTable.vue b/resources/scripts/admin/views/dashboard/DashboardTable.vue
index 136526a7..f1d0c1ec 100644
--- a/resources/scripts/admin/views/dashboard/DashboardTable.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardTable.vue
@@ -7,7 +7,7 @@
         class="due-invoices"
       >
         <div class="relative z-10 flex items-center justify-between mb-3">
-          <h6 class="mb-0 text-xl font-semibold leading-normal">
+          <h6 class="mb-0 text-lg font-semibold leading-normal text-gray-900">
             {{ $t('dashboard.recent_invoices_card.title') }}
           </h6>
 
@@ -57,7 +57,7 @@
         class="recent-estimates"
       >
         <div class="relative z-10 flex items-center justify-between mb-3">
-          <h6 class="mb-0 text-xl font-semibold leading-normal">
+          <h6 class="mb-0 text-lg font-semibold leading-normal text-gray-900">
             {{ $t('dashboard.recent_estimate_card.title') }}
           </h6>
 
diff --git a/resources/scripts/components/CompanySwitcher.vue b/resources/scripts/components/CompanySwitcher.vue
index adfc8c61..9c0b1ce0 100644
--- a/resources/scripts/components/CompanySwitcher.vue
+++ b/resources/scripts/components/CompanySwitcher.vue
@@ -13,8 +13,10 @@
         ml-2
         text-sm text-white
         bg-white/20
-        rounded
+        rounded-lg
         cursor-pointer
+        hover:bg-white/30
+        transition-colors
       "
       @click="isShow = !isShow"
     >
diff --git a/resources/scripts/components/base/BaseCard.vue b/resources/scripts/components/base/BaseCard.vue
index 1a1b7a29..c4ef52d3 100644
--- a/resources/scripts/components/base/BaseCard.vue
+++ b/resources/scripts/components/base/BaseCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white rounded-lg shadow">
+  <div class="bg-white rounded-xl shadow-sm border border-gray-100">
     <div
       v-if="hasHeaderSlot"
       class="px-5 py-4 text-black border-b border-gray-100 border-solid"
diff --git a/resources/scripts/components/base/BaseGlobalLoader.vue b/resources/scripts/components/base/BaseGlobalLoader.vue
index 723564cd..a777ab6c 100644
--- a/resources/scripts/components/base/BaseGlobalLoader.vue
+++ b/resources/scripts/components/base/BaseGlobalLoader.vue
@@ -1,54 +1,13 @@
 <template>
   <div class="flex flex-col items-center justify-center h-screen">
-    <div class="loader loader-white">
-      <div class="loader-spined">
-        <div class="loader--icon">
-          <svg
-            class="offset-45deg text-primary-500"
-            width="27"
-            height="27"
-            viewBox="0 0 27 27"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M25.9053 1.75122C25.8037 1.44653 25.5498 1.19263 25.2451 1.09106C23.6201 0.735596 22.3506 0.735596 21.0811 0.735596C15.8506 0.735596 12.7021 3.57935 10.3662 7.2356L5.03418 7.2356C4.22168 7.28638 3.25684 7.84497 2.85059 8.60669L0.362305 13.634C0.311523 13.7864 0.260742 13.9895 0.260742 14.1418C0.260742 14.8528 0.768555 15.3606 1.47949 15.3606H6.70996L5.59277 16.5286C4.9834 17.0872 4.93262 18.1536 5.59277 18.8137L8.18262 21.4036C8.74121 21.9622 9.80762 22.0637 10.4678 21.4036L11.585 20.2864V25.5168C11.6357 26.2278 12.1436 26.7356 12.8545 26.7356C13.0068 26.7356 13.21 26.6848 13.3623 26.634L18.3896 24.1458C19.1514 23.7395 19.71 22.7747 19.71 21.9622V16.6301C23.417 14.2942 26.21 11.1458 26.21 5.91528C26.2607 4.64575 26.2607 3.37622 25.9053 1.75122ZM19.7607 9.26685C18.5928 9.26685 17.7295 8.40356 17.7295 7.2356C17.7295 6.11841 18.5928 5.20435 19.7607 5.20435C20.8779 5.20435 21.792 6.11841 21.792 7.2356C21.792 8.40356 20.8779 9.26685 19.7607 9.26685Z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
-      </div>
-
-      <div class="pufs text-primary-500">
-        <i class="text-primary-500"></i><i></i><i></i> <i></i><i></i><i></i>
-        <i></i><i></i><i></i> <i></i><i></i><i></i> <i></i><i></i><i></i> <i></i
-        ><i></i><i></i> <i></i><i></i><i></i> <i></i><i></i><i></i> <i></i
-        ><i></i><i></i> <i></i><i></i><i></i> <i></i><i></i><i></i> <i></i
-        ><i></i><i></i> <i></i><i></i><i></i> <i></i><i></i><i></i> <i></i
-        ><i></i><i></i>
-      </div>
-      <div class="particles text-primary-500">
-        <i></i><i></i><i></i> <i></i><i></i><i></i> <i></i><i></i><i></i> <i></i
-        ><i></i><i></i> <i></i><i></i><i></i> <i></i><i></i><i></i> <i></i
-        ><i></i><i></i> <i></i><i></i><i></i> <i></i><i></i><i></i> <i></i
-        ><i></i><i></i> <i></i><i></i><i></i> <i></i><i></i><i></i> <i></i
-        ><i></i><i></i> <i></i><i></i><i></i> <i></i><i></i><i></i>
-      </div>
-      <MainLogo
-        class="
-          absolute
-          block
-          h-auto
-          max-w-full
-          transform
-          -translate-x-1/2 -translate-y-1/2
-          w-28
-          text-primary-400
-          top-1/2
-          left-1/2
-        "
-        alt="InvoiceShelf Logo"
-      />
+    <MainLogo
+      class="w-28 h-auto text-primary-400 mb-6"
+      alt="InvoiceShelf Logo"
+    />
+    <div class="flex space-x-1.5">
+      <span class="loader-dot" />
+      <span class="loader-dot delay-150" />
+      <span class="loader-dot delay-300" />
     </div>
   </div>
 </template>
@@ -62,1066 +21,33 @@ const props = defineProps({
     type: Boolean,
   },
 })
-
 </script>
 
 <style>
-/*-------------------------------------------------------------------------------*/
-/*--  Rocket Loader Inspired By David (https://codepen.io/dlepaux/pen/pZmVoP)  --*/
-/*-------------------------------------------------------------------------------*/
-
-.offset-45deg {
-  transform: rotate(45deg);
+.loader-dot {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
+  background-color: oklch(0.585 0.233 277.117);
+  animation: loader-bounce 1.4s infinite ease-in-out both;
 }
 
-.loader {
-  width: 240px;
-  height: 240px;
-  position: relative;
-  display: block;
-  margin: 0 auto;
-  transition: all 2s ease-out;
-  transform: scale(1);
-}
-.loader:hover {
-  transition: all 1s ease-in;
-  transform: scale(1.5);
+.loader-dot.delay-150 {
+  animation-delay: 0.15s;
 }
 
-.loader-white .loader--icon {
-  color: white;
-}
-.loader-white .pufs > i:after {
-  animation-name: puf-white;
+.loader-dot.delay-300 {
+  animation-delay: 0.3s;
 }
 
-.loader-spined {
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
-  position: absolute;
-  display: block;
-  animation: orbit 3s linear infinite;
-}
-
-@-webkit-keyframes orbit {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@-moz-keyframes orbit {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@-ms-keyframes orbit {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes orbit {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.loader--icon {
-  text-align: center;
-  width: 25px;
-  height: 25px;
-  line-height: 25px;
-  margin: 0 auto;
-  font-size: 26px;
-  color: #0a2639;
-}
-
-.pufs {
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  display: block;
-  position: absolute;
-}
-.pufs > i {
-  display: block;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  position: absolute;
-}
-.pufs > i:after {
-  content: url('data:image/svg+xml; utf8, <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.6875 0.6875C1.75403 0.6875 0.1875 2.25403 0.1875 4.1875C0.1875 6.12097 1.75403 7.6875 3.6875 7.6875C5.62097 7.6875 7.1875 6.12097 7.1875 4.1875C7.1875 2.25403 5.62097 0.6875 3.6875 0.6875Z" fill="%239EA9C4"/></svg>');
-  height: 7px;
-  width: 7px;
-  position: relative;
-  border-radius: 100%;
-  display: block;
-  margin: 0 auto;
-  top: 7px;
-  font-size: 9px;
-  opacity: 0;
-  animation-name: puf;
-  animation-iteration-count: infinite;
-  animation-timing-function: ease-out;
-  animation-duration: 3s;
-}
-.pufs > i:nth-child(1) {
-  transform: rotate(8deg);
-}
-.pufs > i:nth-child(1):after {
-  animation-delay: 0.0666666667s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(2) {
-  transform: rotate(16deg);
-}
-.pufs > i:nth-child(2):after {
-  animation-delay: 0.1333333333s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(3) {
-  transform: rotate(24deg);
-}
-.pufs > i:nth-child(3):after {
-  animation-delay: 0.2s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(4) {
-  transform: rotate(32deg);
-}
-.pufs > i:nth-child(4):after {
-  animation-delay: 0.2666666667s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(5) {
-  transform: rotate(40deg);
-}
-.pufs > i:nth-child(5):after {
-  animation-delay: 0.3333333333s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(6) {
-  transform: rotate(48deg);
-}
-.pufs > i:nth-child(6):after {
-  animation-delay: 0.4s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(7) {
-  transform: rotate(56deg);
-}
-.pufs > i:nth-child(7):after {
-  animation-delay: 0.4666666667s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(8) {
-  transform: rotate(64deg);
-}
-.pufs > i:nth-child(8):after {
-  animation-delay: 0.5333333333s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(9) {
-  transform: rotate(72deg);
-}
-.pufs > i:nth-child(9):after {
-  animation-delay: 0.6s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(10) {
-  transform: rotate(80deg);
-}
-.pufs > i:nth-child(10):after {
-  animation-delay: 0.6666666667s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(11) {
-  transform: rotate(88deg);
-}
-.pufs > i:nth-child(11):after {
-  animation-delay: 0.7333333333s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(12) {
-  transform: rotate(96deg);
-}
-.pufs > i:nth-child(12):after {
-  animation-delay: 0.8s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(13) {
-  transform: rotate(104deg);
-}
-.pufs > i:nth-child(13):after {
-  animation-delay: 0.8666666667s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(14) {
-  transform: rotate(112deg);
-}
-.pufs > i:nth-child(14):after {
-  animation-delay: 0.9333333333s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(15) {
-  transform: rotate(120deg);
-}
-.pufs > i:nth-child(15):after {
-  animation-delay: 1s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(16) {
-  transform: rotate(128deg);
-}
-.pufs > i:nth-child(16):after {
-  animation-delay: 1.0666666667s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(17) {
-  transform: rotate(136deg);
-}
-.pufs > i:nth-child(17):after {
-  animation-delay: 1.1333333333s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(18) {
-  transform: rotate(144deg);
-}
-.pufs > i:nth-child(18):after {
-  animation-delay: 1.2s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(19) {
-  transform: rotate(152deg);
-}
-.pufs > i:nth-child(19):after {
-  animation-delay: 1.2666666667s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(20) {
-  transform: rotate(160deg);
-}
-.pufs > i:nth-child(20):after {
-  animation-delay: 1.3333333333s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(21) {
-  transform: rotate(168deg);
-}
-.pufs > i:nth-child(21):after {
-  animation-delay: 1.4s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(22) {
-  transform: rotate(176deg);
-}
-.pufs > i:nth-child(22):after {
-  animation-delay: 1.4666666667s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(23) {
-  transform: rotate(184deg);
-}
-.pufs > i:nth-child(23):after {
-  animation-delay: 1.5333333333s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(24) {
-  transform: rotate(192deg);
-}
-.pufs > i:nth-child(24):after {
-  animation-delay: 1.6s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(25) {
-  transform: rotate(200deg);
-}
-.pufs > i:nth-child(25):after {
-  animation-delay: 1.6666666667s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(26) {
-  transform: rotate(208deg);
-}
-.pufs > i:nth-child(26):after {
-  animation-delay: 1.7333333333s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(27) {
-  transform: rotate(216deg);
-}
-.pufs > i:nth-child(27):after {
-  animation-delay: 1.8s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(28) {
-  transform: rotate(224deg);
-}
-.pufs > i:nth-child(28):after {
-  animation-delay: 1.8666666667s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(29) {
-  transform: rotate(232deg);
-}
-.pufs > i:nth-child(29):after {
-  animation-delay: 1.9333333333s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(30) {
-  transform: rotate(240deg);
-}
-.pufs > i:nth-child(30):after {
-  animation-delay: 2s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(31) {
-  transform: rotate(248deg);
-}
-.pufs > i:nth-child(31):after {
-  animation-delay: 2.0666666667s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(32) {
-  transform: rotate(256deg);
-}
-.pufs > i:nth-child(32):after {
-  animation-delay: 2.1333333333s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(33) {
-  transform: rotate(264deg);
-}
-.pufs > i:nth-child(33):after {
-  animation-delay: 2.2s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(34) {
-  transform: rotate(272deg);
-}
-.pufs > i:nth-child(34):after {
-  animation-delay: 2.2666666667s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(35) {
-  transform: rotate(280deg);
-}
-.pufs > i:nth-child(35):after {
-  animation-delay: 2.3333333333s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(36) {
-  transform: rotate(288deg);
-}
-.pufs > i:nth-child(36):after {
-  animation-delay: 2.4s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(37) {
-  transform: rotate(296deg);
-}
-.pufs > i:nth-child(37):after {
-  animation-delay: 2.4666666667s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(38) {
-  transform: rotate(304deg);
-}
-.pufs > i:nth-child(38):after {
-  animation-delay: 2.5333333333s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(39) {
-  transform: rotate(312deg);
-}
-.pufs > i:nth-child(39):after {
-  animation-delay: 2.6s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(40) {
-  transform: rotate(320deg);
-}
-.pufs > i:nth-child(40):after {
-  animation-delay: 2.6666666667s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(41) {
-  transform: rotate(328deg);
-}
-.pufs > i:nth-child(41):after {
-  animation-delay: 2.7333333333s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(42) {
-  transform: rotate(336deg);
-}
-.pufs > i:nth-child(42):after {
-  animation-delay: 2.8s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(43) {
-  transform: rotate(344deg);
-}
-.pufs > i:nth-child(43):after {
-  animation-delay: 2.8666666667s;
-  margin-top: -1px;
-}
-.pufs > i:nth-child(44) {
-  transform: rotate(352deg);
-}
-.pufs > i:nth-child(44):after {
-  animation-delay: 2.9333333333s;
-  margin-top: 1px;
-}
-.pufs > i:nth-child(45) {
-  transform: rotate(360deg);
-}
-.pufs > i:nth-child(45):after {
-  animation-delay: 3s;
-  margin-top: -1px;
-}
-
-.particles {
-  position: absolute;
-  display: block;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-}
-.particles > i {
-  display: block;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  position: absolute;
-}
-.particles > i:after {
-  content: url('data:image/svg+xml; utf8, <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.1875 0.6875C0.635081 0.6875 0.1875 1.13508 0.1875 1.6875C0.1875 2.23992 0.635081 2.6875 1.1875 2.6875C1.73992 2.6875 2.1875 2.23992 2.1875 1.6875C2.1875 1.13508 1.73992 0.6875 1.1875 0.6875Z" fill="%239EA9C4"/></svg>');
-  height: 7px;
-  width: 7px;
-  position: relative;
-  border-radius: 100%;
-  display: block;
-  margin: 0 auto;
-  top: 7px;
-  font-size: 2px;
-  opacity: 0;
-  margin-top: 0;
-  animation-iteration-count: infinite;
-  animation-timing-function: ease-out;
-  animation-duration: 3s;
-}
-.particles > i:nth-child(1) {
-  transform: rotate(8deg);
-}
-.particles > i:nth-child(1):after {
-  animation-delay: 0.0666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(2) {
-  transform: rotate(16deg);
-}
-.particles > i:nth-child(2):after {
-  animation-delay: 0.1333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(3) {
-  transform: rotate(24deg);
-}
-.particles > i:nth-child(3):after {
-  animation-delay: 0.2s;
-  animation-name: particle;
-}
-.particles > i:nth-child(4) {
-  transform: rotate(32deg);
-}
-.particles > i:nth-child(4):after {
-  animation-delay: 0.2666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(5) {
-  transform: rotate(40deg);
-}
-.particles > i:nth-child(5):after {
-  animation-delay: 0.3333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(6) {
-  transform: rotate(48deg);
-}
-.particles > i:nth-child(6):after {
-  animation-delay: 0.4s;
-  animation-name: particle;
-}
-.particles > i:nth-child(7) {
-  transform: rotate(56deg);
-}
-.particles > i:nth-child(7):after {
-  animation-delay: 0.4666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(8) {
-  transform: rotate(64deg);
-}
-.particles > i:nth-child(8):after {
-  animation-delay: 0.5333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(9) {
-  transform: rotate(72deg);
-}
-.particles > i:nth-child(9):after {
-  animation-delay: 0.6s;
-  animation-name: particle;
-}
-.particles > i:nth-child(10) {
-  transform: rotate(80deg);
-}
-.particles > i:nth-child(10):after {
-  animation-delay: 0.6666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(11) {
-  transform: rotate(88deg);
-}
-.particles > i:nth-child(11):after {
-  animation-delay: 0.7333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(12) {
-  transform: rotate(96deg);
-}
-.particles > i:nth-child(12):after {
-  animation-delay: 0.8s;
-  animation-name: particle;
-}
-.particles > i:nth-child(13) {
-  transform: rotate(104deg);
-}
-.particles > i:nth-child(13):after {
-  animation-delay: 0.8666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(14) {
-  transform: rotate(112deg);
-}
-.particles > i:nth-child(14):after {
-  animation-delay: 0.9333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(15) {
-  transform: rotate(120deg);
-}
-.particles > i:nth-child(15):after {
-  animation-delay: 1s;
-  animation-name: particle;
-}
-.particles > i:nth-child(16) {
-  transform: rotate(128deg);
-}
-.particles > i:nth-child(16):after {
-  animation-delay: 1.0666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(17) {
-  transform: rotate(136deg);
-}
-.particles > i:nth-child(17):after {
-  animation-delay: 1.1333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(18) {
-  transform: rotate(144deg);
-}
-.particles > i:nth-child(18):after {
-  animation-delay: 1.2s;
-  animation-name: particle;
-}
-.particles > i:nth-child(19) {
-  transform: rotate(152deg);
-}
-.particles > i:nth-child(19):after {
-  animation-delay: 1.2666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(20) {
-  transform: rotate(160deg);
-}
-.particles > i:nth-child(20):after {
-  animation-delay: 1.3333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(21) {
-  transform: rotate(168deg);
-}
-.particles > i:nth-child(21):after {
-  animation-delay: 1.4s;
-  animation-name: particle;
-}
-.particles > i:nth-child(22) {
-  transform: rotate(176deg);
-}
-.particles > i:nth-child(22):after {
-  animation-delay: 1.4666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(23) {
-  transform: rotate(184deg);
-}
-.particles > i:nth-child(23):after {
-  animation-delay: 1.5333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(24) {
-  transform: rotate(192deg);
-}
-.particles > i:nth-child(24):after {
-  animation-delay: 1.6s;
-  animation-name: particle;
-}
-.particles > i:nth-child(25) {
-  transform: rotate(200deg);
-}
-.particles > i:nth-child(25):after {
-  animation-delay: 1.6666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(26) {
-  transform: rotate(208deg);
-}
-.particles > i:nth-child(26):after {
-  animation-delay: 1.7333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(27) {
-  transform: rotate(216deg);
-}
-.particles > i:nth-child(27):after {
-  animation-delay: 1.8s;
-  animation-name: particle;
-}
-.particles > i:nth-child(28) {
-  transform: rotate(224deg);
-}
-.particles > i:nth-child(28):after {
-  animation-delay: 1.8666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(29) {
-  transform: rotate(232deg);
-}
-.particles > i:nth-child(29):after {
-  animation-delay: 1.9333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(30) {
-  transform: rotate(240deg);
-}
-.particles > i:nth-child(30):after {
-  animation-delay: 2s;
-  animation-name: particle;
-}
-.particles > i:nth-child(31) {
-  transform: rotate(248deg);
-}
-.particles > i:nth-child(31):after {
-  animation-delay: 2.0666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(32) {
-  transform: rotate(256deg);
-}
-.particles > i:nth-child(32):after {
-  animation-delay: 2.1333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(33) {
-  transform: rotate(264deg);
-}
-.particles > i:nth-child(33):after {
-  animation-delay: 2.2s;
-  animation-name: particle;
-}
-.particles > i:nth-child(34) {
-  transform: rotate(272deg);
-}
-.particles > i:nth-child(34):after {
-  animation-delay: 2.2666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(35) {
-  transform: rotate(280deg);
-}
-.particles > i:nth-child(35):after {
-  animation-delay: 2.3333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(36) {
-  transform: rotate(288deg);
-}
-.particles > i:nth-child(36):after {
-  animation-delay: 2.4s;
-  animation-name: particle;
-}
-.particles > i:nth-child(37) {
-  transform: rotate(296deg);
-}
-.particles > i:nth-child(37):after {
-  animation-delay: 2.4666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(38) {
-  transform: rotate(304deg);
-}
-.particles > i:nth-child(38):after {
-  animation-delay: 2.5333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(39) {
-  transform: rotate(312deg);
-}
-.particles > i:nth-child(39):after {
-  animation-delay: 2.6s;
-  animation-name: particle;
-}
-.particles > i:nth-child(40) {
-  transform: rotate(320deg);
-}
-.particles > i:nth-child(40):after {
-  animation-delay: 2.6666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(41) {
-  transform: rotate(328deg);
-}
-.particles > i:nth-child(41):after {
-  animation-delay: 2.7333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(42) {
-  transform: rotate(336deg);
-}
-.particles > i:nth-child(42):after {
-  animation-delay: 2.8s;
-  animation-name: particle;
-}
-.particles > i:nth-child(43) {
-  transform: rotate(344deg);
-}
-.particles > i:nth-child(43):after {
-  animation-delay: 2.8666666667s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(44) {
-  transform: rotate(352deg);
-}
-.particles > i:nth-child(44):after {
-  animation-delay: 2.9333333333s;
-  animation-name: particle-o;
-}
-.particles > i:nth-child(45) {
-  transform: rotate(360deg);
-}
-.particles > i:nth-child(45):after {
-  animation-delay: 3s;
-  animation-name: particle;
-}
-
-@-webkit-keyframes puf {
-  0% {
-    opacity: 1;
-    color: black;
-    transform: scale(1);
-  }
-  10% {
-    color: #3498db;
-    transform: scale(1.5);
-  }
-  60%,
-  100% {
-    opacity: 0;
-    color: grey;
+@keyframes loader-bounce {
+  0%, 80%, 100% {
     transform: scale(0.4);
+    opacity: 0.4;
   }
-}
-@-moz-keyframes puf {
-  0% {
-    opacity: 1;
-    color: black;
+  40% {
     transform: scale(1);
-  }
-  10% {
-    color: #3498db;
-    transform: scale(1.5);
-  }
-  60%,
-  100% {
-    opacity: 0;
-    color: grey;
-    transform: scale(0.4);
-  }
-}
-@-ms-keyframes puf {
-  0% {
     opacity: 1;
-    color: black;
-    transform: scale(1);
-  }
-  10% {
-    color: #3498db;
-    transform: scale(1.5);
-  }
-  60%,
-  100% {
-    opacity: 0;
-    color: grey;
-    transform: scale(0.4);
-  }
-}
-@keyframes puf {
-  0% {
-    opacity: 1;
-    color: black;
-    transform: scale(1);
-  }
-  10% {
-    color: #3498db;
-    transform: scale(1.5);
-  }
-  60%,
-  100% {
-    opacity: 0;
-    color: grey;
-    transform: scale(0.4);
-  }
-}
-@-webkit-keyframes puf-white {
-  0% {
-    opacity: 1;
-    color: rgba(0, 0, 0, 0.75);
-    transform: scale(1);
-  }
-  10% {
-    color: rgba(255, 255, 255, 0.9);
-    transform: scale(1.5);
-  }
-  60%,
-  100% {
-    opacity: 0;
-    color: rgba(0, 0, 0, 0.3);
-    transform: scale(0.4);
-  }
-}
-@-moz-keyframes puf-white {
-  0% {
-    opacity: 1;
-    color: rgba(0, 0, 0, 0.75);
-    transform: scale(1);
-  }
-  10% {
-    color: rgba(255, 255, 255, 0.9);
-    transform: scale(1.5);
-  }
-  60%,
-  100% {
-    opacity: 0;
-    color: rgba(0, 0, 0, 0.3);
-    transform: scale(0.4);
-  }
-}
-@-ms-keyframes puf-white {
-  0% {
-    opacity: 1;
-    color: rgba(0, 0, 0, 0.75);
-    transform: scale(1);
-  }
-  10% {
-    color: rgba(255, 255, 255, 0.9);
-    transform: scale(1.5);
-  }
-  60%,
-  100% {
-    opacity: 0;
-    color: rgba(0, 0, 0, 0.3);
-    transform: scale(0.4);
-  }
-}
-@keyframes puf-white {
-  0% {
-    opacity: 1;
-    color: rgba(0, 0, 0, 0.75);
-    transform: scale(1);
-  }
-  10% {
-    color: rgba(255, 255, 255, 0.9);
-    transform: scale(1.5);
-  }
-  60%,
-  100% {
-    opacity: 0;
-    color: rgba(0, 0, 0, 0.3);
-    transform: scale(0.4);
-  }
-}
-@-webkit-keyframes particle {
-  0% {
-    opacity: 1;
-    color: white;
-    margin-top: 0px;
-  }
-  10% {
-    margin-top: 15px;
-  }
-  75% {
-    opacity: 0.5;
-    margin-top: 5px;
-  }
-  100% {
-    opacity: 0;
-    margin-top: 0px;
-  }
-}
-@-moz-keyframes particle {
-  0% {
-    opacity: 1;
-    color: white;
-    margin-top: 0px;
-  }
-  10% {
-    margin-top: 15px;
-  }
-  75% {
-    opacity: 0.5;
-    margin-top: 5px;
-  }
-  100% {
-    opacity: 0;
-    margin-top: 0px;
-  }
-}
-@-ms-keyframes particle {
-  0% {
-    opacity: 1;
-    color: white;
-    margin-top: 0px;
-  }
-  10% {
-    margin-top: 15px;
-  }
-  75% {
-    opacity: 0.5;
-    margin-top: 5px;
-  }
-  100% {
-    opacity: 0;
-    margin-top: 0px;
-  }
-}
-@keyframes particle {
-  0% {
-    opacity: 1;
-    color: white;
-    margin-top: 0px;
-  }
-  10% {
-    margin-top: 15px;
-  }
-  75% {
-    opacity: 0.5;
-    margin-top: 5px;
-  }
-  100% {
-    opacity: 0;
-    margin-top: 0px;
-  }
-}
-@-webkit-keyframes particle-o {
-  0% {
-    opacity: 1;
-    color: white;
-    margin-top: 0px;
-  }
-  10% {
-    margin-top: -7px;
-  }
-  75% {
-    opacity: 0.5;
-    margin-top: 0px;
-  }
-  100% {
-    opacity: 0;
-    margin-top: 0px;
-  }
-}
-@-moz-keyframes particle-o {
-  0% {
-    opacity: 1;
-    color: white;
-    margin-top: 0px;
-  }
-  10% {
-    margin-top: -7px;
-  }
-  75% {
-    opacity: 0.5;
-    margin-top: 0px;
-  }
-  100% {
-    opacity: 0;
-    margin-top: 0px;
-  }
-}
-@-ms-keyframes particle-o {
-  0% {
-    opacity: 1;
-    color: white;
-    margin-top: 0px;
-  }
-  10% {
-    margin-top: -7px;
-  }
-  75% {
-    opacity: 0.5;
-    margin-top: 0px;
-  }
-  100% {
-    opacity: 0;
-    margin-top: 0px;
-  }
-}
-@keyframes particle-o {
-  0% {
-    opacity: 1;
-    color: white;
-    margin-top: 0px;
-  }
-  10% {
-    margin-top: -7px;
-  }
-  75% {
-    opacity: 0.5;
-    margin-top: 0px;
-  }
-  100% {
-    opacity: 0;
-    margin-top: 0px;
   }
 }
 </style>
diff --git a/resources/scripts/components/base/base-table/BaseTable.vue b/resources/scripts/components/base/base-table/BaseTable.vue
index 9d81854b..a6a67f47 100644
--- a/resources/scripts/components/base/base-table/BaseTable.vue
+++ b/resources/scripts/components/base/base-table/BaseTable.vue
@@ -7,9 +7,9 @@
             relative
             overflow-hidden
             bg-white
-            border-b border-gray-200
-            shadow
-            sm:rounded-lg
+            border border-gray-100
+            shadow-sm
+            rounded-xl
           "
         >
           <slot name="header" />
diff --git a/resources/scripts/components/base/base-table/BaseTablePagination.vue b/resources/scripts/components/base/base-table/BaseTablePagination.vue
index 736b4b76..0a7d4419 100644
--- a/resources/scripts/components/base/base-table/BaseTablePagination.vue
+++ b/resources/scripts/components/base/base-table/BaseTablePagination.vue
@@ -29,7 +29,7 @@
           font-medium
           text-gray-700
           bg-white
-          border border-gray-300
+          border border-gray-200
           rounded-md
           hover:bg-gray-50
         "
@@ -54,7 +54,7 @@
           font-medium
           text-gray-700
           bg-white
-          border border-gray-300
+          border border-gray-200
           rounded-md
           hover:bg-gray-50
         "
@@ -107,7 +107,7 @@
       </div>
       <div>
         <nav
-          class="relative z-0 inline-flex -space-x-px rounded-md shadow-xs"
+          class="relative z-0 inline-flex -space-x-px rounded-lg shadow-sm"
           aria-label="Pagination"
         >
           <a
@@ -126,8 +126,8 @@
               font-medium
               text-gray-500
               bg-white
-              border border-gray-300
-              rounded-l-md
+              border border-gray-200
+              rounded-l-lg
               hover:bg-gray-50
             "
             @click="pageClicked(pagination.currentPage - 1)"
@@ -140,9 +140,9 @@
             href="#"
             aria-current="page"
             :class="{
-              'z-10 bg-primary-50 border-primary-500 text-primary-600':
+              'z-10 bg-primary-500 border-primary-500 text-white':
                 isActive(1),
-              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
+              'bg-white border-gray-200 text-gray-500 hover:bg-gray-50':
                 !isActive(1),
             }"
             class="
@@ -172,7 +172,7 @@
               font-medium
               text-gray-700
               bg-white
-              border border-gray-300
+              border border-gray-200
             "
           >
             ...
@@ -182,9 +182,9 @@
             :key="page"
             href="#"
             :class="{
-              'z-10 bg-primary-50 border-primary-500 text-primary-600':
+              'z-10 bg-primary-500 border-primary-500 text-white':
                 isActive(page),
-              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
+              'bg-white border-gray-200 text-gray-500 hover:bg-gray-50':
                 !isActive(page),
               disabled: page === '...',
             }"
@@ -196,10 +196,7 @@
               py-2
               text-sm
               font-medium
-              text-gray-500
-              bg-white
-              border border-gray-300
-              hover:bg-gray-50
+              border
               md:inline-flex
             "
             @click="pageClicked(page)"
@@ -219,7 +216,7 @@
               font-medium
               text-gray-700
               bg-white
-              border border-gray-300
+              border border-gray-200
             "
           >
             ...
@@ -229,9 +226,9 @@
             href="#"
             aria-current="page"
             :class="{
-              'z-10 bg-primary-50 border-primary-500 text-primary-600':
+              'z-10 bg-primary-500 border-primary-500 text-white':
                 isActive(pagination.totalPages),
-              'bg-white border-gray-300 text-gray-500 hover:bg-gray-50':
+              'bg-white border-gray-200 text-gray-500 hover:bg-gray-50':
                 !isActive(pagination.totalPages),
             }"
             class="
@@ -260,8 +257,8 @@
               font-medium
               text-gray-500
               bg-white
-              border border-gray-300
-              rounded-r-md
+              border border-gray-200
+              rounded-r-lg
               hover:bg-gray-50
             "
             :class="{
diff --git a/resources/scripts/components/list/BaseListItem.vue b/resources/scripts/components/list/BaseListItem.vue
index 1d6360ec..dcd252d0 100644
--- a/resources/scripts/components/list/BaseListItem.vue
+++ b/resources/scripts/components/list/BaseListItem.vue
@@ -28,13 +28,13 @@ export default {
     },
   },
   setup(props, { slots }) {
-    const defaultClass = `cursor-pointer pb-2 pr-0 text-sm font-medium leading-5  flex items-center`
+    const defaultClass = `cursor-pointer px-3 py-2 mb-0.5 text-sm font-medium leading-5 flex items-center rounded-lg transition-colors`
     let hasIconSlot = computed(() => {
       return !!slots.icon
     })
     let containerClass = computed(() => {
-      if (props.active) return `${defaultClass} text-primary-500`
-      else return `${defaultClass} text-gray-500`
+      if (props.active) return `${defaultClass} text-primary-600 bg-primary-50 font-semibold`
+      else return `${defaultClass} text-gray-600 hover:bg-gray-50 hover:text-gray-900`
     })
     return {
       hasIconSlot,