diff --git a/src/App.css b/src/App.css
index 97a59363958f9df934fbdadde5d50273cb6c7da7..fd24e69dbf2683ee3d49839bca0b8ebe0fed78f5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,6 +7,8 @@ body, html{
   padding:0;
 }
 
+/* Layout: App -> html -> body -> main container -> row -> graph column & data column*/
+
 .App-main-container {
   background-color: white;
   min-height: 70vh;
diff --git a/src/App.js b/src/App.js
index cc8e9103c32dbee9e1db273ca85e77828eb3cee4..00e7d2537249f29466fb6ea0ade4805a917e7637 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,7 +9,10 @@ import Controller3 from './pages/controller3';
 import Controller4 from './pages/controller4';
 import Controller5 from './pages/controller5';
 import Controller6 from './pages/controller6';
-
+/**
+ * Entry point for the dashboard page, handles all six routes to controllers
+ *  
+ */
 function App() {
     return (
 
diff --git a/src/components/Navbar/NavbarElements.js b/src/components/Navbar/NavbarElements.js
index e1b6be14b1df0b962c9cef75f091e03d2480b805..9869eda2aea277b60a374aedabe36cfdbdc4a69e 100644
--- a/src/components/Navbar/NavbarElements.js
+++ b/src/components/Navbar/NavbarElements.js
@@ -1,7 +1,11 @@
 import { FaBars } from "react-icons/fa";
 import { NavLink as Link } from "react-router-dom";
 import styled from "styled-components";
- 
+
+/**
+ * This file contians imported styling for the imported navbar component present on each controller page
+ */
+
 export const Nav = styled.nav`
   background: #214184;
   height: 100px;
diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js
index a68138d10c5969f2c6c795e9edf701d2d9bd0832..5e262ed4b33826f6023036fa6c9258e2b3239e88 100644
--- a/src/components/Navbar/index.js
+++ b/src/components/Navbar/index.js
@@ -1,7 +1,11 @@
 import React from "react";
 import { Nav, NavLink, NavMenu }
     from "./NavbarElements";
- 
+
+/**
+ * Imported navbar element that contains routes to each of the six controllers
+ * 
+ */
 const Navbar = () => {
     return (
         <>
diff --git a/src/index.js b/src/index.js
index 47081a6772137337feb267206dc8c7ab445f2414..284c6caadd53fbf3dfd344b0037d38f7c17e44bd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
- 
+
+/**
+ * Default index for App.js
+ */
 ReactDOM.render(
     <React.StrictMode>
         <App />
diff --git a/src/pages/controller1.js b/src/pages/controller1.js
index 56c8cb5a97a9bf4c23411606d3fb625985b88b37..61f5376091fa1eb4efcfdc89f9e71cdee1462155 100644
--- a/src/pages/controller1.js
+++ b/src/pages/controller1.js
@@ -3,6 +3,7 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Responsi
 import ssec from '../config/ssec-logo.png';
 import '../App.css';
 
+// Static data for testing, use msgpack and create vars here
 const data = [
     {
       Temp: 240,
@@ -27,6 +28,10 @@ const data = [
     },
 ];
 
+/**
+ * React and HTML for main container for this controller
+ * Styled by App.css
+ */
 const controller1 = () => {
     return (
     <html>
diff --git a/src/pages/controller2.js b/src/pages/controller2.js
index 2fae98682160f8d66e22ec11a136ab7312aac633..a54484c30300f4a670fb5b1893519456ff732b39 100644
--- a/src/pages/controller2.js
+++ b/src/pages/controller2.js
@@ -3,30 +3,35 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Responsi
 import ssec from '../config/ssec-logo.png';
 import '../App.css';
 
+// Static data for testing, use msgpack and create vars here
 const data = [
-    {
-      Temp: 240,
-    },
-    {
-      Temp: 139,
-    },
-    {
-      Temp: 980,
-    },
-    {
-      Temp: 390,
-    },
-    {
-      Temp: 480,
-    },
-    {
-      Temp: 380,
-    },
-    {
-      Temp: 322,
-    },
+  {
+    Temp: 240,
+  },
+  {
+    Temp: 139,
+  },
+  {
+    Temp: 980,
+  },
+  {
+    Temp: 390,
+  },
+  {
+    Temp: 480,
+  },
+  {
+    Temp: 380,
+  },
+  {
+    Temp: 322,
+  },
 ];
 
+/**
+* React and HTML for main container for this controller
+* Styled by App.css
+*/
 const controller2 = () => {
     return (
     <html>
diff --git a/src/pages/controller3.js b/src/pages/controller3.js
index a43bc62dfbb8e675c3cfa502b272fc67a8725581..ee6de73013d058e3675eb229878f2359e8c8aab3 100644
--- a/src/pages/controller3.js
+++ b/src/pages/controller3.js
@@ -3,30 +3,35 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Responsi
 import ssec from '../config/ssec-logo.png';
 import '../App.css';
 
+// Static data for testing, use msgpack and create vars here
 const data = [
-    {
-      Temp: 240,
-    },
-    {
-      Temp: 139,
-    },
-    {
-      Temp: 980,
-    },
-    {
-      Temp: 390,
-    },
-    {
-      Temp: 480,
-    },
-    {
-      Temp: 380,
-    },
-    {
-      Temp: 322,
-    },
+  {
+    Temp: 240,
+  },
+  {
+    Temp: 139,
+  },
+  {
+    Temp: 980,
+  },
+  {
+    Temp: 390,
+  },
+  {
+    Temp: 480,
+  },
+  {
+    Temp: 380,
+  },
+  {
+    Temp: 322,
+  },
 ];
 
+/**
+* React and HTML for main container for this controller
+* Styled by App.css
+*/
 const controller3 = () => {
     return (
     <html>
diff --git a/src/pages/controller4.js b/src/pages/controller4.js
index 1482cd8a59d06cc38e7d2f5678c2ae5ccc73dd06..b1700696d713a5a7715cb4ad8d12086680979fc8 100644
--- a/src/pages/controller4.js
+++ b/src/pages/controller4.js
@@ -3,30 +3,35 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Responsi
 import ssec from '../config/ssec-logo.png';
 import '../App.css';
 
+// Static data for testing, use msgpack and create vars here
 const data = [
-    {
-      Temp: 240,
-    },
-    {
-      Temp: 139,
-    },
-    {
-      Temp: 980,
-    },
-    {
-      Temp: 390,
-    },
-    {
-      Temp: 480,
-    },
-    {
-      Temp: 380,
-    },
-    {
-      Temp: 322,
-    },
+  {
+    Temp: 240,
+  },
+  {
+    Temp: 139,
+  },
+  {
+    Temp: 980,
+  },
+  {
+    Temp: 390,
+  },
+  {
+    Temp: 480,
+  },
+  {
+    Temp: 380,
+  },
+  {
+    Temp: 322,
+  },
 ];
 
+/**
+* React and HTML for main container for this controller
+* Styled by App.css
+*/
 const controller4 = () => {
     return (
     <html>
diff --git a/src/pages/controller5.js b/src/pages/controller5.js
index afd5abc576f72e71005aee4d09d102296ca9574f..ecee776a6ff6d087bbf60ed59c3cae85ced4a4a5 100644
--- a/src/pages/controller5.js
+++ b/src/pages/controller5.js
@@ -3,30 +3,35 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Responsi
 import ssec from '../config/ssec-logo.png';
 import '../App.css';
 
+// Static data for testing, use msgpack and create vars here
 const data = [
-    {
-      Temp: 240,
-    },
-    {
-      Temp: 139,
-    },
-    {
-      Temp: 980,
-    },
-    {
-      Temp: 390,
-    },
-    {
-      Temp: 480,
-    },
-    {
-      Temp: 380,
-    },
-    {
-      Temp: 322,
-    },
+  {
+    Temp: 240,
+  },
+  {
+    Temp: 139,
+  },
+  {
+    Temp: 980,
+  },
+  {
+    Temp: 390,
+  },
+  {
+    Temp: 480,
+  },
+  {
+    Temp: 380,
+  },
+  {
+    Temp: 322,
+  },
 ];
 
+/**
+* React and HTML for main container for this controller
+* Styled by App.css
+*/
 const controller5 = () => {
     return (
     <html>
diff --git a/src/pages/controller6.js b/src/pages/controller6.js
index 5b195ec11f54dedce99212f98fe755ffc66b2d4e..ee3198998f45fac4eae145c54caf0c5e1b5630de 100644
--- a/src/pages/controller6.js
+++ b/src/pages/controller6.js
@@ -3,30 +3,35 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Responsi
 import ssec from '../config/ssec-logo.png';
 import '../App.css';
 
+// Static data for testing, use msgpack and create vars here
 const data = [
-    {
-      Temp: 240,
-    },
-    {
-      Temp: 139,
-    },
-    {
-      Temp: 980,
-    },
-    {
-      Temp: 390,
-    },
-    {
-      Temp: 480,
-    },
-    {
-      Temp: 380,
-    },
-    {
-      Temp: 322,
-    },
+  {
+    Temp: 240,
+  },
+  {
+    Temp: 139,
+  },
+  {
+    Temp: 980,
+  },
+  {
+    Temp: 390,
+  },
+  {
+    Temp: 480,
+  },
+  {
+    Temp: 380,
+  },
+  {
+    Temp: 322,
+  },
 ];
 
+/**
+* React and HTML for main container for this controller
+* Styled by App.css
+*/
 const controller6 = () => {
     return (
     <html>