diff --git a/Display/src/app/app-routing.module.ts b/Display/src/app/app-routing.module.ts
index c518228..99ea949 100644
--- a/Display/src/app/app-routing.module.ts
+++ b/Display/src/app/app-routing.module.ts
@@ -4,6 +4,7 @@ import { WeatherComponent } from './weather/weather.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { LaundryComponent } from './laundry/laundry.component';
 import { WeatherChartsComponent } from './weather-charts/weather-charts.component';
+import { WeatherCurrentComponent } from './Weather/weather-current/weather-current.component';
 
 const routes: Routes = [
     {
@@ -16,11 +17,22 @@ const routes: Routes = [
     },
     {
         path: 'weather',
-        component: WeatherComponent
-    },
-    {
-        path: 'weather/charts',
-        component: WeatherChartsComponent
+        component: WeatherComponent,
+        children: [
+            {
+                path: '',
+                redirectTo: 'current',
+                pathMatch: 'full'
+            },
+            {
+                path: 'current',
+                component: WeatherCurrentComponent
+            },
+            {
+                path: 'charts',
+                component: WeatherChartsComponent
+            }
+        ]
     },
     {
         path: 'laundry',
diff --git a/Display/src/app/app.component.html b/Display/src/app/app.component.html
index 698906f..2ddc9e2 100644
--- a/Display/src/app/app.component.html
+++ b/Display/src/app/app.component.html
@@ -13,16 +13,4 @@
     </mat-toolbar-row>
 </mat-toolbar>
 
-<mat-sidenav-container>
-    <mat-sidenav #sidenav mode="side" opened>
-        <mat-nav-list>
-            <a mat-list-item [routerLink]="'/weather'">Current</a>
-            <a mat-list-item [routerLink]="'/weather/charts'">Charts</a>
-        </mat-nav-list>
-    </mat-sidenav>
-    <mat-sidenav-content>
-        <div style="height: 88vh;">
-            <router-outlet></router-outlet>
-        </div>
-    </mat-sidenav-content>
-</mat-sidenav-container>
+<router-outlet></router-outlet>
diff --git a/Display/src/app/app.component.scss b/Display/src/app/app.component.scss
index d080734..a80e4fe 100644
--- a/Display/src/app/app.component.scss
+++ b/Display/src/app/app.component.scss
@@ -1,7 +1,3 @@
 .menu-spacer {
   margin-right: 14px;
 }
-
-mat-sidenav {
-    width: 150px;
-}
diff --git a/Display/src/app/app.module.ts b/Display/src/app/app.module.ts
index be0b089..5acc38b 100644
--- a/Display/src/app/app.module.ts
+++ b/Display/src/app/app.module.ts
@@ -11,6 +11,7 @@ import { WeatherComponent } from './weather/weather.component';
 import { LaundryComponent } from './laundry/laundry.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { WeatherChartsComponent } from './weather-charts/weather-charts.component';
+import { WeatherCurrentComponent } from './Weather/weather-current/weather-current.component';
 
 const config: SocketIoConfig = { url: 'http://home.kaczorzoo.net:9091', options: {} };
 
@@ -20,7 +21,8 @@ const config: SocketIoConfig = { url: 'http://home.kaczorzoo.net:9091', options:
         WeatherComponent,
         LaundryComponent,
         DashboardComponent,
-        WeatherChartsComponent
+        WeatherChartsComponent,
+        WeatherCurrentComponent
     ],
     imports: [
         BrowserModule,
diff --git a/Display/src/app/weather/weather-current/weather-current.component.html b/Display/src/app/weather/weather-current/weather-current.component.html
new file mode 100644
index 0000000..cd189d6
--- /dev/null
+++ b/Display/src/app/weather/weather-current/weather-current.component.html
@@ -0,0 +1,60 @@
+<div style="height: 88vh;">
+    <div class="weather-current">
+        <div *ngIf="latestReading === null">
+            Loading...
+        </div>
+
+        <div *ngIf="latestReading !== null">
+            <table>
+                <tr>
+                    <td class="weather-current-header">
+                        Temperature
+                    </td>
+                    <td>
+                        {{ latestReading.HumidityTemperature.toFixed(2) }}°F
+                    </td>
+                </tr>
+                <tr>
+                    <td class="weather-current-header">
+                        Humidity
+                    </td>
+                    <td>
+                        {{ latestReading.Humidity.toFixed(2) }}%
+                    </td>
+                </tr>
+                <tr>
+                    <td class="weather-current-header">
+                        Pressure
+                    </td>
+                    <td>
+                        {{ (latestReading.Pressure / 100).toFixed(2) }} mbar
+                    </td>
+                </tr>
+                <tr>
+                    <td class="weather-current-header">
+                        Wind
+                    </td>
+                    <td>
+                        {{ latestReading.WindSpeed.toFixed(2) }} {{ latestReading.WindDirection }}
+                    </td>
+                </tr>
+                <tr>
+                    <td class="weather-current-header">
+                        Rain
+                    </td>
+                    <td>
+                        {{ latestReading.Rain.toFixed(2) }}
+                    </td>
+                </tr>
+                <tr>
+                    <td class="weather-current-header">
+                        Light
+                    </td>
+                    <td>
+                        {{ latestReading.LightLevel.toFixed(2) }}
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</div>
diff --git a/Display/src/app/weather/weather-current/weather-current.component.scss b/Display/src/app/weather/weather-current/weather-current.component.scss
new file mode 100644
index 0000000..4281c4e
--- /dev/null
+++ b/Display/src/app/weather/weather-current/weather-current.component.scss
@@ -0,0 +1,10 @@
+.weather-current {
+    margin: 10px;
+    font-size: 14px;
+}
+
+.weather-current-header {
+    font-weight: 500;
+    text-align: right;
+    padding-right: 10px;
+}
diff --git a/Display/src/app/weather/weather-current/weather-current.component.spec.ts b/Display/src/app/weather/weather-current/weather-current.component.spec.ts
new file mode 100644
index 0000000..371d9af
--- /dev/null
+++ b/Display/src/app/weather/weather-current/weather-current.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WeatherCurrentComponent } from './weather-current.component';
+
+describe('WeatherCurrentComponent', () => {
+  let component: WeatherCurrentComponent;
+  let fixture: ComponentFixture<WeatherCurrentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WeatherCurrentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WeatherCurrentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Display/src/app/weather/weather-current/weather-current.component.ts b/Display/src/app/weather/weather-current/weather-current.component.ts
new file mode 100644
index 0000000..3f1d4c2
--- /dev/null
+++ b/Display/src/app/weather/weather-current/weather-current.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { WeatherReading } from 'src/app/weather-reading';
+import { WeatherService } from 'src/app/weather.service';
+
+@Component({
+    selector: 'app-weather-current',
+    templateUrl: './weather-current.component.html',
+    styleUrls: ['./weather-current.component.scss']
+})
+export class WeatherCurrentComponent implements OnInit {
+
+    public latestReading: WeatherReading;
+
+    constructor(private weatherService: WeatherService) { }
+
+    ngOnInit() {
+        this.weatherService.getLatestReading().subscribe(r => this.latestReading = r);
+    }
+}
diff --git a/Display/src/app/weather/weather.component.html b/Display/src/app/weather/weather.component.html
index 665b134..f889ab2 100644
--- a/Display/src/app/weather/weather.component.html
+++ b/Display/src/app/weather/weather.component.html
@@ -1,58 +1,11 @@
-<div class="weather-current">
-    <div *ngIf="latestReading === null">
-        Loading...
-    </div>
-
-    <div *ngIf="latestReading !== null">
-        <table>
-            <tr>
-                <td class="weather-current-header">
-                    Temperature
-                </td>
-                <td>
-                    {{ latestReading.HumidityTemperature.toFixed(2) }}°F
-                </td>
-            </tr>
-            <tr>
-                <td class="weather-current-header">
-                    Humidity
-                </td>
-                <td>
-                    {{ latestReading.Humidity.toFixed(2) }}%
-                </td>
-            </tr>
-            <tr>
-                <td class="weather-current-header">
-                    Pressure
-                </td>
-                <td>
-                    {{ (latestReading.Pressure / 100).toFixed(2) }} mbar
-                </td>
-            </tr>
-            <tr>
-                <td class="weather-current-header">
-                    Wind
-                </td>
-                <td>
-                    {{ latestReading.WindSpeed.toFixed(2) }} {{ latestReading.WindDirection }}
-                </td>
-            </tr>
-            <tr>
-                <td class="weather-current-header">
-                    Rain
-                </td>
-                <td>
-                    {{ latestReading.Rain.toFixed(2) }}
-                </td>
-            </tr>
-            <tr>
-                <td class="weather-current-header">
-                    Light
-                </td>
-                <td>
-                    {{ latestReading.LightLevel.toFixed(2) }}
-                </td>
-            </tr>
-        </table>
-    </div>
-</div>
+<mat-sidenav-container style="height: 88vh;">
+    <mat-sidenav #sidenav mode="side" opened>
+        <mat-nav-list>
+            <a mat-list-item [routerLink]="'/weather/current'">Current</a>
+            <a mat-list-item [routerLink]="'/weather/charts'">Charts</a>
+        </mat-nav-list>
+    </mat-sidenav>
+    <mat-sidenav-content>
+        <router-outlet></router-outlet>
+    </mat-sidenav-content>
+</mat-sidenav-container>
diff --git a/Display/src/app/weather/weather.component.scss b/Display/src/app/weather/weather.component.scss
index 4281c4e..17f87c1 100644
--- a/Display/src/app/weather/weather.component.scss
+++ b/Display/src/app/weather/weather.component.scss
@@ -1,10 +1,3 @@
-.weather-current {
-    margin: 10px;
-    font-size: 14px;
-}
-
-.weather-current-header {
-    font-weight: 500;
-    text-align: right;
-    padding-right: 10px;
+mat-sidenav {
+    width: 150px;
 }
diff --git a/Display/src/app/weather/weather.component.ts b/Display/src/app/weather/weather.component.ts
index c478789..3d19651 100644
--- a/Display/src/app/weather/weather.component.ts
+++ b/Display/src/app/weather/weather.component.ts
@@ -1,6 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { WeatherService } from '../weather.service';
-import { WeatherReading } from '../weather-reading';
 
 @Component({
     selector: 'app-weather',
@@ -8,11 +6,8 @@ import { WeatherReading } from '../weather-reading';
     styleUrls: ['./weather.component.scss']
 })
 export class WeatherComponent implements OnInit {
-    public latestReading: WeatherReading;
-
-    constructor(private weatherService: WeatherService) { }
+    constructor() { }
 
     ngOnInit() {
-        this.weatherService.getLatestReading().subscribe(r => this.latestReading = r);
     }
 }