diff --git a/res/css/views/elements/_ToggleSwitch.scss b/res/css/views/elements/_ToggleSwitch.scss
index 1f4445b88c..9a07e01978 100644
--- a/res/css/views/elements/_ToggleSwitch.scss
+++ b/res/css/views/elements/_ToggleSwitch.scss
@@ -16,12 +16,19 @@ limitations under the License.
 
 .mx_ToggleSwitch {
     transition: background-color 0.20s ease-out 0.1s;
-    width: 48px;
-    height: 24px;
-    border-radius: 14px;
+
+    width: $font-48px;
+    height: $font-20px;
+    border-radius: 1.5rem;
+    padding: 2px;
+    
     background-color: $togglesw-off-color;
-    position: relative;
     opacity: 0.5;
+
+    display: flex;
+    flex-direction: row;
+    flex: 0 0 auto;
+    align-items: center;
 }
 
 .mx_ToggleSwitch_enabled {
@@ -35,19 +42,12 @@ limitations under the License.
 
 .mx_ToggleSwitch_ball {
     transition: left 0.15s ease-out 0.1s;
-    margin: 2px;
-    width: 20px;
-    height: 20px;
-    border-radius: 20px;
+    width: $font-20px;
+    height: $font-20px;
+    border-radius: $font-20px;
     background-color: $togglesw-ball-color;
-    position: absolute;
-    top: 0;
 }
 
-.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
-    left: 23px; // 48px switch - 20px ball - 5px padding = 23px
-}
-
-.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
-    left: 2px;
-}
+.mx_ToggleSwitch_on {
+    flex-direction: row-reverse;
+}
\ No newline at end of file