diff --git a/client/package-lock.json b/client/package-lock.json
index 0040437d..aacc7014 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -27,6 +27,7 @@
 				"react-leaflet": "^3.2.5",
 				"react-router-dom": "^5.3.0",
 				"react-scripts": "^4.0.3",
+				"reactstrap": "^9.0.2",
 				"regex-parser": "^2.2.11",
 				"socket.io": "^3.0.3",
 				"socket.io-client": "^3.0.3",
@@ -9341,19 +9342,6 @@
 			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
 			"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
 		},
-		"node_modules/fsevents": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-			"hasInstallScript": true,
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"engines": {
-				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-			}
-		},
 		"node_modules/function-bind": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -15997,6 +15985,11 @@
 			"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
 			"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
 		},
+		"node_modules/react-fast-compare": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+			"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+		},
 		"node_modules/react-is": {
 			"version": "17.0.2",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -16020,6 +16013,19 @@
 			"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
 			"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
 		},
+		"node_modules/react-popper": {
+			"version": "2.2.5",
+			"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+			"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+			"dependencies": {
+				"react-fast-compare": "^3.0.1",
+				"warning": "^4.0.2"
+			},
+			"peerDependencies": {
+				"@popperjs/core": "^2.0.0",
+				"react": "^16.8.0 || ^17"
+			}
+		},
 		"node_modules/react-redux": {
 			"version": "7.2.6",
 			"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
@@ -16238,6 +16244,23 @@
 				"react-dom": ">=16.6.0"
 			}
 		},
+		"node_modules/reactstrap": {
+			"version": "9.0.2",
+			"resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.0.2.tgz",
+			"integrity": "sha512-vvSy/dX7UL5fsfu4WMLnPYfrBS/G2YQM37nff1caeAlMVqzg6NV8G7RRd8PWu8RqtCSeEjDn5ILF0ZmE2ZrHuw==",
+			"dependencies": {
+				"@babel/runtime": "^7.12.5",
+				"@popperjs/core": "^2.6.0",
+				"classnames": "^2.2.3",
+				"prop-types": "^15.5.8",
+				"react-popper": "^2.2.4",
+				"react-transition-group": "^4.4.2"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
 		"node_modules/read-pkg": {
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -19909,24 +19932,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/watchpack-chokidar2/node_modules/fsevents": {
-			"version": "1.2.13",
-			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-			"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-			"deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.",
-			"hasInstallScript": true,
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"dependencies": {
-				"bindings": "^1.5.0",
-				"nan": "^2.12.1"
-			},
-			"engines": {
-				"node": ">= 4.0"
-			}
-		},
 		"node_modules/watchpack-chokidar2/node_modules/glob-parent": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@@ -20383,24 +20388,6 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/webpack-dev-server/node_modules/fsevents": {
-			"version": "1.2.13",
-			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-			"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-			"deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.",
-			"hasInstallScript": true,
-			"optional": true,
-			"os": [
-				"darwin"
-			],
-			"dependencies": {
-				"bindings": "^1.5.0",
-				"nan": "^2.12.1"
-			},
-			"engines": {
-				"node": ">= 4.0"
-			}
-		},
 		"node_modules/webpack-dev-server/node_modules/glob-parent": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@@ -25286,8 +25273,7 @@
 			"optional": true
 		},
 		"bindings": {
-			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+			"version": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
 			"integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
 			"optional": true,
 			"requires": {
@@ -28700,12 +28686,6 @@
 			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
 			"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
 		},
-		"fsevents": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-			"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-			"optional": true
-		},
 		"function-bind": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -31671,8 +31651,7 @@
 			"integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
 		},
 		"nan": {
-			"version": "2.15.0",
-			"resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
+			"version": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
 			"integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==",
 			"optional": true
 		},
@@ -33976,6 +33955,11 @@
 			"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
 			"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
 		},
+		"react-fast-compare": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+			"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+		},
 		"react-is": {
 			"version": "17.0.2",
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -33994,6 +33978,15 @@
 			"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
 			"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
 		},
+		"react-popper": {
+			"version": "2.2.5",
+			"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+			"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+			"requires": {
+				"react-fast-compare": "^3.0.1",
+				"warning": "^4.0.2"
+			}
+		},
 		"react-redux": {
 			"version": "7.2.6",
 			"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
@@ -34164,6 +34157,19 @@
 				"prop-types": "^15.6.2"
 			}
 		},
+		"reactstrap": {
+			"version": "9.0.2",
+			"resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.0.2.tgz",
+			"integrity": "sha512-vvSy/dX7UL5fsfu4WMLnPYfrBS/G2YQM37nff1caeAlMVqzg6NV8G7RRd8PWu8RqtCSeEjDn5ILF0ZmE2ZrHuw==",
+			"requires": {
+				"@babel/runtime": "^7.12.5",
+				"@popperjs/core": "^2.6.0",
+				"classnames": "^2.2.3",
+				"prop-types": "^15.5.8",
+				"react-popper": "^2.2.4",
+				"react-transition-group": "^4.4.2"
+			}
+		},
 		"read-pkg": {
 			"version": "5.2.0",
 			"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -37092,16 +37098,6 @@
 						}
 					}
 				},
