diff --git a/components/lib/themes/aura/toggleswitch/index.js b/components/lib/themes/aura/toggleswitch/index.js
index 7e1e7e772..74ac147fb 100644
--- a/components/lib/themes/aura/toggleswitch/index.js
+++ b/components/lib/themes/aura/toggleswitch/index.js
@@ -15,7 +15,8 @@ export default {
         borderWidth: '1px',
         borderColor: 'transparent',
         invalidBorderColor: '{form.field.invalid.border.color}',
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        slideDuration: '0.2s'
     },
     handle: {
         borderRadius: '50%',
diff --git a/components/lib/themes/lara/toggleswitch/index.js b/components/lib/themes/lara/toggleswitch/index.js
index c5d995796..53c3831ba 100644
--- a/components/lib/themes/lara/toggleswitch/index.js
+++ b/components/lib/themes/lara/toggleswitch/index.js
@@ -15,7 +15,8 @@ export default {
         borderWidth: '1px',
         borderColor: 'transparent',
         invalidBorderColor: '{form.field.invalid.border.color}',
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        slideDuration: '0.2s'
     },
     handle: {
         borderRadius: '50%',
diff --git a/components/lib/themes/nora/toggleswitch/index.js b/components/lib/themes/nora/toggleswitch/index.js
index fdb5430fd..b9e730857 100644
--- a/components/lib/themes/nora/toggleswitch/index.js
+++ b/components/lib/themes/nora/toggleswitch/index.js
@@ -19,7 +19,8 @@ export default {
         hoverBackground: '{form.field.background}',
         checkedBackground: '{primary.color}',
         checkedHoverBackground: '{primary.color}',
-        transitionDuration: '{form.field.transition.duration}'
+        transitionDuration: '{form.field.transition.duration}',
+        slideDuration: '0.1s'
     },
     handle: {
         borderRadius: '50%',
diff --git a/components/lib/toggleswitch/style/ToggleSwitchStyle.js b/components/lib/toggleswitch/style/ToggleSwitchStyle.js
index 81a866c8f..b62a3f633 100644
--- a/components/lib/toggleswitch/style/ToggleSwitchStyle.js
+++ b/components/lib/toggleswitch/style/ToggleSwitchStyle.js
@@ -24,17 +24,17 @@ const theme = ({ dt }) => `
 }
 
 .p-toggleswitch-slider {
-    position: absolute;
+    display: inline-block;
     cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    width: 100%;
+    height: 100%;
     border-width: ${dt('toggleswitch.border.width')};
     border-style: solid;
     border-color: ${dt('toggleswitch.border.color')};
     background: ${dt('toggleswitch.background')};
-    transition: background ${dt('toggleswitch.transition.duration')}, color ${dt('toggleswitch.transition.duration')}, border-color ${dt('toggleswitch.transition.duration')}, outline-color ${dt('toggleswitch.transition.duration')}, box-shadow ${dt('toggleswitch.transition.duration')};
+    transition: background ${dt('toggleswitch.transition.duration')}, color ${dt('toggleswitch.transition.duration')}, border-color ${dt('toggleswitch.transition.duration')}, outline-color ${dt('toggleswitch.transition.duration')}, box-shadow ${dt(
+    'toggleswitch.transition.duration'
+)};
     border-radius: ${dt('toggleswitch.border.radius')};
     outline-color: transparent;
     box-shadow: ${dt('toggleswitch.shadow')};
@@ -50,7 +50,7 @@ const theme = ({ dt }) => `
     left: ${dt('toggleswitch.gap')};
     margin-top: calc(-1 * calc(${dt('toggleswitch.handle.size')} / 2));
     border-radius: ${dt('toggleswitch.handle.border.radius')};
-    transition: all ${dt('toggleswitch.transition.duration')};
+    transition: background ${dt('toggleswitch.transition.duration')}, left ${dt('toggleswitch.slide.duration')};
 }
 
 .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {