diff --git a/Http/Controllers/MaterialCrewReduxController.php b/Http/Controllers/MaterialCrewReduxController.php
index 32d9b1e..6ba0b09 100644
--- a/Http/Controllers/MaterialCrewReduxController.php
+++ b/Http/Controllers/MaterialCrewReduxController.php
@@ -8,6 +8,11 @@
 
 class MaterialCrewReduxController extends Controller
 {
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
     /**
      * Display a listing of the resource.
      * @return Response
diff --git a/Resources/assets/js/App.vue b/Resources/assets/js/App.vue
index b362833..ece641e 100644
--- a/Resources/assets/js/App.vue
+++ b/Resources/assets/js/App.vue
@@ -6,6 +6,11 @@
     </v-app>
 </template>
 
+<style>
+    .v-application {
+        font-family: Europa Roboto sans-serif;
+    }
+</style>
 <script>
     const default_layout = "main";
     export default {
diff --git a/Resources/assets/js/IgniteJS.js b/Resources/assets/js/IgniteJS.js
new file mode 100644
index 0000000..e687feb
--- /dev/null
+++ b/Resources/assets/js/IgniteJS.js
@@ -0,0 +1,18 @@
+export default class {
+    constructor(url) {
+        this.url = url;
+        this.connected = false;
+    }
+    connect() {
+        this.wsc = new WebSocket(`ws://${this.url}/control`);
+        this.wst = new WebSocket(`ws://${this.url}/telemetry`);
+
+        this.wsc.onopen = () => {
+            this.connected = true;
+            console.log('Ignite Connected')
+        }
+    }
+    sendControlMessage(type, data) {
+        this.wsc.send(`${type}|${data}`);
+    }
+}
diff --git a/Resources/assets/js/components/SideNavFlightsCard.vue b/Resources/assets/js/components/SideNavFlightsCard.vue
index c2b7ab6..d232f16 100644
--- a/Resources/assets/js/components/SideNavFlightsCard.vue
+++ b/Resources/assets/js/components/SideNavFlightsCard.vue
@@ -2,7 +2,7 @@
     <div class="flights-card">
         <div class="flights-title">Flights</div>
         <div style="margin: 0 .25rem;">
-            <v-btn block color="primary"><v-icon left>add</v-icon>New Flight</v-btn>
+            <v-btn block color="primary" to="flights/new"><v-icon left>mdi-plus</v-icon>New Flight</v-btn>
         </div>
         <div class="flight-flex-container">
             <div class="flight-button">
@@ -43,7 +43,7 @@
         width: 100%;
         padding: 1rem 0;
         min-height: 50px;
-        background: var(--v-accent-base);
+        background: var(--v-secondary-base);
         text-align: center;
     }
     .flight-button:hover {
@@ -51,4 +51,4 @@
         background: var(--v-primary-base);
         cursor: pointer;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/Resources/assets/js/main.js b/Resources/assets/js/main.js
index 116ce67..1708287 100644
--- a/Resources/assets/js/main.js
+++ b/Resources/assets/js/main.js
@@ -10,6 +10,8 @@ import App from './App'
 import router from './router'
 import axios from 'axios'
 
+import ignite from './IgniteJS'
+
 let token = document.head.querySelector('meta[name="csrf-token"]');
 
 if (token) {
@@ -20,7 +22,7 @@ if (token) {
 
 
 import 'vuetify/dist/vuetify.min.css'
-
+import '@mdi/font/css/materialdesignicons.css'
 import mainLayout from './views/Layouts/MainLayout'
 import Blank from "./views/Layouts/Blank";
 Vue.component('main-layout', mainLayout);
@@ -33,21 +35,32 @@ const vuetify = new Vuetify({
         dark: true,
         themes: {
             dark: {
-                primary: window.appSettings.colors.primary
+                primary: window.appSettings.colors.primary,
+                secondary: window.appSettings.colors.secondary,
+                accent: window.appSettings.colors.accent,
             }
         },
         options: {
             customProperties: true
         }
     },
+    icons: {
+        iconfont: 'mdi', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
+    },
 });
-
 new Vue({
     router,
     store,
     vuetify,
+    data() {
+        return {
+            ignite: null
+        }
+    },
     created()
     {
+        this.$ignite = new ignite("127.0.0.1:5989");
+        this.$ignite.connect();
         console.log("Application Booted.");
     },
     mounted(){
diff --git a/Resources/assets/js/router/index.js b/Resources/assets/js/router/index.js
index 69c48b5..8b158f2 100644
--- a/Resources/assets/js/router/index.js
+++ b/Resources/assets/js/router/index.js
@@ -36,7 +36,7 @@ export default new Router({
         { path: '/trips/create', name: 'new_trip', component: FlightListView},
         // User Profiles
         { path: '/profile', redirect: to => {
-            return `/users/${this.$store.state.user.id}`;
+            return `/users/${window.appSettings.user.id}`;
             }},
         { path: '/users/:id', name: 'profile', component: ProfileIndexView},
         { path: '/users/:id/logbook', name: 'profile_logbook', component: ProfileLogbookView},
@@ -45,6 +45,6 @@ export default new Router({
         { path: '/users/:id/hanger/:aircraft', name: 'aircraft_detailed', component: PersonalAircraftDetailedView},
         { path: '/settings', name: 'settings', component: SettingsView},
         { path: '/settings/admin', name: 'settings_admin', component: InterfaceSettingsAdminView},
-        { path: '/map', name: 'map', component: iFrameContainerView, meta: {frameUrl: "https://simvector.cardinalhorizon.com/"}}
+        { path: '/map', name: 'map', component: iFrameContainerView, meta: {frameUrl: "https://simvector.net/engine"}}
     ]
 });
diff --git a/Resources/assets/js/views/Dashboard.vue b/Resources/assets/js/views/Dashboard.vue
index 1f8158c..268e45c 100644
--- a/Resources/assets/js/views/Dashboard.vue
+++ b/Resources/assets/js/views/Dashboard.vue
@@ -1,15 +1,16 @@
 <template>
     <div>
-        <div style="position: absolute; height: inherit; width: 100%; z-index: 0">
-            <v-img :aspect-ratio="16/5" src="https://i.imgur.com/Fj4dbUx.png" gradient="rgba(100,115,201,.33), rgba(25,32,72,.7)"></v-img>
+        <div style="position: fixed; height: inherit; width: 100%; z-index: 0">
+            <v-img :aspect-ratio="16/9" src="/img/default_background.jpg" gradient="rgba(100,115,201,.33), rgba(25,32,72,.7)"></v-img>
         </div>
-        <div style="position: relative; z-index: 1; padding-top: 20rem">
+        <div style="position: relative; z-index: 1; padding-top: 5rem">
             <v-container grid-list-lg>
+                <img src="/img/SparkFlightOps.svg" height="200px"/>
                 <v-layout grid row>
                     <v-flex lg4 md6 sm12>
                         <v-card class="mx-auto mb-4">
                             <v-img class="white--text align-end" height="150px" src="https://upload.wikimedia.org/wikipedia/commons/2/2c/SLC_airport%2C_2010.jpg"></v-img>
-                            <v-card-title>Welcome Back Taylor!</v-card-title>
+                            <v-card-title>Welcome Back {{ user.first_name }}!</v-card-title>
                             <v-card-subtitle class="pb-0">Currently at <b>Salt Lake City International Airport</b></v-card-subtitle>
                             <v-card-actions>
                                 <v-btn text color="primary">Start Flight Here</v-btn>
@@ -30,7 +31,7 @@
                     <v-flex lg8 md6 sm12>
                         <v-card>
                             <v-responsive :aspect-ratio="16/9">
-                                <iframe style="height: 100%; width: 100%; border: none;" src="https://fsvaos.net/map_dev"></iframe>
+                                <iframe style="height: 100%; width: 100%; border: none;" src="https://simvector.net/engine"></iframe>
                             </v-responsive>
                         </v-card>
                     </v-flex>
@@ -50,7 +51,12 @@
 
 <script>
     export default {
-        name: "Dashboard"
+        name: "Dashboard",
+        computed: {
+            user() {
+                return window.appSettings.user;
+            }
+        }
     }
 </script>
 
diff --git a/Resources/assets/js/views/Flights/NewFlightSelection.vue b/Resources/assets/js/views/Flights/NewFlightSelection.vue
index 99a8eed..8546219 100644
--- a/Resources/assets/js/views/Flights/NewFlightSelection.vue
+++ b/Resources/assets/js/views/Flights/NewFlightSelection.vue
@@ -1,7 +1,29 @@
 <template>
-    <div>
-
-    </div>
+    <v-container grid-list-lg>
+        <v-layout grid row>
+            <v-flex lg4 md6 sm12>
+                <v-card class="mx-auto mb-4">
+                    <v-img class="white--text align-end" height="150px" src="https://upload.wikimedia.org/wikipedia/commons/2/2c/SLC_airport%2C_2010.jpg"></v-img>
+                    <v-card-title>Welcome Back</v-card-title>
+                    <v-card-subtitle class="pb-0">Currently at <b>Salt Lake City International Airport</b></v-card-subtitle>
+                    <v-card-actions>
+                        <v-btn text color="primary">Start Flight Here</v-btn>
+                    </v-card-actions>
+                </v-card>
+                <v-card class="mx-auto">
+                    <v-card-title>Statistics</v-card-title>
+                    <v-list>
+                        <v-list-item>Total Flights: 200</v-list-item>
+                        <v-list-item>Total Hours: 156.2h</v-list-item>
+                        <v-list-item>Total Airports Visited: 27</v-list-item>
+                    </v-list>
+                    <v-card-actions>
+                        <v-btn text color="primary">View Profile</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-flex>
+        </v-layout>
+    </v-container>
 </template>
 
 <script>
@@ -11,5 +33,16 @@
 </script>
 
 <style scoped>
-
-</style>
\ No newline at end of file
+    .lateral-flex-container {
+        display: flex;
+    }
+    .left-box {
+        width: 100%;
+        background: #6cb2eb;
+    }
+    .right-box {
+        width: 100%;
+        height: 250px;
+        background: #38c172;
+    }
+</style>
diff --git a/Resources/assets/js/views/Layouts/MainLayout.vue b/Resources/assets/js/views/Layouts/MainLayout.vue
index 66aea69..bbdf0ce 100644
--- a/Resources/assets/js/views/Layouts/MainLayout.vue
+++ b/Resources/assets/js/views/Layouts/MainLayout.vue
@@ -1,15 +1,16 @@
 <template>
     <div>
         <v-navigation-drawer dark app width="300px" v-model="drawer">
-            <v-img :aspect-ratio="16/9" src="/img/vaos_df_bg-01.svg" gradient="rgba(100,115,201,.33), rgba(25,32,72,.7)">
+            <v-img :aspect-ratio="16/9" :src="cover" gradient="rgba(100,100,100,.33), rgba(25,25,25,.7)">
                 <v-layout pa-2 column align-center fill-height class="lightbox white--text">
                     <v-spacer></v-spacer>
-                    <v-avatar size="84">
-                        <img src="https://pbs.twimg.com/profile_images/1151671407228706822/UZxOws2b_400x400.jpg" alt="John" style="border: white 3px solid;">
+                    <v-avatar size="84" style="border: white 3px solid; font-size: 24px;" rounded color="primary">
+                        <img v-if="user.avatar_url" :src="user.avatar_url" alt="John" style="border: white 3px solid;">
+                        <div v-if="!user.avatar_url">{{user.first_name.charAt(0)}}{{user.last_name.charAt(0)}}</div>
                     </v-avatar>
                     <v-flex shrink style="text-align:center">
-                        <div class="headline">Taylor Broad</div>
-                        <div class="subtitle-1">BossOfGames | Senior Captain</div>
+                        <div class="headline">{{user.first_name}} {{user.last_name}}</div>
+                        <div class="subtitle-1">{{user.username}} | Senior Captain</div>
                     </v-flex>
                 </v-layout>
             </v-img>
@@ -17,7 +18,7 @@
             <v-list flat>
                 <v-list-item link to="/">
                     <v-list-item-icon>
-                        <v-icon>dashboard</v-icon>
+                        <v-icon>mdi-view-dashboard</v-icon>
                     </v-list-item-icon>
                     <v-list-item-content>
                         <v-list-item-title>Dashboard</v-list-item-title>
@@ -25,7 +26,7 @@
                 </v-list-item>
                 <v-list-item link to="profile">
                     <v-list-item-icon>
-                        <v-icon>person</v-icon>
+                        <v-icon>mdi-account</v-icon>
                     </v-list-item-icon>
                     <v-list-item-content>
                         <v-list-item-title>Profile</v-list-item-title>
@@ -33,12 +34,20 @@
                 </v-list-item>
                 <v-list-item link to="map">
                     <v-list-item-icon>
-                        <v-icon>map</v-icon>
+                        <v-icon>mdi-map</v-icon>
                     </v-list-item-icon>
                     <v-list-item-content>
                         <v-list-item-title>Live Map</v-list-item-title>
                     </v-list-item-content>
                 </v-list-item>
+                <v-list-item link to="downloads">
+                    <v-list-item-icon>
+                        <v-icon>mdi-folder-download</v-icon>
+                    </v-list-item-icon>
+                    <v-list-item-content>
+                        <v-list-item-title>Download Center</v-list-item-title>
+                    </v-list-item-content>
+                </v-list-item>
             </v-list>
             <!--
             <template slot="append">
@@ -55,8 +64,8 @@
         <v-content style="min-height: 100vh;">
             <slot></slot>
         </v-content>
-        <v-footer app>
-            VAOS Classic 2.1 | Material Crew Redux
+        <v-footer style="padding: 0" app>
+            <div style="background: #38c172; padding: 0 1rem;"><v-icon>mdi-check</v-icon>Ignite Connected</div>
         </v-footer>
     </div>
 </template>
@@ -71,6 +80,26 @@
             console.log(this.$vuetify.breakpoint.lgAndUp);
             this.drawer = !!this.$vuetify.breakpoint.lgAndUp;
         },
+        computed: {
+            user() {
+                return window.appSettings.user;
+            },
+            cover() {
+                if (this.user.cover_url) {
+                    return this.user.cover_url;
+                } else {
+                    return "/img/default_cover.png";
+                }
+            },
+            ignite_status() {
+                let status = this.$store.ignite.state.status;
+                switch (status) {
+                    case 0: return {text: "Disconnected",icon: "close", classes: {ignite_disconnected: true}}
+                    case 1: return {text: "No Sim Data",icon: "plane", classes: {ignite_nosim: true}}
+                    case 2: return {text: "Connected",icon: "check", classes: {ignite_disconnected: true}}
+                }
+            }
+        },
         data() {
             return {
                 comm_name: window.appSettings.community_name,
@@ -95,5 +124,14 @@
 </script>
 
 <style scoped>
-
+.ignite_connected {
+    background: #38c172;
+}
+.ignite_nosim {
+    background: #ffed4a;
+    color: black;
+}
+.ignite_disconnected {
+    background: #c70000;
+}
 </style>
diff --git a/Resources/assets/js/views/TripPlannerView.vue b/Resources/assets/js/views/TripPlannerView.vue
new file mode 100644
index 0000000..4085fcc
--- /dev/null
+++ b/Resources/assets/js/views/TripPlannerView.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+    export default {
+        name: "TripPlannerView"
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/Resources/assets/sass/_buttons.scss b/Resources/assets/sass/_buttons.scss
deleted file mode 100644
index 27eec87..0000000
--- a/Resources/assets/sass/_buttons.scss
+++ /dev/null
@@ -1,322 +0,0 @@
-// shared styles
-.btn,
-.btn-flat {
-    border: $button-border;
-    border-radius: $button-radius;
-    display: inline-block;
-    height: $button-height;
-    line-height: $button-height;
-    padding: $button-padding;
-    text-transform: uppercase;
-    vertical-align: middle;
-    -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
-}
-
-// Disabled shared style
-.btn.disabled,
-.btn-floating.disabled,
-.btn-large.disabled,
-.btn-small.disabled,
-.btn-flat.disabled,
-.btn:disabled,
-.btn-floating:disabled,
-.btn-large:disabled,
-.btn-small:disabled,
-.btn-flat:disabled,
-.btn[disabled],
-.btn-floating[disabled],
-.btn-large[disabled],
-.btn-small[disabled],
-.btn-flat[disabled] {
-    pointer-events: none;
-    background-color: $button-disabled-background !important;
-    box-shadow: none;
-    color: $button-disabled-color !important;
-    cursor: default;
-    &:hover {
-        background-color: $button-disabled-background !important;
-        color: $button-disabled-color !important;
-    }
-}
-
-// Shared icon styles
-.btn,
-.btn-floating,
-.btn-large,
-.btn-small,
-.btn-flat {
-    font-size: $button-font-size;
-    outline: 0;
-    i {
-        font-size: $button-icon-font-size;
-        line-height: inherit;
-    }
-}
-
-// Shared focus button style
-.btn,
-.btn-floating {
-    &:focus {
-        background-color: darken($button-raised-background, 10%);
-    }
-}
-
-// Raised Button
-.btn {
-    text-decoration: none;
-    color: $button-raised-color;
-    background-color: $button-raised-background;
-    text-align: center;
-    letter-spacing: .5px;
-    @extend .z-depth-1;
-    transition: background-color .2s ease-out;
-    cursor: pointer;
-    &:hover {
-        background-color: $button-raised-background-hover;
-        @extend .z-depth-1-half;
-    }
-}
-
-// Floating button
-.btn-floating {
-    &:hover {
-        background-color: $button-floating-background-hover;
-        @extend .z-depth-1-half;
-    }
-    &:before {
-        border-radius: 0;
-    }
-    &.btn-large {
-        &.halfway-fab {
-            bottom: -$button-floating-large-size / 2;
-        }
-        width: $button-floating-large-size;
-        height: $button-floating-large-size;
-        padding: 0;
-        i {
-            line-height: $button-floating-large-size;
-        }
-    }
-
-    &.btn-small {
-        &.halfway-fab {
-            bottom: -$button-floating-small-size / 2;
-        }
-        width: $button-floating-small-size;
-        height: $button-floating-small-size;
-        i {
-            line-height: $button-floating-small-size;
-        }
-    }
-
-    &.halfway-fab {
-        &.left {
-            right: auto;
-            left: 24px;
-        }
-        position: absolute;
-        right: 24px;
-        bottom: -$button-floating-size / 2;
-    }
-    display: inline-block;
-    color: $button-floating-color;
-    position: relative;
-    overflow: hidden;
-    z-index: 1;
-    width: $button-floating-size;
-    height: $button-floating-size;
-    line-height: $button-floating-size;
-    padding: 0;
-    background-color: $button-floating-background;
-    border-radius: $button-floating-radius;
-    @extend .z-depth-1;
-    transition: background-color .3s;
-    cursor: pointer;
-    vertical-align: middle;
-    i {
-        width: inherit;
-        display: inline-block;
-        text-align: center;
-        color: $button-floating-color;
-        font-size: $button-large-icon-font-size;
-        line-height: $button-floating-size;
-    }
-}
-
-// button fix
-button.btn-floating {
-    border: $button-border;
-}
-
-// Fixed Action Button
-.fixed-action-btn {
-    &.active {
-        ul {
-            visibility: visible;
-        }
-    }
-
-    // Directions
-    &.direction-left,
-    &.direction-right {
-        padding: 0 0 0 15px;
-        ul {
-            text-align: right;
-            right: 64px;
-            top: 50%;
-            transform: translateY(-50%);
-            height: 100%;
-            left: auto;
-            /*width 100% only goes to width of button container */
-            width: 500px;
-            li {
-                display: inline-block;
-                margin: 7.5px 15px 0 0;
-            }
-        }
-    }
-    &.direction-right {
-        padding: 0 15px 0 0;
-        ul {
-            text-align: left;
-            direction: rtl;
-            left: 64px;
-            right: auto;
-            li {
-                margin: 7.5px 0 0 15px;
-            }
-        }
-    }
-    &.direction-bottom {
-        padding: 0 0 15px 0;
-        ul {
-            top: 64px;
-            bottom: auto;
-            display: flex;
-            flex-direction: column-reverse;
-            li {
-                margin: 15px 0 0 0;
-            }
-        }
-    }
-    &.toolbar {
-        &.active {
-            &>a i {
-                opacity: 0;
-            }
-        }
-        padding: 0;
-        height: $button-floating-large-size;
-        ul {
-            display: flex;
-            top: 0;
-            bottom: 0;
-            z-index: 1;
-            li {
-                flex: 1;
-                display: inline-block;
-                margin: 0;
-                height: 100%;
-                transition: none;
-                a {
-                    display: block;
-                    overflow: hidden;
-                    position: relative;
-                    width: 100%;
-                    height: 100%;
-                    background-color: transparent;
-                    box-shadow: none;
-                    color: #fff;
-                    line-height: $button-floating-large-size;
-                    z-index: 1;
-                    i {
-                        line-height: inherit;
-                    }
-                }
-            }
-        }
-    }
-    position: fixed;
-    right: 23px;
-    bottom: 23px;
-    padding-top: 15px;
-    margin-bottom: 0;
-    z-index: 997;
-    ul {
-        left: 0;
-        right: 0;
-        text-align: center;
-        position: absolute;
-        bottom: 64px;
-        margin: 0;
-        visibility: hidden;
-        li {
-            margin-bottom: 15px;
-        }
-        a.btn-floating {
-            opacity: 0;
-        }
-    }
-    .fab-backdrop {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: -1;
-        width: $button-floating-size;
-        height: $button-floating-size;
-        background-color: $button-floating-background;
-        border-radius: $button-floating-radius;
-        transform: scale(0);
-    }
-}
-
-// Flat button
-.btn-flat {
-    box-shadow: none;
-    background-color: transparent;
-    color: $button-flat-color;
-    cursor: pointer;
-    transition: background-color .2s;
-    &:focus,
-    &:hover {
-        box-shadow: none;
-    }
-    &:focus {
-        background-color: rgba(0, 0, 0, .1);
-    }
-    &.disabled,
-    &.btn-flat[disabled]  {
-        background-color: transparent !important;
-        color: $button-flat-disabled-color !important;
-        cursor: default;
-    }
-}
-
-// Large button
-.btn-large {
-    @extend .btn;
-    height: $button-large-height;
-    line-height: $button-large-height;
-    font-size: $button-large-font-size;
-    padding: 0 28px;
-
-    i {
-        font-size: $button-large-icon-font-size;
-    }
-}
-
-// Small button
-.btn-small {
-    @extend .btn;
-    height: $button-small-height;
-    line-height: $button-small-height;
-    font-size: $button-small-font-size;
-    i {
-        font-size: $button-small-icon-font-size;
-    }
-}
-
-// Block button
-.btn-block {
-    display: block;
-}
diff --git a/Resources/assets/sass/_cards.scss b/Resources/assets/sass/_cards.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/Resources/assets/sass/_func.scss b/Resources/assets/sass/_func.scss
deleted file mode 100644
index 11cebf9..0000000
--- a/Resources/assets/sass/_func.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@function v($var, $fallback: null) {
-    @if($fallback) {
-        @return var(--#{$var}, #{$fallback});
-    } @else {
-        @return var(--#{$var});
-    }
-}
diff --git a/Resources/assets/sass/_sidenav.scss b/Resources/assets/sass/_sidenav.scss
deleted file mode 100644
index 19f2b6a..0000000
--- a/Resources/assets/sass/_sidenav.scss
+++ /dev/null
@@ -1,209 +0,0 @@
-.sidenav {
-    position: fixed;
-    width: 300px;
-    left: 0;
-    top: 0;
-    margin: 0;
-    transform: translateX(-100%);
-    height: 100%;
-    height: calc(100% + 60px);
-    height: -moz-calc(100%); //Temporary Firefox Fix
-    padding-bottom: 60px;
-    background-color: v(bgprimary, rgba(0,0,0,.25));
-    z-index: 999;
-    overflow-y: auto;
-    will-change: transform;
-    backface-visibility: hidden;
-    transform: translateX(-105%);
-
-    @extend .z-depth-1;
-
-    // Right Align
-    &.right-aligned {
-        right: 0;
-        transform: translateX(105%);
-        left: auto;
-        transform: translateX(100%);
-    }
-
-    .collapsible {
-        margin: 0;
-    }
-
-
-    li {
-        float: none;
-        line-height: $sidenav-line-height;
-
-        &.active { background-color: rgba(0,0,0,.05); }
-    }
-
-    // Style non btn anchors
-    li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
-        &:hover { background-color: rgba(0,0,0,.05);}
-
-        color: $sidenav-font-color;
-        display: block;
-        font-size: $sidenav-font-size;
-        font-weight: 500;
-        height: $sidenav-item-height;
-        line-height: $sidenav-line-height;
-        padding: 0 ($sidenav-padding * 2);
-
-        & > i,
-        & > [class^="mdi-"], li > a > [class*="mdi-"],
-        & > i.material-icons {
-            float: left;
-            height: $sidenav-item-height;
-            line-height: $sidenav-line-height;
-            margin: 0 ($sidenav-padding * 2) 0 0;
-            width: $sidenav-item-height / 2;
-            color: rgba(0,0,0,.54);
-        }
-    }
-
-    // Stlye btn anchors
-    li > .btn, li > .btn-large, li > .btn-flat, li > .btn-floating {
-        margin: 10px ($sidenav-padding * 2);
-    }
-
-    .divider {
-        margin: ($sidenav-padding / 2) 0 0 0;
-    }
-
-    .subheader {
-        &:hover {
-            background-color: transparent;
-        }
-
-        cursor: initial;
-        pointer-events: none;
-        color: rgba(0,0,0,.54);
-        font-size: $sidenav-font-size;
-        font-weight: 500;
-        line-height: $sidenav-line-height;
-    }
-
-    .user-view {
-        position: relative;
-        padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0;
-        margin-bottom: $sidenav-padding / 2;
-
-        & > a {
-            &:hover { background-color: transparent; }
-            height: auto;
-            padding: 0;
-        }
-
-        .background {
-            overflow: hidden;
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            z-index: -1;
-        }
-
-        .circle, .name, .email {
-            display: block;
-        }
-
-        .circle {
-            height: 64px;
-            width: 64px;
-        }
-
-        .name,
-        .email {
-            font-size: $sidenav-font-size;
-            line-height: $sidenav-line-height / 2;
-        }
-
-        .name {
-            margin-top: 16px;
-            font-weight: 500;
-        }
-
-        .email {
-            padding-bottom: 16px;
-            font-weight: 400;
-        }
-    }
-}
-
-
-// Touch interaction
-.drag-target {
-    // Right Align
-    &.right-aligned {
-        right: 0;
-    }
-
-    height: 100%;
-    width: 10px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 998;
-}
-
-
-// Fixed Sidenav shown
-.sidenav.sidenav-fixed {
-    // Right Align
-    &.right-aligned {
-        right: 0;
-        left: auto;
-    }
-
-    left: 0;
-    transform: translateX(0);
-    position: fixed;
-}
-
-// Fixed Sidenav hide on smaller
-@media #{$medium-and-down} {
-    .sidenav {
-        &.sidenav-fixed {
-            transform: translateX(-105%);
-
-            &.right-aligned {
-                transform: translateX(105%);
-            }
-        }
-
-        > a {
-            padding: 0 $sidenav-padding;
-        }
-
-        .user-view {
-            padding: $sidenav-padding $sidenav-padding 0;
-        }
-    }
-}
-
-
-.sidenav .collapsible-body > ul:not(.collapsible) > li.active,
-.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active {
-    background-color: v(primary-color, $primary-color);
-    a {
-        color: $sidenav-bg-color;
-    }
-}
-.sidenav .collapsible-body {
-    padding: 0;
-}
-
-
-.sidenav-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    opacity: 0;
-    height: 120vh;
-    background-color: rgba(0,0,0,.5);
-    z-index: 997;
-    display: none;
-}
diff --git a/Resources/assets/sass/_tables.scss b/Resources/assets/sass/_tables.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/Resources/assets/sass/_variables.scss b/Resources/assets/sass/_variables.scss
deleted file mode 100644
index 06a44d9..0000000
--- a/Resources/assets/sass/_variables.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-
-$primary-color: #71ccff !default;
-
-$sidenav-width: 300px !default;
-$sidenav-font-size: 14px !default;
-$sidenav-font-color: rgba(255, 255, 255, 0.87) !default;
-$sidenav-bg-color: #fff !default;
-$sidenav-padding: 16px !default;
-$sidenav-item-height: 48px !default;
-$sidenav-line-height: $sidenav-item-height !default;
-
-// 3. Buttons
-// ==========================================================================
-
-// Shared styles
-$button-border: none !default;
-$button-background-focus: lighten($primary-color, 4%) !default;
-$button-font-size: 14px !default;
-$button-icon-font-size: 1.3rem !default;
-$button-height: 36px !default;
-$button-padding: 0 16px !default;
-$button-radius: 2px !default;
-
-// Disabled styles
-$button-disabled-background: #DFDFDF !default;
-$button-disabled-color: #9F9F9F !default;
-
-// Raised buttons
-$button-raised-background: $primary-color !default;
-$button-raised-background-hover: lighten($button-raised-background, 5%) !default;
-$button-raised-color: #fff !default;
-
-// Large buttons
-$button-large-font-size: 15px !default;
-$button-large-icon-font-size: 1.6rem !default;
-$button-large-height: $button-height * 1.5 !default;
-$button-floating-large-size: 56px !default;
-
-// Small buttons
-$button-small-font-size: 13px !default;
-$button-small-icon-font-size: 1.2rem !default;
-$button-small-height: $button-height * .9 !default;
-$button-floating-small-size: $button-height * .9 !default;
-
-// Flat buttons
-$button-flat-color: #343434 !default;
-$button-flat-disabled-color: lighten(#999, 10%) !default;
-
-// Floating buttons
-$button-floating-background: $primary-color !default;
-$button-floating-background-hover: $button-floating-background !default;
-$button-floating-color: #fff !default;
-$button-floating-size: 40px !default;
-$button-floating-radius: 50% !default;
diff --git a/Resources/assets/sass/app.scss b/Resources/assets/sass/app.scss
index e69de29..faa5b3e 100644
--- a/Resources/assets/sass/app.scss
+++ b/Resources/assets/sass/app.scss
@@ -0,0 +1,5 @@
+@import url("https://use.typekit.net/vrq1kxj.css");
+
+$body-font-family: europa sans-serif;
+
+@import '~vuetify/src/styles/styles.sass';
diff --git a/Resources/views/index.blade.php b/Resources/views/index.blade.php
index f50569b..c7b28ec 100644
--- a/Resources/views/index.blade.php
+++ b/Resources/views/index.blade.php
@@ -4,16 +4,19 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>{{ config('app.name') }} Crew Center</title>
+    <title>{{ config('app.name') }} Flight Operations</title>
     <meta name="csrf-token" content="{{ csrf_token() }}">
-    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+    <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
-
+    <link rel="stylesheet" href="/css/SparkVirtual.css">
+    <link rel="stylesheet" href="https://use.typekit.net/vrq1kxj.css">
     {{-- Laravel Mix - CSS File --}}
     <link rel="stylesheet" href="{{ mix('css/materialcrewredux.css') }}">
+    <style>
 
+    </style>
 </head>
 <body>
 <div id="app"></div>
@@ -22,8 +25,11 @@
     window.appSettings = <?php echo json_encode([
         'community_name' => config('app.name'),
         'colors' => [
-            'primary' => '#71ccff'
-        ]
+            'primary' => '#A40000', //'#71ccff'
+            'accent' => '#790000',
+            'secondary' => '#002561' // 002561 dark 17269c light
+        ],
+        'user' => \Illuminate\Support\Facades\Auth::user()
     ])?>
 </script>
 <script src="{{ mix('js/materialcrewredux.js') }}"></script>
