diff --git a/projects/components/src/toggle-switch/toggle-switch.component.scss b/projects/components/src/toggle-switch/toggle-switch.component.scss
index 6990e107b..7812750ee 100644
--- a/projects/components/src/toggle-switch/toggle-switch.component.scss
+++ b/projects/components/src/toggle-switch/toggle-switch.component.scss
@@ -1,7 +1,10 @@
 @import 'color-palette';
 @import 'font';
 
-:host {
+.toggle-switch {
+  display: flex;
+  align-items: center;
+
   ::ng-deep {
     .mat-slide-toggle {
       &.disabled {
diff --git a/projects/components/src/toggle-switch/toggle-switch.component.ts b/projects/components/src/toggle-switch/toggle-switch.component.ts
index ad068dc31..aa897013d 100644
--- a/projects/components/src/toggle-switch/toggle-switch.component.ts
+++ b/projects/components/src/toggle-switch/toggle-switch.component.ts
@@ -7,15 +7,17 @@ import { ToggleSwitchSize } from './toggle-switch-size';
   styleUrls: ['./toggle-switch.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <mat-slide-toggle
-      color="primary"
-      [checked]="this.checked"
-      [ngClass]="{ 'small-slide-toggle': this.size === '${ToggleSwitchSize.Small}', disabled: this.disabled }"
-      [disabled]="this.disabled"
-      (change)="this.onToggle($event)"
-    >
-      <div class="label">{{ this.label }}</div>
-    </mat-slide-toggle>
+    <div class="toggle-switch">
+      <mat-slide-toggle
+        color="primary"
+        [checked]="this.checked"
+        [ngClass]="{ 'small-slide-toggle': this.size === '${ToggleSwitchSize.Small}', disabled: this.disabled }"
+        [disabled]="this.disabled"
+        (change)="this.onToggle($event)"
+      >
+        <div class="label">{{ this.label }}</div>
+      </mat-slide-toggle>
+    </div>
   `
 })
 export class ToggleSwitchComponent {