diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss
index d1c33e4f7..20663e670 100644
--- a/assets/styles/layout/_core.scss
+++ b/assets/styles/layout/_core.scss
@@ -84,12 +84,8 @@ input[type="number"] {
 	border: none;
     cursor: pointer;
     user-select: none;
-}
 
-.px-link:focus-visible {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: var(--focus-ring);
+    @include focus-visible();
 }
 
 .px-link:disabled {
diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index a16524c78..e319638c2 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -1,15 +1,13 @@
 .doc-tabmenu {
     list-style: none;
     margin: 0 17rem 0 0;
-    padding: 0 0 1px 0;
+    padding: 0;
     display: flex;
     margin-bottom: 2rem;
     border-bottom: 1px solid var(--surface-border);
-    overflow: auto;
+    overflow: visible;
 
     li {
-        margin-bottom: -1px;
-
         button {
             background-color: transparent;
             border: 0 none;
@@ -21,6 +19,7 @@
             letter-spacing: 1px;
             cursor: pointer;
             margin: 0;
+            margin: 0 0 -1px 0;
             transition: all 0.2s;
             border-bottom: 1px solid transparent;
             border-top-right-radius: var(--border-round);
diff --git a/assets/styles/layout/_docsearch.scss b/assets/styles/layout/_docsearch.scss
index 0b6602e44..9ca5433fc 100644
--- a/assets/styles/layout/_docsearch.scss
+++ b/assets/styles/layout/_docsearch.scss
@@ -4,8 +4,9 @@
     height: 2rem;
     background-color: var(--surface-card);
     margin: 0;
-    transition: border-color .3s;
+    transition: all .3s;
     padding: 0 .5rem;
+    @include focus-visible();
 
     &:hover {
         border-color: var(--primary-color);
diff --git a/assets/styles/layout/_footer.scss b/assets/styles/layout/_footer.scss
index 5f3bb5b73..0eb285db1 100644
--- a/assets/styles/layout/_footer.scss
+++ b/assets/styles/layout/_footer.scss
@@ -12,9 +12,14 @@
     a {
         color: var(--primary-color);
         font-weight: 700;
+        transition: all .3s;
+        border-radius: var(--border-radius);
+
+        @include focus-visible();
 
         &:hover {
             text-decoration: underline;
         }
+        
     }
 }
\ No newline at end of file
diff --git a/assets/styles/layout/_mixins.scss b/assets/styles/layout/_mixins.scss
new file mode 100644
index 000000000..2c088ffad
--- /dev/null
+++ b/assets/styles/layout/_mixins.scss
@@ -0,0 +1,7 @@
+@mixin focus-visible($type:null) {
+    &:focus-visible {
+        outline: 0 none;
+        outline-offset: 0;
+        box-shadow: $type var(--focus-ring);
+    }
+}
\ No newline at end of file
diff --git a/assets/styles/layout/_responsive.scss b/assets/styles/layout/_responsive.scss
index 16513d5f3..e6c5fc1d8 100644
--- a/assets/styles/layout/_responsive.scss
+++ b/assets/styles/layout/_responsive.scss
@@ -148,7 +148,7 @@
         }
 
         .layout-topbar-icon {
-            display: block;
+            display: inline-flex;
         }
     }
 
diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss
index cb304fbc6..595991f81 100644
--- a/assets/styles/layout/_sidebar.scss
+++ b/assets/styles/layout/_sidebar.scss
@@ -39,6 +39,7 @@
                 color: var(--surface-900);
                 font-weight: 600;
                 transition: all .2s;
+                border-radius: var(--border-radius);
 
                 .menu-icon {
                     width: 2rem;
@@ -83,6 +84,8 @@
                         }
                     }
                 }
+
+                @include focus-visible(inset);
             }
             
             > div {
diff --git a/assets/styles/layout/_topbar.scss b/assets/styles/layout/_topbar.scss
index 84ce69f51..ae6c0c457 100644
--- a/assets/styles/layout/_topbar.scss
+++ b/assets/styles/layout/_topbar.scss
@@ -24,7 +24,19 @@
         margin-right: 4rem;
     }
 
