diff --git a/client/app/components/connect/connect.html b/client/app/components/connect/connect.html
new file mode 100644
index 0000000..1178028
--- /dev/null
+++ b/client/app/components/connect/connect.html
@@ -0,0 +1,93 @@
+<div class="tab-pane" id="rosbridgeconnection">
+
+
+    <div class="panel panel-default">
+        <div class="panel-body">
+
+            <form class="form-inline" role="form" onsubmit="return validateForm()">
+                <div id="ConnectionIPForm" class="form-group has-warning" align="center">
+                    <span>
+                        <label id="ConnectionIPLabel" class="control-label" for="inputWarning">
+                            Connection Warning
+                        </label>
+                    </span>
+
+                    <span>
+                        <div class="input-group">
+                            <input type="text" id="ConnectionIPInput" class="form-control" placeholder="ROS Bridge Master IP" placeholder="No IP Address yet">
+                            <span class="input-group-btn">
+                                <button id="ConnectionButton" type="button" onclick="ros.attemptConnection()" class="btn btn-warning">
+                                    Connect
+                                    <script type="text/javascript">
+                                        document.getElementById("ConnectionIPInput").value = ros.connectionName;
+                                    </script>
+                                </button>
+                            </span>
+                        </div>
+                    </span>
+                </div>
+            </form>
+        </div>
+        <div class="panel panel-default">
+            <div class="panel-heading">
+                Predefined ROSBridge Connections
+            </div>
+            <div class="panel-body">
+                <button id="localhostButton" type="button" onclick="ros.attemptConnection('ws://localhost:9090')" class="btn btn-primary">
+                    localhost
+                    <script type="text/javascript">
+                        document.getElementById("ConnectionIPInput").value = ros.connectionName;
+                    </script>
+                </button>
+                <button id="TitanButton" type="button" onclick="ros.attemptConnection('ws://titan.local:9090')" class="btn btn-primary">
+                    Titan
+                    <script type="text/javascript">
+                        document.getElementById("ConnectionIPInput").value = ros.connectionName;
+                    </script>
+                </button>
+                <button id="PhoebeButton" type="button" onclick="ros.attemptConnection('ws://phoebe.local:9090')" class="btn btn-primary">
+                    Phoebe
+                    <script type="text/javascript">
+                        document.getElementById("ConnectionIPInput").value = ros.connectionName;
+                    </script>
+                </button>
+                <button id="RheaButton" type="button" onclick="ros.attemptConnection('ws://rhea.local:9090')" class="btn btn-primary">
+                    Rhea
+                    <script type="text/javascript">
+                        document.getElementById("ConnectionIPInput").value = ros.connectionName;
+                    </script>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script type="text/javascript">
+        // Create a connection to the rosbridge WebSocket server.
+        ros.connect(ros.connectionName);
+    </script>
+
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            ROS Topics.
+        </div>
+        <div class="panel-body">
+
+            <div class="col-sm-1" id="ROSTopics">
+                N/A
+            </div>
+        </div>
+    </div>
+
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            ROS Nodes.
+        </div>
+        <div class="panel-body">
+
+            <div class="col-sm-1" id="ROSNodes">
+                N/A
+            </div>
+        </div>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/client/coordinator/coordinator.html b/client/app/components/coordinator/coordinator.html
similarity index 100%
rename from client/coordinator/coordinator.html
rename to client/app/components/coordinator/coordinator.html
diff --git a/client/coordinator/js/ros_scripts.js b/client/app/components/coordinator/js/ros_scripts.js
similarity index 100%
rename from client/coordinator/js/ros_scripts.js
rename to client/app/components/coordinator/js/ros_scripts.js
diff --git a/client/coordinator/js/update_guis.js b/client/app/components/coordinator/js/update_guis.js
similarity index 100%
rename from client/coordinator/js/update_guis.js
rename to client/app/components/coordinator/js/update_guis.js
diff --git a/client/vision/js/ros_scripts.js b/client/app/components/vision/js/ros_scripts.js
similarity index 100%
rename from client/vision/js/ros_scripts.js
rename to client/app/components/vision/js/ros_scripts.js
diff --git a/client/vision/js/update_guis.js b/client/app/components/vision/js/update_guis.js
similarity index 100%
rename from client/vision/js/update_guis.js
rename to client/app/components/vision/js/update_guis.js
diff --git a/client/vision/vision.html b/client/app/components/vision/vision.html
similarity index 100%
rename from client/vision/vision.html
rename to client/app/components/vision/vision.html
diff --git a/client/app/index.html b/client/app/index.html
new file mode 100644
index 0000000..72c8b41
--- /dev/null
+++ b/client/app/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Lab UI</title>
+
+        <link rel="stylesheet" href="include/css/bootstrap.min.css">
+
+
+        <script type="text/javascript" src="include/js/eventemitter2.min.js"></script>
+                
+        <script src="include/js/jquery.min.js"></script>
+        <script src="include/js/bootstrap.min.js"></script>
+        <script src="include/js/math.min.js"></script>
+
+        <script src="include/js/roslib.js"></script>
+        <script type="text/javascript" src="include/js/roslib.js"></script>
+
+        <script type="text/javascript" src="backend/js/ros_scripts.js"></script>
+        <script type="text/javascript" src="backend/js/update_guis.js"></script>
+
+        <script type="text/javascript" src="backend/js/Topic.js"></script>
+
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <script>
+            $(function(){
+                $("#coordinatorContent").load("coordinator/coordinator.html");
+            });
+        </script>
+        <script type="text/javascript" src="coordinator/js/ros_scripts.js"></script>
+        <script type="text/javascript" src="coordinator/js/update_guis.js"></script>
+
+
+        <!-- <script>
+            $(function(){
+                $("#visionContent").load("vision/vision.html");
+            });
+        </script>
+        <script type="text/javascript" src="vision/js/ros_scripts.js"></script>
+        <script type="text/javascript" src="vision/js/update_guis.js"></script> -->
+
+        <meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
+
+    </head>
+    <body>
+        <div class="container">
+            <div id="jumbotronTitle" class="jumbotron text-center">
+                <h1 id="Title">Lab UI</h1>
+
+            </div>
+            <div class="container">
+                <div class="col-md-1">
+                    Master:
+                </div>
+                <div class="col-md-3">
+                    <label id="MasterName"></label>
+                    <script>
+                        getMasterName();
+                    </script>
+                </div>
+            </div>
+            <div class="row-md-3">
+                <ul id="tabs" class="nav nav-pills" data-tabs="tabs" >
+                    <li> <a href="#rosbridgeconnection" data-toggle="tab">
+                        ROS Bridge Connection
+                        <span id="rosbridgeconnection_badge" class="badge">
+                            Not Connected
+                        </span></a>
+                    </li>
+                    <li class="active">
+                        <a href="#Coordinator" data-toggle="tab">
+                            Coordinator
+                        </a>
+                    </li>
+                    <li>
+                        <a href="vision/vision.html">
+                            Vision
+                        </a>
+                    </li>
+                </ul>
+            </div>
+
+            <div id="my-tab-content" class="tab-content">
+
+                <div class="tab-pane active" id="Coordinator">
+                    <div id="coordinatorContent"></div>
+                </div>
+                <!-- <div class="tab-pane" id="Vision">
+                    <div id="visionContent"></div>
+                </div> -->
+
+            </div>
+        </div>
+    </div>
+
+</body>
+</html>
diff --git a/client/backend/js/Node.js b/client/app/utilities/Node.js
similarity index 100%
rename from client/backend/js/Node.js
rename to client/app/utilities/Node.js
diff --git a/client/backend/js/Topic.js b/client/app/utilities/Topic.js
similarity index 100%
rename from client/backend/js/Topic.js
rename to client/app/utilities/Topic.js
diff --git a/client/backend/js/ros_scripts.js b/client/app/utilities/ros_scripts.js
similarity index 100%
rename from client/backend/js/ros_scripts.js
rename to client/app/utilities/ros_scripts.js
diff --git a/client/backend/js/update_guis.js b/client/app/utilities/update_guis.js
similarity index 100%
rename from client/backend/js/update_guis.js
rename to client/app/utilities/update_guis.js
diff --git a/client/backend/images/D-pad.png b/client/include/images/D-pad.png
similarity index 100%
rename from client/backend/images/D-pad.png
rename to client/include/images/D-pad.png
diff --git a/client/backend/images/D-pad_blank.png b/client/include/images/D-pad_blank.png
similarity index 100%
rename from client/backend/images/D-pad_blank.png
rename to client/include/images/D-pad_blank.png
diff --git a/client/backend/images/D-pad_center.png b/client/include/images/D-pad_center.png
similarity index 100%
rename from client/backend/images/D-pad_center.png
rename to client/include/images/D-pad_center.png
diff --git a/client/backend/images/D-pad_left.png b/client/include/images/D-pad_left.png
similarity index 100%
rename from client/backend/images/D-pad_left.png
rename to client/include/images/D-pad_left.png
diff --git a/client/backend/images/D-pad_up.png b/client/include/images/D-pad_up.png
similarity index 100%
rename from client/backend/images/D-pad_up.png
rename to client/include/images/D-pad_up.png
diff --git a/client/index.html b/client/index.html
deleted file mode 100644
index d6370a6..0000000
--- a/client/index.html
+++ /dev/null
@@ -1,192 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8" />
-        <title>Lab UI</title>
-
-        <link rel="stylesheet" href="include/css/bootstrap.min.css">
-
-
-        <script type="text/javascript" src="include/js/eventemitter2.min.js"></script>
-                
-        <script src="include/js/jquery.min.js"></script>
-        <script src="include/js/bootstrap.min.js"></script>
-        <script src="include/js/math.min.js"></script>
-
-        <script src="include/js/roslib.js"></script>
-        <script type="text/javascript" src="include/js/roslib.js"></script>
-
-        <script type="text/javascript" src="backend/js/ros_scripts.js"></script>
-        <script type="text/javascript" src="backend/js/update_guis.js"></script>
-
-        <script type="text/javascript" src="backend/js/Topic.js"></script>
-
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        <script>
-            $(function(){
-                $("#coordinatorContent").load("coordinator/coordinator.html");
-            });
-        </script>
-        <script type="text/javascript" src="coordinator/js/ros_scripts.js"></script>
-        <script type="text/javascript" src="coordinator/js/update_guis.js"></script>
-
-
-        <!-- <script>
-            $(function(){
-                $("#visionContent").load("vision/vision.html");
-            });
-        </script>
-        <script type="text/javascript" src="vision/js/ros_scripts.js"></script>
-        <script type="text/javascript" src="vision/js/update_guis.js"></script> -->
-
-        <meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
-
-    </head>
-    <body>
-        <div class="container">
-            <div id="jumbotronTitle" class="jumbotron text-center">
-                <h1 id="Title">Lab UI</h1>
-
-            </div>
-            <div class="container">
-                <div class="col-md-1">
-                    Master:
-                </div>
-                <div class="col-md-3">
-                    <label id="MasterName"></label>
-                    <script>
-                        getMasterName();
-                    </script>
-                </div>
-            </div>
-            <div class="row-md-3">
-                <ul id="tabs" class="nav nav-pills" data-tabs="tabs" >
-                    <li> <a href="#rosbridgeconnection" data-toggle="tab">
-                        ROS Bridge Connection
-                        <span id="rosbridgeconnection_badge" class="badge">
-                            Not Connected
-                        </span></a>
-                    </li>
-                    <li class="active">
-                        <a href="#Coordinator" data-toggle="tab">
-                            Coordinator
-                        </a>
-                    </li>
-                    <li>
-                        <a href="vision/vision.html">
-                            Vision
-                        </a>
-                    </li>
-                </ul>
-            </div>
-
-            <div id="my-tab-content" class="tab-content">
-
-                <div class="tab-pane active" id="Coordinator">
-                    <div id="coordinatorContent"></div>
-                </div>
-                <!-- <div class="tab-pane" id="Vision">
-                    <div id="visionContent"></div>
-                </div> -->
-
-
-                <div class="tab-pane" id="rosbridgeconnection">
-
-
-                    <div class="panel panel-default">
-                        <div class="panel-body">
-
-                            <form class="form-inline" role="form" onsubmit="return validateForm()">
-                                <div id="ConnectionIPForm" class="form-group has-warning" align="center">
-                                    <span>
-                                        <label id="ConnectionIPLabel" class="control-label" for="inputWarning">
-                                            Connection Warning
-                                        </label>
-                                    </span>
-
-                                    <span>
-                                        <div class="input-group">
-                                            <input type="text" id="ConnectionIPInput" class="form-control" placeholder="ROS Bridge Master IP" placeholder="No IP Address yet">
-                                            <span class="input-group-btn">
-                                                <button id="ConnectionButton" type="button" onclick="ros.attemptConnection()" class="btn btn-warning">
-                                                    Connect
-                                                    <script type="text/javascript">
-                                                        document.getElementById("ConnectionIPInput").value = ros.connectionName;
-                                                    </script>
-                                                </button>
-                                            </span>
-                                        </div>
-                                    </span>
-                                </div>
-                            </form>
-                        </div>
-                        <div class="panel panel-default">
-                            <div class="panel-heading">
-                                Predefined ROSBridge Connections
-                            </div>
-                            <div class="panel-body">
-                                <button id="localhostButton" type="button" onclick="ros.attemptConnection('ws://localhost:9090')" class="btn btn-primary">
-                                    localhost
-                                    <script type="text/javascript">
-                                        document.getElementById("ConnectionIPInput").value = ros.connectionName;
-                                    </script>
-                                </button>
-                                <button id="TitanButton" type="button" onclick="ros.attemptConnection('ws://titan.local:9090')" class="btn btn-primary">
-                                    Titan
-                                    <script type="text/javascript">
-                                        document.getElementById("ConnectionIPInput").value = ros.connectionName;
-                                    </script>
-                                </button>
-                                <button id="PhoebeButton" type="button" onclick="ros.attemptConnection('ws://phoebe.local:9090')" class="btn btn-primary">
-                                    Phoebe
-                                    <script type="text/javascript">
-                                        document.getElementById("ConnectionIPInput").value = ros.connectionName;
-                                    </script>
-                                </button>
-                                <button id="RheaButton" type="button" onclick="ros.attemptConnection('ws://rhea.local:9090')" class="btn btn-primary">
-                                    Rhea
-                                    <script type="text/javascript">
-                                        document.getElementById("ConnectionIPInput").value = ros.connectionName;
-                                    </script>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <script type="text/javascript">
-                        // Create a connection to the rosbridge WebSocket server.
-                        ros.connect(ros.connectionName);
-                    </script>
-
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            ROS Topics.
-                        </div>
-                        <div class="panel-body">
-
-                            <div class="col-sm-1" id="ROSTopics">
-                                N/A
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="panel panel-default">
-                        <div class="panel-heading">
-                            ROS Nodes.
-                        </div>
-                        <div class="panel-body">
-
-                            <div class="col-sm-1" id="ROSNodes">
-                                N/A
-                            </div>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </div>
-    </div>
-
-</body>
-</html>