diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 12611c3..cface6a 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import {Component, HostListener, OnInit} from '@angular/core';
+import {Component, HostListener} from '@angular/core';
 import {TransactionService} from '@app/_services';
 import {AuthService} from '@app/_services';
 
@@ -7,7 +7,7 @@ import {AuthService} from '@app/_services';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit {
+export class AppComponent {
   title = 'CICADA';
   readyStateTarget: number = 3;
   readyState: number = 0;
@@ -18,9 +18,6 @@ export class AppComponent implements OnInit {
     private transactionService: TransactionService,
   ) {
     this.authService.mutableKeyStore.loadKeyring().then(r => this.authService.getPublicKeys().then());
-  }
-
-  ngOnInit(): void {
     this.mediaQuery.addListener(this.onResize);
     this.onResize(this.mediaQuery);
   }
@@ -30,13 +27,23 @@ export class AppComponent implements OnInit {
     const sidebar = document.getElementById('sidebar');
     const content = document.getElementById('content');
     const sidebarCollapse = document.getElementById('sidebarCollapse');
-    sidebarCollapse?.classList.remove('active');
+    if (sidebarCollapse?.classList.contains('active')) {
+      sidebarCollapse?.classList.remove('active');
+    }
     if (e.matches) {
-      sidebar?.classList.add('active');
-      content?.classList.add('active');
+      if (!sidebar?.classList.contains('active')) {
+        sidebar?.classList.add('active');
+      }
+      if (!content?.classList.contains('active')) {
+        content?.classList.add('active');
+      }
     } else {
-      sidebar?.classList.remove('active');
-      content?.classList.remove('active');
+      if (sidebar?.classList.contains('active')) {
+        sidebar?.classList.remove('active');
+      }
+      if (content?.classList.contains('active')) {
+        content?.classList.remove('active');
+      }
     }
   }
 
diff --git a/src/app/shared/_directives/menu-selection.directive.ts b/src/app/shared/_directives/menu-selection.directive.ts
index 428bde3..1c7534a 100644
--- a/src/app/shared/_directives/menu-selection.directive.ts
+++ b/src/app/shared/_directives/menu-selection.directive.ts
@@ -19,10 +19,16 @@ export class MenuSelectionDirective {
 
   onMenuSelect(): void {
     const sidebar = document.getElementById('sidebar');
-    sidebar.classList.add('active');
+    if (!sidebar?.classList.contains('active')) {
+      sidebar?.classList.add('active');
+    }
     const content = document.getElementById('content');
-    content.classList.add(  'active');
+    if (!content?.classList.contains('active')) {
+      content?.classList.add('active');
+    }
     const sidebarCollapse = document.getElementById('sidebarCollapse');
-    sidebarCollapse.classList.remove('active');
+    if (sidebarCollapse?.classList.contains('active')) {
+      sidebarCollapse?.classList.remove('active');
+    }
   }
 }
diff --git a/src/app/shared/_directives/menu-toggle.directive.ts b/src/app/shared/_directives/menu-toggle.directive.ts
index 82637ae..5e7c873 100644
--- a/src/app/shared/_directives/menu-toggle.directive.ts
+++ b/src/app/shared/_directives/menu-toggle.directive.ts
@@ -17,10 +17,10 @@ export class MenuToggleDirective {
   // Menu Trigger
   onMenuToggle(): void {
     const sidebar = document.getElementById('sidebar');
-    sidebar.classList.toggle('active');
+    sidebar?.classList.toggle('active');
     const content = document.getElementById('content');
-    content.classList.toggle('active');
+    content?.classList.toggle('active');
     const sidebarCollapse = document.getElementById('sidebarCollapse');
-    sidebarCollapse.classList.toggle('active');
+    sidebarCollapse?.classList.toggle('active');
   }
 }