diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index ac0c5e5331..681be47ec5 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -56,6 +56,8 @@ button {
 
     :host(limel-button[primary]) & {
         &:not(:disabled) {
+            // @include mixins.limel-button-hover-effect();
+
             color: var(--mdc-theme-on-primary, rgb(var(--color-white)));
             background-color: var(
                 --mdc-theme-primary,
diff --git a/src/style/color-palette-extended.css b/src/style/color-palette-extended.css
index 87412ab2a6..942440d3ff 100644
--- a/src/style/color-palette-extended.css
+++ b/src/style/color-palette-extended.css
@@ -321,7 +321,8 @@
     --lime-elevated-surface-background-color: rgb(var(--contrast-200));
 
     --button-shadow-normal: 0 0.09375rem 0.225rem 0 rgba(var(--color-black), 0.632), 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.608);
-    --button-shadow-hovered: 0 0.125rem 0.375rem rgba(var(--color-black), 0.55), 0 0.375rem 0.625rem rgba(var(--color-black), 0.45);
+    --button-shadow-hovered: 0 0.125rem 0.375rem rgba(var(--color-black), 0.55), 0 0.375rem 0.625rem rgba(var(--color-teal-default), 0.45);
+    /* --button-shadow-hovered:  0 0 0 0.25rem rgba(var(--color-teal-default), 0.28); */
     --button-shadow-pressed: 0 0.0625rem 0.1875rem 0 rgba(var(--color-black), 0.532), 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.508);
     --button-shadow-inset: 0 0.03125rem 0.21875rem 0 rgba(var(--color-black), 0.532) inset, 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.508) inset, 0 0 0.25rem rgba(var(--color-white), 0.1);
     --button-shadow-inset-pressed: 0 0.03125rem 0.34375rem 0 rgba(var(--color-black), 0.532) inset, 0 0.01875rem 0.11875rem 0 rgba(var(--color-black), 0.52) inset, 0 0 0.1875rem rgba(var(--color-white), 0.1);
@@ -479,7 +480,8 @@
         --lime-elevated-surface-background-color: rgb(var(--contrast-200));
 
         --button-shadow-normal: 0 0.09375rem 0.225rem 0 rgba(var(--color-black), 0.632), 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.608);
-        --button-shadow-hovered: 0 0.125rem 0.375rem rgba(var(--color-black), 0.55), 0 0.375rem 0.625rem rgba(var(--color-black), 0.45);
+        --button-shadow-hovered: 0 0.125rem 0.375rem rgba(var(--color-black), 0.55), 0 0.375rem 0.625rem rgba(var(--color-teal-default), 0.45);
+        /* --button-shadow-hovered:  0 0 0 0.25rem rgba(var(--color-teal-default), 0.28); */
         --button-shadow-pressed: 0 0.0625rem 0.1875rem 0 rgba(var(--color-black), 0.532), 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.508);
         --button-shadow-inset: 0 0.03125rem 0.21875rem 0 rgba(var(--color-black), 0.532) inset, 0 0.01875rem 0.05625rem 0 rgba(var(--color-black), 0.508) inset, 0 0 0.25rem rgba(var(--color-white), 0.1);
         --button-shadow-inset-pressed: 0 0.03125rem 0.34375rem 0 rgba(var(--color-black), 0.532) inset, 0 0.01875rem 0.11875rem 0 rgba(var(--color-black), 0.52) inset, 0 0 0.1875rem rgba(var(--color-white), 0.1);
diff --git a/src/style/internal/shared_input-select-picker.scss b/src/style/internal/shared_input-select-picker.scss
index d968d5d8d0..bdf03bb213 100644
--- a/src/style/internal/shared_input-select-picker.scss
+++ b/src/style/internal/shared_input-select-picker.scss
@@ -320,6 +320,7 @@ $cropped-label-hack--font-size: 0.875rem; //14px
             &:hover .mdc-text-field__icon--trailing {
                 &:hover {
                     box-shadow: var(--button-shadow-hovered);
+                    // box-shadow: 0 0 0 0.25rem rgba((var(--color-teal-default)), 0.28);
                 }
 
                 &:active {
diff --git a/src/style/mixins.scss b/src/style/mixins.scss
index 17080a58b1..2f82543445 100644
--- a/src/style/mixins.scss
+++ b/src/style/mixins.scss
@@ -84,6 +84,7 @@
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
+        // box-shadow: 0 0 0 0.25rem rgba((var(--color-teal-default)), 0.28);
     }
 
     &:active {
@@ -92,7 +93,6 @@
         transform: translate3d(0, 0.08rem, 0);
     }
 }
-
 @mixin is-elevated-inset-clickable(
     $color: var(--mdc-theme-on-surface),
     $color--hovered: var(--mdc-theme-on-surface),
@@ -115,6 +115,7 @@
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
+        //box-shadow: 0 0 0 0.25rem rgba((var(--color-teal-default)), 0.28);
     }
 
     &:active {
@@ -144,6 +145,7 @@
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
+        // box-shadow: 0 0 0 0.25rem rgba((var(--color-teal-default)), 0.28);
     }
 
     &:active {
@@ -174,6 +176,7 @@
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
+        //  box-shadow: 0 0 0 0.25rem rgba((var(--color-teal-default)), 0.28);
     }
 
     &:active {
diff --git a/src/style/shadows.scss b/src/style/shadows.scss
index 1deab1da91..0050b7d9e2 100644
--- a/src/style/shadows.scss
+++ b/src/style/shadows.scss
@@ -19,7 +19,9 @@
     --button-shadow-hovered: 0 #{functions.pxToRem(2)} #{functions.pxToRem(6)}
             rgba(var(--color-black), 0.15),
         0 #{functions.pxToRem(6)} #{functions.pxToRem(10)}
-            rgba(var(--color-black), 0.05);
+            rgba(var(--color-teal-default), 0.05);
+
+    // --button-shadow-hovered: 0 0 0 0.25rem rgba(var(--color-teal-default), 0.28);
     --button-shadow-pressed: 0 #{functions.pxToRem(1)} #{functions.pxToRem(3)} 0
             rgba(var(--color-black), 0.132),
         0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0