diff --git a/src/app/pages/config/servers/server/server.component.html b/src/app/pages/config/servers/server/server.component.html
index 7d00b45..977e248 100644
--- a/src/app/pages/config/servers/server/server.component.html
+++ b/src/app/pages/config/servers/server/server.component.html
@@ -58,5 +58,4 @@
             </ng-template>
         </ngb-panel>
     </ngb-accordion>
-    <p>{{ cell | json }}</p>
 </div>
diff --git a/src/app/pages/config/servers/servers.component.html b/src/app/pages/config/servers/servers.component.html
index 179bed9..82b6b4b 100644
--- a/src/app/pages/config/servers/servers.component.html
+++ b/src/app/pages/config/servers/servers.component.html
@@ -10,8 +10,10 @@
         <tbody *ngFor="let y of xArray">
         <tr>
             <th>{{ y }}</th>
-            <td *ngFor="let x of xArray"><a
-                    [routerLink]="['/config','server', serverLookup[x][y]]">{{ serverLookup[x][y] }}</a></td>
+            <td *ngFor="let x of xArray">
+                <button class="btn btn-sm btn-outline-primary" [routerLink]="['/config','server', serverLookup[x][y]]" *ngIf="serverLookup[x][y] !== undefined">{{ serverLookup[x][y] }}</button>
+                <button class="btn btn-sm btn-outline-danger" (click)="addNewServer(x, y)" *ngIf="serverLookup[x][y] === undefined">+</button>
+            </td>
         </tr>
         </tbody>
     </table>
diff --git a/src/app/pages/config/servers/servers.component.ts b/src/app/pages/config/servers/servers.component.ts
index 67bad28..f492a99 100644
--- a/src/app/pages/config/servers/servers.component.ts
+++ b/src/app/pages/config/servers/servers.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Server } from "../../../server";
 import { ServerGridModel } from "../../../models/serverGrid.model";
+import { ServerModel } from "../../../models/atlasData/server.model";
+import { Router } from "@angular/router";
 
 @Component({
   selector: 'app-servers',
@@ -15,10 +17,14 @@ export class ServersComponent implements OnInit {
   private serverLookup: number[][] = [];
   private unknownServers: number[] = [];
 
-  constructor(private server: Server) {
+  constructor(private server: Server, private router: Router) {
     this.grid = server.serverGrid;
     this.xArray = Array.from(Array(this.grid.totalGridsX).keys());
     this.yArray = Array.from(Array(this.grid.totalGridsY).keys());
+
+    // Initialise the serverLookup with x at least
+    this.xArray.forEach(i => this.serverLookup[i] = []);
+
     this.grid.servers.forEach((i, index) => {
       if (i.gridX < this.grid.totalGridsX && i.gridY < this.grid.totalGridsY) {
         if (this.serverLookup[i.gridX] === undefined)
@@ -32,4 +38,12 @@ export class ServersComponent implements OnInit {
 
   ngOnInit() {
   }
+
+  private addNewServer(x: number, y: number) {
+    let newServer = new ServerModel();
+    newServer.gridX = x;
+    newServer.gridY = y;
+    const newLength = this.grid.servers.push(newServer);
+    return this.router.navigate(['/config', 'server', newLength - 1]);
+  }
 }