diff --git a/angular.json b/angular.json
index 277517d..fda1246 100644
--- a/angular.json
+++ b/angular.json
@@ -130,4 +130,4 @@
     }
   },
   "defaultProject": "frontend"
-}
+}
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index fc57795..081e939 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -41,15 +41,15 @@ import { VisualizeOneComponent } from './visualize-one/visualize-one.component';
     GaugesModule,
     RouterModule.forRoot([
 
-    {path: 'dashboard', component: FrontpageComponent},
-    {path: '', component: AuthenticationComponent},
-    {path: 'generator-search', component: GeneratorSearchComponent},
-    {path: 'statistics', component: StatisticsComponent},
-    {path: 'warnings', component: WarningsComponent},
-    {path: 'history', component: HistoryComponent},
-    {path: 'sign_up', component: SignUpComponent},
-    {path: 'visualize-all', component: VisualizeAllComponent},
-    {path: 'visualize-one', component: VisualizeOneComponent},
+      {path: 'dashboard', component: FrontpageComponent},
+      {path: '', component: AuthenticationComponent},
+      {path: 'generator-search', component: GeneratorSearchComponent},
+      {path: 'statistics', component: StatisticsComponent},
+      {path: 'warnings', component: WarningsComponent},
+      {path: 'history', component: HistoryComponent},
+      {path: 'sign_up', component: SignUpComponent},
+      {path: 'visualize-all', component: VisualizeAllComponent},
+      {path: 'visualize-one', component: VisualizeOneComponent},
 
     ]),
 
diff --git a/src/app/authentication/authentication.component.ts b/src/app/authentication/authentication.component.ts
index ca2e123..d7072d7 100644
--- a/src/app/authentication/authentication.component.ts
+++ b/src/app/authentication/authentication.component.ts
@@ -48,7 +48,7 @@ export class AuthenticationComponent implements OnInit {
 
   }
 
-  ngOnInit() { 
+  ngOnInit() {
     localStorage.removeItem('gen_id');
     localStorage.removeItem('org_id');
     localStorage.removeItem('gen_name');
diff --git a/src/app/generator-object.ts b/src/app/generator-object.ts
new file mode 100644
index 0000000..acca0df
--- /dev/null
+++ b/src/app/generator-object.ts
@@ -0,0 +1,19 @@
+export interface GeneratorObject {
+  gen_id: number;
+  gen_name: string;
+  org_id: number;
+  zip: number;
+  state: GeneratorState | null;
+}
+
+export interface GeneratorState {
+  online: boolean;
+  status: string;
+  status_code: number;
+  fault_count: number | null;
+  fault_codes: Array<string>;
+  status_count: number;
+  status_codes: Array<string>;
+  ip: string;
+}
+
diff --git a/src/app/generator-search/generator-search.component.css b/src/app/generator-search/generator-search.component.css
index fb6e2aa..336075e 100644
--- a/src/app/generator-search/generator-search.component.css
+++ b/src/app/generator-search/generator-search.component.css
@@ -11,4 +11,9 @@ a#genLink {
     margin: 10px;
     display: inline-block;
     text-decoration: none;
-} */
\ No newline at end of file
+} */
+
+mat-card.generator-card {
+  width: calc(100% - 70px);
+  height: calc(100% - 70px);
+}
diff --git a/src/app/generator-search/generator-search.component.html b/src/app/generator-search/generator-search.component.html
index 952db49..42085a7 100644
--- a/src/app/generator-search/generator-search.component.html
+++ b/src/app/generator-search/generator-search.component.html
@@ -1,23 +1,32 @@
-<div class="container ">
+<div class="container">
     <div class="row">
         <div class="col-md-12 mx-auto mt-4">
