diff --git a/src/app/device-list/device-list-datasource.ts b/src/app/device-list/device-list-datasource.ts
index 372ba06bb..95d3a6796 100644
--- a/src/app/device-list/device-list-datasource.ts
+++ b/src/app/device-list/device-list-datasource.ts
@@ -5,6 +5,7 @@ import { MatSort } from '@angular/material/sort';
 import { map } from 'rxjs/operators';
 import { Observable, of as observableOf, merge } from 'rxjs';
 import { Device } from '../device';
+import { SystemConfigService } from '../system-config.service';
 
 /**
  * Data source for the DeviceList view. This class should
@@ -16,7 +17,7 @@ export class DeviceListDataSource extends DataSource<Device> {
   paginator: MatPaginator;
   sort: MatSort;
 
-  constructor() {
+  constructor(private systemConfigService: SystemConfigService) {
     super();
   }
 
@@ -29,7 +30,7 @@ export class DeviceListDataSource extends DataSource<Device> {
     // Combine everything that affects the rendered data into one update
     // st
     const dataMutations = [
-      observableOf(this.data),
+      this.systemConfigService.getDevices(),
       this.paginator.page,
       this.sort.sortChange
     ];
diff --git a/src/app/device-list/device-list.component.ts b/src/app/device-list/device-list.component.ts
index 9c69d15b1..73971924b 100644
--- a/src/app/device-list/device-list.component.ts
+++ b/src/app/device-list/device-list.component.ts
@@ -6,6 +6,7 @@ import { MatTable } from '@angular/material/table';
 import { DeviceListDataSource } from './device-list-datasource';
 import { Device } from '../device';
 import { SystemConfigService } from '../system-config.service';
+import { flatMap } from 'rxjs/operators';
 
 
 @Component({
@@ -25,17 +26,19 @@ export class DeviceListComponent implements AfterViewInit, OnInit {
   constructor(private systemConfigService: SystemConfigService) { };
 
   ngOnInit() {
-    this.dataSource = new DeviceListDataSource();
-    this.systemConfigService.getDevices().subscribe(
-      data => {
-        this.dataSource.data = data;
-      }
-    );
+    this.dataSource = new DeviceListDataSource(this.systemConfigService);
+    this.dataSource.data = [];
   }
 
   ngAfterViewInit() {
     this.dataSource.sort = this.sort;
     this.dataSource.paginator = this.paginator;
     this.table.dataSource = this.dataSource;
+
+    this.systemConfigService.getDevices().subscribe(
+      data => {
+        this.dataSource.data = data;
+      }
+    );
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/folder-list/folder-list-datasource.ts b/src/app/folder-list/folder-list-datasource.ts
index c6c9b6cb6..741bb788e 100644
--- a/src/app/folder-list/folder-list-datasource.ts
+++ b/src/app/folder-list/folder-list-datasource.ts
@@ -5,6 +5,7 @@ import { MatSort } from '@angular/material/sort';
 import { map } from 'rxjs/operators';
 import { Observable, of as observableOf, merge } from 'rxjs';
 import { Folder } from '../folder';
+import { SystemConfigService } from '../system-config.service';
 
 /**
  * Data source for the FolderList view. This class should
@@ -16,7 +17,7 @@ export class FolderListDataSource extends DataSource<Folder> {
   paginator: MatPaginator;
   sort: MatSort;
 
-  constructor() {
+  constructor(private systemConfigService: SystemConfigService) {
     super();
   }
 
@@ -29,7 +30,8 @@ export class FolderListDataSource extends DataSource<Folder> {
     // Combine everything that affects the rendered data into one update
     // st
     const dataMutations = [
-      observableOf(this.data),
+      // observableOf(this.data),
+      this.systemConfigService.getFolders(),
       this.paginator.page,
       this.sort.sortChange
     ];
diff --git a/src/app/folder-list/folder-list.component.ts b/src/app/folder-list/folder-list.component.ts
index 3d804f62c..ac18ee0c5 100644
--- a/src/app/folder-list/folder-list.component.ts
+++ b/src/app/folder-list/folder-list.component.ts
@@ -25,17 +25,22 @@ export class FolderListComponent implements AfterViewInit, OnInit {
   constructor(private systemConfigService: SystemConfigService) { };
 
   ngOnInit() {
-    this.dataSource = new FolderListDataSource();
-    this.systemConfigService.getFolders().subscribe(
-      data => {
-        this.dataSource.data = data;
-      }
-    );
+    this.dataSource = new FolderListDataSource(this.systemConfigService);
+    this.dataSource.data = [];
+  }
+
+  ngAfterContentInit() {
   }
 
   ngAfterViewInit() {
     this.dataSource.sort = this.sort;
     this.dataSource.paginator = this.paginator;
     this.table.dataSource = this.dataSource;
+
+    this.systemConfigService.getFolders().subscribe(
+      data => {
+        this.dataSource.data = data;
+      }
+    );
   }
 }
diff --git a/src/app/system-config.service.ts b/src/app/system-config.service.ts
index daf8e2bb3..199164b7c 100644
--- a/src/app/system-config.service.ts
+++ b/src/app/system-config.service.ts
@@ -1,6 +1,8 @@
 import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 
-import { Observable, of } from 'rxjs';
+import { Observable, Subject, of } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 import { Folder } from './folder';
 import { Device } from './device';
@@ -10,15 +12,85 @@ import { FOLDERS, DEVICES } from './mock-config-data';
   providedIn: 'root'
 })
 export class SystemConfigService {
+  private systemConfig: any;
+  private folders: Folder[];
+  private devices: Device[];
+  private foldersSubject: Subject<Folder[]> = new Subject();
+  private devicesSubject: Subject<Device[]> = new Subject();
 
-  constructor() { }
+  private systemConfigUrl = 'http://127.0.0.1:8384/rest/system/config';  // URL to web api
+  httpOptions = {
+    // TODO find best way to get api key
+    // headers: new HttpHeaders({ 'X-API-Key': 'x' })
+  };
+
+  constructor(private http: HttpClient) { }
+
+  ngOnInit(): void { }
+
+
+  getSystemConfig(): Observable<any> {
+    return this.http
+      .get(this.systemConfigUrl, this.httpOptions)
+      .pipe(map(res => {
+        this.systemConfig = res;
+
+        this.folders = res['folders'];
+        this.devices = res['devices'];
+        this.foldersSubject.next(this.folders);
+        this.devicesSubject.next(this.devices);
+
+        return res;
+      })
+      );
+  }
 
   getFolders(): Observable<Folder[]> {
-    return of(FOLDERS);
+    const folderObservable: Observable<Folder[]> = new Observable((observer) => {
+      if (this.folders) {
+        observer.next(this.folders);
+      } else {
+        // create timer to keep checking for folders
+        let checkFolders = (): Boolean => {
+          if (this.folders) {
+            observer.next(this.folders);
+            return true;
+          }
+          return false;
+        }
+        let t = setInterval(() => {
+          if (checkFolders())
+            clearInterval(t);
+        }, 100);
+      }
+    });
+    return folderObservable;
   }
 
   getDevices(): Observable<Device[]> {
-    return of(DEVICES);
+    const deviceObserverable: Observable<Device[]> = new Observable((observer) => {
+      if (this.folders) {
+        observer.next(this.devices);
+      } else {
+        // create timer to keep checking for devices 
+        let checkFolders = (): Boolean => {
+          if (this.devices) {
+            observer.next(this.devices);
+            return true;
+          }
+          return false;
+        }
+        let t = setInterval(() => {
+          if (checkFolders())
+            clearInterval(t);
+        }, 100);
+      }
+    });
+    return deviceObserverable;
+    // return from(this.devices);
+    if (this.devices) {
+      this.devicesSubject.next(this.devices);
+    }
+    return this.devicesSubject;
   }
-
-}
+}
\ No newline at end of file