diff --git a/.eslintignore b/.eslintignore
index d8b0d0a..4147c4b 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 test/unit/coverage/**
 test/unit/*.js
 test/e2e/*.js
+src/**
diff --git a/src/main/index.js b/src/main/index.js
index 3aed3f7..99fc2c9 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -1,8 +1,9 @@
 'use strict'
 
-import { app, BrowserWindow, Tray, ipcMain, Notification } from 'electron'
+import { app, BrowserWindow, Tray, ipcMain, Notification, dialog } from 'electron'
 import path from 'path'
 import ps from 'portscanner'
+import fs from 'fs'
 /**
  * Set `__static` path to static files in production
  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
@@ -132,6 +133,44 @@ ipcMain.on('serviceStatusChange', (event, service, status) => {
   }
 })
 
+ipcMain.on('allFolderConfigurations', (event) => {
+  let userConfiguration = readConfigurationFile()
+  event.sender.send('allFolderConfigurationsz', userConfiguration)
+})
+
+ipcMain.on('updateFolderConfigurations', (event, userConfiguration) => {
+  createUpdateConfigurationFile(userConfiguration)
+})
+
+ipcMain.on('openDirectory', (event) => {
+  // if (false) {
+  //   dialog.showOpenDialog(mainWindow, {
+
+  //     properties: ['openDirectory']
+
+  //   })
+  // }
+
+})
+
+ipcMain.on('selectFcsDirectory', (event) => {
+  event.sender.send('fcsDirectory', dialog.showOpenDialog(mainWindow, {
+    properties: ['openDirectory']
+  }))
+})
+
+ipcMain.on('selectFcsWebDirectory', (event) => {
+  event.sender.send('fcsWebDirectory', dialog.showOpenDialog(mainWindow, {
+    properties: ['openDirectory']
+  }))
+})
+
+ipcMain.on('selectFcsUiDirectory', (event) => {
+  event.sender.send('fcsUiDirectory', dialog.showOpenDialog(mainWindow, {
+    properties: ['openDirectory']
+  }))
+})
+
 setInterval(() => {
   // console.log('Interval has been passed!!')
   let portsForServices = [
@@ -158,6 +197,57 @@ setInterval(() => {
   checkIfPortsOpenAndEmit(portsForExternals, externalsEvent)
 }, 300)
 
+// function parseDataFile (filePath, defaults) {
+//   try {
+//     return JSON.parse(fs.readFileSync(filepPath))
+//   } catch (error) {
+//     return {
+//       default: true
+//     }
+//   }
+// }
+
+function readConfigurationFile () {
+  let pathToFile = app.getPath('appData') + '/FCSToolbar/configuration.json'
+  try {
+    let userConfiguration = fs.readFileSync(pathToFile)
+    return JSON.parse(userConfiguration)
+  } catch (err) {
+    createUpdateConfigurationFile()
+    let userConfiguration = fs.readFileSync(pathToFile)
+    return JSON.parse(userConfiguration)
+  }
+}
+
+function createUpdateConfigurationFile (userConfiguration = {name: '', fcsLocation: '', fcsWebLocation: '', fcsUiLocation: ''}) {
+  let pathToStorage = app.getPath('appData') + '/FCSToolbar'
+  let pathToFile = pathToStorage + '/configuration.json'
+  console.log(app.getAppPath())
+  console.log(app.getPath('appData'))
+
+  if (!fs.existsSync(pathToStorage)) {
+    fs.mkdirSync(pathToStorage)
+  }
+
+  // if (!fs.existsSync(pathToFile)) {
+  //   fs.writeFile(pathToFile, 'utf8', function (err) {
+  //     if (err) throw err
+  //   })
+  // }
+
+  let configuration = { name: '', fcsLocation: '', fcsWebLocation: '', fcsUiLocation: '' }
+  configuration.fcsLocation = userConfiguration.fcsLocation
+  configuration.fcsWebLocation = userConfiguration.fcsWebLocation
+  configuration.fcsUiLocation = userConfiguration.fcsUiLocation
+
+  let configurationString = JSON.stringify(configuration)
+  try {
+    fs.writeFileSync(pathToFile, configurationString, 'utf8')
+  } catch (err) {
+    throw err
+  }
+}
+
 function checkIfPortsOpenAndEmit (portsArray, servicesEvent) {
   let activePortMapping = {}
   let promiseArray = []
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 2997c6a..73eddd7 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -1,15 +1,95 @@
 <template>
-  <div id="app">
-    <router-view></router-view>
-  </div>
+    <div id="app">
+        <div>
+            <div class="header-arrow" v-if="showHeaderAndFooter"></div>
+            <div :class="{window: true, 'remove-top-padding': !showHeaderAndFooter}">
+                <header class="toolbar toolbar-header" v-if="showHeaderAndFooter">
+                    <h1 class="title">
+                        FCS Toolbar
+                        <span class="js-update-time"></span>
+                    </h1>
+                    <div class="toolbar-actions">
+                        <div class="btn-group">
+                            <router-link to="/landing-page">
+                                <button class="btn btn-default">
+                              <span class="icon icon-home icon-text"></span>
+                              Home
+                            </button>
+                            </router-link>
+                            <button class="btn btn-default">
+                            <span class="icon icon-popup"></span>
+                          </button>
+                        </div>
+    
+                        <button class="btn btn-default">
+                          <span class="icon icon-home icon-text"></span>
+                          Filters
+                        </button>
+    
+                        <button class="btn btn-default btn-dropdown pull-right">
+                          <span class="icon icon-megaphone"></span>
+                        </button>
+                    </div>
+                </header>
+                <router-view @change-header-footer-display="toggleHeaderAndFooter"></router-view>
+                <footer class="toolbar toolbar-footer" v-if="showHeaderAndFooter">
+                    <div class="footer-link">
+                        Powered by
+                        <a href="http://kunle.io">Kunle</a>
+                    </div>
+    
+                    <div class="toolbar-actions pull-right">
+                        <div class="btn-group">
+                            <button class="btn btn-default js-refresh-action">
+                            <span class="icon icon-arrows-ccw js-refresh-action" title="Refresh"></span>
+                          </button>
+                            <router-link to="/settings" class="settings-icon">
+                                <button class="btn btn-default">
+                              <span class="settings icon icon-tools"></span>
+                            </button>
+                            </router-link>
+                            <button class="btn btn-default js-quit-action">
+                            <span class="icon icon-cancel js-quit-action" title="Quit"></span>
+                          </button>
+                        </div>
+                    </div>
+                </footer>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
-  export default {
-    name: 'test'
-  }
+export default {
+    name: "App",
+    mounted() {
+        console.log(this.showHeaderAndFooter);
+    },
+    data() {
+        return {
+            showHeaderAndFooter: true
+        };
+    },
+    methods: {
+        routeToSettings() {
+            this.$router.push({ name: "settings" });
+        },
+        toggleHeaderAndFooter(booleanValue) {
+            console.log('Changing the headerFooterShow value to...' + booleanValue);
+            this.showHeaderAndFooter = false;
+        }
+    }
+};
 </script>
 
 <style>
-  /* CSS */
+/* CSS */
+
+.settings-icon {
+    width: 100%;
+}
+
+.remove-top-padding {
+    top: 0;
+}
 </style>