-            <h4 class="text-center mb-3">Your Generators</h4>
-
-            <form id="visToolbar">
-                <div class="text-center mb3">
-                    <br>
-                    <a>
-                        <a class="text-center"*ngFor="let generator of generators$">
-                            <a class="btn btn-primary" style="color:white" (click)="goToGenerator(generator.gen_id, generator.org_id, generator.gen_name)">{{ generator.gen_name }}</a>
-                            <p id="genInfo">
-                                zipcode: {{ generator.zip }} <br>
-                                (insert statistics preview here)
-                            </p>
-                            <br>
-                        </a>
-                    </a>
-                </div>
-            </form>
+          <h4 class="text-center mb-3">Your Generators</h4>
+          <mat-spinner *ngIf="loading$"></mat-spinner>
+          <mat-grid-list cols="3" rowHeight="1:1">
+            <mat-grid-tile *ngFor="let generator of generators$">
+              <mat-card mat-ripple class="generator-card" (click)="goToGenerator(generator)">
+                <mat-card-header>
+                  <mat-card-title>{{ generator.gen_name }}</mat-card-title>
+                  <mat-card-subtitle>{{ generator.state.status }}</mat-card-subtitle>
+                </mat-card-header>
+                <mat-list *ngIf="generator.state.online">
+                  <mat-list-item>
+                    <mat-icon matListIcon>error</mat-icon>
+                    <p matLine>
+                      <span> Active Faults: {{ generator.state.fault_count }} </span>
+                    </p>
+                  </mat-list-item>
+                  <mat-list-item>
+                    <mat-icon matListIcon>settings_ethernet</mat-icon>
+                    <p matLine>
+                      <span> IP Address: {{ generator.state.ip }} </span>
+                    </p>
+                  </mat-list-item>
+                </mat-list>
+              </mat-card>
+            </mat-grid-tile>
+          </mat-grid-list>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/generator-search/generator-search.component.ts b/src/app/generator-search/generator-search.component.ts
index c45e194..dab738a 100644
--- a/src/app/generator-search/generator-search.component.ts
+++ b/src/app/generator-search/generator-search.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { GeneratorService } from '../services/generator.service';
 import { Router } from '@angular/router';
