diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9c5fe31..ca59a13 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -24,7 +24,7 @@ import { LoginComponent } from './login/login.component';
 import {environment} from '../environments/environment';
 import * as firebase from 'firebase/app';
 import { ServiceWorkerModule } from '@angular/service-worker';
-import {LineChartModule} from '@swimlane/ngx-charts';
+import {LineChartModule, NgxChartsModule} from '@swimlane/ngx-charts';
 
 export const firebaseApp = firebase.initializeApp(environment.firebase);
 
@@ -55,6 +55,7 @@ export const firebaseApp = firebase.initializeApp(environment.firebase);
         MatProgressSpinnerModule,
         MatSidenavModule,
         MatToolbarModule,
+        NgxChartsModule,
         ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),
     ],
     providers: [],
diff --git a/src/app/battery/battery.component.html b/src/app/battery/battery.component.html
index ab6cc7a..9d58502 100644
--- a/src/app/battery/battery.component.html
+++ b/src/app/battery/battery.component.html
@@ -1,8 +1,38 @@
-<h1>BATTERY LEVEL: <span class="text-muted">{{batteryService.charging == null ? 'UNKNOWN' : batteryService.average}}</span></h1>
-<mat-card>
-    <h3>EMULATOR: <span class="text-muted">75%</span></h3>
-    <div>
-        <mat-icon style="font-size: 128px; height:128px; width:128px">{{batteryService.icon}}</mat-icon>
-        <i class="wi wi-fw wi-thermometer-exterior"></i> {{tempHist[tempHist.length - 1]}} °C
+<h1>POWER WALL:
+    <span *ngIf="batteryService.batteries.length" class="text-muted">{{batteryService.average * 100}}%</span>
+    <span *ngIf="!batteryService.batteries.length" class="text-muted">UNKNOWN</span>
+</h1>
+<div class="d-flex flex-column flex-md-row">
+    <div style="overflow: auto">
+        <ngx-charts-bar-vertical
+            [results]="batteryService.percentageData"
+            [scheme]="airScheme"
+            [view]="[400, 200]"
+            [xAxis]="true"
+            [yAxis]="true"
+            [yScaleMin]="0"
+            [yScaleMax]="100"
+        ></ngx-charts-bar-vertical>
     </div>
+    <div style="overflow: auto">
+        <ngx-charts-bar-vertical
+            [results]="batteryService.temperatureData"
+            [scheme]="fireScheme"
+            schemeType="linear"
+            [view]="[400, 200]"
+            [xAxis]="true"
+            [yAxis]="true"
+            [yScaleMin]="0"
+            [yScaleMax]="100"
+        ></ngx-charts-bar-vertical>
+    </div>
+</div>
+<mat-card *ngFor="let b of batteryService.batteries" class="mt-3">
+    {{b.name}}
+    <br>
+    {{b.history[0].percentage * 100}}%
+    <br>
+    {{b.history[0].temp}} °C
+    <br>
+    Charging: {{b.history[0].charging}}
 </mat-card>
diff --git a/src/app/battery/battery.component.ts b/src/app/battery/battery.component.ts
index 7648688..ddfb4ea 100644
--- a/src/app/battery/battery.component.ts
+++ b/src/app/battery/battery.component.ts
@@ -1,17 +1,25 @@
 import {Component} from '@angular/core';
 import {BatteryService} from './battery.service';
-import {firebaseApp} from '../app.module';
 
 @Component({
     selector: 'app-batterys',
     templateUrl: './battery.component.html'
 })
 export class BatteryComponent {
-    tempHist = [];
 
-    constructor(public batteryService: BatteryService) {
-        firebaseApp.firestore().collection('Battery').doc('TEMP').onSnapshot(snap => {
-            this.tempHist.push(Math.round(snap.get('temp') * 10) / 10);
-        })
-    }
+    airScheme = {
+        name: 'air',
+        selectable: true,
+        group: 'Continuous',
+        domain: ['#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b']
+    };
+
+    fireScheme = {
+        name: 'flame',
+        selectable: false,
+        group: 'Continuous',
+        domain: ['#00deff', '#3db0ff', '#a274d7', '#c42576', '#9f0000']
+    };
+
+    constructor(public batteryService: BatteryService) { }
 }
diff --git a/src/app/battery/battery.service.ts b/src/app/battery/battery.service.ts
index 6fcfe29..7aac8da 100644
--- a/src/app/battery/battery.service.ts
+++ b/src/app/battery/battery.service.ts
@@ -1,36 +1,56 @@
 import {Injectable} from '@angular/core';
+import {firebaseApp} from '../app.module';
 
 @Injectable({
     providedIn: 'root'
 })
 export class BatteryService {
-    percentage: number[] = [0];
-    charging?: boolean;
+    readonly firestore;
 
-    get average() {
-        return this.percentage.reduce((acc, battery) => acc + battery, 0) / this.percentage.length;
+    average = 0;
+    temperatureData = [];
+    percentageData = [];
+    batteries = [];
+    last: Date;
+
+    constructor() {
+        this.firestore = firebaseApp.firestore();
+        this.firestore.settings({timestampsInSnapshots: true});
+        this.firestore.collection('Battery').doc('TEMP').onSnapshot(snap => {
+            this.last = new Date();
+
+            let data = snap.data();
+            this.batteries = Object.keys(data).map(key => ({name: key, history: data[key].reverse()}));
+            this.average = this.batteries.reduce((acc, battery) => acc + battery.history[0].percentage, 0) / this.batteries.length;
+            this.percentageData = this.batteries.map(battery => ({name: battery.name, value: battery.history[0].percentage * 100}));
+            this.temperatureData = this.batteries.map(battery => ({name: battery.name, value: Math.round(battery.history[0].temp * 10) / 10}));
+        });
     }
 
+
+
     get icon() {
-        if (this.charging == null) return 'battery_unknown';
+        if (!this.batteries.length) return 'battery_alert';
+        if (!this.last || this.last.getTime() < new Date().setMinutes(new Date().getMinutes() - 2).getTime()) return 'battery_warn';
+
+        return 'battery_20';
 
         let temp = 'battery';
-        if (this.charging) temp += '_charging';
+        //if (this.batteries.length) temp += '_charging';
 
-        let average = this.average;
-        if (average <= 20) {
+        if (this.average <= 20) {
             temp += '_20';
-        } else if (average <= 30) {
+        } else if (this.average <= 30) {
             temp += '_30';
-        } else if (average <= 50) {
+        } else if (this.average <= 50) {
             temp += '_50';
-        } else if (average <= 60) {
+        } else if (this.average <= 60) {
             temp += '_60';
-        } else if (average <= 80) {
+        } else if (this.average <= 80) {
             temp += '_80';
-        } else if (average <= 90) {
+        } else if (this.average <= 90) {
             temp += '_90';
-        } else if (average > 90) {
+        } else if (this.average > 90) {
             temp += 'full'
         }
 
diff --git a/src/styles.scss b/src/styles.scss
index 1f7d3c8..946a9e6 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -29,6 +29,12 @@ html, body {
     background-color: #2F323A;
 }
 
+.ngx-charts {
+    text {
+        fill: #ffffff;
+    }
+}
+
 .center {
     position: fixed;
     left: 50%;