diff --git a/src/renderer/components/LandingPage.vue b/src/renderer/components/LandingPage.vue
index 62a2e4a..c8cb23d 100644
--- a/src/renderer/components/LandingPage.vue
+++ b/src/renderer/components/LandingPage.vue
@@ -1,14 +1,4 @@
 <template>
-<div>
-  <div class="header-arrow"></div>
-  <div class="window">
-    <header class="toolbar toolbar-header">
-      <h1 class="title">
-        FCS Toolbar
-        <span class="js-update-time"></span>
-      </h1>
-    </header>
-
     <div class="window-content">
       <div class="pane">
 
@@ -20,49 +10,36 @@
 
         <div class="striped-bar"></div>
         <div>
-          <div class="column" @click="openApp('fc')">
-            <div class="reading js-temperature">FC</div>
-            <div class="description">Fcs Commands</div>
+          <div class="column fcs-column" @click="openApp('fc')">
+            <div class="app-container">
+              <div class="reading js-temperature">FC</div>
+              <div class="description">Fcs Commands</div>
+            </div>
           </div>
-          <div class="column"@click="openApp('wl')">
-            <div class="reading js-apparent">WL</div>
-            <div class="description">Weighted List</div>
+          <div class="column fcs-column" @click="openApp('wl')">
+            <div class="app-container">
+              <div class="reading js-apparent">WL</div>
+              <div class="description">Weighted List</div>
+            </div>
           </div>
         </div>
 
         <div>