diff --git a/package.json b/package.json
index faf24c6..4db000d 100644
--- a/package.json
+++ b/package.json
@@ -16,10 +16,11 @@
     "vue-responsive-components": "^0.2.3",
     "vue-router": "^3.0.7",
     "vuetify": "^2.0.0",
-    "vuex": "^3.1.1"
+    "vuex": "^3.1.1",
+    "ws": "^7.3.1"
   },
   "devDependencies": {
-    "@mdi/font": "^3.8.95",
+    "@mdi/font": "^3.9.97",
     "@mdi/js": "^3.8.95",
     "cross-env": "^5.1.4",
     "laravel-mix": "^4.0.7",
diff --git a/webpack.mix.js b/webpack.mix.js
index bf9653b..8c831d7 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -1,9 +1,15 @@
 const mix = require('laravel-mix');
 require('laravel-mix-merge-manifest');
-
+const VuetifyLoader = require('vuetify-loader/lib/plugin');
 mix.setPublicPath('../../public').mergeManifest();
 
-mix.js(__dirname + '/Resources/assets/js/main.js', 'js/materialcrewredux.js')
+mix.options({
+    extractVueStyles: true,
+    })
+    .webpackConfig({
+        plugins: [new VuetifyLoader()]
+    })
+    .js(__dirname + '/Resources/assets/js/main.js', 'js/materialcrewredux.js')
     .sass( __dirname + '/Resources/assets/sass/app.scss', 'css/materialcrewredux.css');
 
 if (mix.inProduction()) {