diff --git a/teleop/htm/static/JS/index.js b/teleop/htm/static/JS/Index/index.js
similarity index 100%
rename from teleop/htm/static/JS/index.js
rename to teleop/htm/static/JS/Index/index.js
diff --git a/teleop/htm/static/JS/index_a_utils.js b/teleop/htm/static/JS/Index/index_a_utils.js
similarity index 100%
rename from teleop/htm/static/JS/index_a_utils.js
rename to teleop/htm/static/JS/Index/index_a_utils.js
diff --git a/teleop/htm/static/JS/index_b_gamepad.js b/teleop/htm/static/JS/Index/index_b_gamepad.js
similarity index 100%
rename from teleop/htm/static/JS/index_b_gamepad.js
rename to teleop/htm/static/JS/Index/index_b_gamepad.js
diff --git a/teleop/htm/static/JS/index_c_screen.js b/teleop/htm/static/JS/Index/index_c_screen.js
similarity index 95%
rename from teleop/htm/static/JS/index_c_screen.js
rename to teleop/htm/static/JS/Index/index_c_screen.js
index c9304712..e22659d9 100644
--- a/teleop/htm/static/JS/index_c_screen.js
+++ b/teleop/htm/static/JS/Index/index_c_screen.js
@@ -11,15 +11,15 @@ var screen_utils = {
     }, 
 
     _init: function() {
-        this._arrow_images.left = this._create_image('../assets/im_arrow_left.png?v=' + this._version);
-        this._arrow_images.right = this._create_image('../assets/im_arrow_right.png?v=' + this._version);
-        this._arrow_images.ahead = this._create_image('../assets/im_arrow_up.png?v=' + this._version);
-        this._arrow_images.none = this._create_image('../assets/im_arrow_none.png?v=' + this._version);
-        this._wheel_images.black = this._create_image('../assets/im_wheel_black.png?v=' + this._version);
-        this._wheel_images.blue = this._create_image('../assets/im_wheel_blue.png?v=' + this._version);
-        this._wheel_images.red = this._create_image('../assets/im_wheel_red.png?v=' + this._version);
-        this._navigation_icons.play = this._create_image('../assets/icon_play.png?v=' + this._version);
-        this._navigation_icons.pause = this._create_image('../assets/icon_pause.png?v=' + this._version);
+        this._arrow_images.left = this._create_image('../static/assets/im_arrow_left.png?v=' + this._version);
+        this._arrow_images.right = this._create_image('../static/assets/im_arrow_right.png?v=' + this._version);
+        this._arrow_images.ahead = this._create_image('../static/assets/im_arrow_up.png?v=' + this._version);
+        this._arrow_images.none = this._create_image('../static/assets/im_arrow_none.png?v=' + this._version);
+        this._wheel_images.black = this._create_image('../static/assets/im_wheel_black.png?v=' + this._version);
+        this._wheel_images.blue = this._create_image('../static/assets/im_wheel_blue.png?v=' + this._version);
+        this._wheel_images.red = this._create_image('../static/assets/im_wheel_red.png?v=' + this._version);
+        this._navigation_icons.play = this._create_image('../static/assets/icon_play.png?v=' + this._version);
+        this._navigation_icons.pause = this._create_image('../static/assets/icon_pause.png?v=' + this._version);
     },
 
     _decorate_server_message: function(message) {
diff --git a/teleop/htm/static/JS/index_d_navigator.js b/teleop/htm/static/JS/Index/index_d_navigator.js
similarity index 100%
rename from teleop/htm/static/JS/index_d_navigator.js
rename to teleop/htm/static/JS/Index/index_d_navigator.js
diff --git a/teleop/htm/static/JS/index_e_teleop.js b/teleop/htm/static/JS/Index/index_e_teleop.js
similarity index 100%
rename from teleop/htm/static/JS/index_e_teleop.js
rename to teleop/htm/static/JS/Index/index_e_teleop.js
diff --git a/teleop/htm/static/JS/index_f_trainingSessions.js b/teleop/htm/static/JS/Index/index_f_trainingSessions.js
similarity index 100%
rename from teleop/htm/static/JS/index_f_trainingSessions.js
rename to teleop/htm/static/JS/Index/index_f_trainingSessions.js
diff --git a/teleop/htm/static/JS/index_video_hlp.js b/teleop/htm/static/JS/Index/index_video_hlp.js
similarity index 100%
rename from teleop/htm/static/JS/index_video_hlp.js
rename to teleop/htm/static/JS/Index/index_video_hlp.js
diff --git a/teleop/htm/static/JS/index_video_mjpeg.js b/teleop/htm/static/JS/Index/index_video_mjpeg.js
similarity index 100%
rename from teleop/htm/static/JS/index_video_mjpeg.js
rename to teleop/htm/static/JS/Index/index_video_mjpeg.js
diff --git a/teleop/htm/static/JS/mobileController/mobileController_a_app.js b/teleop/htm/static/JS/mobileController/mobileController_a_app.js
index bc338f3c..ae073038 100644
--- a/teleop/htm/static/JS/mobileController/mobileController_a_app.js
+++ b/teleop/htm/static/JS/mobileController/mobileController_a_app.js
@@ -1,10 +1,10 @@
-import { topTriangle, bottomTriangle } from "/JS/mobileController/mobileController_b_shape_triangle.js"
-import { Dot } from "/JS/mobileController/mobileController_b_shape_dot.js"
+import { topTriangle, bottomTriangle } from "./mobileController_b_shape_triangle.js"
+import { Dot } from "./mobileController_b_shape_dot.js"
 import { handleDotMove, detectTriangle, handleTriangleMove, initializeWS, sendJSONCommand }
-  from "/JS/mobileController/mobileController_c_logic.js"
+  from "./mobileController_c_logic.js"
 
-import CTRL_STAT from '/JS/mobileController/mobileController_z_state.js'; // Stands for control state
-import { redraw, app } from "/JS/mobileController/mobileController_d_pixi.js";
+import CTRL_STAT from './mobileController_z_state.js'; // Stands for control state
+import { redraw, app } from "./mobileController_d_pixi.js";
 
 
 window.addEventListener('load', () => {
diff --git a/teleop/htm/static/JS/mobileController/mobileController_c_logic.js b/teleop/htm/static/JS/mobileController/mobileController_c_logic.js
index 3bbbe45a..e8b91d1a 100644
--- a/teleop/htm/static/JS/mobileController/mobileController_c_logic.js
+++ b/teleop/htm/static/JS/mobileController/mobileController_c_logic.js
@@ -1,7 +1,7 @@
 
-import { topTriangle, bottomTriangle } from "/JS/mobileController/mobileController_b_shape_triangle.js"
-import CTRL_STAT from '/JS/mobileController/mobileController_z_state.js';
-import { redraw } from '/JS/mobileController/mobileController_d_pixi.js';
+import { topTriangle, bottomTriangle } from "./mobileController_b_shape_triangle.js"
+import CTRL_STAT from './mobileController_z_state.js';
+import { redraw } from './mobileController_d_pixi.js';
 
 function initializeWS() {
   let WSprotocol = document.location.protocol === 'https:' ? 'wss://' : 'ws://';
diff --git a/teleop/htm/static/JS/mobileController/mobileController_d_pixi.js b/teleop/htm/static/JS/mobileController/mobileController_d_pixi.js
index eb7cd49d..f6a5ee09 100644
--- a/teleop/htm/static/JS/mobileController/mobileController_d_pixi.js
+++ b/teleop/htm/static/JS/mobileController/mobileController_d_pixi.js
@@ -1,5 +1,5 @@
-import { topTriangle, bottomTriangle } from "/JS/mobileController/mobileController_b_shape_triangle.js"
-import CTRL_STAT from '/JS/mobileController/mobileController_z_state.js';
+import { topTriangle, bottomTriangle } from "./mobileController_b_shape_triangle.js"
+import CTRL_STAT from './mobileController_z_state.js';
 
 const app = new PIXI.Application({
   width: window.innerWidth,
diff --git a/teleop/htm/static/JS/mobileController/mobileController_z_state.js b/teleop/htm/static/JS/mobileController/mobileController_z_state.js
index 563d60ef..38c858d4 100644
--- a/teleop/htm/static/JS/mobileController/mobileController_z_state.js
+++ b/teleop/htm/static/JS/mobileController/mobileController_z_state.js
@@ -1,7 +1,7 @@
 //Shared State variables that goes between the files/modules used
 
-import { Dot } from "/JS/mobileController/mobileController_b_shape_dot.js"
-import { topTriangle, bottomTriangle } from "/JS/mobileController/mobileController_b_shape_triangle.js"
+import { Dot } from "./mobileController_b_shape_dot.js"
+import { topTriangle, bottomTriangle } from "./mobileController_b_shape_triangle.js"
 
 class MobileControllerState {
   //The starting y coord when the triangles are relocated ()
diff --git a/teleop/htm/static/JS/menu_controls.js b/teleop/htm/static/JS/userMenu/menu_controls.js
similarity index 100%
rename from teleop/htm/static/JS/menu_controls.js
rename to teleop/htm/static/JS/userMenu/menu_controls.js
diff --git a/teleop/htm/static/JS/menu_logbox.js b/teleop/htm/static/JS/userMenu/menu_logbox.js
similarity index 100%
rename from teleop/htm/static/JS/menu_logbox.js
rename to teleop/htm/static/JS/userMenu/menu_logbox.js
diff --git a/teleop/htm/static/JS/menu_settings.js b/teleop/htm/static/JS/userMenu/menu_settings.js
similarity index 100%
rename from teleop/htm/static/JS/menu_settings.js
rename to teleop/htm/static/JS/userMenu/menu_settings.js
diff --git a/teleop/htm/templates/index.html b/teleop/htm/templates/index.html
index 64dd45b4..196e7141 100644
--- a/teleop/htm/templates/index.html
+++ b/teleop/htm/templates/index.html
@@ -6,8 +6,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>teleop</title>
-  <link rel="stylesheet" type="text/css" href="CSS/style.css" />
-  <script src="external/jquery-3.4.1.min.js"></script>
+  <link rel="stylesheet" type="text/css" href="../static/CSS/style.css" />
+  <script src="../static/external/jquery-3.4.1.min.js"></script>
   <link rel="shortcut icon" href="#" />
 </head>
 
@@ -41,7 +41,7 @@
     <div id="horizontal_bar">
       <div id="home_menu" title="Settings">
         <a title="navigate to user menu page" href="/user_menu">
-          <img id="home_menu_icon" src="assets/index-menu.png" />
+          <img id="home_menu_icon" src="../static/assets/index-menu.png" />
         </a>
       </div>
       <div id="stream_links">
@@ -52,16 +52,16 @@
       </div>
       <div id="mjpeg_stream_controls">
         <span id="mjpeg_quality_val">0</span>
-        <img id="caret_down" src="assets/caret.png" class="caret_img" title="Decrease motion jpeg quality" />
-        <img id="caret_up" src="assets/caret.png" class="caret_img" title="Increase motion jpeg quality" />
+        <img id="caret_down" src="../static/assets/caret.png" class="caret_img" title="Decrease motion jpeg quality" />
+        <img id="caret_up" src="../static/assets/caret.png" class="caret_img" title="Increase motion jpeg quality" />
       </div>
       <div id="preview_container" title="Show this camera on the main display">
         <img id="mjpeg_camera_preview_image" class="preview_img" />
       </div>
       <div id="overlay_control_container">
-        <img src="assets/expand-collapse-icon-8.jpg" id="expand_camera_icon"
+        <img src="../static/assets/expand-collapse-icon-8.jpg" id="expand_camera_icon"
           title="Expand or collapse the camera overlay" />
-        <a id="open_training_sessions_list" href="#"><img src="assets/gps_icon.jpg"
+        <a id="open_training_sessions_list" href="#"><img src="../static/assets/gps_icon.jpg"
             title="Show training sessions" /></a>
       </div>
       <div id="dashboard">
@@ -89,11 +89,11 @@
       <div id="navigation_route_container" title="Navigation points and their images will be displayed when matched">
         <p>
           <span id="navigation_route_sel_prev" title="Select the previous route, if any">
-            <img src="assets/caret.png" class="caret_img" />
+            <img src="../static/assets/caret.png" class="caret_img" />
           </span>
           <span id="navigation_route_name"></span>
           <span id="navigation_route_sel_next" title="Select the next route, if any">
-            <img src="assets/caret.png" class="caret_img" />
+            <img src="../static/assets/caret.png" class="caret_img" />
           </span>
         </p>
         <p>
@@ -122,18 +122,18 @@ <h2>Training sessions</h2>
     </div>
   </div>
 
-  <!-- The script is moved here to give the HTML time to load before any of the JavaScript loads, which can prevent errors, and speed up website response time. -->
-  <script src="JS/index.js"></script>
-  <script src="JS/index_a_utils.js"></script>
-  <script src="JS/index_b_gamepad.js"></script>
-  <script src="JS/index_c_screen.js"></script>
-  <script src="JS/index_d_navigator.js"></script>
-  <script src="JS/index_e_teleop.js"></script>
-  <script src="JS/index_f_trainingSessions.js"></script>
-  <script src="JS/http-live-player.js"></script>
-  <script src="JS/performance-polyfill.js"></script>
-  <script src="JS/index_video_hlp.js"></script>
-  <script src="JS/index_video_mjpeg.js"></script>
+  <!-- The script is moved here to give the HTML time to load before any of the JavaScript loads -->
+  <script src="../static/JS/Index/index.js"></script>
+  <script src="../static/JS/Index/index_a_utils.js"></script>
+  <script src="../static/JS/Index/index_b_gamepad.js"></script>
+  <script src="../static/JS/Index/index_c_screen.js"></script>
+  <script src="../static/JS/Index/index_d_navigator.js"></script>
+  <script src="../static/JS/Index/index_e_teleop.js"></script>
+  <script src="../static/JS/Index/index_f_trainingSessions.js"></script>
+  <script src="../static/JS/Index/index_video_hlp.js"></script>
+  <script src="../static/JS/Index/index_video_mjpeg.js"></script>
+  <script src="../static/JS/http-live-player.js"></script>
+  <script src="../static/JS/performance-polyfill.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/teleop/htm/templates/mobile_controller_ui.html b/teleop/htm/templates/mobile_controller_ui.html
index 3b7e10b3..5555370d 100644
--- a/teleop/htm/templates/mobile_controller_ui.html
+++ b/teleop/htm/templates/mobile_controller_ui.html
@@ -4,30 +4,14 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" type="text/css" href="../static/CSS/mobileController.css">
   <link rel="shortcut icon" href="#" />
   <title>Mobile controller</title>
 </head>
 
 <body>
-  <style>
-    body,
-    html {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      /* This will prevent scrollbar from appearing */
-    }
-
-    canvas {
-      display: block;
-    }
-  </style>
-
-  <script src="external/pixi-v7.3.0-rc.2.min.js"></script>
-  <!-- File/folder names cannot be capital -->
-  <script type="module" src="JS/mobileController/mobileController_a_app.js"></script>
+  <script src="../static/external/pixi-v7.3.0-rc.2.min.js"></script>
+  <script type="module" src="../static/JS/mobileController/mobileController_a_app.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/teleop/htm/templates/user_menu.html b/teleop/htm/templates/user_menu.html
index dbd48531..93f96d5e 100644
--- a/teleop/htm/templates/user_menu.html
+++ b/teleop/htm/templates/user_menu.html
@@ -4,11 +4,11 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Menu</title>
-		<link rel="stylesheet" href="external/jquery-ui-1.12.1.min.css" />
-		<link rel="stylesheet" href="external/radioslider-1.0.0_b1.min.css" />
-		<link rel="stylesheet" href="external/datatables/datatables-1.11.5.min.css" />
-		<link rel="stylesheet" href="external/datatables/fixedheader-3.2.2.min.css" />
-    <link rel="shortcut icon" href="#">
+		<link rel="stylesheet" href="../static/external/jquery-ui-1.12.1.min.css" />
+		<link rel="stylesheet" href="../static/external/radioslider-1.0.0_b1.min.css" />
+		<link rel="stylesheet" href="../static/external/datatables/datatables-1.11.5.min.css" />
+		<link rel="stylesheet" href="../static/external/datatables/fixedheader-3.2.2.min.css" />
+		<link rel="shortcut icon" href="#" />
 		<style type="text/css">
 			.application {
 				display: flex;
@@ -76,15 +76,15 @@
 			</main>
 		</div>
 		<footer></footer>
-    <script src="external/jquery-3.4.1.min.js"></script>
-		<script src="external/jquery-ui-1.12.1.min.js"></script>
-		<script src="external/jquery.radioslider-1.0.0_b1.min.js"></script>
-		<script src="external/datatables/datatables-1.11.5.min.js"></script>
-		<script src="external/datatables/fixedheader-3.2.2.min.js"></script>
-		<script src="JS/index_a_utils.js"></script>
-		<script src="JS/menu_settings.js"></script>
-		<script src="JS/menu_controls.js"></script>
-		<script src="JS/menu_logbox.js"></script>
+		<script src="../static/external/jquery-3.4.1.min.js"></script>
+		<script src="../static/external/jquery-ui-1.12.1.min.js"></script>
+		<script src="../static/external/jquery.radioslider-1.0.0_b1.min.js"></script>
+		<script src="../static/external/datatables/datatables-1.11.5.min.js"></script>
+		<script src="../static/external/datatables/fixedheader-3.2.2.min.js"></script>
+		<script src="../static/JS/Index/index_a_utils.js"></script>
+		<script src="../static/JS/userMenu/menu_settings.js"></script>
+		<script src="../static/JS/userMenu/menu_controls.js"></script>
+		<script src="../static/JS/userMenu/menu_logbox.js"></script>
 	</body>
 </html>
 <script type="text/javascript">
diff --git a/teleop/teleop/app.py b/teleop/teleop/app.py
index 385d3db5..75cdb0c1 100644
--- a/teleop/teleop/app.py
+++ b/teleop/teleop/app.py
@@ -434,7 +434,7 @@ def teleop_publish(cmd):
                     # Path to where the static files are stored (JS,CSS, images)
                     r"/(.*)",
                     web.StaticFileHandler,
-                    {"path": os.path.join(os.path.sep, "app", "htm", "static")},
+                    {"path": os.path.join(os.path.sep, "app", "htm")},
                 ),
             ]
         )