-          <div class="column" @click="openApp('tl')">
-            <div class="reading js-wind">TL</div>
-            <div class="description">Traffic Light</div>
+          <div class="column fcs-column" @click="openApp('tl')">
+            <div class="app-container">
+              <div class="reading js-wind">TL</div>
+              <div class="description">Traffic Light</div>
+            </div>
           </div>
-          <div class="column" @click="openApp('ul')">
-            <div class="reading js-wind-direction">UL</div>
-            <div class="description">Useful Links</div>
+          <div class="column fcs-column" @click="openApp('ul')">
+            <div class="app-container">
+              <div class="reading js-wind-direction">UL</div>
+              <div class="description">Useful Links</div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-
-    <footer class="toolbar toolbar-footer">
-      <div class="footer-link">
-        Powered by
-        <a href="http://kunle.io">Kunle</a>
-      </div>
-
-      <div class="toolbar-actions pull-right">
-        <div class="btn-group">
-          <button class="btn btn-default js-refresh-action">
-            <span class="icon icon-arrows-ccw js-refresh-action" title="Refresh"></span>
-          </button>
-
-          <button @click="ping" class="btn btn-default js-quit-action">
-            <span class="icon icon-cancel js-quit-action" title="Quit"></span>
-          </button>
-        </div>
-      </div>
-    </footer>
-  </div>
-</div>
 </template>
 
 <script>
@@ -102,12 +79,10 @@ export default {
       },
       externalsStatus: {
         'mongodb': false,
-        'management': false,
-        'health': false,
-        'enrollment': false,
-        'auth': false,
-        'analytics': false,
-        'telematics': false
+        'redis': false,
+        'sqlserver': false,
+        'zookeeper': false,
+        'kafka': false
       }
     }
   },
