diff --git a/dist/css/vagabond/vagabond.css b/dist/css/vagabond/vagabond.css
new file mode 100644
index 0000000000000000000000000000000000000000..3f0ce1edd1a77676ac54421bdfd10aa7cbd9f948
--- /dev/null
+++ b/dist/css/vagabond/vagabond.css
@@ -0,0 +1,90 @@
+/* The root element is auto-generated by react */
+/* And contains all other elements. */
+#root {
+  display: flex;
+  flex-direction: column;
+}
+
+div.vagabond-navbar {
+  display: flex;
+  order: 1;
+  color: darkgray;
+  background-color: black;
+  height: 64px;
+  flex-wrap: wrap;
+}
+div.vagabond-navbar a {
+  flex: 1;
+  margin: 10px;
+  padding: 10px;
+  max-width: 24px;
+  color: currentColor;
+}
+div.vagabond-navbar a:hover {
+  color: #0d6efd;
+}
+
+#container-root {
+  margin: 5px;
+  display: flex;
+  order: 2;
+}
+
+#sidebar-left {
+  flex: 1;
+  padding: 10px;
+}
+
+#container-center {
+  flex: 4;
+  padding: 10px;
+}
+
+#sidebar-right {
+  flex: 1 5;
+  padding: 10px;
+}
+
+p {
+  font-size: 14pt;
+}
+
+/*Extra small, small, and medium */
+@media only screen and (min-width: xs 0) and (max-width: lg 992px-1) {
+  #root {
+    display: block;
+  }
+
+  #container-root {
+    margin-bottom: 96px;
+    /*TODO: Less hacky method of making sure bottom navbar cant cover stuff*/
+  }
+
+  #sidebar-left {
+    display: none;
+  }
+
+  #sidebar-right {
+    display: none;
+  }
+
+  div.vagabond-navbar {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+  }
+  div.vagabond-navbar a {
+    max-width: none;
+    width: 24px;
+  }
+}
+/*Minimum screen size of extra small*/
+/*Minimum screen size of small*/
+/*Minimum screen size of medium*/
+/*Minimum screen size of large*/
+/*Minimum screen size of extra large*/
+div.vagabond-test {
+  width: xl;
+}
+
+/*# sourceMappingURL=vagabond.css.map */
diff --git a/dist/css/vagabond/vagabond.css.map b/dist/css/vagabond/vagabond.css.map
new file mode 100644
index 0000000000000000000000000000000000000000..c5da3396f058113f06c05a223dc3edd14eee9a81
Binary files /dev/null and b/dist/css/vagabond/vagabond.css.map differ
diff --git a/scss/vagabond/vagabond.scss b/scss/vagabond/vagabond.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c84873712bdf945679d7274e4f6f4a7de918625c
--- /dev/null
+++ b/scss/vagabond/vagabond.scss
@@ -0,0 +1,120 @@
+@import "../functions";
+@import "../variables";
+@import "../mixins";
+@import "../utilities";
+
+$xs: nth($grid-breakpoints, 1);
+$sm: nth($grid-breakpoints, 2);
+$md: nth($grid-breakpoints, 3);
+$lg: nth($grid-breakpoints, 4);
+$xl: nth($grid-breakpoints, 5);
+$xxl: nth($grid-breakpoints, 6);
+
+$bg-dark: black;
+
+/* The root element is auto-generated by react */
+/* And contains all other elements. */
+#root {
+    display: flex;
+    flex-direction: column;
+}
+
+
+div.vagabond-navbar {
+    display: flex;
+    order: 1;
+    color: darkgray;
+    background-color: $bg-dark;
+    height: 64px;
+    flex-wrap: wrap;
+    a {
+        flex: 1;
+        margin: 10px;
+        padding: 10px;
+        max-width: 24px;
+        color: currentColor;
+    }
+    a:hover {
+        color: $primary;
+    }
+}
+
+#container-root {
+    margin: 5px;
+    display: flex;
+    order: 2;
+}
+
+#sidebar-left {
+    flex: 1;
+    padding: 10px;
+}
+
+#container-center {
+    flex: 4;
+    padding: 10px;
+}
+
+#sidebar-right {
+    flex: 1 5;
+    padding: 10px;
+}
+
+p {
+    font-size: 14pt;
+}
+/*Extra small, small, and medium */
+@media only screen and (min-width: $xs) and (max-width: $lg - 1) {
+
+    #root {
+        display: block;
+    }
+    #container-root {
+        margin-bottom: 96px; /*TODO: Less hacky method of making sure bottom navbar cant cover stuff*/
+    }
+    #sidebar-left {
+        display: none;
+    }
+    #sidebar-right {
+        display: none;
+    }
+    div.vagabond-navbar {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        a {
+            max-width: none;
+            width: 24px;
+        }
+    }
+}
+
+/*Minimum screen size of extra small*/
+@media only screen and (min-width: $xs){
+
+}
+
+/*Minimum screen size of small*/
+@media only screen and (min-width: $sm){
+
+}
+
+/*Minimum screen size of medium*/
+@media only screen and (min-width: $md){
+
+}
+
+/*Minimum screen size of large*/
+@media only screen and (min-width: $lg){
+
+}
+
+/*Minimum screen size of extra large*/
+@media only screen and (min-width: $xl){
+
+}
+
+
+div.vagabond-test {
+    width: xl;
+}