-				"fsevents": {
-					"version": "1.2.13",
-					"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-					"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-					"optional": true,
-					"requires": {
-						"bindings": "^1.5.0",
-						"nan": "^2.12.1"
-					}
-				},
 				"glob-parent": {
 					"version": "3.1.0",
 					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@@ -37698,16 +37694,6 @@
 						"locate-path": "^3.0.0"
 					}
 				},
-				"fsevents": {
-					"version": "1.2.13",
-					"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-					"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-					"optional": true,
-					"requires": {
-						"bindings": "^1.5.0",
-						"nan": "^2.12.1"
-					}
-				},
 				"glob-parent": {
 					"version": "3.1.0",
 					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
diff --git a/client/package.json b/client/package.json
index a1571bce..b599a278 100644
--- a/client/package.json
+++ b/client/package.json
@@ -22,6 +22,7 @@
 		"react-leaflet": "^3.2.5",
 		"react-router-dom": "^5.3.0",
 		"react-scripts": "^4.0.3",
+		"reactstrap": "^9.0.2",
 		"regex-parser": "^2.2.11",
 		"socket.io": "^3.0.3",
 		"socket.io-client": "^3.0.3",
diff --git a/client/public/index.html b/client/public/index.html
index f7be4450..bedbb8eb 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -30,6 +30,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal-root" style="z-index: 999; position: relative;"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/client/public/slippy_map_getter.py b/client/public/slippy_map_getter.py
new file mode 100644
index 00000000..3a0148c9
--- /dev/null
+++ b/client/public/slippy_map_getter.py
@@ -0,0 +1,69 @@
+import math
+import os
+import requests
+import time
+
+# https://tile.openstreetmap.org/{z}/{x}/{y}.png
+
+# window position and zoom for the auvsi suas base, webster field
+# zoom 17
+# top lat: 38.15163
+# bot lat: 38.14177
+
+def main():
+    lon = -76.428038
+    lat = 38.1458611
+    deg_distance = 0.016
+    zoom = 17
+
+    lon_in = input("Longitude of center? [default: " + str(lon) + "] ")
+    if lon_in != "":
+        lon = float(lon_in)
+
+    lat_in = input("Latitude of center? [default: " + str(lat) + "] ")
+    if lat_in != "":
+        lat = float(lat_in)
+
+    zoom_deg_in = input("Zoom and degree? [default: " + str(zoom) + " " + str(deg_distance) + "] ")
+    if zoom_deg_in != "":
+        zoom_in, deg_in = zoom_deg_in.split()
+        if zoom_in != "" and deg_in != "":
+            zoom = int(zoom_in)
+            deg_distance = float(deg_in)
+
+    print()
+    for i in range(9, 19):
+        zoom_deg = deg_distance * (2**(zoom - i))
+        # assuming in northwest hemisphere
+        x1, y1 = convert_to_slippy(lat + deg_distance, lon - deg_distance, i)
+        x2, y2 = convert_to_slippy(lat - deg_distance, lon + deg_distance, i)
+
+        for j in range(x1, x2 + 1):
+            for k in range(y1, y2 + 1):
+                if not os.path.isfile(f"./map/{i}/{j}/{k}.png"):
+                    if not os.path.exists(f"./map/{i}/{j}"):
+                        os.makedirs(f"./map/{i}/{j}")
+
+                    print("Downloading: [x: " + str(j) + ", y: " + str(k) + ", zoom: " + str(i) + "]")
+                    url = f"https://tile.openstreetmap.org/{i}/{j}/{k}.png"
+                    r = requests.get(url, allow_redirects=False)
+                    file = open(f"./map/{i}/{j}/{k}.png", "wb")
+                    file.write(r.content)
+                    file.close()
+
+                    time.sleep(1/1000)
+
+def convert_to_slippy(lat, lon, zoom):
+    x = lon*math.pi/180
+    y = math.log(math.tan(lat*math.pi/180) + 1/math.cos(lat*math.pi/180)) # natural log
+
+    x = (1 + x/math.pi)/2
+    y = (1 - y/math.pi)/2
+
+    x = int(x * (2**zoom))
+    y = int(y * (2**zoom))
+
+    return (x, y)
+
+if __name__ == "__main__":
+    main()
\ No newline at end of file
diff --git a/client/src/backend.js b/client/src/backend.js
index 890e904b..1d799d3c 100644
--- a/client/src/backend.js
+++ b/client/src/backend.js
@@ -24,4 +24,12 @@ const httppost = async (endpoint, data, func) => {
     return response
 }
 
-export { httpget, httppost }
+const getUrl = () => {
+    return url
+}
+
+const setUrl = (u) => {
+    url = u;
+}
+
+export { httpget, httppost, getUrl, setUrl }
diff --git a/client/src/components/Containers/Modal.js b/client/src/components/Containers/Modal.js
new file mode 100644
index 00000000..ec19b452
--- /dev/null
+++ b/client/src/components/Containers/Modal.js
@@ -0,0 +1,134 @@
+import React, { useEffect, useState } from "react"
+import ReactDOM from "react-dom"
+import { Checkbox } from "components/UIElements"
+import styled from "styled-components"
+import { darker } from "theme/Colors"
+
+export const Modal = props => {
+    const [node] = useState(() => {
+        return document.createElement("div")
+    })
+    node.style.zIndex = 1050;
+    node.style.position = "relative"
+    node.style.display = "block"
+    useEffect(() => {
+        document.body.appendChild(node)
+        return () => {
+            document.body.removeChild(node)
+        }
+    }, [])
+
+    return (
+        <div>
+            { props.open ? ReactDOM.createPortal(
+                <div>
+                    <ModalBox>
+                        <ModalDialog onClick={() => {
+                            if (props.setOpen) {
+                                props.setOpen(false)
+                            }
+                        }}>
+                            <ModalContent onClick={(e) => {
+                                e.stopPropagation();
+                            }}>
+                                { props.children }
+                            </ModalContent>
+                        </ModalDialog>
+                    </ModalBox>
+                </div>
+            , node) : null }
+        </div>
+    )
+}
+
+export const ModalCheckboxes = (props) => {
+    return (
+        <CheckboxDiv1>
+            <CheckboxDiv2>
+                <Checkbox callback={() => {
+                    if (props.setOpen) {
+                        props.setOpen(false)
+                    }
+                    if (props.decline) {
+                        props.decline()
+                    }
+                }} type="decline" style={{ "margin-left": "auto", "margin-right": "0.5rem", "height": "4rem", "width": "8rem" }}></Checkbox>
+                <Checkbox callback={() => {
+                    if (props.setOpen) {
+                        props.setOpen(false)
+                    }
+                    if (props.accept) {
+                        props.accept()
+                    }
+                }} type="accept" style={{ "margin-right": "0", "height": "4rem", "width": "8rem" }}></Checkbox>
+            </CheckboxDiv2>
+        </CheckboxDiv1>
+    )
+}
+
+const CheckboxDiv2 = styled.div`
+    display: flex;
+    margin-top: auto;
+    flex-direction: row;
+    margin-right: 0;
+    margin-left: auto;
+`
+
+const CheckboxDiv1 = styled.div`
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+`
+
+export const ModalHeader = styled.div`
+    font-size: 3em;
+    font-family: Montserrat;
+    padding-bottom: 0.3rem;
+    border-style: solid;
+    border-width: 0 0 1px 0;
+    margin-bottom: 2rem;
+`
+
+export const ModalBody = styled.div`
+    font-family: Poppins;
+`
+
+const ModalContent = styled.div`
+    display: flex;
+    flex-flow: column;
+    color: black;
+    background: #ddcfbb;
+    width: 100%;
+    height: 100%;
+    padding: 2em;
+    min-width: 800px;
+    min-height: 500px;
+    max-width: 800px;
+    max-height: 750px;
+    border-radius: 0.25rem;
+`
+
+const ModalDialog = styled.div`
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    z-index: 1055;
+    display: flex;
+    padding: 5em;
+`
+
+const ModalBox = styled.div`
+    top: 0;
+    left: 0;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    z-index: 1050;
+    background: rgba(0, 0, 0, 0.5);
+`
\ No newline at end of file
diff --git a/client/src/components/Containers/index.js b/client/src/components/Containers/index.js
index 760f58d6..4c2a6293 100644
--- a/client/src/components/Containers/index.js
+++ b/client/src/components/Containers/index.js
@@ -1,2 +1,3 @@
 export { default as Column } from "./Column"
 export { default as Row } from "./Row"
+export { Modal, ModalHeader, ModalBody, ModalCheckboxes } from "./Modal"
\ No newline at end of file
diff --git a/client/src/components/FlightMap.js b/client/src/components/FlightMap.js
index 6deb509c..d62fae55 100644
--- a/client/src/components/FlightMap.js
+++ b/client/src/components/FlightMap.js
@@ -6,6 +6,7 @@ import { httpget } from "../backend.js"
 import L from "leaflet"
 import PolylineDecorator from "../pages/FlightData/tabs/FlightPlan/PolylineDecorator.js"
 import RotatedMarker from "./RotatedMarker.js"
+import { useInterval } from "../util"
 
 const FlightPlanMap = props => {
 	const [state, setState] = useState({
@@ -92,13 +93,6 @@ const FlightPlanMap = props => {
 			setOnline(true)
 		})
 
-		const internet = setInterval(() => {
-			checkInternet()
-		}, 5000)
-
-		return () => {
-			clearInterval(internet)
-		}
 	}, [])
 
 	const checkInternet = () => {
@@ -114,6 +108,7 @@ const FlightPlanMap = props => {
 			setOnline(false)
 		}
 	}
+	useInterval(5000, checkInternet)
 
 	const handleKeyPress = (event, idx) => {
 		console.log(event.originalEvent.key)
diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index 99adbbe2..b3d5a669 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -1,7 +1,9 @@
-import React from "react"
-import { Row } from "components/Containers"
+import React, { useEffect, useRef, useState } from "react"
+import { Row, Modal, ModalBody, ModalHeader } from "components/Containers"
 import { darker } from "theme/Colors"
 import styled from "styled-components"
+import { Box, Button } from "./UIElements"
+import { getUrl, setUrl } from "../backend"
 
 const NavContainer = styled.div`
 	background: ${darker};
@@ -27,17 +29,48 @@ const StyledLink = styled.a`
 	color: black;
 `
 
-const Header = () => {
+const ConnectionButton = (props) => {
+	const [open, setOpen] = useState(false)
+	const boxRef = useRef(null)
+
+	useEffect(() => {
+		boxRef.current?.focus()
+	}, [])
 
+	return (
+		<div>
+			<Button style={{ "width": "3em", "margin-top": "0.75em" }} onChange={() => {
+				setOpen(true)
+			}}>
+				Con
+			</Button>
+			<Modal open={open} setOpen={setOpen}>
+				<ModalHeader>Backend Connection</ModalHeader>
+				<ModalBody>
+					<div style={{ "display": "flex" }}>
+						<div style={{ "display": "flex", "align-items": "center" }}>Query URL:</div>
+						<Box style={{ "margin-left": "1em", "width": "25em" }} ref={boxRef} editable={true} content={getUrl()}>hi</Box>
+						<Button style={{ "width": "10em", "height": "3em", "margin-left": "0" }} onChange={() => {
+							setUrl(boxRef.current.value)
+						}}>Set URL</Button>
+					</div>
+				</ModalBody>
+			</Modal>
+		</div>
+	)
+}
+
+const Header = () => {
 	return (
 		<NavContainer>
-			<h1 className="heading">TJUAV Ground Station</h1>
-			<Row width="50%">
+			<h1 className="heading" style={{ "margin-right": "25rem" }}>TJUAV Ground Station</h1>
+			<Row width="50%" style={{ "margin-top": "0.5em", "margin-right": "-5em" }}>
 				<Link href="/">Flight Data</Link>
 				<Link href="/params">Params</Link>
 				<Link href="/submissions">Submissions</Link>
 				<Link href="/antenna-tracker">Antenna Tracker</Link>
 			</Row>
+			<ConnectionButton />
 		</NavContainer>
 	)
 }
diff --git a/client/src/components/UIElements/Button.js b/client/src/components/UIElements/Button.js
index a27f6cc0..61fdc00a 100644
--- a/client/src/components/UIElements/Button.js
+++ b/client/src/components/UIElements/Button.js
@@ -6,6 +6,7 @@ import { dark, blue, red } from "theme/Colors"
 import Link from "./Link"
 
 import { ReactComponent as RawWarning } from "icons/warning.svg"
+import { unselectable } from "css.js"
 
 const Button = forwardRef(({ active, onChange, controlled, to, href, careful = false, ...props }, ref) => {
 	const [isActive, setActive] = useState(active ?? false)
@@ -28,6 +29,7 @@ const Button = forwardRef(({ active, onChange, controlled, to, href, careful = f
 			}}
 			to={to}
 			href={href}
+			newTab={props.newTab}
 			{...props}
 		>
 			<div styles="display: inline;">
@@ -56,9 +58,11 @@ const Warning = styled(RawWarning)`
 export const StyledButton = styled(Link).attrs(props => ({
 	to: props.to,
 	href: props.href,
+	newTab: props.newTab
 })).withConfig({
 	shouldForwardProp: (prop, fn) => !["active"].includes(prop),
 })`
+	${unselectable}
 	position: relative;
 	box-sizing: border-box;
 	background: ${props => (props.active ? (props.color ?? blue) : dark)};
diff --git a/client/src/components/UIElements/Checkbox.js b/client/src/components/UIElements/Checkbox.js
index a712d6c4..4f4c89e1 100644
--- a/client/src/components/UIElements/Checkbox.js
+++ b/client/src/components/UIElements/Checkbox.js
@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import styled from "styled-components"
 
-import { dark, blue, red, green, grey } from "theme/Colors"
+import { blue, red, green, grey } from "theme/Colors"
 import { ReactComponent as RawAccept } from "icons/check.svg"
 import { ReactComponent as RawDecline } from "icons/decline.svg"
 import { ReactComponent as RawSave } from "icons/save.svg"
diff --git a/client/src/components/UIElements/CheckboxList.js b/client/src/components/UIElements/CheckboxList.js
index cb1d4c97..067b5389 100644
--- a/client/src/components/UIElements/CheckboxList.js
+++ b/client/src/components/UIElements/CheckboxList.js
@@ -12,7 +12,7 @@ const CheckboxList = props => {
 const Option = props => {
     return (
         <StyledOption>
-            <StyledCheckbox checked={props.checked} color={props.color} type="checkbox" id={props.id ?? props.value} value={props.value} name={props.name} />
+            <StyledCheckbox checked={props.checked} color={props.color} type="checkbox" id={props.id ?? props.value} value={props.value} />
             {props.children}
         </StyledOption>
     )
diff --git a/client/src/components/UIElements/Dropdown.js b/client/src/components/UIElements/Dropdown.js
index 2a7decfc..ec5ca617 100644
--- a/client/src/components/UIElements/Dropdown.js
+++ b/client/src/components/UIElements/Dropdown.js
@@ -1,10 +1,11 @@
 import React, { useState, useEffect, forwardRef } from "react"
 import styled from "styled-components"
 
-import { blue } from "theme/Colors"
 import { ReactComponent as Caret } from "icons/caret.svg"
 
 import { StyledButton } from "./Button"
+import { blue } from "theme/Colors"
+import { unselectable } from "css.js"
 
 const Dropdown = forwardRef(
 	(
@@ -39,9 +40,9 @@ const Dropdown = forwardRef(
 				</StyledDropdown>
 				<div style={{ maxHeight: `${maxOptionsShownAtOnce * 100}%`, overflow: "auto" }}>
 					{active ? (
-						options.map((option, i) => (
+						options.map((_option, i) => (
 							<DropdownContent
-								value={option.value}
+								value={_option.value}
 								key={i}
 								number={i}
 								setOption={(ID, value) => {
@@ -50,7 +51,7 @@ const Dropdown = forwardRef(
 									setActive(false)
 								}}
 							>
-								{option.text}
+								{_option.text}
 							</DropdownContent>
 						))
 					) : (
@@ -70,6 +71,7 @@ const StyledCaret = styled(Caret).withConfig({
 `
 
 const StyledDropdown = styled(StyledButton)`
+	${unselectable}
 	padding: 0 1rem;
 	justify-content: space-between;
 	height: 100%;
@@ -85,6 +87,7 @@ const DropdownContent = ({ value, children, setOption, number, ...props }) => {
 }
 
 const StyledDropdownContent = styled(StyledButton)`
+	${unselectable}
 	justify-content: flex-start;
 	color: black !important;
 	padding-left: 1rem;
diff --git a/client/src/components/UIElements/Link.js b/client/src/components/UIElements/Link.js
index 67df6727..566207d2 100644
--- a/client/src/components/UIElements/Link.js
+++ b/client/src/components/UIElements/Link.js
@@ -2,18 +2,19 @@ import React, { forwardRef } from "react"
 import { Link as RouterLink } from "react-router-dom"
 
 const Link = forwardRef(({ to, href, children, ...props }, ref) => {
-	if (to)
+	if (to) {
 		return (
 			<RouterLink ref={ref} to={to} {...props}>
 				{children}
 			</RouterLink>
 		)
-	else
+	} else {
 		return (
-			<a ref={ref} href={href} {...props}>
+			<a ref={ref} target={props.newTab ? "_blank" : null} href={href} {...props}>
 				{children}
 			</a>
 		)
+	}
 })
 
 export default Link
diff --git a/client/src/css.js b/client/src/css.js
new file mode 100644
index 00000000..b5733db3
--- /dev/null
+++ b/client/src/css.js
@@ -0,0 +1,7 @@
+
+
+export const unselectable = `-moz-user-select: -moz-none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;`
diff --git a/client/src/pages/FlightData/index.js b/client/src/pages/FlightData/index.js
index a9820b14..a0d23fad 100644
--- a/client/src/pages/FlightData/index.js
+++ b/client/src/pages/FlightData/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react"
+import React, { useState } from "react"
 
 import TabBar from "components/TabBar"
 import { httpget } from "backend"
@@ -8,6 +8,7 @@ import FlightPlanToolbar from "./tabs/FlightPlan/FlightPlanToolbar"
 import Quick from "./tabs/Quick"
 import Actions from "./tabs/Actions"
 import Logs from "./tabs/Logs"
+import { useInterval } from "../../util"
 
 /*
 TODO: Home icon
@@ -79,7 +80,7 @@ const FlightData = () => {
 		ugv: "UGV"
 	}
 
-	const queryTelemetry = () => {
+	useInterval(500, () => {
 		httpget("/uav/quick", response => setUav({
 			latlng: {
 				lat: response.data.result.lat,
@@ -94,14 +95,7 @@ const FlightData = () => {
 			},
 			heading: response.data.result.yaw
 		}))
-	}
-
-	useEffect(() => {
-		const interval = setInterval(() => {
-			queryTelemetry()
-		}, 500)
-		return () => clearInterval(interval)
-	}, [])
+	})
 
 	return (
 		<div
diff --git a/client/src/pages/FlightData/tabs/Actions.js b/client/src/pages/FlightData/tabs/Actions.js
index cae53149..690736f3 100644
--- a/client/src/pages/FlightData/tabs/Actions.js
+++ b/client/src/pages/FlightData/tabs/Actions.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react"
+import React, { useState } from "react"
 import { Button, Box, Label, Dropdown } from "components/UIElements"
 import { Row, Column } from "components/Containers"
 import { darkred } from "../../../theme/Colors"
@@ -6,6 +6,7 @@ import { httpget, httppost } from "../../../backend"
 import styled from "styled-components"
 import { ReactComponent as RawUGV } from "icons/ugv.svg"
 import { ReactComponent as RawUAV } from "icons/uav.svg"
+import { useInterval } from "../../../util"
 
 const actions = {
 	waypoint: [0, 1, 2, 3, 4]
@@ -37,44 +38,33 @@ const Actions = () => {
 	const [Gbattery, setGbattery] = useState(16)
 	const [Gconnection, setGconnection] = useState([95, 0, 95])
 
-	const updateData = () => {
-		httpget("/uav/stats")
-			.then(response => response.data)
-			.then(data => {
-				setAaltitude(data.result.quick.altitude)
-				// setAthrottle(data.result.quick.throttle)
-				setAorientation({"yaw": data.result.quick.orientation.yaw, "roll": data.result.quick.orientation.roll, "pitch": data.result.quick.orientation.pitch })
-				// setAlatLong({"lat": data.result.quick.lat, "lon": data.result.quick.lon})
-				setAmode(data.result.mode)
-				setAarmed(data.result.armed)
-				// setAstatus(data.result.status)
-				setAgroundSpeed(data.result.quick.ground_speed)
-				// setAairspeed(data.result.quick.air_speed)
-				// setAbattery(data.result.quick.battery)
-				// setAtemperature(data.result.quick.temperature)
-				setAwaypoint(data.result.quick.waypoint)
-				// setAconnection(data.result.quick.connection)
-			})
-		httpget("/ugv/stats")
-			.then(response => response.data)
-			.then(data => {
-				setGarmed(data.result.armed)
-				setGgroundSpeed(data.result.quick.ground_speed)
-				setGyaw(data.result.quick.yaw)
-				setGlatLong({"lat": data.result.quick.lat, "lon": data.result.quick.lon})
-				setGstatus(data.result.status)
-				setGmode(data.result.mode)
-				setGdestination(data.result.quick.destination[1])
-				setGbattery(data.result.quick.battery)
-				setGconnection(data.result.quick.connection)
-			})
-	}
-
-	useEffect(() => {
-		const tick = setInterval(() => {
-			updateData()
-		}, 250)
-		return () => clearInterval(tick)
+	useInterval(250, () => {
+		httpget("/uav/stats", ({ data }) => {
+			setAaltitude(data.result.quick.altitude)
+			// setAthrottle(data.result.quick.throttle)
+			setAorientation({"yaw": data.result.quick.orientation.yaw, "roll": data.result.quick.orientation.roll, "pitch": data.result.quick.orientation.pitch })
+			// setAlatLong({"lat": data.result.quick.lat, "lon": data.result.quick.lon})
+			setAmode(data.result.mode)
+			setAarmed(data.result.armed)
+			// setAstatus(data.result.status)
+			setAgroundSpeed(data.result.quick.ground_speed)
+			// setAairspeed(data.result.quick.air_speed)
+			// setAbattery(data.result.quick.battery)
+			// setAtemperature(data.result.quick.temperature)
+			setAwaypoint(data.result.quick.waypoint)
+			// setAconnection(data.result.quick.connection)
+		})
+		httpget("/ugv/stats", ({ data }) => {
+			setGarmed(data.result.armed)
+			setGgroundSpeed(data.result.quick.ground_speed)
+			setGyaw(data.result.quick.yaw)
+			setGlatLong({"lat": data.result.quick.lat, "lon": data.result.quick.lon})
+			setGstatus(data.result.status)
+			setGmode(data.result.mode)
+			setGdestination(data.result.quick.destination[1])
+			setGbattery(data.result.quick.battery)
+			setGconnection(data.result.quick.connection)
+		})
 	})
 
 	const [waypointNum, setWaypointNum] = useState(1)
@@ -128,8 +118,8 @@ const Actions = () => {
 					</Dropdown>
 					<Button onClick={() => { setAmode("MANUAL"); httppost("/uav/mode/set", { "mode": "MANUAL" }) }}>Manual</Button>
 					<Button onClick={() => { setAmode("AUTO"); httppost("/uav/mode/set", { "mode": "AUTO" }) }}>Auto</Button>
-					<Button onClick={() => { setAmode("LOITER"); httppost("/uav/mode/set", { "mode": "LOITER" }) }}>Loiter</Button>
-					<Button onClick={() => { setAmode("RTL"); httppost("/uav/mode/set", { "mode": "RTL" }) }}>RTL</Button>
+					<Button warning={true} color={darkred} onClick={() => { setAmode("TAKEOFF"); httppost("/uav/mode/set", { "mode": "TAKEOFF" }) }}>Takeoff</Button>
+					<Button warning={true} color={darkred} onClick={() => { httppost("/uav/commands/insert", { "command": "LAND", "lat": 38.14469, "lon": -76.42799, alt: 6.6 }) }}>Land</Button>
 				</Row>
 			</Column>
 			<Column>
@@ -196,7 +186,7 @@ const Actions = () => {
 			</Column>
 			<Column style={{ marginBottom: "1rem" }}>
 				<Row>
-					<Button onClick={() => window.open("http://localhost:5000/uav/commands/view")}>View</Button>
+					<Button href="http://localhost:5000/uav/commands/view" newTab={true}>View</Button>
 					<Button onClick={() => httppost("/uav/commands/load")}>Load</Button>
 					<Button onClick={() => httppost("/uav/commands/save")}>Save</Button>
 					<Button onClick={() => httppost("/uav/commands/clear")}>Clear</Button>
@@ -216,12 +206,11 @@ const Actions = () => {
 					<Row>
 						<Column>
 							<Row id="labels1" height="0rem" gap="0.5rem">
-								<Label columns={1}>Mission</Label>
+								<Label columns={1}>Flight Modes (Current: {Gmode})</Label>
 							</Row>
 							<Row>
-								<Button onClick={() => window.open("http://localhost:5000/ugv/commands/view")}>View</Button>
-								<Button onClick={() => httppost("/ugv/commands/load")}>Reset</Button>
-								<Button warning={true} color={darkred} onClick={() => httppost("/ugv/abort")}>Abort?</Button>
+								<Button onClick={() => httppost("/ugv/mode/set", { "mode": "MANUAL" })}>Manual</Button>
+								<Button onClick={() => httppost("/ugv/mode/set", { "mode": "AUTO" })}>Auto<br/> </Button>
 							</Row>
 						</Column>
 					</Row>
@@ -229,7 +218,8 @@ const Actions = () => {
 			</Column>
 			<Column>
 				<Row id="labels3" height="2rem" gap="0.5rem">
-					<Label>Configuration</Label>
+					<Label columns={3}>Mission</Label>
+					<Label columns={3}>Configuration</Label>
 				</Row>
 			</Column>
 			<Column style={{ marginBottom: "1rem" }}>
diff --git a/client/src/pages/FlightData/tabs/Logs.js b/client/src/pages/FlightData/tabs/Logs.js
index 4b17c94a..a33dfbeb 100644
--- a/client/src/pages/FlightData/tabs/Logs.js
+++ b/client/src/pages/FlightData/tabs/Logs.js
@@ -4,6 +4,7 @@ import { Button, CheckboxList } from "components/UIElements"
 import { Column, Row } from "components/Containers"
 import { httpget } from "backend"
 import { dark, darkest, darkdark, red } from "theme/Colors"
+import { useInterval } from "../../../util"
 
 const colors = {
 	DEBUG: darkdark,
@@ -32,12 +33,12 @@ const Logs = () => {
 		scrollDiv.current.scrollIntoView()
 	}
 
-	const updateData = () => {
+	useInterval(1000, () => {
 		httpget("/logs", (response) => {
 			setLogs(response.data.result)
 			checkScrolling(true)
 		})
-	}
+	})
 
 	const checkScrolling = (shouldScroll) => {
 		let scrollTop = container.current.scrollTop
@@ -64,12 +65,7 @@ const Logs = () => {
 			scrollToBottom()
 		}
 
-		const tick = setInterval(() => {
-			updateData()
-		}, 1000)
-
 		return () => {
-			clearInterval(tick)
 			window.sessionStorage.setItem("logs", logsRef.length > 0 ? "" : logsRef.current.reduce((p, n) => {
 				return p + "|||" + n
 			}))
@@ -87,7 +83,6 @@ const Logs = () => {
 	return (
 		<StyledContainer>
 			<CheckboxList name="logFilter" onChange={(e) => {
-					console.log(e.target.value)
 					if (e.target.checked) {
 						if (!filters.includes(e.target.value)) {
 							setFilters([...filters, e.target.value])
@@ -112,7 +107,7 @@ const Logs = () => {
 						<CheckboxList.Option checked={filters.includes("[CRITICAL ]")} value="[CRITICAL ]" color={colors.CRITICAL}>Critical</CheckboxList.Option>
 					</Column>
 					<Column gap="0em">
-						<ScrollButton onChange={() => window.open("http://localhost:5000/logs")}>Open Log File</ScrollButton>
+						<ScrollButton href="http://localhost:5000/logs" newTab={true}>Open Log File</ScrollButton>
 						<ScrollButton onChange={() => { scrollDiv.current.scrollIntoView(); setAutoScroll(true) }}>Scroll To End</ScrollButton>
 					</Column>
 				</Row>
@@ -147,9 +142,9 @@ const StyledLog = ({ content }) => {
 }
 
 const ScrollButton = styled(Button)`
-	margin: auto 0 0 auto;
+	margin: 0.25em 0 0 2.5em;
 	width: 75%;
-	height: 1.5em;
+	height: 2em;
 `
 
 const StyledContainer = styled.div`
diff --git a/client/src/pages/FlightData/tabs/Quick.js b/client/src/pages/FlightData/tabs/Quick.js
index e2f0d921..6b2af356 100644
--- a/client/src/pages/FlightData/tabs/Quick.js
+++ b/client/src/pages/FlightData/tabs/Quick.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react"
+import React, { useState } from "react"
 import { Box, Label } from "components/UIElements"
 import { Row, Column } from "components/Containers"
 
@@ -6,6 +6,7 @@ import styled from "styled-components"
 import { ReactComponent as RawUGV } from "icons/ugv.svg"
 import { ReactComponent as RawUAV } from "icons/uav.svg"
 import { httpget } from "../../../backend"
+import { useInterval } from "../../../util"
 
 const Quick = () => {
 	const [Aarmed, setAarmed] = useState("")
@@ -30,43 +31,36 @@ const Quick = () => {
 	const [Gbattery, setGbattery] = useState(16)
 	const [Gconnection, setGconnection] = useState([95, 0, 95])
 
-	const updateData = () => {
+	useInterval(400, () => {
 		httpget("/uav/stats", response => {
-				let data = response.data
+			let data = response.data
 
-				setAarmed(data.result.armed)
-				setAorientation({"yaw": data.result.quick.orientation.yaw, "roll": data.result.quick.orientation.roll, "pitch": data.result.quick.orientation.pitch })
-				setAlatLong({"lat": data.result.quick.lat, "lon": data.result.quick.lon})
-				setAaltitude(data.result.quick.altitude)
-				setAbattery(data.result.quick.battery)
-				setAgroundSpeed(data.result.quick.ground_speed)
-				setAairspeed(data.result.quick.air_speed)
-				setAstatus(data.result.status)
-				setAmode(data.result.mode)
-				setAwaypoint(data.result.quick.waypoint)
-				setAconnection(data.result.quick.connection)
-			})
+			setAarmed(data.result.armed)
+			setAorientation({"yaw": data.result.quick.orientation.yaw, "roll": data.result.quick.orientation.roll, "pitch": data.result.quick.orientation.pitch })
+			setAlatLong({"lat": data.result.quick.lat, "lon": data.result.quick.lon})
+			setAaltitude(data.result.quick.altitude)
+			setAbattery(data.result.quick.battery)
+			setAgroundSpeed(data.result.quick.ground_speed)
+			setAairspeed(data.result.quick.air_speed)
+			setAstatus(data.result.status)
+			setAmode(data.result.mode)
+			setAwaypoint(data.result.quick.waypoint)
+			setAconnection(data.result.quick.connection)
+		})
 		httpget("/ugv/stats", response => {
-				let data = response.data
+			let data = response.data
 
-				setGarmed(data.result.armed)
-				setGgroundSpeed(data.result.quick.ground_speed)
-				setGyaw(data.result.quick.yaw)
-				setGlatLong({"lat": data.result.quick.lat, "lon": data.result.quick.lon})
-				setGstatus(data.result.status)
-				setGmode(data.result.mode)
-				setGdestination(data.result.quick.destination[1])
-				setGbattery(data.result.quick.battery)
-				setGconnection(data.result.quick.connection)
-			})
-	}
-
-	useEffect(() => {
-		const tick = setInterval(() => {
-			updateData()
-		}, 500)
-		return () => clearInterval(tick)
-	}, [])
+			setGarmed(data.result.armed)
+			setGgroundSpeed(data.result.quick.ground_speed)
+			setGyaw(data.result.quick.yaw)
+			setGlatLong({"lat": data.result.quick.lat, "lon": data.result.quick.lon})
+			setGstatus(data.result.status)
+			setGmode(data.result.mode)
+			setGdestination(data.result.quick.destination[1])
+			setGbattery(data.result.quick.battery)
+			setGconnection(data.result.quick.connection)
+		})
+	})
 
 	return (
 		<div
@@ -93,8 +87,8 @@ const Quick = () => {
 				</Row>
 				<Row style={{ gap: "1rem" }}>
 					<Row>
-						<Box label="Latitude" content={Math.abs(AlatLong.lat).toFixed(8) + "\u00B0"} />
-						<Box label="Longitude" content={Math.abs(AlatLong.lon).toFixed(8) + "\u00B0"} />
+						<Box label="Latitude" content={AlatLong.lat.toFixed(7) + "\u00B0"} />
+						<Box label="Longitude" content={AlatLong.lon.toFixed(7) + "\u00B0"} />
 					</Row>
 					<Row>
 						<Box label="Altitude" content={Aaltitude.toFixed(2) + " ft"} />
diff --git a/client/src/pages/Submissions/index.js b/client/src/pages/Submissions/index.js
index fc27a1a5..91a71cbe 100644
--- a/client/src/pages/Submissions/index.js
+++ b/client/src/pages/Submissions/index.js
@@ -1,9 +1,10 @@
-import React, { useEffect, useState, useRef, createContext } from "react"
+import React, { useState, useRef, createContext } from "react"
 
 import SubmissionEditor from "pages/Submissions/SubmissionEditor"
 import TabBar from "components/TabBar"
 import { View, Submitted, Rejected } from "pages/Submissions/Tabs"
 import { httpget, httppost } from "backend"
+import { useInterval } from "../../util"
 
 export const SubmitContext = createContext()
 
@@ -33,7 +34,7 @@ const Submissions = () => {
 		return undefined
 	}
 
-	const queryData = () => {
+	useInterval(1000, () => {
 		httpget("/interop/odlc/list", async (response) => {
 			const odlcsEqual = (a, b) => {
 				if (a.alphanumeric === b.alphnumeric ||
@@ -83,15 +84,7 @@ const Submissions = () => {
 		}, async (exception) => {
 			console.log(exception)
 		})
-	}
-
-	useEffect(() => {
-		queryData()
-		const tick = setInterval(() => {
-			queryData()
-		}, 1000)
-		return () => clearInterval(tick)
-	}, [])
+	})
 
 	const convertOdlc = (o) => {
 		return { ...o, orientation: o.orientation/45+1 }
diff --git a/client/src/util.js b/client/src/util.js
new file mode 100644
index 00000000..3dffc077
--- /dev/null
+++ b/client/src/util.js
@@ -0,0 +1,12 @@
+import { useEffect } from "react"
+
+const useInterval = (ms, callback) => {
+	useEffect(() => {
+		const tick = setInterval(() => {
+			callback()
+		}, ms)
+		return () => clearInterval(tick)
+	}, [])
+}
+
+export { useInterval }
\ No newline at end of file
diff --git a/server/app.py b/server/app.py
index 3ee988cc..5f26537f 100644
--- a/server/app.py
+++ b/server/app.py
@@ -72,6 +72,12 @@ def log_root(message, *args, **kwargs):
 logger.addHandler(string_handler)
 autopilot.addHandler(string_handler)
 
+LOG_STREAM = StringIO()
+string_handler = logging.StreamHandler(LOG_STREAM)
+string_handler.setLevel(logging.DEBUG)
+string_handler.setFormatter(formatter)
+logger.addHandler(string_handler)
+
 logger.info("STARTED LOGGING")
 
 gs = GroundStation()
diff --git a/server/sample.config.json b/server/sample.config.json
index 0e2ce851..3e1e34b0 100644
--- a/server/sample.config.json
+++ b/server/sample.config.json
@@ -7,7 +7,8 @@
         },
         "images": {
             "type": "dummy",
-            "url": "http://192.168.1.99:4000"
+            "host": "",
+            "port": 4000
         }
     },
     "ugv": {