diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4db5b85..6be872a 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,3 @@
-<h1>App works!</h1>
+<app-nav></app-nav>
+<router-outlet></router-outlet>
+<app-controls></app-controls>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 555d2df..f17acf2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,7 +1,10 @@
+// Imports
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
 import { AppRoutingModule } from './app-routing.module';
+import { HttpClientModule } from '@angular/common/http';
+
+// Components
 import { AppComponent } from './app.component';
 import { HomeComponent } from './components/home/home.component';
 import { ControlsComponent } from './components/controls/controls.component';
@@ -16,7 +19,8 @@ import { NavComponent } from './components/nav/nav.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index f56c8c1..3ee1a41 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { DataService } from 'src/app/services/data.service';
 
 @Component({
   selector: 'app-home',
@@ -7,9 +8,10 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
-  constructor() { }
+  constructor(private data: DataService) { }
 
   ngOnInit() {
+    this.data.testConnection();
   }
 
 }
diff --git a/src/app/services/data.service.ts b/src/app/services/data.service.ts
index 750557b..1c71542 100644
--- a/src/app/services/data.service.ts
+++ b/src/app/services/data.service.ts
@@ -1,9 +1,15 @@
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from 'src/environments/environment.prod';
 
 @Injectable({
   providedIn: 'root'
 })
 export class DataService {
 
-  constructor() { }
+  constructor(private http: HttpClient) { }
+
+  testConnection() {
+    this.http.get(`${environment.apiUrl}/query.php`).subscribe(() => {}, (err) => { throw new Error(err); });
+  }
 }
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 3612073..37075c1 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,3 +1,5 @@
 export const environment = {
-  production: true
+  production: true,
+  // The apiUrl should point to the api folder of the server-side code. E.g. https://jobbel.nl/music (No ending slash)
+  apiUrl: ''
 };