diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ea6ebf9..d834dea 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -43,6 +43,9 @@ import { BetComponent } from './control-panel/bet/bet.component';
 import { PanelMenuModule } from 'primeng/panelmenu';
 import { EnergyComponent } from './control-panel/profile/dashboard/energy/energy.component';
 import { SidebarDashboardComponent, SidebarNavItemComponent, SidebarNavDropItemComponent } from './control-panel/profile/dashboard/sidebar/sidebarDashboard.component';
+import { ElectricityComponent } from './control-panel/profile/dashboard/energy/electricity/electricity.component';
+import { GasComponent } from './control-panel/profile/dashboard/energy/gas/gas.component';
+import { WaterComponent } from './control-panel/profile/dashboard/energy/water/water.component';
 
 
 
@@ -82,7 +85,10 @@ export function HttpLoaderFactory(http: HttpClient) {
     EnergyComponent,
     SidebarDashboardComponent,
     SidebarNavItemComponent,
-    SidebarNavDropItemComponent
+    SidebarNavDropItemComponent,
+    ElectricityComponent,
+    GasComponent,
+    WaterComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/control-panel/profile/dashboard/dashboard.component.html b/src/app/control-panel/profile/dashboard/dashboard.component.html
index e48b011..2f00a1f 100644
--- a/src/app/control-panel/profile/dashboard/dashboard.component.html
+++ b/src/app/control-panel/profile/dashboard/dashboard.component.html
@@ -3,5 +3,8 @@
 
     <div id="content">
         <app-energy *ngIf="ActiveTab == 'energy'"></app-energy>
+        <app-electricity *ngIf="ActiveTab == 'energy/electricity'"></app-electricity>
+        <app-gas *ngIf="ActiveTab == 'energy/gas'"></app-gas>
+        <app-water *ngIf="ActiveTab == 'energy/water'"></app-water>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/control-panel/profile/dashboard/dashboard.component.ts b/src/app/control-panel/profile/dashboard/dashboard.component.ts
index 0282245..87fdedf 100644
--- a/src/app/control-panel/profile/dashboard/dashboard.component.ts
+++ b/src/app/control-panel/profile/dashboard/dashboard.component.ts
@@ -13,21 +13,34 @@ export class DashboardComponent implements OnInit {
   ActiveTab = '';
 
   constructor(private _router: Router,
-    private _route: ActivatedRoute) { }
+    private _route: ActivatedRoute) {
+      this.ActivateTab();
+    }
 
   ngOnInit() {
     this._router.events.subscribe(e => {
       if (e instanceof NavigationEnd) {
-        console.log('current route: ', this._router.url.toString());
-        console.log(this._router.url.match(this.UrlRegex)[0]);
-        this.ActiveTab = this._router.url.match(this.UrlRegex)[0];
-        switch (this._router.url.match(this.UrlRegex)[0]) {
-          case 'dashboard/energy':
-            this.ActiveTab = 'energy';
-          break;
-        }
+        this.ActivateTab();
       }
     });
   }
 
+  ActivateTab() {
+    this.ActiveTab = this._router.url.match(this.UrlRegex)[0];
+    switch (this._router.url.match(this.UrlRegex)[0]) {
+      case 'dashboard/energy':
+        this.ActiveTab = 'energy';
+      break;
+      case 'dashboard/energy/electricity':
+        this.ActiveTab = 'energy/electricity';
+      break;
+      case 'dashboard/energy/gas':
+        this.ActiveTab = 'energy/gas';
+      break;
+      case 'dashboard/energy/water':
+        this.ActiveTab = 'energy/water';
+      break;
+    }
+  }
+
 }
