diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index c50353a..062c9e2 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -34,8 +34,8 @@
                 [class.selected]="selectedTerminalMenuItem === 'console'">CONSOLE</button>
       </div>
       <hr>
-      <app-terminal [hidden]="selectedTerminalMenuItem !== 'terminal'"></app-terminal>
-      <app-console [hidden]="selectedTerminalMenuItem !== 'console'"></app-console>
+      <app-terminal [class.hidden]="selectedTerminalMenuItem !== 'terminal'"></app-terminal>
+      <app-console [class.hidden]="selectedTerminalMenuItem !== 'console'"></app-console>
     </div>
     <div class="tfw-sidebar">
       <app-sidebar (layoutChanged)="setLayout($event)" [layout]="layout"></app-sidebar>
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
index ede0093..ba141cf 100644
--- a/src/app/dashboard/dashboard.component.scss
+++ b/src/app/dashboard/dashboard.component.scss
@@ -112,6 +112,10 @@
   filter: blur(3px);
 }
 
+.hidden {
+  @include hide-component();
+}
+
 .terminal-ide-web {
   @include set-tfw-web('terminal-ide-web');
   @include position-grid-items(map_get($layouts, 'terminal-ide-web'),'.tfw-');