+    .layout-topbar-logo,
+    .layout-topbar-icon {
+        border-radius: var(--border-radius);
+        @include focus-visible();
+
+        svg {
+            width: 120px;
+        }
+    }
+
     .layout-topbar-logo {
+        display: inline-flex;
+
         svg {
             width: 120px;
         }
diff --git a/assets/styles/layout/landing/_footer.scss b/assets/styles/layout/landing/_footer.scss
new file mode 100644
index 000000000..3b97a5c68
--- /dev/null
+++ b/assets/styles/layout/landing/_footer.scss
@@ -0,0 +1,5 @@
+.landing-footer {
+    a {
+        @include focus-visible();
+    }
+}
\ No newline at end of file
diff --git a/assets/styles/layout/landing/_landing.scss b/assets/styles/layout/landing/_landing.scss
index b155a338f..a882fcdb2 100644
--- a/assets/styles/layout/landing/_landing.scss
+++ b/assets/styles/layout/landing/_landing.scss
@@ -2,6 +2,7 @@ $landingBreakpointMD: 767px;
 $landingBreakpointLG: 991px;
 $landingBreakpointXL: 1199px;
 
+@import '../_mixins';
 @import './_main';
 @import './_light';
 @import './_dark';
@@ -12,3 +13,4 @@ $landingBreakpointXL: 1199px;
 @import './_blocks';
 @import './_templates';
 @import './_features';
+@import './_footer';
diff --git a/assets/styles/layout/landing/_main.scss b/assets/styles/layout/landing/_main.scss
index c08a0a5a9..fa4bf3bfc 100644
--- a/assets/styles/layout/landing/_main.scss
+++ b/assets/styles/layout/landing/_main.scss
@@ -10,7 +10,7 @@
     }
 
     .linkbox {
-        transition: background-color 0.3s;
+        transition: all 0.3s;
         display: inline-flex;
         align-items: center;
         color: var(--home-linkbox-text-color);
@@ -19,6 +19,8 @@
         background-color: var(--home-linkbox-bg);
         border-radius: 10px;
         cursor: pointer;
+        
+        @include focus-visible();
 
         &:hover {
             background: var(--home-linkbox-hover-bg);
diff --git a/assets/styles/layout/layout.scss b/assets/styles/layout/layout.scss
index 0a3624e8b..74f723e75 100644
--- a/assets/styles/layout/layout.scss
+++ b/assets/styles/layout/layout.scss
@@ -1,5 +1,6 @@
 @charset 'UTF-8';
 
+@import './_mixins';
 @import './_core';
 @import './_glow';
 @import './_topbar';
diff --git a/pages/landing/FooterSection.vue b/pages/landing/FooterSection.vue
index 4a44e0a59..1aa8bd336 100644
--- a/pages/landing/FooterSection.vue
+++ b/pages/landing/FooterSection.vue
@@ -6,7 +6,7 @@
                     <ul class="list-none p-0 m-0">
                         <li class="font-bold mb-5">General</li>
                         <li class="mb-4">
-                            <router-link to="/installation" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</router-link>
+                            <router-link to="/installation" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Get Started</router-link>
                         </li>
                     </ul>
                 </div>
@@ -14,13 +14,13 @@
                     <ul class="list-none p-0 m-0">
                         <li class="font-bold mb-5">Support</li>
                         <li class="mb-4">
-                            <a href="https://github.com/orgs/primefaces/discussions" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Forum</a>
+                            <a href="https://github.com/orgs/primefaces/discussions" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Forum</a>
                         </li>
                         <li class="mb-4">
-                            <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</a>
+                            <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Discord</a>
                         </li>
                         <li class="mb-4">
-                            <router-link to="/support" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</router-link>
+                            <router-link to="/support" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">PRO Support</router-link>
                         </li>
                     </ul>
                 </div>
@@ -28,25 +28,25 @@
                     <ul class="list-none p-0 m-0">
                         <li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
                         <li class="mb-4">
-                            <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeTV</a>
+                            <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">PrimeTV</a>
                         </li>
                         <li class="mb-4">
-                            <a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Store</a>
+                            <a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Store</a>
                         </li>
                         <li class="mb-4">
-                            <a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Source Code</a>
+                            <a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Source Code</a>
                         </li>
                         <li class="mb-4">
-                            <a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Twitter</a>
+                            <a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Twitter</a>
                         </li>
                         <li class="mb-4">
-                            <a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Newsletter</a>
+                            <a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Newsletter</a>
                         </li>
                         <li class="mb-4">
-                            <a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeGear</a>
+                            <a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">PrimeGear</a>
                         </li>
                         <li class="mb-4">
-                            <a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Contact Us</a>
+                            <a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Contact Us</a>
                         </li>
                     </ul>
                 </div>
@@ -54,13 +54,13 @@
                     <ul class="list-none p-0 m-0">
                         <li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
                         <li class="mb-4">
-                            <router-link to="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</router-link>
+                            <router-link to="/theming" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Guide</router-link>
                         </li>
                         <li class="mb-4">
-                            <a href="https://designer.primevue.org" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
+                            <a href="https://designer.primevue.org" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Designer</a>
                         </li>
                         <li class="mb-4">
-                            <router-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</router-link>
+                            <router-link to="/colors" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Colors</router-link>
                         </li>
                     </ul>
                 </div>
diff --git a/pages/landing/HeroSection.vue b/pages/landing/HeroSection.vue
index 1294b408b..b4e4099e9 100644
--- a/pages/landing/HeroSection.vue
+++ b/pages/landing/HeroSection.vue
@@ -4,8 +4,7 @@
             <div class="w-full xl:w-6 flex flex-column justify-content-center lg:pr-8 align-items-center xl:align-items-stretch">
                 <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
                 <p class="section-detail xl:text-left text-center px-0 mt-0 mb-5">
-                    Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI ecosystem. Craft elegant interfaces effortlessly, and delight your users with smooth interactions and captivating visuals. With
-                    PrimeVue, turning your development vision into reality has never been easier.
+                    Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier.
                 </p>
                 <div class="flex align-items-center gap-3">
                     <PrimeVueNuxtLink to="/installation" class="linkbox active font-semibold py-3 px-4">
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index e9df29727..dcfffceff 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -44,7 +44,7 @@
   --surface-overlay:#ffffff;
   --surface-border:#dfe7ef;
   --surface-hover:#f6f9fc;
-  --focus-ring: 0 0 0 0.2rem #ecfdf5;
+  --focus-ring: 0 0 0 0.2rem #a7f3d0;
   --maskbg: rgba(0, 0, 0, 0.4);
   --highlight-bg: #F0FDFA;
   --highlight-text-color: #047857;
@@ -336,7 +336,7 @@
   .p-link:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
 
   .p-component-overlay-enter {
@@ -376,7 +376,7 @@
   .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: #10b981;
   }
   .p-autocomplete .p-autocomplete-multiple-container {
@@ -459,7 +459,7 @@
   .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: #10b981;
   }
 
@@ -508,7 +508,7 @@
 .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-datepicker .p-datepicker-header .p-datepicker-title {
     line-height: 2rem;
@@ -555,7 +555,7 @@
   .p-datepicker table td > span:focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-datepicker table td.p-datepicker-today > span {
     background: #d1d5db;
@@ -594,7 +594,7 @@
   .p-datepicker .p-timepicker button:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-datepicker .p-timepicker button:last-child {
     margin-top: 0.2em;
@@ -652,7 +652,7 @@
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
     background: #f3f4f6;
@@ -660,7 +660,7 @@
   .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
     background: #f3f4f6;
@@ -668,7 +668,7 @@
   .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
 
   @media screen and (max-width: 769px) {
@@ -688,7 +688,7 @@
   .p-cascadeselect:not(.p-disabled).p-focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: #10b981;
   }
   .p-cascadeselect .p-cascadeselect-label {
@@ -796,7 +796,7 @@
   .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: #10b981;
   }
   .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
@@ -827,7 +827,7 @@
   .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: #10b981;
   }
   .p-chips .p-chips-multiple-container {
@@ -892,7 +892,7 @@
   .p-dropdown:not(.p-disabled).p-focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: #10b981;
   }
   .p-dropdown.p-dropdown-clearable .p-dropdown-label {
@@ -1099,7 +1099,7 @@
   .p-inputswitch.p-focus .p-inputswitch-slider {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
     background: #b9bfc8;
@@ -1135,7 +1135,7 @@
   .p-inputtext:enabled:focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: #10b981;
   }
   .p-inputtext.p-invalid.p-component {
@@ -1285,7 +1285,7 @@
   .p-listbox.p-focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: #10b981;
   }
   .p-listbox.p-invalid {
@@ -1304,7 +1304,7 @@
   .p-multiselect:not(.p-disabled).p-focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: #10b981;
   }
   .p-multiselect .p-multiselect-label {
@@ -1383,7 +1383,7 @@
   .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-multiselect-panel .p-multiselect-items {
     padding: 0.75rem 0;
@@ -1483,7 +1483,7 @@
   .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: #10b981;
   }
   .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
@@ -1539,7 +1539,7 @@
   .p-rating .p-rating-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: #10b981;
   }
   .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
@@ -1623,7 +1623,7 @@
   .p-slider .p-slider-handle:focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-slider .p-slider-range {
     background: #10b981;
@@ -1645,7 +1645,7 @@
   .p-treeselect:not(.p-disabled).p-focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: #10b981;
   }
   .p-treeselect .p-treeselect-label {
@@ -1716,7 +1716,7 @@
   .p-togglebutton.p-button:not(.p-disabled).p-focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: #10b981;
   }
   .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
@@ -1825,7 +1825,7 @@
   .p-button:focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-button .p-button-label {
     transition-duration: 0.2s;
@@ -2211,7 +2211,7 @@
   }
   .p-button.p-button-link:enabled:focus {
     background: transparent;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
     border-color: transparent;
   }
   .p-button.p-button-link:enabled:active {
@@ -2239,7 +2239,7 @@
   .p-speeddial-item.p-focus > .p-speeddial-action {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
 
   .p-speeddial-action {
@@ -2578,7 +2578,7 @@
 .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-carousel .p-carousel-indicators {
     padding: 1rem;
@@ -2680,7 +2680,7 @@
     color: #047857;
   }
   .p-datatable .p-sortable-column:focus-visible {
-    box-shadow: inset 0 0 0 0.15rem #ecfdf5;
+    box-shadow: inset 0 0 0 0.15rem #a7f3d0;
     outline: 0 none;
   }
   .p-datatable .p-datatable-tbody > tr {
@@ -2720,7 +2720,7 @@
 .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
     margin-right: 0.5rem;
@@ -2729,7 +2729,7 @@
     font-weight: 700;
   }
   .p-datatable .p-datatable-tbody > tr:focus-visible {
-    outline: 0.15rem solid #ecfdf5;
+    outline: 0.15rem solid #a7f3d0;
     outline-offset: -0.15rem;
   }
   .p-datatable .p-datatable-tbody > tr.p-highlight {
@@ -2926,7 +2926,7 @@
   .p-column-filter-menu-button:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
 
   .p-column-filter-clear-button {
@@ -2946,7 +2946,7 @@
   .p-column-filter-clear-button:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
 
   .p-column-filter-overlay {
@@ -2980,7 +2980,7 @@
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ecfdf5;
+    box-shadow: inset 0 0 0 0.15rem #a7f3d0;
   }
   .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
     border-top: 1px solid #e5e7eb;
@@ -3107,7 +3107,7 @@
   .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
 
   .p-paginator {
@@ -3286,7 +3286,7 @@
   .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ecfdf5;
+    box-shadow: inset 0 0 0 0.15rem #a7f3d0;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content {
     border-radius: 6px;
@@ -3311,7 +3311,7 @@
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
     margin-right: 0.5rem;
@@ -3405,7 +3405,7 @@
     background: #f9fafb;
   }
   .p-treetable .p-sortable-column {
-    outline-color: #ecfdf5;
+    outline-color: #a7f3d0;
   }
   .p-treetable .p-sortable-column .p-sortable-column-icon {
     color: #374151;
@@ -3463,7 +3463,7 @@
   .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox {
     margin-right: 0.5rem;
@@ -3472,7 +3472,7 @@
     color: #4b5563;
   }
   .p-treetable .p-treetable-tbody > tr:focus-visible {
-    outline: 0.15rem solid #ecfdf5;
+    outline: 0.15rem solid #a7f3d0;
     outline-offset: -0.15rem;
   }
   .p-treetable .p-treetable-tbody > tr.p-highlight {
@@ -3573,7 +3573,7 @@
   .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: inset 0 0 0 0.2rem #ecfdf5;
+    box-shadow: inset 0 0 0 0.2rem #a7f3d0;
   }
   .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
     background: #f3f4f6;
@@ -3663,7 +3663,7 @@
   .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover {
     color: #374151;
@@ -3729,7 +3729,7 @@
   .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-panel.p-panel-toggleable .p-panel-header {
     padding: 0.75rem 1.25rem;
@@ -3763,7 +3763,7 @@
   .p-scrollpanel .p-scrollpanel-bar:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
 
   .p-splitter {
@@ -3783,7 +3783,7 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
@@ -3813,7 +3813,7 @@
   .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: inset 0 0 0 0.2rem #ecfdf5;
+    box-shadow: inset 0 0 0 0.2rem #a7f3d0;
   }
   .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
     background: #ffffff;
@@ -3835,7 +3835,7 @@
   .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: inset 0 0 0 0.2rem #ecfdf5;
+    box-shadow: inset 0 0 0 0.2rem #a7f3d0;
   }
   .p-tabview .p-tabview-panels {
     background: #ffffff;
@@ -3940,7 +3940,7 @@
   .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
     margin-right: 0;
@@ -4045,7 +4045,7 @@
 .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-sidebar .p-sidebar-header + .p-sidebar-content {
     padding-top: 0;
@@ -4087,7 +4087,7 @@
   .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-fileupload .p-fileupload-content {
     background: #ffffff;
@@ -4151,7 +4151,7 @@
   .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
     color: #4b5563;
@@ -4270,7 +4270,7 @@
   .p-dock .p-dock-item.p-focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem #ecfdf5;
+    box-shadow: inset 0 0 0 0.15rem #a7f3d0;
   }
   .p-dock .p-dock-link {
     width: 4rem;
@@ -4651,7 +4651,7 @@
     .p-menubar .p-menubar-button:focus {
       outline: 0 none;
       outline-offset: 0;
-      box-shadow: 0 0 0 0.2rem #ecfdf5;
+      box-shadow: 0 0 0 0.2rem #a7f3d0;
     }
     .p-menubar .p-menubar-root-list {
       position: absolute;
@@ -4744,7 +4744,7 @@
   .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: inset 0 0 0 0.2rem #ecfdf5;
+    box-shadow: inset 0 0 0 0.2rem #a7f3d0;
   }
   .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
     background: #f3f4f6;
@@ -4869,7 +4869,7 @@
   .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-steps .p-steps-item.p-highlight .p-steps-number {
     background: #F0FDFA;
@@ -4917,7 +4917,7 @@
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: inset 0 0 0 0.2rem #ecfdf5;
+    box-shadow: inset 0 0 0 0.2rem #a7f3d0;
   }
   .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
     background: #ffffff;
@@ -5089,7 +5089,7 @@
   .p-message .p-message-close:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-message.p-message-info {
     background: rgba(219, 234, 254, 0.7);
@@ -5193,7 +5193,7 @@
   .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-toast .p-toast-message.p-toast-message-info {
     background: rgba(219, 234, 254, 0.7);
@@ -5340,7 +5340,7 @@
   .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
 
   .p-galleria-mask {
@@ -5488,7 +5488,7 @@
   .p-chip .p-chip-remove-icon:focus-visible {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
   .p-chip .p-chip-remove-icon:focus {
     outline: 0 none;
@@ -5506,7 +5506,7 @@
   .p-inplace .p-inplace-display:focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #ecfdf5;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
 
   .p-progressbar {