diff --git a/src/ui/config/config.component.ts b/src/ui/config/config.component.ts
index 4fffa6824977aa869612c40e0bbd8de088a25e05..12a3a700a6f84bdf71fa77699c0be0b772756385 100644
--- a/src/ui/config/config.component.ts
+++ b/src/ui/config/config.component.ts
@@ -3,7 +3,7 @@ import { Store, select } from '@ngrx/store';
 import { ViewerConfiguration, ACTION_TYPES } from 'src/services/state/viewerConfig.store'
 import { Observable, Subject, Subscription } from 'rxjs';
 import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
-import { MatCheckboxChange } from '@angular/material';
+import { MatSlideToggleChange } from '@angular/material';
 
 const GPU_TOOLTIP = `GPU TOOLTIP`
 const ANIMATION_TOOLTIP = `ANIMATION_TOOLTIP`
@@ -78,7 +78,7 @@ export class ConfigComponent implements OnInit, OnDestroy{
     })
   }
 
-  public toggleAnimationFlag(ev: MatCheckboxChange ){
+  public toggleAnimationFlag(ev: MatSlideToggleChange ){
     const { checked } = ev
     this.store.dispatch({
       type: ACTION_TYPES.UPDATE_CONFIG,
diff --git a/src/ui/config/config.template.html b/src/ui/config/config.template.html
index 44d27641c0b70dbc2562e62c3d326a17a4516822..dca3b164d0fbe6bd4235e50e856073835acb13d0 100644
--- a/src/ui/config/config.template.html
+++ b/src/ui/config/config.template.html
@@ -32,11 +32,11 @@
   </div>
 </div>
 
-<div>
-  <mat-checkbox
+<div class="d-flex align-items-center">
+  <mat-slide-toggle
     [checked]="animationFlag$ | async"
     (change)="toggleAnimationFlag($event)">
     Enable Animation
-  </mat-checkbox>
+  </mat-slide-toggle>
   <small [matTooltip]="ANIMATION_TOOLTIP" class="ml-2 fas fa-question"></small>
 </div>
\ No newline at end of file
diff --git a/src/ui/sharedModules/angularMaterial.module.ts b/src/ui/sharedModules/angularMaterial.module.ts
index b63e2dfaa5a37e5caa567efebe4bf1c135e00a4b..fe3b30ad0b03a82f351a0d90fab08e89d821f06d 100644
--- a/src/ui/sharedModules/angularMaterial.module.ts
+++ b/src/ui/sharedModules/angularMaterial.module.ts
@@ -4,12 +4,13 @@ import {
   MatSidenavModule,
   MatCardModule,
   MatTabsModule,
-  MatTooltipModule
+  MatTooltipModule,
+  MatSlideToggleModule
 } from '@angular/material';
 import { NgModule } from '@angular/core';
 
 @NgModule({
-  imports: [MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule, MatTabsModule, MatTooltipModule],
-  exports: [MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule, MatTabsModule, MatTooltipModule],
+  imports: [MatSlideToggleModule, MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule, MatTabsModule, MatTooltipModule],
+  exports: [MatSlideToggleModule, MatButtonModule, MatCheckboxModule, MatSidenavModule, MatCardModule, MatTabsModule, MatTooltipModule],
 })
 export class AngularMaterialModule { }
\ No newline at end of file