diff --git a/projects/igniteui-angular/src/lib/switch/themes/_base.scss b/projects/igniteui-angular/src/lib/switch/themes/_base.scss
index da328b1e408..a786aa020f1 100644
--- a/projects/igniteui-angular/src/lib/switch/themes/_base.scss
+++ b/projects/igniteui-angular/src/lib/switch/themes/_base.scss
@@ -84,7 +84,7 @@ $_theme: $material;
             }
 
             @include e(thumb) {
-                background: var-get($_theme, 'border-hover-color');
+                background: var-get($_theme, 'thumb-off-hover-color');
             }
 
             @include e(label) {
diff --git a/projects/igniteui-angular/src/lib/switch/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/switch/themes/shared/bootstrap.scss
index bd6fdf94c16..df2d0a229a1 100644
--- a/projects/igniteui-angular/src/lib/switch/themes/shared/bootstrap.scss
+++ b/projects/igniteui-angular/src/lib/switch/themes/shared/bootstrap.scss
@@ -49,6 +49,12 @@ $_theme: $bootstrap;
         @include e(thumb) {
             background: var-get($_theme, 'thumb-on-color');
         }
+
+        &:hover {
+            @include e(composite) {
+                border-color: var-get($_theme, 'border-on-hover-color');
+            }
+        }
     }
 
     @include mx(disabled, checked) {
diff --git a/projects/igniteui-angular/src/lib/switch/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/switch/themes/shared/indigo.scss
index 39aa6ba8c56..a1dd3201a0c 100644
--- a/projects/igniteui-angular/src/lib/switch/themes/shared/indigo.scss
+++ b/projects/igniteui-angular/src/lib/switch/themes/shared/indigo.scss
@@ -26,7 +26,6 @@ $_theme: $indigo;
 
     @include m(focused) {
         @include e(composite) {
-            border-radius: var-get($_theme, 'border-radius-thumb');
             box-shadow: 0 0 0 rem(3px) var-get($_theme, 'focus-outline-color');
         }
     }
diff --git a/projects/igniteui-angular/src/lib/switch/themes/shared/material.scss b/projects/igniteui-angular/src/lib/switch/themes/shared/material.scss
index 02629de6038..f4f8a725b55 100644
--- a/projects/igniteui-angular/src/lib/switch/themes/shared/material.scss
+++ b/projects/igniteui-angular/src/lib/switch/themes/shared/material.scss
@@ -12,7 +12,7 @@ $_theme: $material;
     --switch-height: #{rem(14px)};
     --switch-thumb-size: #{rem(20px)};
     --switch-on-offset: #{rem(1px)};
-    --switch-off-offset: 0;
+    --switch-off-offset: #{rem(-1px)};
     --label-margin: #{rem(12px)};
 
     @include e(label) {
@@ -21,22 +21,15 @@ $_theme: $material;
         }
     }
 
-    @include e(composite) {
-        border-width: 0;
-    }
-
     @include e(ripple) {
         display: block;
     }
 
     @include e(thumb) {
         box-shadow: var-get($_theme, 'resting-elevation');
-    }
 
-    &:hover {
-        @include e(thumb) {
-            background: var-get($_theme, 'thumb-off-color');
-            box-shadow: var-get($_theme, 'resting-elevation');
+        &:hover {
+            box-shadow: var-get($_theme, 'hover-elevation');
         }
     }