diff --git a/src/app/control-panel/profile/dashboard/energy/electricity/electricity.component.css b/src/app/control-panel/profile/dashboard/energy/electricity/electricity.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/control-panel/profile/dashboard/energy/electricity/electricity.component.html b/src/app/control-panel/profile/dashboard/energy/electricity/electricity.component.html
new file mode 100644
index 0000000..2966941
--- /dev/null
+++ b/src/app/control-panel/profile/dashboard/energy/electricity/electricity.component.html
@@ -0,0 +1 @@
+<p>electricity works!</p>
diff --git a/src/app/control-panel/profile/dashboard/energy/electricity/electricity.component.spec.ts b/src/app/control-panel/profile/dashboard/energy/electricity/electricity.component.spec.ts
new file mode 100644
index 0000000..021534b
--- /dev/null
+++ b/src/app/control-panel/profile/dashboard/energy/electricity/electricity.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ElectricityComponent } from './electricity.component';
+
+describe('ElectricityComponent', () => {
+  let component: ElectricityComponent;
+  let fixture: ComponentFixture<ElectricityComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ElectricityComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ElectricityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/control-panel/profile/dashboard/energy/electricity/electricity.component.ts b/src/app/control-panel/profile/dashboard/energy/electricity/electricity.component.ts
new file mode 100644
index 0000000..cc4fd91
--- /dev/null
+++ b/src/app/control-panel/profile/dashboard/energy/electricity/electricity.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-electricity',
+  templateUrl: './electricity.component.html',
+  styleUrls: ['./electricity.component.css']
+})
+export class ElectricityComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/control-panel/profile/dashboard/energy/gas/gas.component.css b/src/app/control-panel/profile/dashboard/energy/gas/gas.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/control-panel/profile/dashboard/energy/gas/gas.component.html b/src/app/control-panel/profile/dashboard/energy/gas/gas.component.html
new file mode 100644
index 0000000..e2ac694
--- /dev/null
+++ b/src/app/control-panel/profile/dashboard/energy/gas/gas.component.html
@@ -0,0 +1 @@
+<p>gas works!</p>
diff --git a/src/app/control-panel/profile/dashboard/energy/gas/gas.component.spec.ts b/src/app/control-panel/profile/dashboard/energy/gas/gas.component.spec.ts
new file mode 100644
index 0000000..54646ab
--- /dev/null
+++ b/src/app/control-panel/profile/dashboard/energy/gas/gas.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GasComponent } from './gas.component';
+
+describe('GasComponent', () => {
+  let component: GasComponent;
+  let fixture: ComponentFixture<GasComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GasComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GasComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/control-panel/profile/dashboard/energy/gas/gas.component.ts b/src/app/control-panel/profile/dashboard/energy/gas/gas.component.ts
new file mode 100644
index 0000000..3f5c05e
--- /dev/null
+++ b/src/app/control-panel/profile/dashboard/energy/gas/gas.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-gas',
+  templateUrl: './gas.component.html',
+  styleUrls: ['./gas.component.css']
+})
+export class GasComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/control-panel/profile/dashboard/energy/water/water.component.css b/src/app/control-panel/profile/dashboard/energy/water/water.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/control-panel/profile/dashboard/energy/water/water.component.html b/src/app/control-panel/profile/dashboard/energy/water/water.component.html
new file mode 100644
index 0000000..22c52f0
--- /dev/null
+++ b/src/app/control-panel/profile/dashboard/energy/water/water.component.html
@@ -0,0 +1 @@
+<p>water works!</p>
diff --git a/src/app/control-panel/profile/dashboard/energy/water/water.component.spec.ts b/src/app/control-panel/profile/dashboard/energy/water/water.component.spec.ts
new file mode 100644
index 0000000..c6f8dea
--- /dev/null
+++ b/src/app/control-panel/profile/dashboard/energy/water/water.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WaterComponent } from './water.component';
+
+describe('WaterComponent', () => {
+  let component: WaterComponent;
+  let fixture: ComponentFixture<WaterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WaterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WaterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/control-panel/profile/dashboard/energy/water/water.component.ts b/src/app/control-panel/profile/dashboard/energy/water/water.component.ts
new file mode 100644
index 0000000..898caf1
--- /dev/null
+++ b/src/app/control-panel/profile/dashboard/energy/water/water.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-water',
+  templateUrl: './water.component.html',
+  styleUrls: ['./water.component.css']
+})
+export class WaterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}