+import { GeneratorObject } from '../generator-object';
+import {LoginService} from '../services/login.service';
 
 @Component({
   selector: 'app-generator-search',
@@ -10,35 +12,39 @@ import { Router } from '@angular/router';
 
 export class GeneratorSearchComponent implements OnInit {
 
-  constructor(public data: GeneratorService, private router: Router) { }
+  constructor(public data: GeneratorService, private router: Router, private login: LoginService) { }
 
-  public generators$: Object;
+  public generators$: Array<GeneratorObject>;
+  public loading$: boolean;
 
-  goToGenerator(gen_id, org_id, gen_name) {
+  goToGenerator(gen: GeneratorObject) {
     this.router.navigateByUrl('/statistics');
     // console.log(gen_id);
     // console.log(org_id);
-    localStorage.setItem('gen_id', gen_id);
-    localStorage.setItem('org_id', org_id);
-    localStorage.setItem('gen_name', gen_name);
+    localStorage.setItem('gen_id', gen.gen_id.toString());
+    localStorage.setItem('org_id', gen.org_id.toString());
+    localStorage.setItem('gen_name', gen.gen_name);
   }
 
-  ngOnInit() {
+  async ngOnInit() {
+    this.loading$ = true;
     localStorage.removeItem('gen_id');
     localStorage.removeItem('org_id');
     localStorage.removeItem('gen_name');
     localStorage.removeItem('data_type');
     localStorage.removeItem('fault_type');
-    const jsonToken = localStorage.getItem('auth_token');
-    try {
-      this.data.getGenerators(jsonToken).subscribe((data) => {
+    const auth_token: string = await this.login.getToken();
+    this.generators$ = await this.data.getGenerators(auth_token);
+    this.loading$ = false;
+    /*try {
+      this.data.getGenerators(jsonToken).subscribe((data: Array<GeneratorObject>) => {
         // console.log(data);
         this.generators$ = data;
         return this.generators$;
       });
     } catch (err) {
       return err;
-    }
+    }*/
     // this.generators$ = this.getGeneratorName();
   }
 
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 6f1e0a3..5938bb4 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import {LoginService} from '../services/login.service';
 
 @Component({
   selector: 'app-header',
@@ -8,7 +9,7 @@ import { Router } from '@angular/router';
 })
 export class HeaderComponent implements OnInit {
 
-  constructor(private router: Router) { }
+  constructor(private router: Router, private login: LoginService) { }
 
   resetAndClear() {
     this.router.navigateByUrl('#');
@@ -16,29 +17,24 @@ export class HeaderComponent implements OnInit {
   }
 
   resetGenerator() {
-    if (localStorage.getItem('auth_token') != null) {
-      this.router.navigateByUrl('/generator-search');
-      localStorage.removeItem('gen_id');
-      localStorage.removeItem('org_id');
-      localStorage.removeItem('gen_name');
-      localStorage.removeItem('data_type');
-    } else {
-      console.log('You need to log in');
-      this.router.navigateByUrl('#');
-    }
+    this.resetAndRedirect('/generator-search');
   }
 
   resetGenAndVisualize() {
-    if (localStorage.getItem('auth_token') != null) {
-      this.router.navigateByUrl('/visualize-all');
+    this.resetAndRedirect('/visualize-all');
+  }
+
+  resetAndRedirect(url: string) {
+    this.login.getToken().then(() => {
+      this.router.navigateByUrl(url);
       localStorage.removeItem('gen_id');
       localStorage.removeItem('org_id');
       localStorage.removeItem('gen_name');
       localStorage.removeItem('data_type');
-    } else {
+    }, () => {
       console.log('You need to log in');
       this.router.navigateByUrl('#');
-    }
+    });
   }
 
   ngOnInit() {
diff --git a/src/app/material.module.ts b/src/app/material.module.ts
index 4c3728f..7a23211 100644
--- a/src/app/material.module.ts
+++ b/src/app/material.module.ts
@@ -4,7 +4,15 @@ import { NgModule } from '@angular/core';
 import { MatDatepickerModule,
         MatNativeDateModule,
         MatFormFieldModule,
-        MatInputModule } from '@angular/material';
+        MatInputModule,
+        MatCardModule,
+        MatButtonModule,
+        MatGridListModule,
+        MatRippleModule,
+        MatProgressSpinnerModule,
+        MatIconModule,
+        MatListModule,
+} from '@angular/material';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
@@ -20,9 +28,16 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     MatFormFieldModule,
     MatNativeDateModule,
     MatInputModule,
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    MatCardModule,
+    MatButtonModule,
+    MatGridListModule,
+    MatRippleModule,
+    MatProgressSpinnerModule,
+    MatIconModule,
+    MatListModule,
   ],
   providers: [ MatDatepickerModule ],
 })
 
-export class MaterialModule {}
\ No newline at end of file
+export class MaterialModule {}
diff --git a/src/app/services/generator.service.ts b/src/app/services/generator.service.ts
index 56a7358..f6afbd1 100644
--- a/src/app/services/generator.service.ts
+++ b/src/app/services/generator.service.ts
@@ -1,18 +1,50 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import {HttpClient, HttpResponse} from '@angular/common/http';
+import {GeneratorObject, GeneratorState} from '../generator-object';
+import {LoginService} from './login.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class GeneratorService {
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient, private login: LoginService) { }
 
-  getGenerators(token) {
-    return this.http.get('http://sd5-backend.engr.uconn.edu/user/generators', {
-      headers: {
-        Authorization: 'Bearer ' + token
-      }
+  getGenerators(token: string): Promise<Array<GeneratorObject>> {
+    return new Promise<Array<GeneratorObject>>((resolve, reject) => {
+      this.http.get('http://sd5-backend.engr.uconn.edu/user/generators', {
+        headers: {
+          Authorization: 'Bearer ' + token
+        }
+      }).subscribe(async (raw_generators: Array<GeneratorObject>) => {
+        const generators: Array<GeneratorObject> = [];
+        for (const generator of raw_generators) {
+          await this.getGeneratorState(generator.gen_id, token).then((state: GeneratorState) => {
+            generator.state = state;
+            generators.push(generator);
+          }, (error) => {
+            reject(error);
+          });
+        }
+        resolve(generators);
+      }, (error) => {
+        reject(error);
+      });
     });
   }
+
+  getGeneratorState(gen_id: number, token: string): Promise<GeneratorState> {
+    return new Promise<GeneratorState>((resolve, reject) => {
+      this.http.get('http://sd5-backend.engr.uconn.edu/generator/' + gen_id + '/state', {
+        headers: {
+          Authorization: 'Bearer ' + token
+        }
+      }).subscribe((state: GeneratorState) => {
+        resolve(state);
+      }, (error) => {
+        reject(error);
+      });
+    });
+  }
+
 }
diff --git a/src/app/services/login.service.ts b/src/app/services/login.service.ts
index 4b780dd..6448efd 100644
--- a/src/app/services/login.service.ts
+++ b/src/app/services/login.service.ts
@@ -3,7 +3,6 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/throw';
 import 'rxjs/add/operator/catch';
-import { ReplaySubject } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -30,4 +29,23 @@ export class LoginService {
       }
     });
   }
+
+  getToken(): Promise<string> {
+    return new Promise<string>((resolve, reject) => {
+      const token = localStorage.getItem('auth_token');
+      if (!token) { reject('No Token'); }
+      this.http.get('http://sd5-backend.engr.uconn.edu/auth/verify', {
+        headers: {
+          Authorization: 'Bearer ' + token
+        },
+        observe: 'response'
+      }).subscribe((response) => {
+        if (response.status === 200) {
+          resolve(token);
+        } else {
+          reject('Invalid Token');
+        }
+      });
+    });
+  }
 }
diff --git a/src/app/statistics/statistics.component.ts b/src/app/statistics/statistics.component.ts
index a2cec69..6ea5ee5 100644
--- a/src/app/statistics/statistics.component.ts
+++ b/src/app/statistics/statistics.component.ts
@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {MetricsService} from '../services/metrics.service';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import { Router } from '@angular/router';
+import {LoginService} from '../services/login.service';
 
 @Component({
   selector: 'app-statistics',
@@ -11,7 +12,7 @@ import { Router } from '@angular/router';
 export class StatisticsComponent implements OnInit {
 
 
-  constructor(public data: MetricsService, private http: HttpClient, private router: Router) {
+  constructor(public data: MetricsService, private http: HttpClient, private router: Router, private login: LoginService) {
 
 
 
@@ -98,11 +99,11 @@ export class StatisticsComponent implements OnInit {
   }
   
 
-  ngOnInit() {
+  async ngOnInit() {
 
     localStorage.removeItem('data_type');
     localStorage.removeItem('fault_type');
-    const jsonToken = localStorage.getItem('auth_token');
+    const jsonToken = await this.login.getToken();
 
    
 
diff --git a/src/app/visualize-all/visualize-all.component.html b/src/app/visualize-all/visualize-all.component.html
index ea76de7..ca3f8d8 100644
--- a/src/app/visualize-all/visualize-all.component.html
+++ b/src/app/visualize-all/visualize-all.component.html
@@ -67,4 +67,4 @@
       </form>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/visualize-all/visualize-all.component.ts b/src/app/visualize-all/visualize-all.component.ts
index a185b57..b4f7836 100644
--- a/src/app/visualize-all/visualize-all.component.ts
+++ b/src/app/visualize-all/visualize-all.component.ts
@@ -5,13 +5,19 @@ import { VisualizeService } from '../services/visualize.service';
 import { Router } from '@angular/router';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import 'rxjs/add/operator/map';
+import { $ } from 'protractor';
+import * as moment from 'moment';
+import { MatDatepickerModule, MatDatepicker } from '@angular/material/datepicker';
+import {GeneratorObject} from '../generator-object';
+import {LoginService} from '../services/login.service';
+
 @Component({
   selector: 'app-visualize-all',
   templateUrl: './visualize-all.component.html',
   styleUrls: ['./visualize-all.component.css']
 })
 export class VisualizeAllComponent implements OnInit {
-  public generators$: Object;
+  public generators$: Array<GeneratorObject>;
   public chart$: Object;
   public unit$: any = null;
   public count: any = null;
@@ -25,12 +31,13 @@ export class VisualizeAllComponent implements OnInit {
   public chart: any = null;
   public signal = false;
   public errorMessage$: any = null;
+  private jsonToken$: string;
   events: string[] = [];
   @ViewChild('time_span') timeSpan: ElementRef;
   @ViewChild('start_time') startTime: ElementRef;
   @ViewChild('end_time') endTime: ElementRef;
 
-  constructor(public data: DataService, public graphData: VisualizeService, public genData: GeneratorService,
+  constructor(public data: DataService, public graphData: VisualizeService, public genData: GeneratorService, private login: LoginService,
     private router: Router, private http: HttpClient) { }
 
   // create real chart based off of user data
@@ -196,11 +203,10 @@ export class VisualizeAllComponent implements OnInit {
     }
 
     if (this.signal === false) {
-      const jsonToken = localStorage.getItem('auth_token');
       const labels = [];
       const data = [];
       try {
-        this.graphData.getDataForVis(jsonToken, timeStart, timeEnd, funcVal, genVal, dataVal, rangeVal)
+        this.graphData.getDataForVis(this.jsonToken$, timeStart, timeEnd, funcVal, genVal, dataVal, rangeVal)
           .subscribe((graphData) => {
             this.chart$ = graphData;
             let sig;
@@ -243,25 +249,21 @@ export class VisualizeAllComponent implements OnInit {
     this.count = 1;
   }
 
-  ngOnInit() {
+  async ngOnInit() {
     localStorage.removeItem('gen_id');
     localStorage.removeItem('org_id');
     localStorage.removeItem('gen_name');
     localStorage.removeItem('data_type');
     localStorage.removeItem('fault_type');
     this.dataNames$ = this.data.getAllNames('layman');
-    const today = new Date().toISOString().split('T')[0];
-    this.today$ = today;
+
+    this.today$ = new Date().toISOString().split('T')[0];
     this.count = 0;
-    const jsonToken = localStorage.getItem('auth_token');
-    try {
-      this.genData.getGenerators(jsonToken).subscribe((genData) => {
-        this.generators$ = genData;
-        this.resetAndRemakeChart();
-        return this.generators$;
-      });
-    } catch (err) {
-      return err;
-    }
+
+
+    this.jsonToken$ = await this.login.getToken();
+    this.generators$ = await this.genData.getGenerators(this.jsonToken$);
+    this.resetAndRemakeChart();
+
   }
 }
diff --git a/src/app/visualize-one/visualize-one.component.ts b/src/app/visualize-one/visualize-one.component.ts
index c456248..e508713 100644
--- a/src/app/visualize-one/visualize-one.component.ts
+++ b/src/app/visualize-one/visualize-one.component.ts
@@ -10,6 +10,8 @@ import 'rxjs/add/operator/map';
 import { $ } from 'protractor';
 import * as moment from 'moment';
 import { MatDatepickerModule, MatDatepicker } from '@angular/material/datepicker';
+import {LoginService} from '../services/login.service';
+import { GeneratorObject } from '../generator-object';
 
 @Component({
   selector: 'app-visualize-one',
@@ -17,7 +19,7 @@ import { MatDatepickerModule, MatDatepicker } from '@angular/material/datepicker
   styleUrls: ['./visualize-one.component.css']
 })
 export class VisualizeOneComponent implements OnInit {
-  public generators$: Object;
+  public generators$: Array<GeneratorObject>;
   public today$: any = null;
   public chart$: Object;
   public genName$: any = null;
@@ -33,6 +35,7 @@ export class VisualizeOneComponent implements OnInit {
   public laymanDataVal$: any = null;
   public chart: any = null;
   public signal$ = false;
+  private jsonToken$: string;
   events: string[] = [];
   public errorMessage: any = null;
   @ViewChild('time_span') timeSpan: ElementRef;
@@ -40,7 +43,7 @@ export class VisualizeOneComponent implements OnInit {
   @ViewChild('end_time') endTime: ElementRef;
 
   constructor(public data: DataService, public graphData: VisualizeService, public genData: GeneratorService,
-    private router: Router, private http: HttpClient) { }
+    private router: Router, private http: HttpClient, private login: LoginService) { }
 
   returnToStatistics() {
     this.router.navigateByUrl('/statistics');
@@ -176,12 +179,11 @@ export class VisualizeOneComponent implements OnInit {
     }
 
     if (this.signal$ === false) {
-      const jsonToken = localStorage.getItem('auth_token');
       const labels = [];
       const data = [];
       try {
         // create chart based on user input
-        this.graphData.getDataForVis(jsonToken, timeStart, timeEnd, funcVal, localStorage.getItem('gen_id'), dataVal, rangeVal)
+        this.graphData.getDataForVis(this.jsonToken$, timeStart, timeEnd, funcVal, localStorage.getItem('gen_id'), dataVal, rangeVal)
           .subscribe((graphData) => {
             this.chart$ = graphData;
             let sig;
@@ -221,27 +223,28 @@ export class VisualizeOneComponent implements OnInit {
     } else if (this.signal$ === true) {
       console.log('invalid entry');
     }
+    this.count = 1;
   }
 
-  ngOnInit() {
-    const today = new Date().toISOString().split('T')[0];
-    this.today$ = today;
+  async ngOnInit() {
+    this.today$ = new Date().toISOString().split('T')[0];
+    this.count = 0;
     this.dataNames$ = this.data.getAllNames('layman');
-    const jsonToken = localStorage.getItem('auth_token');
+    this.jsonToken$ = await this.login.getToken();
     const dataType = localStorage.getItem('data_type');
     if (dataType !== null) {
       this.dataSig$ = false;
     } else {
       this.dataSig$ = true;
     }
+    this.generators$ = await this.genData.getGenerators(this.jsonToken$);
+    this.resetAndRemakeChart();
+    /*
     try {
-      this.genData.getGenerators(jsonToken).subscribe((genData) => {
+      this.genData.getGenerators(this.jsonToken$).subscribe((genData) => {
         this.generators$ = genData;
         this.resetAndRemakeChart();
         return this.generators$;
-      });
-    } catch (err) {
-      return err;
+      });*/
     }
-  }
 }
diff --git a/src/styles.css b/src/styles.css
index 0f2b66f..d0fb837 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,4 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
 
 html, body { height: 100%; }
-body { margin: 0; font-family: 'Roboto', sans-serif; }
\ No newline at end of file
+body { margin: 0; font-family: 'Roboto', sans-serif; }