diff --git a/pom.xml b/pom.xml
index fca06536..3aa99728 100644
--- a/pom.xml
+++ b/pom.xml
@@ -1,3 +1,4 @@
+
 <project xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://maven.apache.org/POM/4.0.0"
          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
     <modelVersion>4.0.0</modelVersion>
@@ -70,6 +71,12 @@
             <version>1.4</version>
         </dependency>
 
+        <dependency>
+            <groupId>com.jfoenix</groupId>
+            <artifactId>jfoenix</artifactId>
+            <version>1.8.0</version>
+        </dependency>
+
     </dependencies>
 
     <build>
diff --git a/src/main/java/seng302/App.java b/src/main/java/seng302/App.java
index 8c6f85ac..7739e99b 100644
--- a/src/main/java/seng302/App.java
+++ b/src/main/java/seng302/App.java
@@ -1,6 +1,7 @@
 package seng302;
 
 import ch.qos.logback.classic.Level;
+import com.jfoenix.controls.JFXDecorator;
 import javafx.application.Application;
 import javafx.fxml.FXMLLoader;
 import javafx.scene.Parent;
@@ -14,7 +15,7 @@ import org.apache.commons.cli.Options;
 import org.apache.commons.cli.ParseException;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
-import seng302.model.PolarTable;
+import seng302.visualiser.controllers.ViewManager;
 
 public class App extends Application {
 
@@ -68,24 +69,24 @@ public class App extends Application {
     @Override
     public void start(Stage primaryStage) throws Exception {
         Parent root = FXMLLoader.load(getClass().getResource("/views/StartScreenView.fxml"));
-        primaryStage.setTitle("RaceVision");
-        Scene scene = new Scene(root, 1530, 960);
-        scene.getStylesheets().add(getClass().getResource("/css/master.css").toString());
-        primaryStage.setScene(scene);
-//        primaryStage.setMaxWidth(1530);
-//        primaryStage.setMaxHeight(960);
-        primaryStage.getIcons().add(new Image(getClass().getResourceAsStream("/PP.png")));
-//        primaryStage.setMaximized(true);
+        primaryStage.setTitle("Party Parrots At Sea");
 
+        JFXDecorator decorator = new JFXDecorator(primaryStage, root,false, true, true);
+        decorator.setCustomMaximize(true);
+        decorator.applyCss();
+        decorator.getStylesheets()
+                .add(getClass().getResource("/css/master.css").toExternalForm());
+
+        ViewManager.getInstance().setDecorator(decorator);
+
+        primaryStage.getIcons().add(new Image(getClass().getResourceAsStream("/PP.png")));
+        Scene scene = new Scene(decorator, 1200, 800);
+        primaryStage.setMinHeight(800);
+        primaryStage.setMinWidth(1200);
+        primaryStage.setScene(scene);
         primaryStage.show();
 
-        primaryStage.setOnCloseRequest(e -> {
-//            ClientPacketParser.appClose();
-//            ClientPacketParser.appClose();
-            System.exit(0);
-        });
-
-//        ClientState.primaryStage = primaryStage;
+        primaryStage.setOnCloseRequest(e -> System.exit(0));
     }
 
     public static void main(String[] args) {
diff --git a/src/main/java/seng302/visualiser/GameClient.java b/src/main/java/seng302/visualiser/GameClient.java
index 968d9a92..443342de 100644
--- a/src/main/java/seng302/visualiser/GameClient.java
+++ b/src/main/java/seng302/visualiser/GameClient.java
@@ -31,8 +31,8 @@ import seng302.model.stream.xml.parser.RegattaXMLData;
 import seng302.utilities.StreamParser;
 import seng302.utilities.XMLParser;
 import seng302.visualiser.controllers.FinishScreenViewController;
-import seng302.visualiser.controllers.LobbyController;
-import seng302.visualiser.controllers.LobbyController.CloseStatus;
+import seng302.visualiser.controllers.LobbyController_old;
+import seng302.visualiser.controllers.LobbyController_old.CloseStatus;
 import seng302.visualiser.controllers.RaceViewController;
 
 /**
@@ -51,7 +51,7 @@ public class GameClient {
     private RegattaXMLData regattaData;
     private RaceXMLData courseData;
     private RaceState raceState = new RaceState();
-    private LobbyController lobbyController;
+    private LobbyController_old lobbyController;
 
     private ObservableList<String> clientLobbyList = FXCollections.observableArrayList();
 
@@ -77,7 +77,7 @@ public class GameClient {
                 Platform.runLater(this::loadStartScreen);
             });
             socketThread.addStreamObserver(this::parsePackets);
-            LobbyController lobbyController = loadLobby();
+            LobbyController_old lobbyController = loadLobby();
             lobbyController.setSocketThread(socketThread);
             lobbyController.setPlayerID(socketThread.getClientId());
             lobbyController.setPlayerListSource(clientLobbyList);
@@ -111,7 +111,7 @@ public class GameClient {
             socketThread.addDisconnectionListener((cause) -> {
                 Platform.runLater(this::loadStartScreen);
             });
-            LobbyController lobbyController = loadLobby();
+            LobbyController_old lobbyController = loadLobby();
             lobbyController.setSocketThread(socketThread);
             lobbyController.setPlayerID(socketThread.getClientId());
             lobbyController.setPlayerListSource(clientLobbyList);
@@ -176,7 +176,7 @@ public class GameClient {
      *
      * @return the lobby controller.
      */
-    private LobbyController loadLobby() {
+    private LobbyController_old loadLobby() {
         FXMLLoader fxmlLoader = new FXMLLoader(
             GameClient.class.getResource("/views/LobbyView.fxml"));
         try {
diff --git a/src/main/java/seng302/visualiser/controllers/BoatCustomizeController.java b/src/main/java/seng302/visualiser/controllers/BoatCustomizeController.java
new file mode 100644
index 00000000..fdab7cc8
--- /dev/null
+++ b/src/main/java/seng302/visualiser/controllers/BoatCustomizeController.java
@@ -0,0 +1,26 @@
+package seng302.visualiser.controllers;
+
+import com.jfoenix.controls.JFXColorPicker;
+import javafx.event.ActionEvent;
+import javafx.fxml.FXML;
+import javafx.fxml.Initializable;
+import javafx.scene.paint.Color;
+
+import java.net.URL;
+import java.util.ResourceBundle;
+
+public class BoatCustomizeController implements Initializable{
+
+    @FXML
+    private JFXColorPicker colorPicker;
+
+    @FXML
+    void colorChanged(ActionEvent event) {
+        Color color = colorPicker.getValue();
+    }
+
+    @Override
+    public void initialize(URL location, ResourceBundle resources) {
+        colorPicker.setValue(Color.BISQUE);
+    }
+}
diff --git a/src/main/java/seng302/visualiser/controllers/CustomizationController.java b/src/main/java/seng302/visualiser/controllers/CustomizationController_old.java
similarity index 92%
rename from src/main/java/seng302/visualiser/controllers/CustomizationController.java
rename to src/main/java/seng302/visualiser/controllers/CustomizationController_old.java
index 1a5b5e4d..de3090c1 100644
--- a/src/main/java/seng302/visualiser/controllers/CustomizationController.java
+++ b/src/main/java/seng302/visualiser/controllers/CustomizationController_old.java
@@ -9,7 +9,7 @@ import javafx.stage.Stage;
 import seng302.gameServer.messages.CustomizeRequestType;
 import seng302.visualiser.ClientToServerThread;
 
-public class CustomizationController {
+public class CustomizationController_old {
 
     @FXML
     private TextField nameField;
@@ -20,7 +20,7 @@ public class CustomizationController {
     @FXML
     private Button customizeSubmit;
 
-    private LobbyController lc;
+    private LobbyController_old lc;
     private ClientToServerThread socketThread;
     private Stage windowStage;
 
@@ -54,7 +54,7 @@ public class CustomizationController {
         windowStage.close();
     }
 
-    public void setLobbyController(LobbyController lc) {
+    public void setLobbyController(LobbyController_old lc) {
         this.lc = lc;
     }
 
diff --git a/src/main/java/seng302/visualiser/controllers/FinishScreenViewController.java b/src/main/java/seng302/visualiser/controllers/FinishScreenViewController.java
index b2e49f1a..7a0fe2f2 100644
--- a/src/main/java/seng302/visualiser/controllers/FinishScreenViewController.java
+++ b/src/main/java/seng302/visualiser/controllers/FinishScreenViewController.java
@@ -85,6 +85,6 @@ public class FinishScreenViewController implements Initializable {
     }
 
     public void switchToStartScreenView() {
-        setContentPane("/views/StartScreenView.fxml");
+        setContentPane("/views/StartScreenView_old.fxml");
     }
 }
diff --git a/src/main/java/seng302/visualiser/controllers/LobbyController.java b/src/main/java/seng302/visualiser/controllers/LobbyController.java
index 4dc5293f..6cd9a2e2 100644
--- a/src/main/java/seng302/visualiser/controllers/LobbyController.java
+++ b/src/main/java/seng302/visualiser/controllers/LobbyController.java
@@ -1,248 +1,68 @@
 package seng302.visualiser.controllers;
 
-import com.sun.media.jfxmedia.logging.Logger;
+import com.jfoenix.controls.JFXButton;
+import com.jfoenix.controls.JFXDialog;
+import com.jfoenix.controls.JFXDialog.DialogTransition;
 import java.io.IOException;
-import java.util.ArrayList;
-import java.util.Collections;
-import java.util.List;
+import java.net.URL;
+import java.util.ResourceBundle;
 import javafx.application.Platform;
-import javafx.collections.ListChangeListener;
-import javafx.collections.ObservableList;
 import javafx.fxml.FXML;
 import javafx.fxml.FXMLLoader;
-import javafx.scene.Parent;
-import javafx.scene.Scene;
-import javafx.scene.control.Button;
-import javafx.scene.control.TextArea;
-import javafx.scene.image.Image;
-import javafx.scene.image.ImageView;
-import javafx.scene.paint.Color;
-import javafx.scene.text.Text;
-import javafx.stage.Stage;
-import seng302.gameServer.GameStages;
-import seng302.gameServer.GameState;
-import seng302.model.Colors;
-import seng302.model.RaceState;
-import seng302.visualiser.ClientToServerThread;
+import javafx.fxml.Initializable;
+import javafx.scene.control.ScrollPane;
+import javafx.scene.layout.StackPane;
+import javafx.scene.layout.VBox;
 
-/**
- * A class describing the actions of the lobby screen
- * Created by wmu16 on 10/07/17.
- */
-public class LobbyController {
-
-    public enum CloseStatus {
-        LEAVE,
-        READY
-    }
-
-    @FunctionalInterface
-    public interface LobbyCloseListener {
-        void notify(CloseStatus exitCause);
-    }
+public class LobbyController implements Initializable {
 
     @FXML
-    private Text lobbyIpText;
-    @FXML
-    private Button readyButton;
-    @FXML
-    private Button customizeButton;
-    @FXML
-    private TextArea playerOneTxt;
-    @FXML
-    private TextArea playerTwoTxt;
-    @FXML
-    private TextArea playerThreeTxt;
-    @FXML
-    private TextArea playerFourTxt;
-    @FXML
-    private TextArea playerFiveTxt;
-    @FXML
-    private TextArea playerSixTxt;
-    @FXML
-    private TextArea playerSevenTxt;
-    @FXML
-    private TextArea playerEightTxt;
-    @FXML
-    private ImageView firstImageView;
-    @FXML
-    private ImageView secondImageView;
-    @FXML
-    private ImageView thirdImageView;
-    @FXML
-    private ImageView fourthImageView;
-    @FXML
-    private ImageView fifthImageView;
-    @FXML
-    private ImageView sixthImageView;
-    @FXML
-    private ImageView seventhImageView;
-    @FXML
-    private ImageView eighthImageView;
-    @FXML
-    private Text timeUntilStart;
-    @FXML
-    private Text courseNameText;
+    private VBox playerListVBox;
 
-    private List<ImageView> imageViews = new ArrayList<>();
-    private List<TextArea> listViews = new ArrayList<>();
-    private RaceState raceState;
+    @FXML
+    private ScrollPane playerListScrollpane;
 
-    private ClientToServerThread socketThread;
+    @FXML
+    private JFXButton customizeButton;
 
-    private Stage customizeStage;
+    @FXML
+    private StackPane serverListMainStackPane;
 
-    private Color playersColor;
+    @Override
+    public void initialize(URL location, ResourceBundle resources) {
+        Platform.runLater(() -> {
+            Integer max = 6;
+            for (int i = 0; i < max; i++) {
+                VBox pane = null;
 
-    private int MAX_NUM_PLAYERS = 8;
-    private Integer playerID;
+                FXMLLoader loader = new FXMLLoader(
+                    getClass().getResource("/views/cells/PlayerCell.fxml"));
 
-    private List<LobbyCloseListener> lobbyListeners = new ArrayList<>();
-    private ObservableList<String> players;
+                loader.setController(new PlayerCell("Player " + i));
 
-    /**
-     * Add all FXObjects to lists and initialize images.
-     */
-    public void initialize() {
-        Collections.addAll(listViews,
-            playerOneTxt, playerTwoTxt, playerThreeTxt, playerFourTxt, playerFiveTxt, playerSixTxt,
-            playerSevenTxt, playerEightTxt
-        );
-        Collections.addAll(imageViews,
-            firstImageView, secondImageView, thirdImageView, fourthImageView,
-            fifthImageView, sixthImageView, seventhImageView, eighthImageView
-        );
-        initialiseImageView();
+                try {
+                    pane = loader.load();
+                } catch (IOException e) {
+                    e.printStackTrace();
+                }
 
-        timeUntilStart.setText("Waiting For Host...");
-    }
-
-    /**
-     * Updates player names.
-     */
-    private void updatePlayers() {
-        //Update players if one added.
-        for (int i = 0; i < players.size(); i++) {
-            listViews.get(i).setText(players.get(i));
-            if (playerID == (i + 1)) {
-                listViews.get(i).setText(listViews.get(i).getText() + " (YOU)");
+                playerListVBox.getChildren().add(pane);
             }
-            imageViews.get(i).setVisible(true);
-        }
-        //Update empty text fields if player left.
-        for (int i = MAX_NUM_PLAYERS-1; i >= players.size(); i--) {
-            listViews.get(i).setText("");
-            imageViews.get(i).setVisible(false);
-        }
-    }
+        });
 
-    /**
-     * Sets all images and hides them till players join.
-     */
-    private void initialiseImageView() {
-        for (ImageView viewer : imageViews) {
-            viewer.setImage(
-                new Image(
-                    RaceViewController.class.getResourceAsStream(
-                        "/pics/sail.png")
-                )
-            );
-            viewer.setVisible(false);
-        }
-    }
 
-    @FXML
-    public void customize() {
-        Parent root;
-        try {
-            FXMLLoader fxmlLoader = new FXMLLoader(LobbyController.class.getResource("/views/customizeView.fxml"));
-            root = fxmlLoader.load();
-            root.getStylesheets().add("/css/master.css");
-            customizeStage = new Stage();
-            customizeStage.setTitle("Customize Boat");
-            customizeStage.setScene(new Scene(root, 700, 450));
-            CustomizationController cc = fxmlLoader.getController();
-            cc.setServerThread(this.socketThread);
-            cc.setPlayerName(this.players.get(playerID - 1));
+        Platform.runLater(() -> {
+            FXMLLoader dialogContent = new FXMLLoader(getClass().getResource(
+                "/views/dialogs/BoatCustomizeDialog.fxml"));
 
-            if (this.playersColor == null) {
-                this.playersColor = Colors.getColor(playerID - 1);
+            try {
+                JFXDialog dialog = new JFXDialog(serverListMainStackPane, dialogContent.load(),
+                    DialogTransition.CENTER);
+                customizeButton.setOnAction(action -> dialog.show());
+            } catch (IOException e) {
+                e.printStackTrace();
             }
+        });
 
-            cc.setPlayerColor(this.playersColor);
-            cc.setStage(customizeStage); // pass the stage through so it can be closed later.
-            cc.setLobbyController(this);
-            customizeStage.show();
-        } catch (IOException e) {
-            Logger.logMsg(4, "Failed to load Customization View from resources.");
-        }
     }
-
-    public void setSocketThread(ClientToServerThread thread) {
-        this.socketThread = thread;
-    }
-
-    @FXML
-    public void leaveLobbyButtonPressed() {
-        // TODO: 10/07/17 wmu16 - Finish function!
-        GameState.setCurrentStage(GameStages.CANCELLED);
-        // TODO: 20/07/17 wmu16 - Implement some way of terminating the game
-        for (LobbyCloseListener readyListener : lobbyListeners)
-            readyListener.notify(CloseStatus.LEAVE);
-    }
-
-    @FXML
-    public void readyButtonPressed() {
-        GameState.setCurrentStage(GameStages.PRE_RACE);
-        // Do countdown logic here
-
-        for (LobbyCloseListener readyListener : lobbyListeners)
-            readyListener.notify(CloseStatus.READY);
-        customizeButton.setDisable(true);
-    }
-
-    public void setTitle (String title) {
-        lobbyIpText.setText(title);
-    }
-
-    public void setCourseName(String courseName){
-        courseNameText.setText(courseName);
-    }
-
-    public void addCloseListener(LobbyCloseListener listener) {
-        lobbyListeners.add(listener);
-    }
-
-    public void setPlayerListSource (ObservableList<String> players) {
-        this.players = players;
-        players.addListener((ListChangeListener<? super String>) (lcl) ->
-            Platform.runLater(this::updatePlayers)
-        );
-        Platform.runLater(this::updatePlayers);
-    }
-
-    public void setPlayerID(Integer id) {
-        playerID = id;
-    }
-
-    public void updateRaceState(RaceState raceState){
-        this.raceState = raceState;
-        /*if (this.customizeStage != null) {
-            this.customizeStage.close();
-        }*/ // TODO: 17/08/17 ajm412: close the customization window if the host starts the game while customizing 
-        if (!customizeButton.isDisabled()) {
-            customizeButton.setDisable(true);
-        }
-        timeUntilStart.setText("Starting in: " + raceState.getRaceTimeStr());
-    }
-
-    public void disableReadyButton () {
-        readyButton.setDisable(true);
-        readyButton.setVisible(false);
-    }
-
-    public void setPlayersColor(Color playerColor) {
-        this.playersColor = playerColor;
-    }
-
 }
diff --git a/src/main/java/seng302/visualiser/controllers/LobbyController_old.java b/src/main/java/seng302/visualiser/controllers/LobbyController_old.java
new file mode 100644
index 00000000..614f8ba1
--- /dev/null
+++ b/src/main/java/seng302/visualiser/controllers/LobbyController_old.java
@@ -0,0 +1,248 @@
+package seng302.visualiser.controllers;
+
+import com.sun.media.jfxmedia.logging.Logger;
+import java.io.IOException;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+import javafx.application.Platform;
+import javafx.collections.ListChangeListener;
+import javafx.collections.ObservableList;
+import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
+import javafx.scene.Parent;
+import javafx.scene.Scene;
+import javafx.scene.control.Button;
+import javafx.scene.control.TextArea;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import javafx.scene.paint.Color;
+import javafx.scene.text.Text;
+import javafx.stage.Stage;
+import seng302.gameServer.GameStages;
+import seng302.gameServer.GameState;
+import seng302.model.Colors;
+import seng302.model.RaceState;
+import seng302.visualiser.ClientToServerThread;
+
+/**
+ * A class describing the actions of the lobby screen
+ * Created by wmu16 on 10/07/17.
+ */
+public class LobbyController_old {
+
+    public enum CloseStatus {
+        LEAVE,
+        READY
+    }
+
+    @FunctionalInterface
+    public interface LobbyCloseListener {
+        void notify(CloseStatus exitCause);
+    }
+
+    @FXML
+    private Text lobbyIpText;
+    @FXML
+    private Button readyButton;
+    @FXML
+    private Button customizeButton;
+    @FXML
+    private TextArea playerOneTxt;
+    @FXML
+    private TextArea playerTwoTxt;
+    @FXML
+    private TextArea playerThreeTxt;
+    @FXML
+    private TextArea playerFourTxt;
+    @FXML
+    private TextArea playerFiveTxt;
+    @FXML
+    private TextArea playerSixTxt;
+    @FXML
+    private TextArea playerSevenTxt;
+    @FXML
+    private TextArea playerEightTxt;
+    @FXML
+    private ImageView firstImageView;
+    @FXML
+    private ImageView secondImageView;
+    @FXML
+    private ImageView thirdImageView;
+    @FXML
+    private ImageView fourthImageView;
+    @FXML
+    private ImageView fifthImageView;
+    @FXML
+    private ImageView sixthImageView;
+    @FXML
+    private ImageView seventhImageView;
+    @FXML
+    private ImageView eighthImageView;
+    @FXML
+    private Text timeUntilStart;
+    @FXML
+    private Text courseNameText;
+
+    private List<ImageView> imageViews = new ArrayList<>();
+    private List<TextArea> listViews = new ArrayList<>();
+    private RaceState raceState;
+
+    private ClientToServerThread socketThread;
+
+    private Stage customizeStage;
+
+    private Color playersColor;
+
+    private int MAX_NUM_PLAYERS = 8;
+    private Integer playerID;
+
+    private List<LobbyCloseListener> lobbyListeners = new ArrayList<>();
+    private ObservableList<String> players;
+
+    /**
+     * Add all FXObjects to lists and initialize images.
+     */
+    public void initialize() {
+        Collections.addAll(listViews,
+            playerOneTxt, playerTwoTxt, playerThreeTxt, playerFourTxt, playerFiveTxt, playerSixTxt,
+            playerSevenTxt, playerEightTxt
+        );
+        Collections.addAll(imageViews,
+            firstImageView, secondImageView, thirdImageView, fourthImageView,
+            fifthImageView, sixthImageView, seventhImageView, eighthImageView
+        );
+        initialiseImageView();
+
+        timeUntilStart.setText("Waiting For Host...");
+    }
+
+    /**
+     * Updates player names.
+     */
+    private void updatePlayers() {
+        //Update players if one added.
+        for (int i = 0; i < players.size(); i++) {
+            listViews.get(i).setText(players.get(i));
+            if (playerID == (i + 1)) {
+                listViews.get(i).setText(listViews.get(i).getText() + " (YOU)");
+            }
+            imageViews.get(i).setVisible(true);
+        }
+        //Update empty text fields if player left.
+        for (int i = MAX_NUM_PLAYERS-1; i >= players.size(); i--) {
+            listViews.get(i).setText("");
+            imageViews.get(i).setVisible(false);
+        }
+    }
+
+    /**
+     * Sets all images and hides them till players join.
+     */
+    private void initialiseImageView() {
+        for (ImageView viewer : imageViews) {
+            viewer.setImage(
+                new Image(
+                    RaceViewController.class.getResourceAsStream(
+                        "/pics/sail.png")
+                )
+            );
+            viewer.setVisible(false);
+        }
+    }
+
+    @FXML
+    public void customize() {
+        Parent root;
+        try {
+            FXMLLoader fxmlLoader = new FXMLLoader(LobbyController_old.class.getResource("/views/customizeView.fxml"));
+            root = fxmlLoader.load();
+            root.getStylesheets().add("/css/master.css");
+            customizeStage = new Stage();
+            customizeStage.setTitle("Customize Boat");
+            customizeStage.setScene(new Scene(root, 700, 450));
+            CustomizationController_old cc = fxmlLoader.getController();
+            cc.setServerThread(this.socketThread);
+            cc.setPlayerName(this.players.get(playerID - 1));
+
+            if (this.playersColor == null) {
+                this.playersColor = Colors.getColor(playerID - 1);
+            }
+
+            cc.setPlayerColor(this.playersColor);
+            cc.setStage(customizeStage); // pass the stage through so it can be closed later.
+            cc.setLobbyController(this);
+            customizeStage.show();
+        } catch (IOException e) {
+            Logger.logMsg(4, "Failed to load Customization View from resources.");
+        }
+    }
+
+    public void setSocketThread(ClientToServerThread thread) {
+        this.socketThread = thread;
+    }
+
+    @FXML
+    public void leaveLobbyButtonPressed() {
+        // TODO: 10/07/17 wmu16 - Finish function!
+        GameState.setCurrentStage(GameStages.CANCELLED);
+        // TODO: 20/07/17 wmu16 - Implement some way of terminating the game
+        for (LobbyCloseListener readyListener : lobbyListeners)
+            readyListener.notify(CloseStatus.LEAVE);
+    }
+
+    @FXML
+    public void readyButtonPressed() {
+        GameState.setCurrentStage(GameStages.PRE_RACE);
+        // Do countdown logic here
+
+        for (LobbyCloseListener readyListener : lobbyListeners)
+            readyListener.notify(CloseStatus.READY);
+        customizeButton.setDisable(true);
+    }
+
+    public void setTitle (String title) {
+        lobbyIpText.setText(title);
+    }
+
+    public void setCourseName(String courseName){
+        courseNameText.setText(courseName);
+    }
+
+    public void addCloseListener(LobbyCloseListener listener) {
+        lobbyListeners.add(listener);
+    }
+
+    public void setPlayerListSource (ObservableList<String> players) {
+        this.players = players;
+        players.addListener((ListChangeListener<? super String>) (lcl) ->
+            Platform.runLater(this::updatePlayers)
+        );
+        Platform.runLater(this::updatePlayers);
+    }
+
+    public void setPlayerID(Integer id) {
+        playerID = id;
+    }
+
+    public void updateRaceState(RaceState raceState){
+        this.raceState = raceState;
+        /*if (this.customizeStage != null) {
+            this.customizeStage.close();
+        }*/ // TODO: 17/08/17 ajm412: close the customization window if the host starts the game while customizing 
+        if (!customizeButton.isDisabled()) {
+            customizeButton.setDisable(true);
+        }
+        timeUntilStart.setText("Starting in: " + raceState.getRaceTimeStr());
+    }
+
+    public void disableReadyButton () {
+        readyButton.setDisable(true);
+        readyButton.setVisible(false);
+    }
+
+    public void setPlayersColor(Color playerColor) {
+        this.playersColor = playerColor;
+    }
+
+}
diff --git a/src/main/java/seng302/visualiser/controllers/PlayerCell.java b/src/main/java/seng302/visualiser/controllers/PlayerCell.java
new file mode 100644
index 00000000..6d54967b
--- /dev/null
+++ b/src/main/java/seng302/visualiser/controllers/PlayerCell.java
@@ -0,0 +1,48 @@
+package seng302.visualiser.controllers;
+
+import javafx.fxml.FXML;
+import javafx.scene.control.Label;
+import javafx.scene.effect.DropShadow;
+import javafx.scene.layout.GridPane;
+import javafx.scene.paint.Color;
+
+
+public class PlayerCell {
+    @FXML
+    private Label playerName;
+
+    @FXML
+    private GridPane playerListCell;
+
+    private String name;
+
+    public PlayerCell(String playerName) {
+        this.name = playerName;
+    }
+
+    public void initialize() {
+        playerName.setText(name);
+
+        DropShadow dropShadow = new DropShadow();
+        dropShadow.setRadius(10.0);
+        dropShadow.setOffsetX(3.0);
+        dropShadow.setOffsetY(4.0);
+        dropShadow.setColor(Color.color(0, 0, 0, 0.1));
+        playerListCell.setEffect(dropShadow);
+
+        DropShadow dropShadow2 = new DropShadow();
+        dropShadow2.setRadius(10.0);
+        dropShadow2.setOffsetX(5.0);
+        dropShadow2.setOffsetY(6.0);
+        dropShadow2.setColor(Color.color(0, 0, 0, 0.3));
+
+        playerListCell.setOnMouseEntered(event -> {
+            playerListCell.setEffect(dropShadow2);
+        });
+
+        playerListCell.setOnMouseExited(event -> {
+            playerListCell.setEffect(dropShadow);
+        });
+
+    }
+}
diff --git a/src/main/java/seng302/visualiser/controllers/ServerCell.java b/src/main/java/seng302/visualiser/controllers/ServerCell.java
new file mode 100644
index 00000000..c423a0ac
--- /dev/null
+++ b/src/main/java/seng302/visualiser/controllers/ServerCell.java
@@ -0,0 +1,73 @@
+package seng302.visualiser.controllers;
+
+import com.jfoenix.controls.JFXButton;
+import com.jfoenix.controls.JFXDecorator;
+import java.io.IOException;
+import java.net.URL;
+import java.util.ResourceBundle;
+import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
+import javafx.fxml.Initializable;
+import javafx.scene.Parent;
+import javafx.scene.control.Label;
+import javafx.scene.effect.DropShadow;
+import javafx.scene.layout.GridPane;
+import javafx.scene.paint.Color;
+
+public class ServerCell implements Initializable {
+
+    @FXML
+    private Label serverName;
+
+    @FXML
+    private GridPane serverListCell;
+
+    @FXML
+    private JFXButton serverConnButton;
+
+    private String name;
+
+
+    public ServerCell(String name) {
+        this.name = name;
+    }
+
+
+    public void initialize(URL location, ResourceBundle resources) {
+        serverName.setText(name);
+
+        DropShadow dropShadow = new DropShadow();
+        dropShadow.setRadius(10.0);
+        dropShadow.setOffsetX(3.0);
+        dropShadow.setOffsetY(4.0);
+        dropShadow.setColor(Color.color(0, 0, 0, 0.1));
+        serverListCell.setEffect(dropShadow);
+
+        DropShadow dropShadow2 = new DropShadow();
+        dropShadow2.setRadius(10.0);
+        dropShadow2.setOffsetX(5.0);
+        dropShadow2.setOffsetY(6.0);
+        dropShadow2.setColor(Color.color(0, 0, 0, 0.3));
+
+        serverListCell.setOnMouseEntered(event -> {
+            serverListCell.setEffect(dropShadow2);
+        });
+
+        serverListCell.setOnMouseExited(event -> {
+            serverListCell.setEffect(dropShadow);
+        });
+    }
+
+    public void createServer() {
+        JFXDecorator decorator = (JFXDecorator) serverConnButton.getScene().getRoot();
+        System.out.println("Connecting to " + serverName.getText());
+        FXMLLoader fxmlLoader = new FXMLLoader();
+        try {
+            Parent root = FXMLLoader.load(StartScreenController.class.getResource("/views/LobbyView.fxml"));
+            decorator.setContent(root);
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+    }
+
+}
diff --git a/src/main/java/seng302/visualiser/controllers/ServerCreationController.java b/src/main/java/seng302/visualiser/controllers/ServerCreationController.java
new file mode 100644
index 00000000..805237e1
--- /dev/null
+++ b/src/main/java/seng302/visualiser/controllers/ServerCreationController.java
@@ -0,0 +1,62 @@
+package seng302.visualiser.controllers;
+
+import com.jfoenix.controls.JFXButton;
+import com.jfoenix.controls.JFXDecorator;
+import com.jfoenix.controls.JFXSlider;
+import java.io.IOException;
+import java.net.URL;
+import java.util.ResourceBundle;
+import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
+import javafx.fxml.Initializable;
+import javafx.scene.Parent;
+import javafx.scene.control.Label;
+import javafx.scene.layout.StackPane;
+
+public class ServerCreationController implements Initializable {
+
+    @FXML
+    private JFXButton submitBtn;
+
+    @FXML
+    private JFXSlider maxPlayers;
+
+    @FXML
+    private Label maxPlayersLabel;
+
+    public ServerCreationController() {
+
+    }
+
+
+    public void initialize(URL location, ResourceBundle resources) {
+        updateMaxPlayerLabel();
+        maxPlayers.valueProperty().addListener((observable, oldValue, newValue) -> {
+            updateMaxPlayerLabel();
+        });
+    }
+
+    public void createServer() {
+        System.out.println(submitBtn.getScene().getRoot());
+        JFXDecorator decorator = (JFXDecorator) submitBtn.getScene().getRoot();
+        System.out.println(decorator.getChildren());
+        StackPane stackPane = (StackPane) decorator.getChildren().get(1);
+
+        FXMLLoader fxmlLoader = new FXMLLoader();
+
+        try {
+            Parent root = FXMLLoader.load(StartScreenController.class.getResource("/views/LobbyView.fxml"));
+
+            ViewManager.getInstance().getGameClient().runAsHost("localhost", 4941);
+
+            ViewManager.getInstance().setScene(root);
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+    }
+
+    private void updateMaxPlayerLabel() {
+        maxPlayers.setValue(Math.floor(maxPlayers.getValue()));
+        maxPlayersLabel.setText(Double.toString(maxPlayers.getValue()));
+    }
+}
diff --git a/src/main/java/seng302/visualiser/controllers/ServerListController.java b/src/main/java/seng302/visualiser/controllers/ServerListController.java
new file mode 100644
index 00000000..8cc8877f
--- /dev/null
+++ b/src/main/java/seng302/visualiser/controllers/ServerListController.java
@@ -0,0 +1,66 @@
+package seng302.visualiser.controllers;
+
+import com.jfoenix.controls.JFXButton;
+import com.jfoenix.controls.JFXDialog;
+import com.jfoenix.controls.JFXDialog.DialogTransition;
+import java.io.IOException;
+import java.net.URL;
+import java.util.ResourceBundle;
+import javafx.application.Platform;
+import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
+import javafx.fxml.Initializable;
+import javafx.scene.control.ScrollPane;
+import javafx.scene.layout.StackPane;
+import javafx.scene.layout.VBox;
+
+public class ServerListController implements Initializable {
+
+    @FXML
+    private VBox serverListVBox;
+    @FXML
+    private ScrollPane serverListScrollPane;
+    @FXML
+    private StackPane serverListMainStackPane;
+    @FXML
+    private JFXButton serverListHostButton;
+
+    private void refreshServerList(){
+
+    }
+
+    public void initialize(URL location, ResourceBundle resources) {
+
+        serverListVBox.minWidthProperty().bind(serverListScrollPane.widthProperty());
+
+//        for (int i = 0; i < 20; i++) {
+//            VBox pane = null;
+//
+//            FXMLLoader loader = new FXMLLoader(
+//                getClass().getResource("/views/cells/ServerCell.fxml"));
+//
+//            loader.setController(new ServerCell("Server " + i));
+//
+//            try {
+//                pane = loader.load();
+//            } catch (IOException e) {
+//                e.printStackTrace();
+//            }
+//
+//            serverListVBox.getChildren().add(pane);
+//        }
+
+        Platform.runLater(() -> {
+            FXMLLoader dialogContent = new FXMLLoader(getClass().getResource(
+                "/views/dialogs/ServerCreationDialog.fxml"));
+
+            try {
+                JFXDialog dialog = new JFXDialog(serverListMainStackPane, dialogContent.load(),
+                    DialogTransition.CENTER);
+                serverListHostButton.setOnAction(action -> dialog.show());
+            } catch (IOException e) {
+                e.printStackTrace();
+            }
+        });
+    }
+}
diff --git a/src/main/java/seng302/visualiser/controllers/StartScreenController.java b/src/main/java/seng302/visualiser/controllers/StartScreenController.java
index 1a9db1a1..eced061e 100644
--- a/src/main/java/seng302/visualiser/controllers/StartScreenController.java
+++ b/src/main/java/seng302/visualiser/controllers/StartScreenController.java
@@ -1,168 +1,65 @@
 package seng302.visualiser.controllers;
 
-import java.net.Inet4Address;
-import java.net.InetAddress;
-import java.net.NetworkInterface;
+import com.jfoenix.controls.JFXButton;
+
+import java.io.IOException;
 import java.net.URL;
-import java.util.Enumeration;
 import java.util.ResourceBundle;
 import javafx.fxml.FXML;
+import javafx.fxml.FXMLLoader;
 import javafx.fxml.Initializable;
-import javafx.scene.control.TextField;
-import javafx.scene.layout.AnchorPane;
-import javafx.scene.layout.GridPane;
-import seng302.gameServer.GameState;
-import seng302.visualiser.GameClient;
+import javafx.scene.Node;
+import javafx.scene.control.Label;
+import javafx.scene.effect.DropShadow;
+import javafx.scene.paint.Color;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 
-/**
- * A Class describing the actions of the start screen controller
- * Created by wmu16 on 10/07/17.
- */
 public class StartScreenController implements Initializable {
 
     @FXML
-    private TextField ipTextField;
-    @FXML
-    private TextField portTextField;
-    @FXML
-    private GridPane startScreen2;
-    @FXML
-    private AnchorPane holder;
+    private Label headText;
 
-    GameClient gameClient;
-
-    public void initialize(URL url,  ResourceBundle resourceBundle) {
-//        gameClient = new GameClient(holder);
-    }
-//
-//    /**
-//     * Loads the fxml content into the parent pane
-//     * @param jfxUrl
-//     * @return the controller of the fxml
-//     */
-//    private Object setContentPane(String jfxUrl) {
-//        try {
-//            AnchorPane contentPane = (AnchorPane) startScreen2.getParent();
-//            contentPane.getChildren().removeAll();
-//            contentPane.getChildren().clear();
-//            contentPane.getStylesheets().add(getClass().getResource("/css/master.css").toString());
-//            FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource(jfxUrl));
-//            contentPane.getChildren().addAll((Pane) fxmlLoader.load());
-//
-//            return fxmlLoader.getController();
-//        } catch (IOException e) {
-//            e.printStackTrace();
-//        }
-//        return null;
-//    }
-
-
-    /**
-     * ATTEMPTS TO:
-     * Sets up a new game state with your IP address as designated as the host.
-     * Starts a thread to listen for incoming connections.
-     * Starts a client to server thread and connects to own ip.
-     * Switches to the lobby screen
-     */
     @FXML
-    public void hostButtonPressed() {
-//        new GameState(getLocalHostIp());
-        gameClient = new GameClient(holder);
-        gameClient.runAsHost(getLocalHostIp(), 4942);
-//        try {
-////            String ipAddress = InetAddress.getLocalHost().getHostAddress();
-////            new GameState(ipAddress);
-////            new MainServerThread();
-////            ClientToServerThread clientToServerThread = new ClientToServerThread("localhost", 4950);
-////            controller.setClientToServerThread(clientToServerThread);
-//            // get the lobby controller so that we can pass the game server thread to it
-//            new GameState(getLocalHostIp());
-//            MainServerThread mainServerThread = new MainServerThread();
-////            ClientState.setHost(true);
-//            // host will connect and handshake to itself after setting up the server
-//            // TODO: 24/07/17 wmu16 - Make port number some static global type constant?
-////            ClientToServerThread clientToServerThread = new ClientToServerThread(ClientState.getHostIp(), 4942);
-////            ClientState.setConnectedToHost(true);
-////            controller.setClientToServerThread(clientToServerThread);
-//            LobbyController lobbyController = (LobbyController) setContentPane("/views/LobbyView.fxml");
-//            lobbyController.setMainServerThread(mainServerThread);
-//        } catch (Exception e) {
-//            Alert alert = new Alert(AlertType.ERROR);
-//            alert.setHeaderText("Cannot host");
-//            alert.setContentText("Oops, failed to host, try to restart.");
-//            alert.showAndWait();
-//            e.printStackTrace();
-//        }
+    private JFXButton startBtn;
+
+    private Node serverList;
+
+    private Logger logger = LoggerFactory.getLogger(StartScreenController.class);
+
+    private void setInitialDropShadow(){
+        DropShadow dropShadow = new DropShadow();
+        dropShadow.setRadius(10.0);
+        dropShadow.setOffsetX(3.0);
+        dropShadow.setOffsetY(4.0);
+        dropShadow.setColor(Color.color(0, 0, 0, 0.5));
+        headText.setEffect(dropShadow);
+
     }
 
-    /**
-     * ATTEMPTS TO:
-     * Connect to an ip address and port using the ip and port specified on start screen.
-     * Starts a Client To Server Thread to maintain connection to host.
-     * Switch view to lobby view.
-     */
-    @FXML
-    public void connectButtonPressed() {
-        // TODO: 10/07/17 wmu16 - Finish function
-        gameClient = new GameClient(holder);
-        gameClient.runAsClient(ipTextField.getText().trim().toLowerCase(), 4942);
-
-//        try {
-//            String ipAddress = ipTextField.getText().trim().toLowerCase();
-//            Integer port = Integer.valueOf(portTextField.getText().trim());
-//
-////            ClientToServerThread clientToServerThread = new ClientToServerThread(ipAddress, port);
-////            ClientState.setHost(false);
-////            ClientState.setConnectedToHost(true);
-//
-////            controller.setClientToServerThread(clientToServerThread);
-////            setContentPane("/views/LobbyView.fxml");
-//        } catch (Exception e) {
-//            Alert alert = new Alert(AlertType.ERROR);
-//            alert.setHeaderText("Cannot reach the host");
-//            alert.setContentText("Please check your host IP address.");
-//            alert.showAndWait();
-//        }
-    }
-
-//    public void setController(Controller controller) {
-//        this.controller = controller;
-//    }
-
-    /**
-     * Gets the local host ip address and sets this ip to ClientState.
-     * Only runs by the host.
-     *
-     * @return the localhost ip address
-     */
-    private String getLocalHostIp() {
-        String ipAddress = null;
+    private void preloadServerListView(){
         try {
-            Enumeration<NetworkInterface> e = NetworkInterface.getNetworkInterfaces();
-            while (e.hasMoreElements()) {
-                NetworkInterface ni = e.nextElement();
-                if (ni.isLoopback())
-                    continue;
-                if(ni.isPointToPoint())
-                    continue;
-                if(ni.isVirtual())
-                    continue;
+            serverList = FXMLLoader
+                    .load(StartScreenController.class.getResource("/views/ServerListView.fxml"));
+        } catch (IOException e) {
+            e.printStackTrace();
+            logger.error("Could not preload server list view");
+        }
+    }
 
-                Enumeration<InetAddress> addresses = ni.getInetAddresses();
-                while(addresses.hasMoreElements()) {
-                    InetAddress address = addresses.nextElement();
-                    if(address instanceof Inet4Address) {    // skip all ipv6
-                        ipAddress = address.getHostAddress();
-                    }
-                }
-            }
+    private void goToServerBrowser() {
+        try {
+            ViewManager.getInstance().setScene(serverList);
         } catch (Exception e) {
             e.printStackTrace();
         }
-        if (ipAddress == null) {
-            System.out.println("[HOST] Cannot obtain local host ip address.");
-        }
-//        ClientState.setHostIp(ipAddress);
-        return ipAddress;
+    }
+
+    public void initialize(URL location, ResourceBundle resources) {
+        startBtn.setOnMousePressed(event -> startBtn.setText("LOADING..."));
+        startBtn.setOnMouseReleased(event -> goToServerBrowser());
+
+        setInitialDropShadow();
+        preloadServerListView();
     }
 }
diff --git a/src/main/java/seng302/visualiser/controllers/StartScreenController_old.java b/src/main/java/seng302/visualiser/controllers/StartScreenController_old.java
new file mode 100644
index 00000000..417295c3
--- /dev/null
+++ b/src/main/java/seng302/visualiser/controllers/StartScreenController_old.java
@@ -0,0 +1,97 @@
+package seng302.visualiser.controllers;
+
+import java.net.Inet4Address;
+import java.net.InetAddress;
+import java.net.NetworkInterface;
+import java.net.URL;
+import java.util.Enumeration;
+import java.util.ResourceBundle;
+import javafx.fxml.FXML;
+import javafx.fxml.Initializable;
+import javafx.scene.control.TextField;
+import javafx.scene.layout.AnchorPane;
+import javafx.scene.layout.GridPane;
+import seng302.gameServer.GameState;
+import seng302.visualiser.GameClient;
+
+/**
+ * A Class describing the actions of the start screen controller
+ * Created by wmu16 on 10/07/17.
+ */
+public class StartScreenController_old implements Initializable {
+
+    @FXML
+    private TextField ipTextField;
+
+    @FXML
+    private AnchorPane holder;
+
+    GameClient gameClient;
+
+    public void initialize(URL url,  ResourceBundle resourceBundle) {
+    }
+
+    /**
+     * ATTEMPTS TO:
+     * Sets up a new game state with your IP address as designated as the host.
+     * Starts a thread to listen for incoming connections.
+     * Starts a client to server thread and connects to own ip.
+     * Switches to the lobby screen
+     */
+    @FXML
+    public void hostButtonPressed() {
+        gameClient = new GameClient(holder);
+        gameClient.runAsHost(getLocalHostIp(), 4942);
+    }
+
+    /**
+     * ATTEMPTS TO:
+     * Connect to an ip address and port using the ip and port specified on start screen.
+     * Starts a Client To Server Thread to maintain connection to host.
+     * Switch view to lobby view.
+     */
+    @FXML
+    public void connectButtonPressed() {
+        // TODO: 10/07/17 wmu16 - Finish function
+        gameClient = new GameClient(holder);
+        gameClient.runAsClient(ipTextField.getText().trim().toLowerCase(), 4942);
+    }
+
+
+    /**
+     * Gets the local host ip address and sets this ip to ClientState.
+     * Only runs by the host.
+     *
+     * @return the localhost ip address
+     */
+    private String getLocalHostIp() {
+        String ipAddress = null;
+        try {
+            Enumeration<NetworkInterface> e = NetworkInterface.getNetworkInterfaces();
+            while (e.hasMoreElements()) {
+                NetworkInterface ni = e.nextElement();
+                if (ni.isLoopback())
+                    continue;
+                if(ni.isPointToPoint())
+                    continue;
+                if(ni.isVirtual())
+                    continue;
+
+                Enumeration<InetAddress> addresses = ni.getInetAddresses();
+                while(addresses.hasMoreElements()) {
+                    InetAddress address = addresses.nextElement();
+                    if(address instanceof Inet4Address) {    // skip all ipv6
+                        ipAddress = address.getHostAddress();
+                    }
+                }
+            }
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        if (ipAddress == null) {
+            System.out.println("[HOST] Cannot obtain local host ip address.");
+        }
+//        ClientState.setHostIp(ipAddress);
+        return ipAddress;
+    }
+}
diff --git a/src/main/java/seng302/visualiser/controllers/ViewManager.java b/src/main/java/seng302/visualiser/controllers/ViewManager.java
new file mode 100644
index 00000000..e569b1c9
--- /dev/null
+++ b/src/main/java/seng302/visualiser/controllers/ViewManager.java
@@ -0,0 +1,41 @@
+package seng302.visualiser.controllers;
+
+import com.jfoenix.controls.JFXDecorator;
+import javafx.scene.Node;
+import seng302.visualiser.GameClient;
+
+public class ViewManager {
+
+    private static ViewManager instance;
+    private GameClient gameClient;
+    private JFXDecorator decorator;
+
+    private ViewManager(){
+        gameClient = new GameClient(decorator);
+    }
+
+    public static ViewManager getInstance(){
+        if (instance == null){
+            instance = new ViewManager();
+        }
+
+        return instance;
+    }
+
+    public void setDecorator(JFXDecorator decorator){
+        this.decorator = decorator;
+    }
+
+    public JFXDecorator getDecorator(){
+        return decorator;
+    }
+
+    public void setScene(Node scene){
+        decorator.setContent(scene);
+    }
+
+    public GameClient getGameClient(){
+        return gameClient;
+    }
+
+}
diff --git a/src/main/resources/css/BalooTammudu-Regular.ttf b/src/main/resources/css/BalooTammudu-Regular.ttf
new file mode 100644
index 00000000..479bb7a1
Binary files /dev/null and b/src/main/resources/css/BalooTammudu-Regular.ttf differ
diff --git a/src/main/resources/css/LobbyView.css b/src/main/resources/css/LobbyView.css
new file mode 100644
index 00000000..a16f61e4
--- /dev/null
+++ b/src/main/resources/css/LobbyView.css
@@ -0,0 +1,65 @@
+#serverListMainGridPane {
+    -fx-background-color: -fx-pp-background-color;
+}
+
+.scroll-pane {
+    -fx-background: -fx-pp-background-color;
+    -fx-border-style: hidden;
+    -fx-background-insets: 0;
+    -fx-padding: 0;
+}
+
+.scroll-pane:focused {
+    -fx-background-insets: 0;
+}
+
+.scroll-pane .corner {
+    -fx-background-insets: 0;
+}
+
+#playerListVBox, #playerListScrollPane {
+    -fx-background: transparent;
+}
+
+
+#customizeButton, #leaveLobbyButton, #beginRaceButton {
+    -fx-background-color: -fx-pp-light-text-color; /* inverted */
+    -fx-text-fill: -fx-pp-theme-color; /* inverted */
+    -fx-font-size: 16px;
+}
+
+#connectLabel, #serverPortNumber, #serverHostName {
+    -fx-text-fill: -fx-pp-light-text-color;
+    -fx-font-size: 16px;
+}
+
+#serverHostName, #serverPortNumber {
+    -jfx-focus-color: -fx-pp-light-text-color;
+    -jfx-unfocus-color: -fx-pp-light-text-color;
+}
+
+#connectGridPane {
+    -fx-background-color: -fx-pp-theme-color;
+}
+
+#serverListMainGridPane {
+    -fx-background-image: url("/images/waves.png");
+    -fx-background-repeat: no-repeat;
+    -fx-background-size: cover;
+}
+
+#playerList, #playerListScrollPane {
+    -fx-background-color: transparent;
+}
+
+.invertedButton {
+    -fx-background-color: -fx-pp-light-text-color; /* inverted */
+    -fx-text-fill: -fx-pp-theme-color; /* inverted */
+    -fx-font-size: 16px;
+}
+
+#serverMap {
+    -fx-background-image: url("/images/bg.jpg");
+    -fx-background-repeat: no-repeat;
+    -fx-background-size: cover;
+}
\ No newline at end of file
diff --git a/src/main/resources/css/PlayerCell.css b/src/main/resources/css/PlayerCell.css
new file mode 100644
index 00000000..984cc36a
--- /dev/null
+++ b/src/main/resources/css/PlayerCell.css
@@ -0,0 +1,12 @@
+#playerName {
+    -fx-text-fill: -fx-pp-dark-text-color;
+    -fx-font-size: 18px;
+}
+
+#playerListCell {
+    -fx-background-color: -fx-pp-front-color;
+}
+
+#playerCellVBox {
+    -fx-background-color: -fx-pp-background-color;
+}
\ No newline at end of file
diff --git a/src/main/resources/css/ServerCell.css b/src/main/resources/css/ServerCell.css
new file mode 100644
index 00000000..54f1ba0e
--- /dev/null
+++ b/src/main/resources/css/ServerCell.css
@@ -0,0 +1,25 @@
+#serverListCell {
+    -fx-background-color: -fx-pp-front-color;
+}
+
+#serverCellVBox {
+    -fx-background-color: -fx-pp-background-color;
+}
+
+#serverConnButton {
+    -fx-background-color: -fx-pp-theme-color;
+    -fx-font-size: 14px;
+    -fx-text-fill: -fx-pp-light-text-color;
+}
+
+#serverName, #serverPlayerCount, #mapName {
+    -fx-text-fill: -fx-pp-dark-text-color;
+}
+
+#serverName {
+    -fx-font-size: 20px;
+}
+
+#serverPlayerCount, #mapName {
+    -fx-font-size:14px;
+}
diff --git a/src/main/resources/css/ServerCreate.css b/src/main/resources/css/ServerCreate.css
new file mode 100644
index 00000000..112af0dd
--- /dev/null
+++ b/src/main/resources/css/ServerCreate.css
@@ -0,0 +1,5 @@
+#submitBtn {
+    -fx-background-color: -fx-pp-theme-color;
+    -fx-font-size: 14px;
+    -fx-text-fill: -fx-pp-light-text-color;
+}
\ No newline at end of file
diff --git a/src/main/resources/css/ServerCreation.css b/src/main/resources/css/ServerCreation.css
new file mode 100644
index 00000000..5910bd1c
--- /dev/null
+++ b/src/main/resources/css/ServerCreation.css
@@ -0,0 +1,26 @@
+#submitBtn {
+    -fx-background-color: -fx-pp-theme-color;
+    -fx-text-fill: -fx-pp-light-text-color;
+    -fx-font-size: 20px;
+}
+
+#hostDialogHeader {
+    -fx-font-size: 30px;
+    -fx-text-fill: -fx-pp-dark-text-color;
+}
+
+
+#serverName {
+    -jfx-focus-color: -fx-pp-dark-text-color;
+    -jfx-unfocus-color: -fx-pp-dark-text-color;
+    -fx-text-fill: -fx-pp-dark-text-color;
+    -fx-prompt-text-fill: -fx-pp-dark-text-color;
+}
+
+#maxPlayerLabel {
+    -fx-text-fill: -fx-pp-dark-text-color;
+}
+
+#maxPlayers .thumb, #maxPlayers .track {
+    -fx-background-color: -fx-pp-theme-color;
+}
\ No newline at end of file
diff --git a/src/main/resources/css/ServerListView.css b/src/main/resources/css/ServerListView.css
new file mode 100644
index 00000000..9ffca667
--- /dev/null
+++ b/src/main/resources/css/ServerListView.css
@@ -0,0 +1,65 @@
+#serverListMainGridPane {
+    -fx-background-color: -fx-pp-background-color;
+}
+
+.scroll-pane {
+    -fx-background: -fx-pp-background-color;
+    -fx-border-style: hidden;
+    -fx-background-insets: 0;
+    -fx-padding: 0;
+}
+
+.scroll-pane:focused {
+    -fx-background-insets: 0;
+}
+
+.scroll-pane .corner {
+    -fx-background-insets: 0;
+}
+
+#serverListVBox, #serverListScrollPane {
+    -fx-background: transparent;
+}
+
+.serverListing {
+    -fx-alignment: center;
+    -fx-background-color: transparent;
+}
+
+#hostButton {
+    -fx-background-color: -fx-pp-theme-color;
+    -fx-font-size: 20px;
+    -fx-text-fill: -fx-pp-light-text-color;
+}
+
+#connectButton {
+    -fx-background-color: -fx-pp-light-text-color; /* inverted */
+    -fx-text-fill: -fx-pp-theme-color; /* inverted */
+    -fx-font-size: 20px;
+}
+
+#connectLabel, #serverPortNumber, #serverHostName {
+    -fx-text-fill: -fx-pp-light-text-color;
+    -fx-font-size: 18px;
+}
+
+#serverHostName, #serverPortNumber {
+    -jfx-focus-color: -fx-pp-light-text-color;
+    -jfx-unfocus-color: -fx-pp-light-text-color;
+    -fx-prompt-text-fill: -fx-pp-light-text-color;
+}
+
+#connectGridPane {
+    -fx-background-color: -fx-pp-theme-color;
+}
+
+
+#serverListMainGridPane{
+    -fx-background-image: url("/images/waves.png");
+    -fx-background-repeat: no-repeat;
+    -fx-background-size: cover;
+}
+
+#serverListPane{
+    -fx-background-color: transparent;
+}
\ No newline at end of file
diff --git a/src/main/resources/css/StartScreenView.css b/src/main/resources/css/StartScreenView.css
new file mode 100644
index 00000000..0dda6f19
--- /dev/null
+++ b/src/main/resources/css/StartScreenView.css
@@ -0,0 +1,25 @@
+#startBtn {
+    -fx-font-size: 20px;
+    -fx-text-fill: -fx-pp-light-text-color;
+    -fx-background-color: -fx-pp-theme-color;
+}
+
+.jfx-rippler {
+    -jfx-rippler-fill: -fx-pp-light-theme-color; /* set rippler color for button */
+}
+
+#startBtn:hover {
+    -fx-font-size: 23px;
+    -fx-background-color: -fx-pp-light-theme-color;
+}
+
+#mainStackPane {
+    -fx-background-image: url("/images/waves.jpg");
+    -fx-background-size: cover;
+}
+
+#headText {
+    -fx-background-color: transparent;
+    -fx-font-size: 80px;
+    -fx-text-fill: -fx-pp-light-text-color;
+}
\ No newline at end of file
diff --git a/src/main/resources/css/master.css b/src/main/resources/css/master.css
index f274eda1..9ce21498 100644
--- a/src/main/resources/css/master.css
+++ b/src/main/resources/css/master.css
@@ -1,201 +1,78 @@
-/**
-Background colours
- */
-.background-blue{
-    -fx-background-color: #119796;
+@font-face {
+    src: url("BalooTammudu-Regular.ttf");
 }
 
-.background-dark{
-    -fx-background-color: #2C2c36;
+* {
+    -fx-pp-light-text-color: #fff;
+    -fx-pp-dark-text-color: #6c6c6c;
+    -fx-pp-theme-color: #3493e3;
+    -fx-pp-light-theme-color: #38a2fa;
+    -fx-pp-background-color: transparent;
+    -fx-pp-front-color: #fff;
+    -fx-font-family: "Baloo Tammudu";
 }
 
-/**
-Exit button with no background
- */
-.clear-exit-btn{
-    -fx-background-insets: 0;
-    -fx-background-color:  #119796;
-    -fx-border-style: none;
+.jfx-text-field {
+    -jfx-label-float: true;
 }
 
-/**
-Buttons
- */
-.blue-ui-btn{
-    -fx-background-color: #119796;
-    -fx-text-fill: #fff;
+.jfx-decorator {
+    -fx-decorator-color: -fx-pp-theme-color;
 }
 
-.text-white {
-    -fx-text-fill: white !important;
-    -fx-fill:white !important;
+.jfx-decorator .jfx-decorator-buttons-container {
+    -fx-background-color: -fx-decorator-color;
 }
 
-/**
-Sliders
- */
-.ui-slider .thumb {
-    -fx-background-color: rgb(60, 60, 60);
-    -fx-border-radius: 10;
-    -fx-border-color: darkgray;
+.jfx-decorator .resize-border {
+    -fx-border-color: -fx-decorator-color;
+    -fx-border-width: 0 4 4 4;
 }
+/********* customised scroll bar for scroll pane ***********/
 
-.ui-slider .track{
-    -fx-background-color: #119796;
-}
-
-.ui-slider .axis{
-    -fx-tick-label-fill: white;
-}
-
-.ui-slider .axis .axis-label{
-    -fx-text-fill: white;
-}
-
-/**
-Checkbox
- */
-.ui-checkbox .box{
+/* The main scrollbar **track** CSS class  */
+.scroll-bar:horizontal .track,
+.scroll-bar:vertical .track {
     -fx-background-color: white;
-    -fx-graphic:none;
-    -fx-shape: none;
+    -fx-border-color: derive(-fx-pp-background-color, 50%);
+    -fx-border-style: solid;
+    -fx-border-width: 3px;
+    -fx-background-radius: 0em;
+    -fx-border-radius: 0em;
 }
 
-.ui-checkbox .box .mark{
-    -fx-background-image: none;
-    -fx-image: none;
-    -fx-graphic: none;
-    -fx-shape: none;
-}
-
-.ui-checkbox:selected .box{
-    -fx-background-color: #119796;
-    -fx-shape: none;
-}
-
-.ui-checkbox:selected .box .mark{
-    -fx-background-color: #119796;
-    -fx-shape: none;
-    -fx-graphic: none;
-}
-
-/**
-Table
- */
-.ui-table{
+/* The increment and decrement button CSS class of scrollbar */
+.scroll-bar:horizontal .increment-button,
+.scroll-bar:horizontal .decrement-button {
     -fx-background-color: transparent;
+    -fx-background-radius: 0em;
+    -fx-padding: 0 0 10 0;
 }
 
-.ui-table:focused{
+/* The increment and decrement button CSS class of scrollbar */
+
+.scroll-bar:vertical .increment-button,
+.scroll-bar:vertical .decrement-button {
     -fx-background-color: transparent;
+    -fx-background-radius: 0em;
+    -fx-padding: 0 10 0 10; /* set scroll bar width */
+
 }
 
-.ui-table .column-header-background{
-    -fx-background-color: white
-}
-
-.ui-table .column-header-background .label{
-    -fx-background-color: transparent;
-    -fx-text-fill: black;
-}
-
-/*server thread */
-.ui-table .column-header {
-    -fx-background-color: transparent;
-}
-
-.ui-table .table-cell{
-    -fx-text-fill: white;
-    -fx-border-style: none;
-}
-
-.table-row-cell{
-    -fx-background-color: #119796;
-    -fx-background-insets: 0, 0 0 1 0;
-    -fx-padding: 0.0em; /* 0 */
-    -fx-border-style: none;
-}
-
-.table-row-cell:odd{
-    -fx-background-color: #0e6d6c;
-    -fx-background-insets: 0, 0 0 1 0;
-    -fx-padding: 0.0em; /* 0 */
-    -fx-border-style: none;
-}
-
-.table-row-cell:selected {
-    -fx-background-color: #005797;
-    -fx-background-insets: 0;
-    -fx-border-style: none;
-}
-
-
-/**
-Combo Box
- */
-
-.combo-box-base {
-    -fx-background-color: #119796;
-    -fx-text-fill: white;
-}
-
-.combo-box-popup .list-view .list-cell:hover {
-    -fx-text-fill: white;
-}
-
-.combo-box .cell:selected {
-    -fx-text-fill: white;
-}
-
-/**
-Remove scroll bars
- */
-.ui-table *.scroll-bar:horizontal *.increment-button,
-.ui-table *.scroll-bar:horizontal *.decrement-button {
-    -fx-background-color: null;
-    -fx-background-radius: 0;
-    -fx-background-insets: 0;
+.scroll-bar .increment-arrow,
+.scroll-bar .decrement-arrow {
+    -fx-shape: " ";
     -fx-padding: 0;
 }
 
-.ui-table *.scroll-bar:horizontal *.increment-arrow,
-.ui-table *.scroll-bar:horizontal *.decrement-arrow {
-    -fx-background-color: null;
-    -fx-background-radius: 0;
+/* The main scrollbar **thumb** CSS class which we drag every time (movable) */
+.scroll-bar:horizontal .thumb,
+.scroll-bar:vertical .thumb {
+    -fx-background-color: derive(#c9c9cb, 0%);
+    -fx-background-insets: 2, 0, 0;
+    -fx-background-radius: 0em;
+}
+
+.scroll-bar {
     -fx-background-insets: 0;
-    -fx-padding: 0;
-    -fx-shape: null;
-}
-
-.ui-table *.scroll-bar:vertical *.increment-arrow,
-.ui-table *.scroll-bar:vertical *.decrement-arrow {
-    -fx-background-color: #0e6d6c;
-    -fx-background-radius: 0;
-    -fx-background-insets: 0;
-    -fx-padding: 0;
-    -fx-shape: null;
-}
-
-.ui-table *.scroll-bar:vertical *.increment-button,
-.ui-table *.scroll-bar:vertical *.decrement-button {
-    -fx-background-color: #0e6d6c;
-    -fx-background-radius: 0;
-    -fx-background-insets: 0;
-    -fx-padding: 0;
-}
-
-.chart{
-}
-
-.chart-title {
-    -fx-text-fill: #ffffff;
-    -fx-font-size: 1.6em;
-}
-
-.axis-label {
-    -fx-text-fill: #ffffff;
-}
-
-.axis {
-    -fx-tick-label-fill: #ffffff;
 }
diff --git a/src/main/resources/images/bg.jpg b/src/main/resources/images/bg.jpg
new file mode 100644
index 00000000..347ac41a
Binary files /dev/null and b/src/main/resources/images/bg.jpg differ
diff --git a/src/main/resources/images/bg2.jpg b/src/main/resources/images/bg2.jpg
new file mode 100644
index 00000000..d551059d
Binary files /dev/null and b/src/main/resources/images/bg2.jpg differ
diff --git a/src/main/resources/images/bg3.jpg b/src/main/resources/images/bg3.jpg
new file mode 100644
index 00000000..0f637d62
Binary files /dev/null and b/src/main/resources/images/bg3.jpg differ
diff --git a/src/main/resources/images/bg4.jpg b/src/main/resources/images/bg4.jpg
new file mode 100644
index 00000000..192f8fa8
Binary files /dev/null and b/src/main/resources/images/bg4.jpg differ
diff --git a/src/main/resources/images/bg5.jpg b/src/main/resources/images/bg5.jpg
new file mode 100644
index 00000000..216b5c70
Binary files /dev/null and b/src/main/resources/images/bg5.jpg differ
diff --git a/src/main/resources/images/bg6.jpg b/src/main/resources/images/bg6.jpg
new file mode 100644
index 00000000..d551059d
Binary files /dev/null and b/src/main/resources/images/bg6.jpg differ
diff --git a/src/main/resources/images/bg7.jpg b/src/main/resources/images/bg7.jpg
new file mode 100644
index 00000000..963e3b6a
Binary files /dev/null and b/src/main/resources/images/bg7.jpg differ
diff --git a/src/main/resources/images/waves.jpg b/src/main/resources/images/waves.jpg
new file mode 100644
index 00000000..7c7e44d0
Binary files /dev/null and b/src/main/resources/images/waves.jpg differ
diff --git a/src/main/resources/images/waves.png b/src/main/resources/images/waves.png
new file mode 100644
index 00000000..b512c6a1
Binary files /dev/null and b/src/main/resources/images/waves.png differ
diff --git a/src/main/resources/views/HostLobbyView.fxml b/src/main/resources/views/HostLobbyView.fxml
deleted file mode 100644
index 0c186619..00000000
--- a/src/main/resources/views/HostLobbyView.fxml
+++ /dev/null
@@ -1,63 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-
-
-<?import javafx.scene.control.Button?>
-<?import javafx.scene.control.ListView?>
-<?import javafx.scene.layout.AnchorPane?>
-<?import javafx.scene.layout.ColumnConstraints?>
-<?import javafx.scene.layout.GridPane?>
-<?import javafx.scene.layout.RowConstraints?>
-<?import javafx.scene.text.Font?>
-<?import javafx.scene.text.Text?>
-<GridPane fx:id="lobbyScreen" nodeOrientation="LEFT_TO_RIGHT" prefHeight="533.0" prefWidth="802.0" style="-fx-background-color: #2C2c36;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.LobbyController">
-    <columnConstraints>
-      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
-    </columnConstraints>
-    <rowConstraints>
-      <RowConstraints maxHeight="171.0" minHeight="0.0" prefHeight="31.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="399.0" minHeight="10.0" prefHeight="394.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="63.0" minHeight="10.0" prefHeight="26.0" vgrow="SOMETIMES" />
-    </rowConstraints>
-   <children>
-      <Text fx:id="lobbyIpText" fill="WHITE" strokeType="OUTSIDE" strokeWidth="0.0" text="Lobby: IP" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER">
-         <font>
-            <Font size="29.0" />
-         </font>
-      </Text>
-      <GridPane GridPane.rowIndex="2">
-        <columnConstraints>
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-        </columnConstraints>
-        <rowConstraints>
-          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
-        </rowConstraints>
-         <children>
-            <Button focusTraversable="false" mnemonicParsing="false" onAction="#readyButtonPressed" prefWidth="101.0" text="Ready" GridPane.halignment="CENTER" />
-            <Button focusTraversable="false" mnemonicParsing="false" onAction="#leaveLobbyButtonPressed" text="Leave Lobby" GridPane.columnIndex="1" GridPane.halignment="CENTER" />
-         </children>
-      </GridPane>
-      <AnchorPane focusTraversable="true" prefHeight="200.0" prefWidth="200.0" GridPane.rowIndex="1">
-         <children>
-            <GridPane layoutX="335.0" layoutY="146.0" prefHeight="399.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
-              <columnConstraints>
-                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="261.0" minWidth="0.0" prefWidth="2.0" />
-                <ColumnConstraints hgrow="SOMETIMES" minWidth="-Infinity" />
-                <ColumnConstraints hgrow="SOMETIMES" maxWidth="261.0" minWidth="0.0" prefWidth="2.0" />
-              </columnConstraints>
-              <rowConstraints>
-                <RowConstraints maxHeight="125.0" minHeight="0.0" prefHeight="0.0" vgrow="SOMETIMES" />
-                <RowConstraints maxHeight="266.0" minHeight="10.0" prefHeight="266.0" vgrow="SOMETIMES" />
-                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
-              </rowConstraints>
-               <children>
-                  <AnchorPane prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="1">
-                     <children>
-                        <ListView fx:id="competitorsListView" layoutX="154.0" layoutY="59.0" prefHeight="266.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
-                     </children>
-                  </AnchorPane>
-               </children>
-            </GridPane>
-         </children></AnchorPane>
-   </children>
-</GridPane>
diff --git a/src/main/resources/views/LobbyView.fxml b/src/main/resources/views/LobbyView.fxml
index 1d325055..6fe65212 100644
--- a/src/main/resources/views/LobbyView.fxml
+++ b/src/main/resources/views/LobbyView.fxml
@@ -1,135 +1,98 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
+<?import javafx.scene.image.*?>
+<?import com.jfoenix.controls.*?>
 <?import java.lang.*?>
 <?import javafx.geometry.*?>
 <?import javafx.scene.control.*?>
-<?import javafx.scene.image.*?>
 <?import javafx.scene.layout.*?>
 <?import javafx.scene.text.*?>
-<?import javafx.geometry.Insets?>
-<?import javafx.scene.control.Button?>
-<?import javafx.scene.control.ListView?>
-<?import javafx.scene.image.ImageView?>
-<?import javafx.scene.layout.AnchorPane?>
-<?import javafx.scene.layout.ColumnConstraints?>
-<?import javafx.scene.layout.GridPane?>
-<?import javafx.scene.layout.RowConstraints?>
-<?import javafx.scene.text.Font?>
-<?import javafx.scene.text.Text?>
 
-<GridPane fx:id="lobbyScreen" nodeOrientation="LEFT_TO_RIGHT" prefHeight="960.0" prefWidth="1530.0" style="-fx-background-color: #2C2c36;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.LobbyController">
-    <columnConstraints>
-      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
-    </columnConstraints>
-    <rowConstraints>
-      <RowConstraints maxHeight="171.0" minHeight="0.0" prefHeight="31.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="462.0" minHeight="10.0" prefHeight="462.0" vgrow="SOMETIMES" />
-      <RowConstraints maxHeight="100.0" minHeight="0.0" prefHeight="0.0" vgrow="SOMETIMES" />
-    </rowConstraints>
-   <children>
-      <GridPane prefHeight="166.0" prefWidth="1530.0" GridPane.rowIndex="2">
-        <columnConstraints>
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-        </columnConstraints>
-        <rowConstraints>
-          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
-        </rowConstraints>
-         <children>
-            <Button fx:id="readyButton" focusTraversable="false" mnemonicParsing="false" onAction="#readyButtonPressed" prefWidth="101.0" text="Ready" GridPane.halignment="CENTER" />
-            <Button focusTraversable="false" mnemonicParsing="false" onAction="#leaveLobbyButtonPressed" text="Leave Lobby" GridPane.columnIndex="2" GridPane.halignment="CENTER" />
-            <Button fx:id="customizeButton" focusTraversable="false" mnemonicParsing="false" onAction="#customize" text="Customization" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
-         </children>
-      </GridPane>
-      <GridPane GridPane.rowIndex="1">
-        <columnConstraints>
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-        </columnConstraints>
-        <rowConstraints>
-          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
-          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
-        </rowConstraints>
-         <children>
-            <TextArea fx:id="playerFourTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
-            <TextArea fx:id="playerEightTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
-            <TextArea fx:id="playerSevenTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
-            <TextArea fx:id="playerThreeTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
-            <TextArea fx:id="playerSixTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
-            <TextArea fx:id="playerFiveTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
-            <TextArea fx:id="playerOneTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
-            <TextArea fx:id="playerTwoTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
-            <ImageView fx:id="firstImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-            <ImageView fx:id="secondImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-            <ImageView fx:id="thirdImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-            <ImageView fx:id="fourthImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-            <ImageView fx:id="fifthImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-            <ImageView fx:id="sixthImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-            <ImageView fx:id="seventhImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-            <ImageView fx:id="eighthImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="BOTTOM">
-               <GridPane.margin>
-                  <Insets bottom="10.0" />
-               </GridPane.margin>
-            </ImageView>
-         </children>
-      </GridPane>
-      <GridPane>
-        <columnConstraints>
-          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
-        </columnConstraints>
-        <rowConstraints>
-            <RowConstraints maxHeight="134.0" minHeight="10.0" prefHeight="32.0" vgrow="SOMETIMES" />
-          <RowConstraints maxHeight="134.0" minHeight="10.0" prefHeight="35.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="134.0" minHeight="10.0" prefHeight="32.0" vgrow="SOMETIMES" />
-          <RowConstraints maxHeight="79.0" minHeight="10.0" prefHeight="52.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="79.0" minHeight="10.0" prefHeight="35.0" vgrow="SOMETIMES" />
-        </rowConstraints>
-         <children>
-            <Text fx:id="lobbyIpText" fill="WHITE" strokeType="OUTSIDE" strokeWidth="0.0" text="Server Name" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="1">
-               <font>
-                  <Font size="29.0" />
-               </font>
-            </Text>
-            <Text fx:id="timeUntilStart" fill="#f8f8f8" strokeType="OUTSIDE" strokeWidth="0.0" text="00:00" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="3">
-               <font>
-                  <Font size="20.0" />
-               </font>
-            </Text>
-            <Text fx:id="courseNameText" fill="#e1e1e1" strokeType="OUTSIDE" strokeWidth="0.0" text="Course Name" GridPane.halignment="CENTER" GridPane.rowIndex="2" />
-         </children>
-      </GridPane>
-   </children>
-</GridPane>
+<StackPane fx:id="serverListMainStackPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.LobbyController">
+    <children>
+        <GridPane fx:id="serverListMainGridPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308">
+            <children>
+                <GridPane fx:id="connectGridPane" GridPane.rowIndex="2">
+                    <children>
+                        <JFXButton fx:id="leaveLobbyButton" buttonType="RAISED" prefHeight="45.0" prefWidth="220.0" ripplerFill="#3493e3" styleClass="invertedButton" text="Leave Lobby" textFill="WHITE" GridPane.columnIndex="2" GridPane.halignment="LEFT" GridPane.valignment="CENTER">
+                            <GridPane.margin>
+                                <Insets />
+                            </GridPane.margin>
+                        </JFXButton>
+                        <JFXButton fx:id="customizeButton" buttonType="RAISED" prefHeight="45.0" prefWidth="220.0" ripplerFill="#3493e3" styleClass="invertedButton" text="Customize Boat" textFill="WHITE" GridPane.halignment="RIGHT" GridPane.valignment="CENTER" />
+                        <JFXButton fx:id="beginRaceButton" buttonType="RAISED" prefHeight="45.0" prefWidth="220.0" ripplerFill="#3493e3" styleClass="invertedButton" text="Begin Race" textFill="WHITE" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
+                    </children>
+                    <columnConstraints>
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="280.0" minWidth="180.0" prefWidth="180.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="1.7976931348623157E308" minWidth="17.0" prefWidth="17.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="273.0" minWidth="250.0" prefWidth="273.0" />
+                    </columnConstraints>
+                    <rowConstraints>
+                        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                    </rowConstraints>
+                </GridPane>
+                <GridPane>
+                    <children>
+                        <Label text="Party Parrots In Space" GridPane.valignment="CENTER">
+                            <font>
+                                <Font size="31.0" />
+                            </font>
+                            <padding>
+                                <Insets left="35.0" top="10.0" />
+                            </padding>
+                        </Label>
+                        <Label text="This is a map, it's called Haoming" GridPane.rowIndex="1">
+                            <padding>
+                                <Insets left="35.0" top="-15.0" />
+                            </padding>
+                        </Label>
+                    </children>
+                    <columnConstraints>
+                        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                    </columnConstraints>
+                    <rowConstraints>
+                        <RowConstraints maxHeight="1.7976931348623157E308" minHeight="50.0" prefHeight="74.0" vgrow="SOMETIMES" />
+                        <RowConstraints maxHeight="1.7976931348623157E308" minHeight="23.0" prefHeight="26.0" vgrow="SOMETIMES" />
+                    </rowConstraints>
+                </GridPane>
+                <GridPane GridPane.rowIndex="1">
+                    <columnConstraints>
+                        <ColumnConstraints hgrow="SOMETIMES" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="400.0" minWidth="400.0" prefWidth="400.0" />
+                    </columnConstraints>
+                    <rowConstraints>
+                        <RowConstraints vgrow="SOMETIMES" />
+                    </rowConstraints>
+                    <children>
+                        <ScrollPane fx:id="playerListScrollPane" hbarPolicy="NEVER" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
+                            <content>
+                                <VBox fx:id="playerListVBox" fillWidth="false" prefHeight="200.0" prefWidth="100.0" />
+                            </content>
+                            <GridPane.margin>
+                                <Insets bottom="15.0" left="7.0" right="15.0" top="15.0" />
+                            </GridPane.margin>
+                        </ScrollPane>
+                        <Pane fx:id="serverMap" style="-fx-background-color: skyblue;">
+                            <GridPane.margin>
+                                <Insets bottom="15.0" left="15.0" right="7.0" top="15.0" />
+                            </GridPane.margin>
+                        </Pane>
+                    </children>
+                </GridPane>
+            </children>
+            <columnConstraints>
+                <ColumnConstraints hgrow="SOMETIMES" maxWidth="1.7976931348623157E308" minWidth="900.0" prefWidth="900.0" />
+            </columnConstraints>
+            <rowConstraints>
+                <RowConstraints maxHeight="80.0" minHeight="80.0" prefHeight="80.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="1.7976931348623157E308" minHeight="400.0" prefHeight="400.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="80.0" minHeight="80.0" prefHeight="80.0" vgrow="SOMETIMES" />
+            </rowConstraints>
+            <stylesheets>
+                <String fx:value="/css/master.css" />
+                <String fx:value="/css/LobbyView.css" />
+            </stylesheets>
+        </GridPane>
+    </children>
+</StackPane>
diff --git a/src/main/resources/views/LobbyView_old.fxml b/src/main/resources/views/LobbyView_old.fxml
new file mode 100644
index 00000000..8ea33d4d
--- /dev/null
+++ b/src/main/resources/views/LobbyView_old.fxml
@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import java.lang.*?>
+<?import javafx.geometry.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.image.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.text.*?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.ListView?>
+<?import javafx.scene.image.ImageView?>
+<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.text.Font?>
+<?import javafx.scene.text.Text?>
+
+<GridPane fx:id="lobbyScreen" nodeOrientation="LEFT_TO_RIGHT" prefHeight="960.0" prefWidth="1530.0" style="-fx-background-color: #2C2c36;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.LobbyController_old">
+    <columnConstraints>
+      <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
+    </columnConstraints>
+    <rowConstraints>
+      <RowConstraints maxHeight="171.0" minHeight="0.0" prefHeight="31.0" vgrow="SOMETIMES" />
+      <RowConstraints maxHeight="462.0" minHeight="10.0" prefHeight="462.0" vgrow="SOMETIMES" />
+      <RowConstraints maxHeight="100.0" minHeight="0.0" prefHeight="0.0" vgrow="SOMETIMES" />
+    </rowConstraints>
+   <children>
+      <GridPane prefHeight="166.0" prefWidth="1530.0" GridPane.rowIndex="2">
+        <columnConstraints>
+          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+        </columnConstraints>
+        <rowConstraints>
+          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+        </rowConstraints>
+         <children>
+            <Button fx:id="readyButton" focusTraversable="false" mnemonicParsing="false" onAction="#readyButtonPressed" prefWidth="101.0" text="Ready" GridPane.halignment="CENTER" />
+            <Button focusTraversable="false" mnemonicParsing="false" onAction="#leaveLobbyButtonPressed" text="Leave Lobby" GridPane.columnIndex="2" GridPane.halignment="CENTER" />
+            <Button fx:id="customizeButton" focusTraversable="false" mnemonicParsing="false" onAction="#customize" text="Customization" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
+         </children>
+      </GridPane>
+      <GridPane GridPane.rowIndex="1">
+        <columnConstraints>
+          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+        </columnConstraints>
+        <rowConstraints>
+          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+        </rowConstraints>
+         <children>
+            <TextArea fx:id="playerFourTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
+            <TextArea fx:id="playerEightTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
+            <TextArea fx:id="playerSevenTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
+            <TextArea fx:id="playerThreeTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
+            <TextArea fx:id="playerSixTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
+            <TextArea fx:id="playerFiveTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
+            <TextArea fx:id="playerOneTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
+            <TextArea fx:id="playerTwoTxt" editable="false" maxHeight="211.0" maxWidth="175.0" minHeight="211.0" minWidth="175.0" prefHeight="211.0" prefWidth="175.0" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
+            <ImageView fx:id="firstImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
+               <GridPane.margin>
+                  <Insets bottom="10.0" />
+               </GridPane.margin>
+            </ImageView>
+            <ImageView fx:id="secondImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
+               <GridPane.margin>
+                  <Insets bottom="10.0" />
+               </GridPane.margin>
+            </ImageView>
+            <ImageView fx:id="thirdImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
+               <GridPane.margin>
+                  <Insets bottom="10.0" />
+               </GridPane.margin>
+            </ImageView>
+            <ImageView fx:id="fourthImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
+               <GridPane.margin>
+                  <Insets bottom="10.0" />
+               </GridPane.margin>
+            </ImageView>
+            <ImageView fx:id="fifthImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="BOTTOM">
+               <GridPane.margin>
+                  <Insets bottom="10.0" />
+               </GridPane.margin>
+            </ImageView>
+            <ImageView fx:id="sixthImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="BOTTOM">
+               <GridPane.margin>
+                  <Insets bottom="10.0" />
+               </GridPane.margin>
+            </ImageView>
+            <ImageView fx:id="seventhImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="BOTTOM">
+               <GridPane.margin>
+                  <Insets bottom="10.0" />
+               </GridPane.margin>
+            </ImageView>
+            <ImageView fx:id="eighthImageView" fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="4" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="BOTTOM">
+               <GridPane.margin>
+                  <Insets bottom="10.0" />
+               </GridPane.margin>
+            </ImageView>
+         </children>
+      </GridPane>
+      <GridPane>
+        <columnConstraints>
+          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+        </columnConstraints>
+        <rowConstraints>
+            <RowConstraints maxHeight="134.0" minHeight="10.0" prefHeight="32.0" vgrow="SOMETIMES" />
+          <RowConstraints maxHeight="134.0" minHeight="10.0" prefHeight="35.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="134.0" minHeight="10.0" prefHeight="32.0" vgrow="SOMETIMES" />
+          <RowConstraints maxHeight="79.0" minHeight="10.0" prefHeight="52.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="79.0" minHeight="10.0" prefHeight="35.0" vgrow="SOMETIMES" />
+        </rowConstraints>
+         <children>
+            <Text fx:id="lobbyIpText" fill="WHITE" strokeType="OUTSIDE" strokeWidth="0.0" text="Server Name" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="1">
+               <font>
+                  <Font size="29.0" />
+               </font>
+            </Text>
+            <Text fx:id="timeUntilStart" fill="#f8f8f8" strokeType="OUTSIDE" strokeWidth="0.0" text="00:00" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="3">
+               <font>
+                  <Font size="20.0" />
+               </font>
+            </Text>
+            <Text fx:id="courseNameText" fill="#e1e1e1" strokeType="OUTSIDE" strokeWidth="0.0" text="Course Name" GridPane.halignment="CENTER" GridPane.rowIndex="2" />
+         </children>
+      </GridPane>
+   </children>
+</GridPane>
diff --git a/src/main/resources/views/ServerListView.fxml b/src/main/resources/views/ServerListView.fxml
new file mode 100644
index 00000000..aa5deb2d
--- /dev/null
+++ b/src/main/resources/views/ServerListView.fxml
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import com.jfoenix.controls.*?>
+<?import java.lang.*?>
+<?import javafx.geometry.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.text.*?>
+<?import com.jfoenix.controls.JFXButton?>
+<?import com.jfoenix.controls.JFXTextField?>
+<?import java.lang.String?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.ScrollPane?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.text.Font?>
+
+<StackPane fx:id="serverListMainStackPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.ServerListController">
+    <children>
+        <GridPane fx:id="serverListMainGridPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308">
+            <children>
+                <GridPane fx:id="connectGridPane" GridPane.rowIndex="2">
+                    <children>
+                        <JFXButton fx:id="connectButton" buttonType="RAISED" prefHeight="45.0" prefWidth="220.0" ripplerFill="#3493e3" text="CONNECT" textFill="WHITE" GridPane.columnIndex="5" GridPane.halignment="RIGHT" GridPane.valignment="CENTER">
+                            <GridPane.margin>
+                                <Insets right="50.0" />
+                            </GridPane.margin>
+                        </JFXButton>
+                        <JFXTextField fx:id="serverHostName" maxHeight="30.0" minHeight="30.0" prefHeight="30.0" promptText="Host Name" GridPane.columnIndex="2" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
+                            <GridPane.margin>
+                                <Insets left="20.0" right="20.0" />
+                            </GridPane.margin>
+                        </JFXTextField>
+                        <JFXTextField fx:id="serverPortNumber" maxHeight="30.0" minHeight="30.0" prefHeight="30.0" promptText="Port Number" GridPane.columnIndex="3" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
+                            <GridPane.margin>
+                                <Insets left="20.0" right="20.0" />
+                            </GridPane.margin>
+                        </JFXTextField>
+                        <Label fx:id="connectLabel" text="Direct Connect:" GridPane.columnIndex="1" GridPane.halignment="RIGHT" GridPane.valignment="CENTER">
+                            <GridPane.margin>
+                                <Insets right="45.0" />
+                            </GridPane.margin>
+                        </Label>
+                    </children>
+                    <columnConstraints>
+                  <ColumnConstraints hgrow="SOMETIMES" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="280.0" minWidth="180.0" prefWidth="180.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="320.0" minWidth="280.0" prefWidth="280.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="150.0" minWidth="150.0" prefWidth="150.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="17.0" minWidth="17.0" prefWidth="17.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" maxWidth="273.0" minWidth="250.0" prefWidth="273.0" />
+                    </columnConstraints>
+                    <rowConstraints>
+                        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                    </rowConstraints>
+                </GridPane>
+                <ScrollPane id="serverListPane" fx:id="serverListScrollPane" hbarPolicy="NEVER" prefHeight="1000.0" prefWidth="880.0" GridPane.rowIndex="1">
+                    <content>
+                        <VBox id="serverListVBox" fx:id="serverListVBox" prefHeight="200.0" prefWidth="100.0">
+                            <padding>
+                                <Insets left="30.0" right="30.0" />
+                            </padding>
+                        </VBox>
+                    </content>
+                    <GridPane.margin>
+                        <Insets />
+                    </GridPane.margin>
+                </ScrollPane>
+                <GridPane>
+                    <children>
+                        <JFXButton id="hostButton" fx:id="serverListHostButton" buttonType="RAISED" prefHeight="45.0" prefWidth="220.0" text="HOST" GridPane.columnIndex="1" GridPane.halignment="RIGHT" GridPane.valignment="CENTER">
+                            <GridPane.margin>
+                                <Insets right="50.0" />
+                            </GridPane.margin>
+                        </JFXButton>
+                        <Label text="Party Parrots At Sea" GridPane.valignment="CENTER">
+                            <font>
+                                <Font size="31.0" />
+                            </font>
+                            <padding>
+                                <Insets left="35.0" top="5.0" />
+                            </padding>
+                        </Label>
+                    </children>
+                    <columnConstraints>
+                        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                    </columnConstraints>
+                    <rowConstraints>
+                        <RowConstraints maxHeight="1.7976931348623157E308" minHeight="50.0" prefHeight="50.0" vgrow="SOMETIMES" />
+                    </rowConstraints>
+                </GridPane>
+            </children>
+            <columnConstraints>
+                <ColumnConstraints hgrow="SOMETIMES" maxWidth="1.7976931348623157E308" minWidth="900.0" prefWidth="900.0" />
+            </columnConstraints>
+            <rowConstraints>
+                <RowConstraints maxHeight="80.0" minHeight="80.0" prefHeight="80.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="1.7976931348623157E308" minHeight="400.0" prefHeight="400.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="80.0" minHeight="80.0" prefHeight="80.0" vgrow="SOMETIMES" />
+            </rowConstraints>
+            <stylesheets>
+                <String fx:value="/css/master.css" />
+                <String fx:value="/css/ServerListView.css" />
+            </stylesheets>
+        </GridPane>
+    </children>
+</StackPane>
diff --git a/src/main/resources/views/StartScreenView.fxml b/src/main/resources/views/StartScreenView.fxml
index 4bd0a808..50435407 100644
--- a/src/main/resources/views/StartScreenView.fxml
+++ b/src/main/resources/views/StartScreenView.fxml
@@ -1,69 +1,50 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
-<?import java.lang.*?>
-<?import javafx.geometry.*?>
-<?import javafx.scene.control.*?>
-<?import javafx.scene.layout.*?>
-<?import javafx.scene.text.*?>
+<?import com.jfoenix.controls.JFXButton?>
+<?import java.lang.String?>
 <?import javafx.geometry.Insets?>
-<?import javafx.scene.control.Button?>
 <?import javafx.scene.control.Label?>
-<?import javafx.scene.control.TextField?>
-<?import javafx.scene.layout.AnchorPane?>
-<?import javafx.scene.layout.ColumnConstraints?>
-<?import javafx.scene.layout.GridPane?>
-<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.StackPane?>
+<?import javafx.scene.layout.VBox?>
 <?import javafx.scene.text.Font?>
-<?import javafx.scene.text.Text?>
-
-<AnchorPane fx:id="holder" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="960.0" prefWidth="1530.0" style="-fx-background-color: #2C2c36;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.StartScreenController">
+<StackPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="800.0" minWidth="1200.0" prefHeight="800.0" prefWidth="1200.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.StartScreenController">
+   <stylesheets>
+       <String fx:value="/css/master.css" />
+       <String fx:value="/css/StartScreenView.css" />
+   </stylesheets>
    <children>
-      <GridPane fx:id="startScreen2" layoutX="365.0" layoutY="285.0" nodeOrientation="LEFT_TO_RIGHT" prefWidth="800.0" style="-fx-background-color: #2C2c36;">
+      <VBox fx:id="mainStackPane" alignment="CENTER" StackPane.alignment="CENTER">
          <children>
-            <Label alignment="CENTER" text="Welcome to Race Vision" textFill="WHITE" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="BOTTOM">
+            <Label fx:id="headText" text="Party Parrots At Sea">
                <font>
-                  <Font size="40.0" />
+                  <Font name="System Bold" size="42.0" />
                </font>
+               <VBox.margin>
+                  <Insets bottom="100.0" />
+               </VBox.margin>
+               <StackPane.margin>
+                   <Insets bottom="150.0" />
+               </StackPane.margin>
             </Label>
-            <Button mnemonicParsing="false" onAction="#hostButtonPressed" prefHeight="25.0" prefWidth="175.0" text="Host" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="2" />
-            <Button mnemonicParsing="false" onAction="#connectButtonPressed" prefHeight="25.0" prefWidth="147.0" text="Connect" GridPane.columnIndex="1" GridPane.rowIndex="4">
-               <GridPane.margin>
-                  <Insets left="5.0" right="5.0" />
-               </GridPane.margin>
-            </Button>
-            <TextField fx:id="ipTextField" alignment="CENTER" maxWidth="-Infinity" prefHeight="25.0" prefWidth="148.0" promptText="Host IP" text="localhost" GridPane.halignment="RIGHT" GridPane.rowIndex="4">
-               <GridPane.margin>
-                  <Insets bottom="10.0" left="5.0" right="85.0" top="10.0" />
-               </GridPane.margin>
-            </TextField>
-            <Text fill="WHITE" strokeType="OUTSIDE" strokeWidth="0.0" text="OR" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="3">
+             <JFXButton fx:id="startBtn" buttonType="RAISED" prefHeight="80.0" prefWidth="337.0"
+               text="START">
                <font>
-                  <Font size="21.0" />
+                   <Font size="20.0" />
                </font>
-            </Text>
-            <TextField fx:id="portTextField" alignment="CENTER" maxWidth="75.0" prefHeight="25.0" prefWidth="55.0" promptText="Port" text="4942" GridPane.halignment="RIGHT" GridPane.rowIndex="4">
-               <opaqueInsets>
-                  <Insets />
-               </opaqueInsets>
-               <GridPane.margin>
-                  <Insets left="5.0" right="5.0" />
-               </GridPane.margin>
-            </TextField>
+               <VBox.margin>
+                  <Insets top="50.0" />
+               </VBox.margin>
+               <StackPane.margin>
+                   <Insets />
+               </StackPane.margin>
+            </JFXButton>
          </children>
-         <columnConstraints>
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="442.0" />
-            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="358.0" />
-         </columnConstraints>
-         <rowConstraints>
-            <RowConstraints />
-            <RowConstraints />
-            <RowConstraints maxHeight="42.0" minHeight="10.0" prefHeight="42.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="26.0" minHeight="13.0" prefHeight="26.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="66.0" minHeight="59.0" prefHeight="59.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="65.0" minHeight="36.0" prefHeight="46.0" vgrow="SOMETIMES" />
-            <RowConstraints maxHeight="108.0" minHeight="72.0" prefHeight="98.0" vgrow="SOMETIMES" />
-            <RowConstraints minHeight="72.0" prefHeight="72.0" vgrow="SOMETIMES" />
-         </rowConstraints>
-      </GridPane>
+         <StackPane.margin>
+            <Insets />
+         </StackPane.margin>
+         <padding>
+            <Insets bottom="100.0" />
+         </padding>
+      </VBox>
    </children>
-</AnchorPane>
+</StackPane>
diff --git a/src/main/resources/views/StartScreenView_old.fxml b/src/main/resources/views/StartScreenView_old.fxml
new file mode 100644
index 00000000..d13cbed3
--- /dev/null
+++ b/src/main/resources/views/StartScreenView_old.fxml
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import java.lang.*?>
+<?import javafx.geometry.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.text.*?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Button?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.TextField?>
+<?import javafx.scene.layout.AnchorPane?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.text.Font?>
+<?import javafx.scene.text.Text?>
+
+<AnchorPane fx:id="holder" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="960.0" prefWidth="1530.0" style="-fx-background-color: #2C2c36;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.StartScreenController_old">
+   <children>
+      <GridPane fx:id="startScreen2" layoutX="365.0" layoutY="285.0" nodeOrientation="LEFT_TO_RIGHT" prefWidth="800.0" style="-fx-background-color: #2C2c36;">
+         <children>
+            <Label alignment="CENTER" text="Welcome to Race Vision" textFill="WHITE" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="BOTTOM">
+               <font>
+                  <Font size="40.0" />
+               </font>
+            </Label>
+            <Button mnemonicParsing="false" onAction="#hostButtonPressed" prefHeight="25.0" prefWidth="175.0" text="Host" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="2" />
+            <Button mnemonicParsing="false" onAction="#connectButtonPressed" prefHeight="25.0" prefWidth="147.0" text="Connect" GridPane.columnIndex="1" GridPane.rowIndex="4">
+               <GridPane.margin>
+                  <Insets left="5.0" right="5.0" />
+               </GridPane.margin>
+            </Button>
+            <TextField fx:id="ipTextField" alignment="CENTER" maxWidth="-Infinity" prefHeight="25.0" prefWidth="148.0" promptText="Host IP" text="localhost" GridPane.halignment="RIGHT" GridPane.rowIndex="4">
+               <GridPane.margin>
+                  <Insets bottom="10.0" left="5.0" right="85.0" top="10.0" />
+               </GridPane.margin>
+            </TextField>
+            <Text fill="WHITE" strokeType="OUTSIDE" strokeWidth="0.0" text="OR" GridPane.columnSpan="2147483647" GridPane.halignment="CENTER" GridPane.rowIndex="3">
+               <font>
+                  <Font size="21.0" />
+               </font>
+            </Text>
+            <TextField fx:id="portTextField" alignment="CENTER" maxWidth="75.0" prefHeight="25.0" prefWidth="55.0" promptText="Port" text="4942" GridPane.halignment="RIGHT" GridPane.rowIndex="4">
+               <opaqueInsets>
+                  <Insets />
+               </opaqueInsets>
+               <GridPane.margin>
+                  <Insets left="5.0" right="5.0" />
+               </GridPane.margin>
+            </TextField>
+         </children>
+         <columnConstraints>
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="442.0" />
+            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="358.0" />
+         </columnConstraints>
+         <rowConstraints>
+            <RowConstraints />
+            <RowConstraints />
+            <RowConstraints maxHeight="42.0" minHeight="10.0" prefHeight="42.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="26.0" minHeight="13.0" prefHeight="26.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="66.0" minHeight="59.0" prefHeight="59.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="65.0" minHeight="36.0" prefHeight="46.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="108.0" minHeight="72.0" prefHeight="98.0" vgrow="SOMETIMES" />
+            <RowConstraints minHeight="72.0" prefHeight="72.0" vgrow="SOMETIMES" />
+         </rowConstraints>
+      </GridPane>
+   </children>
+</AnchorPane>
diff --git a/src/main/resources/views/TestMapView.fxml b/src/main/resources/views/TestMapView.fxml
deleted file mode 100644
index 9334d94d..00000000
--- a/src/main/resources/views/TestMapView.fxml
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-
-
-<?import javafx.scene.canvas.Canvas?>
-<?import javafx.scene.layout.Pane?>
-<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="960.0" prefWidth="1280.0" style="-fx-background-color: #ddd;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.map.TestMapController">
-   <children>
-      <Canvas fx:id="mapCanvas" height="960.0" width="1280.0" />
-   </children>
-</Pane>
diff --git a/src/main/resources/views/cells/PlayerCell.fxml b/src/main/resources/views/cells/PlayerCell.fxml
new file mode 100644
index 00000000..b26cf443
--- /dev/null
+++ b/src/main/resources/views/cells/PlayerCell.fxml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import com.jfoenix.controls.*?>
+<?import java.lang.*?>
+<?import javafx.geometry.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.text.*?>
+
+<VBox fx:id="playerCellVBox" fillWidth="false" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="80.0" prefWidth="330.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
+   <stylesheets>
+       <String fx:value="/css/master.css" />
+       <String fx:value="/css/PlayerCell.css" />
+   </stylesheets>
+   <children>
+      <GridPane fx:id="playerListCell" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" prefHeight="70.0">
+        <columnConstraints>
+          <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="380.0" prefWidth="380.0" />
+        </columnConstraints>
+        <rowConstraints>
+          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+        </rowConstraints>
+         <children>
+               <Label fx:id="playerName" text="Party parrots in space">
+               <padding>
+                  <Insets left="20.0" />
+               </padding></Label>
+         </children>
+      </GridPane>
+   </children>
+   <padding>
+       <Insets bottom="30.0" left="5.0" right="5.0" />
+   </padding>
+</VBox>
diff --git a/src/main/resources/views/cells/ServerCell.fxml b/src/main/resources/views/cells/ServerCell.fxml
new file mode 100644
index 00000000..a4408d9b
--- /dev/null
+++ b/src/main/resources/views/cells/ServerCell.fxml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import com.jfoenix.controls.*?>
+<?import java.lang.*?>
+<?import javafx.geometry.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.text.*?>
+<?import com.jfoenix.controls.JFXButton?>
+<?import java.lang.String?>
+<?import javafx.geometry.Insets?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.layout.ColumnConstraints?>
+<?import javafx.scene.layout.GridPane?>
+<?import javafx.scene.layout.RowConstraints?>
+<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.text.Font?>
+
+<VBox fx:id="serverCellVBox" maxHeight="-Infinity" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="95.0" prefWidth="900.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
+   <stylesheets>
+       <String fx:value="/css/master.css" />
+       <String fx:value="/css/ServerCell.css" />
+   </stylesheets>
+   <children>
+      <GridPane fx:id="serverListCell" prefHeight="80.0">
+         <columnConstraints>
+             <ColumnConstraints hgrow="SOMETIMES" maxWidth="330.0" minWidth="330.0" prefWidth="330.0" />
+             <ColumnConstraints hgrow="SOMETIMES" maxWidth="1.7976931348623157E308" />
+             <ColumnConstraints hgrow="SOMETIMES" maxWidth="150.0" minWidth="150.0" prefWidth="150.0" />
+             <ColumnConstraints hgrow="SOMETIMES" maxWidth="180.0" minWidth="180.0" prefWidth="180.0" />
+         </columnConstraints>
+         <rowConstraints>
+             <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
+         </rowConstraints>
+         <children>
+             <GridPane>
+                 <columnConstraints>
+                     <ColumnConstraints hgrow="SOMETIMES" maxWidth="10.0" minWidth="10.0" prefWidth="10.0" />
+                     <ColumnConstraints hgrow="SOMETIMES" maxWidth="330.0" minWidth="330.0" prefWidth="330.0" />
+                 </columnConstraints>
+                 <rowConstraints>
+                     <RowConstraints maxHeight="52.0" minHeight="10.0" prefHeight="51.0" vgrow="SOMETIMES" />
+                     <RowConstraints maxHeight="43.0" minHeight="10.0" prefHeight="29.0" vgrow="SOMETIMES" />
+                 </rowConstraints>
+                 <children>
+                     <Label fx:id="serverName" text="Party Parrot Server 1" GridPane.columnIndex="1">
+                         <font>
+                             <Font size="19.0" />
+                         </font>
+                     </Label>
+                     <Label fx:id="mapName" text="Party parrots in space" GridPane.columnIndex="1" GridPane.rowIndex="1" />
+                 </children>
+             </GridPane>
+             <JFXButton fx:id="serverConnButton" buttonType="RAISED" onAction="#createServer" prefHeight="39.0" prefWidth="123.0" text="JOIN GAME" GridPane.columnIndex="3" />
+             <Label fx:id="serverPlayerCount" text="2/8 Players" GridPane.columnIndex="2" />
+         </children>
+      </GridPane>
+   </children>
+   <padding>
+       <Insets bottom="10.0" left="5.0" right="5.0" top="5.0" />
+   </padding>
+</VBox>
diff --git a/src/main/resources/views/customizeView.fxml b/src/main/resources/views/customizeView.fxml
index 9e97ba1b..145666a4 100644
--- a/src/main/resources/views/customizeView.fxml
+++ b/src/main/resources/views/customizeView.fxml
@@ -10,7 +10,7 @@
 <GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
   prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: #2C2c36;"
   xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"
-  fx:controller="seng302.visualiser.controllers.CustomizationController">
+  fx:controller="seng302.visualiser.controllers.CustomizationController_old">
   <columnConstraints>
       <ColumnConstraints fillWidth="false" halignment="CENTER" hgrow="SOMETIMES"
         maxWidth="1.7976931348623157E308" minWidth="1.0" percentWidth="10.0" prefWidth="1.0"/>
diff --git a/src/main/resources/views/dialogs/BoatCustomizeDialog.fxml b/src/main/resources/views/dialogs/BoatCustomizeDialog.fxml
new file mode 100644
index 00000000..1450f03f
--- /dev/null
+++ b/src/main/resources/views/dialogs/BoatCustomizeDialog.fxml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.geometry.*?>
+<?import java.net.*?>
+<?import com.jfoenix.controls.*?>
+<?import java.lang.*?>
+<?import java.util.*?>
+<?import javafx.scene.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+
+<JFXDialogLayout maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefWidth="400.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.BoatCustomizeController">
+    <children>
+        <GridPane>
+            <columnConstraints>
+                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+            </columnConstraints>
+            <rowConstraints>
+                <RowConstraints maxHeight="90.0" minHeight="90.0" prefHeight="90.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="125.0" minHeight="61.0" prefHeight="61.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="164.0" minHeight="100.0" prefHeight="164.0" vgrow="SOMETIMES" />
+            </rowConstraints>
+            <children>
+                <Label fx:id="hostDialogHeader" text="Customize Boat..." GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
+                <JFXButton fx:id="submitBtn" prefHeight="45.0" prefWidth="220.0" text="Customize Boat" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER" />
+            <JFXTextField fx:id="boatName" promptText="Boat Name" GridPane.rowIndex="1">
+               <GridPane.margin>
+                  <Insets left="30.0" right="30.0" />
+               </GridPane.margin></JFXTextField>
+            <GridPane GridPane.rowIndex="2">
+              <columnConstraints>
+                <ColumnConstraints hgrow="SOMETIMES" maxWidth="139.0" minWidth="10.0" prefWidth="89.0" />
+                  <ColumnConstraints hgrow="SOMETIMES" maxWidth="203.0" minWidth="10.0" prefWidth="203.0" />
+              </columnConstraints>
+              <rowConstraints>
+                <RowConstraints maxHeight="69.0" minHeight="10.0" percentHeight="60.0" prefHeight="19.6" vgrow="SOMETIMES" />
+              </rowConstraints>
+               <children>
+                  <Label fx:id="hostDialogHeader1" prefHeight="25.0" prefWidth="96.0" text="Boat Color">
+                     <GridPane.margin>
+                        <Insets top="-10.0" />
+                     </GridPane.margin>
+                  </Label>
+                  <JFXColorPicker fx:id="colorPicker" onAction="#colorChanged" GridPane.columnIndex="1">
+                     <GridPane.margin>
+                        <Insets top="-10.0" />
+                     </GridPane.margin>
+                  </JFXColorPicker>
+               </children>
+               <GridPane.margin>
+                  <Insets left="30.0" right="30.0" />
+               </GridPane.margin>
+            </GridPane>
+            </children>
+        </GridPane>
+    </children>
+   <stylesheets>
+      <String fx:value="/css/ServerCreation.css" />
+      <String fx:value="/css/master.css" />
+   </stylesheets>
+</JFXDialogLayout>
diff --git a/src/main/resources/views/dialogs/ServerCreationDialog.fxml b/src/main/resources/views/dialogs/ServerCreationDialog.fxml
new file mode 100644
index 00000000..d1206297
--- /dev/null
+++ b/src/main/resources/views/dialogs/ServerCreationDialog.fxml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<?import javafx.geometry.*?>
+<?import java.net.*?>
+<?import com.jfoenix.controls.*?>
+<?import java.lang.*?>
+<?import java.util.*?>
+<?import javafx.scene.*?>
+<?import javafx.scene.control.*?>
+<?import javafx.scene.layout.*?>
+
+<JFXDialogLayout maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefWidth="550.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.visualiser.controllers.ServerCreationController">
+    <children>
+        <GridPane>
+            <columnConstraints>
+                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+            </columnConstraints>
+            <rowConstraints>
+                <RowConstraints maxHeight="90.0" minHeight="90.0" prefHeight="90.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
+            <RowConstraints maxHeight="125.0" minHeight="125.0" prefHeight="125.0" vgrow="SOMETIMES" />
+                <RowConstraints maxHeight="100.0" minHeight="100.0" prefHeight="100.0" vgrow="SOMETIMES" />
+            </rowConstraints>
+            <children>
+                <Label fx:id="hostDialogHeader" text="Host a game..." GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
+                <JFXButton fx:id="submitBtn" onAction="#createServer" prefHeight="45.0" prefWidth="220.0" text="Submit" GridPane.halignment="CENTER" GridPane.rowIndex="3" GridPane.valignment="CENTER" />
+            <JFXTextField fx:id="serverName" promptText="Server Name" GridPane.rowIndex="1">
+               <GridPane.margin>
+                  <Insets left="30.0" right="30.0" />
+               </GridPane.margin></JFXTextField>
+            <GridPane GridPane.rowIndex="2">
+              <columnConstraints>
+                  <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="30.0" prefWidth="100.0" />
+                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+              </columnConstraints>
+              <rowConstraints>
+                <RowConstraints minHeight="10.0" percentHeight="60.0" prefHeight="30.0" vgrow="SOMETIMES" />
+                <RowConstraints minHeight="10.0" percentHeight="40.0" prefHeight="30.0" vgrow="SOMETIMES" />
+              </rowConstraints>
+               <children>
+                  <JFXSlider fx:id="maxPlayers" max="20.0" min="2.0" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
+                     <GridPane.margin>
+                        <Insets left="10.0" right="30.0" top="20.0" />
+                     </GridPane.margin>
+                  </JFXSlider>
+                  <Label fx:id="maxPlayersLabel" text="20" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="TOP">
+                     <GridPane.margin>
+                        <Insets right="30.0" />
+                     </GridPane.margin></Label>
+                  <Label text="Max Player Count" GridPane.halignment="CENTER" GridPane.valignment="CENTER">
+                     <GridPane.margin>
+                        <Insets left="25.0" top="20.0" />
+                     </GridPane.margin>
+                  </Label>
+               </children>
+            </GridPane>
+            </children>
+        </GridPane>
+    </children>
+   <stylesheets>
+      <String fx:value="/css/ServerCreation.css" />
+      <String fx:value="/css/master.css" />
+   </stylesheets>
+</JFXDialogLayout>