@@ -159,4 +134,34 @@ export default {
 
 <style>
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
+.fcs-column {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcs-column, .reading, .column, .description { 
+  cursor: pointer;
+}
+.fcs-column .app-container {
+  color: #000;
+  border: none;
+  border-radius: 45px;
+  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease 0s;
+  outline: none;
+  padding: 15px;
+}
+
+.fcs-column .app-container:hover {
+  background-color: #c2c9e4;
+  box-shadow: 0px 15px 20px rgba(194,201,228, 0.4);
+  color: #fff;
+  transform: translateY(-7px);
+}
+.btn.btn-default a{
+    color: black;
+    text-decoration: none;
+}
+
 </style>
diff --git a/src/renderer/components/Settings.vue b/src/renderer/components/Settings.vue
new file mode 100644
index 0000000..0f53dbb
--- /dev/null
+++ b/src/renderer/components/Settings.vue
@@ -0,0 +1,78 @@
+<template>
+    <div class="window-content">
+        <div class="pane">
+            Test settings page
+            <!-- <input type="file"
+           webkitdirectory /> -->
+            <button @click="getFcsLocation">FCS</button>
+            <button @click="getFcsWebLocation">FCS Web</button>
+            <button @click="getFcsUiLocation">FCS UI</button>
+            </br>
+            fcsLocation: {{userConfiguration.fcsLocation}}
+            </br>
+            fcsWebLocation: {{userConfiguration.fcsWebLocation}}
+            </br>
+            fcsUiLocation: {{userConfiguration.fcsUiLocation}}
+            </br>
+            <button @click="saveAllConfigurations">Save</button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Settings',
+    mounted() {
+        this.$electron.ipcRenderer.send('allFolderConfigurations')
+        this.$electron.ipcRenderer.on('allFolderConfigurationsz', this.onConfigurationReceived)
+        this.$electron.ipcRenderer.on('fcsDirectory', this.onFcsLocationReceived)
+        this.$electron.ipcRenderer.on('fcsWebDirectory', this.onFcsWebLocationReceived)
+        this.$electron.ipcRenderer.on('fcsUiDirectory', this.onFcsUiLocationReceived)
+    },
+    beforeDestroy() {
+        this.$electron.ipcRenderer.removeListener('allFolderConfigurationsz', this.onConfigurationReceived)
+        this.$electron.ipcRenderer.removeListener('fcsDirectory', this.onFcsLocationReceived)
+        this.$electron.ipcRenderer.removeListener('fcsWebDirectory', this.onFcsWebLocationReceived)
+        this.$electron.ipcRenderer.removeListener('fcsUiDirectory', this.onFcsUiLocationReceived)
+    },
+    data() {
+        return {
+            userConfiguration: {
+                fcsLocation: '',
+                fcsWebLocation: '',
+                fcsUiLocation: ''
+            }
+        }
+    },
+    methods: {
+        saveAllConfigurations() {
+            this.$electron.ipcRenderer.send('updateFolderConfigurations', this.userConfiguration)
+        },
+        onFcsLocationReceived(event, message) {
+            this.userConfiguration.fcsLocation = message[0]
+        },
+        onFcsWebLocationReceived(event, message) {
+            this.userConfiguration.fcsWebLocation = message[0]
+        },
+        onFcsUiLocationReceived(event, message) {
+            this.userConfiguration.fcsUiLocation = message[0]
+        },
+        mainOpenDirectory() {
+            this.$electron.ipcRenderer.send('openDirectory')
+        },
+        onConfigurationReceived(event, message) {
+            this.userConfiguration = message
+            console.log(message)
+        },
+        getFcsLocation() {
+            this.$electron.ipcRenderer.send('selectFcsDirectory')
+        },
+        getFcsWebLocation() {
+            this.$electron.ipcRenderer.send('selectFcsWebDirectory')
+        },
+        getFcsUiLocation() {
+            this.$electron.ipcRenderer.send('selectFcsUiDirectory')
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/renderer/components/toolbar-apps/FCSCommands.vue b/src/renderer/components/toolbar-apps/FCSCommands.vue
index ff4ebc9..c90eed0 100644
--- a/src/renderer/components/toolbar-apps/FCSCommands.vue
+++ b/src/renderer/components/toolbar-apps/FCSCommands.vue
@@ -1,71 +1,80 @@
 <template>
-  <div class="bgimg">
-    <div class="topleft">
-      <p>FCS Commands</p>
+    <div class="bgimg">
+        <div class="topleft">
+            <p>FCS Commands</p>
+        </div>
+        <div class="middle">
+            <h1>COMING SOON</h1>
+            <hr>
+            <p>Project X</p>
+        </div>
+        <div class="bottomleft">
+            <p>Kunle Oshiyoye</p>
+        </div>
     </div>
-    <div class="middle">
-      <h1>COMING SOON</h1>
-      <hr>
-      <p>Project X</p>
-    </div>
-    <div class="bottomleft">
-      <p>Kunle Oshiyoye</p>
-    </div>
-  </div>
 </template>
+
 <script>
 export default {
-  name: 'FCSCommands'
+    name: 'FCSCommands',
+    mounted() {
+        this.$emit('change-header-footer-display', false);
+    }
 }
 </script>
+
 <style>
 /* Set height to 100% for body and html to enable the background image to cover the whole page: */
 
 .bgimg {
-  /* Background image */
-  background-image: url('../../../../static/forestbridge.jpg');
-  /* Full-screen */
-  height: 100%;
-  /* Center the background image */
-  background-position: center;
-  /* Scale and zoom in the image */
-  background-size: cover;
-  /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
-  position: relative;
-  /* Add a white text color to all elements inside the .bgimg container */
-  color: white;
-  /* Add a font */
-  font-family: "Courier New", Courier, monospace;
-  /* Set the font-size to 25 pixels */
-  font-size: 25px;
+    /* Background image */
+    background-image: url('../../../../static/forestbridge.jpg');
+    /* Full-screen */
+    height: 100%;
+    /* Center the background image */
+    background-position: center;
+    /* Scale and zoom in the image */
+    background-size: cover;
+    /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
+    position: relative;
+    /* Add a white text color to all elements inside the .bgimg container */
+    color: white;
+    /* Add a font */
+    font-family: "Courier New", Courier, monospace;
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
 }
 
 /* Position text in the top-left corner */
+
 .topleft {
-  position: absolute;
-  top: 0;
-  left: 16px;
+    position: absolute;
+    top: 0;
+    left: 16px;
 }
 
 /* Position text in the bottom-left corner */
+
 .bottomleft {
-  position: absolute;
-  bottom: 0;
-  left: 16px;
+    position: absolute;
+    bottom: 0;
+    left: 16px;
 }
 
 /* Position text in the middle */
+
 .middle {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
 }
 
 /* Style the <hr> element */
+
 hr {
-  margin: auto;
-  width: 40%;
+    margin: auto;
+    width: 40%;
 }
 </style>
\ No newline at end of file
diff --git a/src/renderer/components/toolbar-apps/FCSLinks.vue b/src/renderer/components/toolbar-apps/FCSLinks.vue
index 4067de2..59044cb 100644
--- a/src/renderer/components/toolbar-apps/FCSLinks.vue
+++ b/src/renderer/components/toolbar-apps/FCSLinks.vue
@@ -1,71 +1,80 @@
 <template>
-  <div class="bgimg">
-    <div class="topleft">
-      <p>FCS Links</p>
+    <div class="bgimg">
+        <div class="topleft">
+            <p>FCS Links</p>
+        </div>
+        <div class="middle">
+            <h1>COMING SOON</h1>
+            <hr>
+            <p>Project X</p>
+        </div>
+        <div class="bottomleft">
+            <p>Kunle Oshiyoye</p>
+        </div>
     </div>
-    <div class="middle">
-      <h1>COMING SOON</h1>
-      <hr>
-      <p>Project X</p>
-    </div>
-    <div class="bottomleft">
-      <p>Kunle Oshiyoye</p>
-    </div>
-  </div>
 </template>
+
 <script>
 export default {
-  name: 'FCSLinks'
+    name: 'FCSLinks',
+    mounted() {
+        this.$emit('change-header-footer-display', false);
+    }
 }
 </script>
+
 <style>
 /* Set height to 100% for body and html to enable the background image to cover the whole page: */
 
 .bgimg {
-  /* Background image */
-  background-image: url('../../../../static/forestbridge.jpg');
-  /* Full-screen */
-  height: 100%;
-  /* Center the background image */
-  background-position: center;
-  /* Scale and zoom in the image */
-  background-size: cover;
-  /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
-  position: relative;
-  /* Add a white text color to all elements inside the .bgimg container */
-  color: white;
-  /* Add a font */
-  font-family: "Courier New", Courier, monospace;
-  /* Set the font-size to 25 pixels */
-  font-size: 25px;
+    /* Background image */
+    background-image: url('../../../../static/forestbridge.jpg');
+    /* Full-screen */
+    height: 100%;
+    /* Center the background image */
+    background-position: center;
+    /* Scale and zoom in the image */
+    background-size: cover;
+    /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
+    position: relative;
+    /* Add a white text color to all elements inside the .bgimg container */
+    color: white;
+    /* Add a font */
+    font-family: "Courier New", Courier, monospace;
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
 }
 
 /* Position text in the top-left corner */
+
 .topleft {
-  position: absolute;
-  top: 0;
-  left: 16px;
+    position: absolute;
+    top: 0;
+    left: 16px;
 }
 
 /* Position text in the bottom-left corner */
+
 .bottomleft {
-  position: absolute;
-  bottom: 0;
-  left: 16px;
+    position: absolute;
+    bottom: 0;
+    left: 16px;
 }
 
 /* Position text in the middle */
+
 .middle {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
 }
 
 /* Style the <hr> element */
+
 hr {
-  margin: auto;
-  width: 40%;
+    margin: auto;
+    width: 40%;
 }
 </style>
\ No newline at end of file
diff --git a/src/renderer/components/toolbar-apps/TrafficLight.vue b/src/renderer/components/toolbar-apps/TrafficLight.vue
index 0431732..0bacc72 100644
--- a/src/renderer/components/toolbar-apps/TrafficLight.vue
+++ b/src/renderer/components/toolbar-apps/TrafficLight.vue
@@ -1,71 +1,80 @@
 <template>
-  <div class="bgimg">
-    <div class="topleft">
-      <p>Traffic Light</p>
+    <div class="bgimg">
+        <div class="topleft">
+            <p>Traffic Light</p>
+        </div>
+        <div class="middle">
+            <h1>COMING SOON</h1>
+            <hr>
+            <p>Project X</p>
+        </div>
+        <div class="bottomleft">
+            <p>Kunle Oshiyoye</p>
+        </div>
     </div>
-    <div class="middle">
-      <h1>COMING SOON</h1>
-      <hr>
-      <p>Project X</p>
-    </div>
-    <div class="bottomleft">
-      <p>Kunle Oshiyoye</p>
-    </div>
-  </div>
 </template>
+
 <script>
 export default {
-  name: 'TrafficLight'
+    name: 'TrafficLight',
+    mounted() {
+        this.$emit('change-header-footer-display', false);
+    }
 }
 </script>
+
 <style>
 /* Set height to 100% for body and html to enable the background image to cover the whole page: */
 
 .bgimg {
-  /* Background image */
-  background-image: url('../../../../static/forestbridge.jpg');
-  /* Full-screen */
-  height: 100%;
-  /* Center the background image */
-  background-position: center;
-  /* Scale and zoom in the image */
-  background-size: cover;
-  /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
-  position: relative;
-  /* Add a white text color to all elements inside the .bgimg container */
-  color: white;
-  /* Add a font */
-  font-family: "Courier New", Courier, monospace;
-  /* Set the font-size to 25 pixels */
-  font-size: 25px;
+    /* Background image */
+    background-image: url('../../../../static/forestbridge.jpg');
+    /* Full-screen */
+    height: 100%;
+    /* Center the background image */
+    background-position: center;
+    /* Scale and zoom in the image */
+    background-size: cover;
+    /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
+    position: relative;
+    /* Add a white text color to all elements inside the .bgimg container */
+    color: white;
+    /* Add a font */
+    font-family: "Courier New", Courier, monospace;
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
 }
 
 /* Position text in the top-left corner */
+
 .topleft {
-  position: absolute;
-  top: 0;
-  left: 16px;
+    position: absolute;
+    top: 0;
+    left: 16px;
 }
 
 /* Position text in the bottom-left corner */
+
 .bottomleft {
-  position: absolute;
-  bottom: 0;
-  left: 16px;
+    position: absolute;
+    bottom: 0;
+    left: 16px;
 }
 
 /* Position text in the middle */
+
 .middle {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
 }
 
 /* Style the <hr> element */
+
 hr {
-  margin: auto;
-  width: 40%;
+    margin: auto;
+    width: 40%;
 }
 </style>
\ No newline at end of file
diff --git a/src/renderer/components/toolbar-apps/WeightedList/Home.vue b/src/renderer/components/toolbar-apps/WeightedList/Home.vue
index 54fd1f4..7ab9da8 100644
--- a/src/renderer/components/toolbar-apps/WeightedList/Home.vue
+++ b/src/renderer/components/toolbar-apps/WeightedList/Home.vue
@@ -1,88 +1,89 @@
 <template>
-  <div id="home">
-    <weighted-list/>
-  </div>
+    <div id="home">
+        <weighted-list/>
+    </div>
 </template>
 
 <script>
 import WeightedList from './WeightedList'
 
 export default {
-  name: 'home',
-  components: { WeightedList },
-  methods: {
-    open (link) {
-      this.$electron.shell.openExternal(link)
+    name: 'home',
+    components: { WeightedList },
+    methods: {
+        open(link) {
+            this.$electron.shell.openExternal(link)
+        }
+    },
+    mounted() {
+        this.$emit('change-header-footer-display', false);
     }
-  }
 }
 </script>
 
-<style>
-  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
-
-  * {
+<style scoped>
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
+* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-  }
+}
 
-  body { font-family: 'Source Sans Pro', sans-serif; }
+body {
+    font-family: 'Source Sans Pro', sans-serif;
+}
 
-  #home {
-    background:
-      radial-gradient(
-        ellipse at top left,
-        rgba(255, 255, 255, 1) 40%,
-        rgba(229, 229, 229, .9) 100%
-      );
+#home {
+    background: radial-gradient( ellipse at top left, rgba(255, 255, 255, 1) 40%, rgba(229, 229, 229, .9) 100%);
     height: 100vh;
     padding: 20px 40px;
     width: 100vw;
-  }
+}
 
-  #logo {
+#logo {
     height: auto;
     margin-bottom: 20px;
     width: 420px;
-  }
+}
 
