diff --git a/src/app/status-list/status-list.component.html b/src/app/status-list/status-list.component.html
index 81824da5e..698342b0b 100644
--- a/src/app/status-list/status-list.component.html
+++ b/src/app/status-list/status-list.component.html
@@ -1,3 +1,3 @@
-<app-status-toggle></app-status-toggle>
-<app-folder-list></app-folder-list>
-<app-device-list></app-device-list>
\ No newline at end of file
+<app-status-toggle (statusEvent)="onToggle($event)"></app-status-toggle>
+<app-folder-list *ngIf="currentStatus===status.Folders"></app-folder-list>
+<app-device-list *ngIf="currentStatus===status.Devices"></app-device-list>
\ No newline at end of file
diff --git a/src/app/status-list/status-list.component.ts b/src/app/status-list/status-list.component.ts
index b07491865..6fc011497 100644
--- a/src/app/status-list/status-list.component.ts
+++ b/src/app/status-list/status-list.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { Status } from '../status';
+
 
 @Component({
   selector: 'app-status-list',
@@ -6,10 +8,16 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./status-list.component.scss']
 })
 export class StatusListComponent implements OnInit {
+  public currentStatus: Status = Status.Folders;
+  public status = Status;
 
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  onToggle(s: Status) {
+    console.log("holy moly", s);
+    this.currentStatus = s;
+  }
 }
diff --git a/src/app/status-toggle/status-toggle.component.html b/src/app/status-toggle/status-toggle.component.html
index 289bccadb..58b10e4fc 100644
--- a/src/app/status-toggle/status-toggle.component.html
+++ b/src/app/status-toggle/status-toggle.component.html
@@ -1,4 +1,4 @@
-<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-    <mat-button-toggle value="folders" (click)="onSelect(toggleAction.Folders)">Folders</mat-button-toggle>
-    <mat-button-toggle value=" devices" (click)="onSelect(toggleAction.Devices)">Devices</mat-button-toggle>
+<mat-button-toggle-group name="fontStyle" aria-label="Font Style" value="folders">
+    <mat-button-toggle value="folders" (click)="onSelect(status.Folders)">Folders</mat-button-toggle>
+    <mat-button-toggle value="devices" (click)="onSelect(status.Devices)">Devices</mat-button-toggle>
 </mat-button-toggle-group>
\ No newline at end of file
diff --git a/src/app/status-toggle/status-toggle.component.ts b/src/app/status-toggle/status-toggle.component.ts
index 781359c55..6557ad626 100644
--- a/src/app/status-toggle/status-toggle.component.ts
+++ b/src/app/status-toggle/status-toggle.component.ts
@@ -1,9 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Status } from '../status';
+
 
-export enum ToggleAction {
-  Folders = 1,
-  Devices,
-}
 
 @Component({
   selector: 'app-status-toggle',
@@ -12,20 +10,20 @@ export enum ToggleAction {
 })
 
 export class StatusToggleComponent implements OnInit {
-  public toggleAction = ToggleAction
-  constructor() { }
+  public status = Status
+  @Output() statusEvent = new EventEmitter<Status>();
 
+  constructor() { }
   ngOnInit(): void {
   }
 
-  onSelect(label: ToggleAction): void {
-
-    console.log("here?");
-    switch (label) {
-      case ToggleAction.Folders:
+  onSelect(s: Status): void {
+    this.statusEvent.emit(s);
+    switch (s) {
+      case Status.Folders:
         console.log("folder action");
         break;
-      case ToggleAction.Devices:
+      case Status.Devices:
         console.log("Device action");
         break;
     }
diff --git a/src/app/status.ts b/src/app/status.ts
new file mode 100644
index 000000000..872798394
--- /dev/null
+++ b/src/app/status.ts
@@ -0,0 +1,4 @@
+export enum Status {
+    Folders = 1,
+    Devices,
+}
\ No newline at end of file