diff --git a/src/components/carousel/themes/shared/carousel.common.scss b/src/components/carousel/themes/shared/carousel.common.scss
index 52707fc9d..27e84ccc1 100644
--- a/src/components/carousel/themes/shared/carousel.common.scss
+++ b/src/components/carousel/themes/shared/carousel.common.scss
@@ -28,6 +28,7 @@ igc-button::part(base) {
 igc-button::part(focused),
 igc-button::part(focused):hover {
     border: rem(2px) solid var-get($theme, 'button-focus-border-color');
+    background: var-get($theme, 'button-background');
     color: var-get($theme, 'button-focus-arrow-color');
 }
 
@@ -67,21 +68,25 @@ igc-button[disabled]::part(base) {
 
     &:hover {
         border-color: var-get($theme, 'indicator-active-border-color');
+
+        &::after {
+            background: var-get($theme, 'indicator-hover-dot-color');
+        }
     }
 }
 
 [part='dot active'] {
-    border: rem(2px) solid var(--indicator-active-color);
+    border: rem(2px) solid var(--indicator-border-active-color);
 
     &::after {
-        background: var(--indicator-active-color);
+        background: var(--indicator-dot-active-color);
     }
 
     &:hover {
-        border-color: var(--indicator-active-color);
+        border-color: var(--indicator-active-hover-color);
 
         &::after {
-            background: var(--indicator-active-color);
+            background: var(--indicator-active-hover-color);
         }
     }
 }
diff --git a/src/components/carousel/themes/shared/carousel.indigo.scss b/src/components/carousel/themes/shared/carousel.indigo.scss
index 45de09fd9..0a00409cd 100644
--- a/src/components/carousel/themes/shared/carousel.indigo.scss
+++ b/src/components/carousel/themes/shared/carousel.indigo.scss
@@ -57,7 +57,7 @@ igc-button::part(focused):hover {
 }
 
 [part='dot active'] {
-    border: rem(2px) solid var-get($theme, 'indicator-active-dot-color');
+    border: rem(2px) solid var-get($theme, 'indicator-active-border-color');
     box-shadow: 0 0 0 rem(3px) var(--dot-shadow-color);
 
     &::after {
diff --git a/src/components/carousel/themes/shared/indicator-container/indicator-container.common.scss b/src/components/carousel/themes/shared/indicator-container/indicator-container.common.scss
index dfa70955f..919832c39 100644
--- a/src/components/carousel/themes/shared/indicator-container/indicator-container.common.scss
+++ b/src/components/carousel/themes/shared/indicator-container/indicator-container.common.scss
@@ -4,11 +4,15 @@
 $theme: $material;
 
 [part~='base'] {
-    --indicator-active-color: #{var-get($theme, 'indicator-active-border-color')};
+    --indicator-border-active-color: #{var-get($theme, 'indicator-active-border-color')};
+    --indicator-dot-active-color: #{var-get($theme, 'indicator-active-dot-color')};
+    --indicator-active-hover-color: #{var-get($theme, 'indicator-active-hover-dot-color')};
 }
 
 [part='base focused'] {
-    --indicator-active-color: #{var-get($theme, 'indicator-focus-color')};
+    --indicator-border-active-color: #{var-get($theme, 'indicator-focus-color')};
+    --indicator-dot-active-color: #{var-get($theme, 'indicator-focus-color')};
+    --indicator-active-hover-color: #{var-get($theme, 'indicator-focus-color')};
 
     ::slotted(div) {
         &::after {