-  main {
+main {
     display: flex;
     justify-content: space-between;
-  }
+}
 
-  main > div { flex-basis: 50%; }
+main>div {
+    flex-basis: 50%;
+}
 
-  .left-side {
+.left-side {
     display: flex;
     flex-direction: column;
-  }
+}
 
-  .welcome {
+.welcome {
     color: #555;
     font-size: 23px;
     margin-bottom: 10px;
-  }
+}
 
-  .title {
+.title {
     color: #2c3e50;
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 6px;
-  }
+}
 
-  .title.alt {
+.title.alt {
     font-size: 18px;
     margin-bottom: 10px;
-  }
+}
 
-  .doc p {
+.doc p {
     color: black;
     margin-bottom: 10px;
-  }
+}
 
-  .doc button {
+.doc button {
     font-size: .8em;
     cursor: pointer;
     outline: none;
@@ -94,10 +95,10 @@ export default {
     transition: all 0.15s ease;
     box-sizing: border-box;
     border: 1px solid #4fc08d;
-  }
+}
 
-  .doc button.alt {
+.doc button.alt {
     color: #42b983;
     background-color: transparent;
-  }
+}
 </style>
\ No newline at end of file
diff --git a/src/renderer/components/toolbar-apps/WeightedList/WeightedList.vue b/src/renderer/components/toolbar-apps/WeightedList/WeightedList.vue
index 33018e3..a4e531b 100644
--- a/src/renderer/components/toolbar-apps/WeightedList/WeightedList.vue
+++ b/src/renderer/components/toolbar-apps/WeightedList/WeightedList.vue
@@ -1,56 +1,57 @@
 <template>
-  <form class="weighted-list">
-    <legend><h1>Impact: {{score}}</h1></legend>
-    <fieldset v-for="(question, key) in questions" :key="key">
-      <question :question="question" :index="key"/>
-    </fieldset>
-    <button @click="reset">Reset</button>
-  </form>
+    <form class="weighted-list">
+        <legend>
+            <h1>Impact: {{score}}</h1>
+        </legend>
+        <fieldset v-for="(question, key) in questions" :key="key">
+            <question :question="question" :index="key" />
+        </fieldset>
+        <button @click="reset">Reset</button>
+    </form>
 </template>
 
 <script>
 import Question from './Question'
 
 export default {
-  name: 'WeightedList',
-  components: {
-    Question
-  },
-  data () {
-    return {
-      selected: 0
-    }
-  },
-  computed: {
-    questions () {
-      return this.$store.state.WeightedList.questions
+    name: 'WeightedList',
+    components: {
+        Question
     },
-    score () {
-      return this.$store.getters['WeightedList/sevScore']
-    }
-  },
-  methods: {
-    uuid (key) {
-      return 'question-' + key
+    data() {
+        return {
+            selected: 0
+        }
+    },
+    computed: {
+        questions() {
+            return this.$store.state.WeightedList.questions
+        },
+        score() {
+            return this.$store.getters['WeightedList/sevScore']
+        }
     },
-    reset () {
-      this.$store.dispatch('WeightedList/reset')
+    methods: {
+        uuid(key) {
+            return 'question-' + key
+        },
+        reset() {
+            this.$store.dispatch('WeightedList/reset')
+        }
     }
-  }
 }
 </script>
 
 <style lang="scss">
 form {
-  fieldset { 
-    padding: 1em;
-    margin-bottom: 5px;
-    border: 1px solid lightgrey;
-  }
-  button {
-    padding: 1em;
-    float: right;
-  }
+    fieldset {
+        padding: 1em;
+        margin-bottom: 5px;
+        border: 1px solid lightgrey;
+    }
+    button {
+        padding: 1em;
+        float: right;
+    }
 }
-  
 </style>
\ No newline at end of file
diff --git a/src/renderer/router/index.js b/src/renderer/router/index.js
index a09d5d8..9fb2e4e 100644
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@@ -13,22 +13,39 @@ export default new Router({
     {
       path: '/fc',
       name: 'fc',
-      component: require('@/components/toolbar-apps/FCSCommands').default
+      component: require('@/components/toolbar-apps/FCSCommands').default,
+      props: {
+        showHeaderAndFooter: false
+      }
     },
     {
       path: '/wl',
       name: 'wl',
-      component: require('@/components/toolbar-apps/WeightedList/WeightedList').default
+      component: require('@/components/toolbar-apps/WeightedList/Home').default,
+      props: {
+        showHeaderAndFooter: false
+      }
     },
     {
       path: '/tl',
       name: 'tl',
-      component: require('@/components/toolbar-apps/TrafficLight').default
+      component: require('@/components/toolbar-apps/TrafficLight').default,
+      props: {
+        showHeaderAndFooter: false
+      }
     },
     {
       path: '/ul',
       name: 'ul',
-      component: require('@/components/toolbar-apps/FCSLinks').default
+      component: require('@/components/toolbar-apps/FCSLinks').default,
+      props: {
+        showHeaderAndFooter: false
+      }
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: require('@/components/Settings').default
     },
     {
       path: '*',
diff --git a/static/index.css b/static/index.css
index a3edbc5..3296208 100644
--- a/static/index.css
+++ b/static/index.css
@@ -73,7 +73,7 @@
   width: 100%;
   margin: auto;
   text-align: center;
-  margin-top: 16px;
+  margin-top: 5px;
   font-size: var(--font-size);
   font-weight: 300;
   color: var(--text-color);