diff --git a/.gitignore b/.gitignore
index 58fca2f..a3e4933 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,14 +11,15 @@ platforms/
 # Build Artifacts
 *.js.map
 app/components/*.vue.js
-app/default-objects/*.js
-app/interfaces/*.js
-app/inverted/*.js
-app/retro/*.js
-app/standard/*.js
-app/utils/*.js
-app/main.js
-app/vue-extend.js
+app/dist
+#app/default-objects/*.js
+#app/interfaces/*.js
+#app/inverted/*.js
+#app/retro/*.js
+#app/standard/*.js
+#app/utils/*.js
+#app/main.js
+#app/vue-extend.js
 
 # Logs
 logs
diff --git a/app/_global_vars.scss b/app/_global_vars.scss
new file mode 100644
index 0000000..d3dacc3
--- /dev/null
+++ b/app/_global_vars.scss
@@ -0,0 +1,19 @@
+$standard-bg: darkgreen;
+$standard-border: #004c00;
+$standard-btn-border: #003900;
+
+$danger-bg: darkred;
+$danger-border: #740000;
+$danger-btn-border: #5e0000;
+
+$empty-bg: #868585;
+$empty-border: #616161;
+$empty-btn-border: #4c4c4c;
+
+$highlight-bg:forestgreen;
+$highlight-border: #175c17;
+$highlight-btn-border: #124912;
+
+$standard-font-color:#ffffff;
+
+$font-ganon: "Return of Ganon", "ReturnofGanon", serif;
diff --git a/app/app.scss b/app/app.scss
index 283d727..fecc555 100644
--- a/app/app.scss
+++ b/app/app.scss
@@ -1,9 +1,146 @@
 @import "~@nativescript/theme/core";
 @import "~@nativescript/theme/blue";
+@import "global_vars";
 
 // Place any CSS rules you want to apply on both iOS and Android here.
 // This is where the vast majority of your CSS code goes.
 
+.btn {
+  font-size: 20;
+  padding: 10;
+  color: white;
+  horizontal-align: center;
+  vertical-align: center;
+  font-family: $font-ganon;
+  width: 100%;
+  border-width: 2;
+  background-color: $standard-border;
+  border-color: $standard-btn-border;
+  &.danger {
+    background-color: $danger-border;
+    border-color: $danger-btn-border;
+  }
+  &.empty {
+    background-color: $empty-border;
+    border-color: $empty-btn-border;
+  }
+  &.highlight {
+    background-color: $highlight-border;
+    border-color: $highlight-btn-border;
+  }
+  &.padded {
+    width:90%;
+    magin-top:5;
+  }
+  &.extra-padded {
+    width: 90%;
+    margin:5;
+  }
+}
+
+.lbl {
+  font-size: 20;
+  font-family: $font-ganon;
+  color: $standard-font-color;
+}
+
+
+.modal-dialog {
+  background-color: $standard-bg;
+  border-width: 2px;
+  border-color: $standard-border;
+  padding: 10;
+  color: $standard-font-color;
+  font-family: $font-ganon;
+  font-size: 20;
+  &.danger {
+    background-color: $danger-bg;
+    border-color: $danger-border;
+  }
+}
+
+.save-wrapper {
+  font-size: 20;
+  margin: 4;
+  padding: 10;
+  color: white;
+  border-width: 2;
+  border-color: $standard-border;
+  vertical-align: top;
+  font-family: $font-ganon;
+  background-color: $standard-bg;
+  &.danger {
+    background-color: $danger-bg;
+    border-color: $danger-border;
+  }
+  &.empty {
+    background-color: $empty-bg;
+    border-color: $empty-border;
+  }
+  &.highlight {
+    background-color: $highlight-bg;
+    border-color: $highlight-border;
+  }
+}
+// Map
+.locale-green {
+  border-width: 3;
+  border-color: black;
+  background-color: aqua;
+}
+.locale-gray {
+  border-width: 3;
+  border-color: black;
+  background-color: gray;
+}
+.locale-red {
+  border-width: 3;
+  border-color: black;
+  background-color: red;
+}
+.center-key {
+  border-width: 3;
+  border-color: black;
+  background-color: yellow;
+}
+// Map Lists
+.list-top-header {
+  background-color: black;
+  font-family: $font-ganon;
+  font-size: 18;
+  color: $standard-font-color;
+  padding-top: 6;
+}
+
+.list-title {
+  font-family: $font-ganon;
+  font-size: 20;
+  padding:5;
+}
+
+.locale-wrapper {
+  background-color: $standard-bg;
+  margin:4;
+  border-width: 2;
+  border-color: $standard-border;
+  color: white;
+  padding: 4;
+  font-family: $font-ganon;
+  font-size: 20;
+  &.darkred {
+    background-color:$danger-bg;
+    border-color: $danger-border;
+  }
+  &.darkgreen {
+    background-color: $standard-bg;
+    border-color: $standard-border;
+  }
+  &.gray {
+    background-color: $empty-bg;
+    border-color: $empty-border;
+  }
+}
+
 // Font icon class
 .fab {
     font-family: "Font Awesome 5 Brands", "fa-brands-400";
diff --git a/app/components/DarkList.vue b/app/components/DarkList.vue
index 153ed09..7f6d096 100644
--- a/app/components/DarkList.vue
+++ b/app/components/DarkList.vue
@@ -2,7 +2,7 @@
   <Page>
     <Navbar></Navbar>
     <StackLayout orientation="vertical">
-      <GridLayout columns="28,*,*" rows="20" class="top-header">
+      <GridLayout columns="28,*,*" rows="20" class="list-top-header">
         <Image col="0" row="0" height="16" width="16" src="~/img/map_btn.png" style="padding-left:10" @tap="toggleMode" verticalAlignment="top"/>
         <Label col="1" row="0" style="padding:0 8 0 0" text="Return to Map" @tap="toggleMode"/>
         <Label col="2" row="0" style="padding:0 8" horizontalAlignment="right" @tap="setFilterList"
@@ -24,7 +24,7 @@
                 <Image
                     :src="mapHandler.locations[key].checked ? '~/img/checked.png' : '~/img/unchecked.png'"
                     width="32" height="32" @tap="clickCheck(key)"/>
-                <Label class="title" :text="mapHandler.staticLocations[key].title"/>
+                <Label class="list-title" :text="mapHandler.staticLocations[key].title"/>
               </StackLayout>
               <StackLayout orientation="horizontal" style="padding-right:4;padding-top:6;">
                 <Image v-for="img in mapHandler.staticLocations[key].req" v-bind:key="img"
@@ -36,7 +36,7 @@
                      @tap="clickCompass(key)" horizontalAlignment="center"/>
               <StackLayout orientation="horizontal" style="margin-top:4;" horizontalAlignment="right">
                 <Image src="~/img/chest.png" height="16" width="16"/>
-                <Label class="title" fontSize="16"
+                <Label class="list-title" fontSize="16"
                        :text="'x'+mapHandler.staticLocations[key].itemCount"/>
               </StackLayout>
 
diff --git a/app/components/DarkMap.vue b/app/components/DarkMap.vue
index 9cf053a..8702cbc 100644
--- a/app/components/DarkMap.vue
+++ b/app/components/DarkMap.vue
@@ -424,33 +424,4 @@
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
 
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-  .location-label {
-    font-family: "Return of Ganon";
-    font-size: 16;
-    color: #fff;
-  }
-  .locale-green {
-    border-width: 3;
-    border-color: black;
-    background-color: aqua;
-  }
-  .locale-gray {
-    border-width: 3;
-    border-color: black;
-    background-color: gray;
-  }
-  .locale-red {
-    border-width: 3;
-    border-color: black;
-    background-color: red;
-  }
-  .center-key{
-    border-width: 3;
-    border-color: black;
-    background-color: yellow;
-  }
 </style>
diff --git a/app/components/Debugger.vue b/app/components/Debugger.vue
index fc97de7..49eeba7 100644
--- a/app/components/Debugger.vue
+++ b/app/components/Debugger.vue
@@ -89,25 +89,6 @@
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
 
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-  .welcome {
-    color:white;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    padding: 10;
-  }
-  .btn {
-    font-size: 20;
-    background-color: darkgreen;
-    padding: 10;
-    color: white;
-    horizontal-align: center;
-    vertical-align: center;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    width: 90%
-  }
   .textfield {
     color: black;
     background-color: #aaa;
diff --git a/app/components/Dungeons.vue b/app/components/Dungeons.vue
index a86392b..8636b04 100644
--- a/app/components/Dungeons.vue
+++ b/app/components/Dungeons.vue
@@ -86,9 +86,6 @@
   @import '~@nativescript/theme/scss/variables/forest';
 
   // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
 
   .dungeon-stack {
   }
diff --git a/app/components/GameEditEmpty.vue b/app/components/GameEditEmpty.vue
index b76590a..923b164 100644
--- a/app/components/GameEditEmpty.vue
+++ b/app/components/GameEditEmpty.vue
@@ -143,35 +143,4 @@
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
 
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-  .lbl {
-    font-size: 20;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    color: white;
-  }
-  .btn {
-    font-size: 20;
-    padding: 10;
-    margin: -3;
-    color: white;
-    horizontal-align: center;
-    vertical-align: center;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    width: 100%;
-    background-color: #616161;
-  }
-  .save-wrapper {
-    font-size: 20;
-    margin: 4;
-    padding: 10;
-    color: white;
-    border-width: 2;
-    border-color: #003400;
-    vertical-align: top;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    background-color: gray;
-  }
 </style>
diff --git a/app/components/GameEditInvalid.vue b/app/components/GameEditInvalid.vue
index 3ac8a31..14630d1 100644
--- a/app/components/GameEditInvalid.vue
+++ b/app/components/GameEditInvalid.vue
@@ -2,12 +2,12 @@
   <Page backgroundColor="black">
     <Navbar></Navbar>
     <ScrollView>
-      <StackLayout orientation="vertical" class="save-wrapper invalid">
+      <StackLayout orientation="vertical" class="save-wrapper danger">
         <Label :text="game.name" fontSize="24" />
         <Label :text="'Game Mode: '+game.gameMode"/>
         <Label :text="'Item Shuffle: '+itemShuffleOptions[game.itemShuffle].label"/>
         <Label :text="'Goal: '+goalOptions[game.goal].label"/>
-        <Button class="btn invalid" @tap="deleteGame">Delete</Button>
+        <Button class="btn danger padded" @tap="deleteGame">Delete</Button>
         <Label textWrap="true" fontSize="16" textAlignment="center"
                text="NOTE: This game is based on an old version. You must delete this game."/>
         <Label :visibility="!allowDelete && game.timestamp ? 'visible': 'collapsed'" textWrap="true" fontSize="16" textAlignment="center"
@@ -41,35 +41,4 @@
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
 
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-  .lbl {
-    font-size: 20;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    color: white;
-  }
-  .btn {
-    font-size: 20;
-    padding: 10;
-    margin: -3;
-    color: white;
-    horizontal-align: center;
-    vertical-align: center;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    width: 100%;
-    background-color: #6a0000;
-  }
-  .save-wrapper {
-    font-size: 20;
-    margin: 4;
-    padding: 10;
-    color: white;
-    border-width: 2;
-    border-color: #003400;
-    vertical-align: top;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    background-color: darkred;
-  }
 </style>
diff --git a/app/components/GameEditLoaded.vue b/app/components/GameEditLoaded.vue
index 20f32db..8f091eb 100644
--- a/app/components/GameEditLoaded.vue
+++ b/app/components/GameEditLoaded.vue
@@ -2,16 +2,16 @@
   <Page backgroundColor="black">
     <Navbar></Navbar>
     <ScrollView>
-      <StackLayout orientation="vertical" class="save-wrapper">
+      <StackLayout orientation="vertical" class="save-wrapper highlight">
         <Label :text="game.name +': Active Game'" fontSize="24" />
         <Label :text="'Game Mode: '+game.gameMode"/>
         <Label :text="'Item Shuffle: '+itemShuffleOptions[game.itemShuffle].label"/>
         <Label :text="'Goal: '+goalOptions[game.goal].label"/>
         <Label height="15"/>
-        <Button class="btn" @tap="openModal('resetItems')">Reset Items</Button>
-        <Button class="btn" @tap="openModal('resetDungeons')">Reset Dungeons</Button>
-        <Button class="btn" @tap="openModal('resetMap')">Reset Map</Button>
-        <Button class="btn" @tap="cancel">Back</Button>
+        <Button class="btn highlight padded" @tap="openModal('resetItems')">Reset Items</Button>
+        <Button class="btn highlight padded" @tap="openModal('resetDungeons')">Reset Dungeons</Button>
+        <Button class="btn highlight padded" @tap="openModal('resetMap')">Reset Map</Button>
+        <Button class="btn highlight padded" @tap="cancel">Back</Button>
         <Label height="15"/>
         <Label textWrap="true" fontSize="16" textAlignment="center"
                text="NOTE: You cannot delete the active game. Load another game before deleting this one."/>
@@ -45,35 +45,4 @@
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
 
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-  .lbl {
-    font-size: 20;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    color: white;
-  }
-  .btn {
-    font-size: 20;
-    padding: 10;
-    margin: -3;
-    color: white;
-    horizontal-align: center;
-    vertical-align: center;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    width: 100%;
-    background-color: #005500;
-  }
-  .save-wrapper {
-    font-size: 20;
-    margin: 4;
-    padding: 10;
-    color: white;
-    border-width: 2;
-    border-color: #003400;
-    vertical-align: top;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    background-color: darkgreen;
-  }
 </style>
diff --git a/app/components/GameEditModal.vue b/app/components/GameEditModal.vue
index f985b43..1a26c32 100644
--- a/app/components/GameEditModal.vue
+++ b/app/components/GameEditModal.vue
@@ -1,6 +1,6 @@
 <template>
     <ScrollView>
-      <StackLayout orientation="vertical" class="modal-dialog">
+      <StackLayout orientation="vertical" class="modal-dialog danger">
         <Label :visibility="modalAction === 'deleteGame' ? 'visible':'collapsed'" textWrap="true"
                textAlignment="center" style="padding-bottom: 10"
                text="Are you sure you want to delete this game?"/>
@@ -90,13 +90,4 @@
     background-color: #6a0000;
     width: 100%;
   }
-  .modal-dialog {
-    background-color: darkred;
-    border-width: 2px;
-    border-color: #004c00;
-    padding: 10;
-    color: white;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    font-size: 20;
-  }
 </style>
diff --git a/app/components/GameEditValid.vue b/app/components/GameEditValid.vue
index 19248eb..f061c32 100644
--- a/app/components/GameEditValid.vue
+++ b/app/components/GameEditValid.vue
@@ -8,9 +8,9 @@
         <Label :text="'Item Shuffle: '+itemShuffleOptions[game.itemShuffle].label"/>
         <Label :text="'Goal: '+goalOptions[game.goal].label"/>
         <Label height="15"/>
-        <Button class="btn" @tap="loadGame">Load Game</Button>
-        <Button class="btn" @tap="openModal">Delete</Button>
-        <Button class="btn" @tap="cancel">Back</Button>
+        <Button class="btn padded" @tap="loadGame">Load Game</Button>
+        <Button class="btn padded" @tap="openModal">Delete</Button>
+        <Button class="btn padded" @tap="cancel">Back</Button>
         <Label height="15"/>
         <Label :visibility="!allowDelete && game.timestamp ? 'visible': 'collapsed'" textWrap="true" fontSize="16" textAlignment="center"
                text="NOTE: At least one game must be active. Create another game using an empty game slot before deleting this game."/>
@@ -55,35 +55,4 @@
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
 
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-  .lbl {
-    font-size: 20;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    color: white;
-  }
-  .btn {
-    font-size: 20;
-    padding: 10;
-    margin: -3;
-    color: white;
-    horizontal-align: center;
-    vertical-align: center;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    width: 100%;
-    background-color: #005500;
-  }
-  .save-wrapper {
-    font-size: 20;
-    margin: 4;
-    padding: 10;
-    color: white;
-    border-width: 2;
-    border-color: #003400;
-    vertical-align: top;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    background-color: darkgreen;
-  }
 </style>
diff --git a/app/components/GoalEditModal.vue b/app/components/GoalEditModal.vue
new file mode 100644
index 0000000..a02a4aa
--- /dev/null
+++ b/app/components/GoalEditModal.vue
@@ -0,0 +1,85 @@
+<template>
+  <ScrollView>
+    <StackLayout orientation="vertical" class="modal-dialog">
+      <StackLayout :visibility="game.goal === goalOptions.triforce.id ? 'visible':'collapsed'" orientation="vertical">
+        <Label :text="'Triforce Pieces Goal: '+game.triforceGoal" />
+        <GridLayout row="20" columns="20,*,20" style="margin:0;padding:0">
+          <Label col="0" text="1" fontSize="16" verticalAlignment="center" textAlignment="right"/>
+          <Slider col="1" :value="game.triforceGoal" @valueChange="sliderChangeTriforce"
+                  style="margin:5 0"
+                  minValue="1" maxValue="30" backgroundColor="white" color="white" verticalAlignment="center" />
+          <Label col="2" text="30" fontSize="16" verticalAlignment="center"/>
+        </GridLayout>
+      </StackLayout>
+      <StackLayout orientation="vertical">
+        <Label :text="'Crystals to Open Tower: '+game.openGT" />
+        <GridLayout row="20" columns="20,*,20" style="margin:0;padding:0">
+          <Label col="0" text="0" fontSize="16" verticalAlignment="center" textAlignment="right"/>
+          <Slider col="1" :value="game.openGT" @valueChange="sliderChangeGT"
+                  style="margin:5 0"
+                  minValue="0" maxValue="7" backgroundColor="white" color="white" verticalAlignment="center" />
+          <Label col="2" text="7" fontSize="16" verticalAlignment="center"/>
+        </GridLayout>
+      </StackLayout>
+      <StackLayout orientation="vertical">
+        <Label :text="'Crystals to Access Ganon: '+game.openGanon" />
+        <GridLayout row="20" columns="20,*,20" style="margin:0;padding:0">
+          <Label col="0" text="0" fontSize="16" verticalAlignment="center" textAlignment="right"/>
+          <Slider col="1" :value="game.openGanon" @valueChange="sliderChangeGanon"
+                  style="margin:5 0"
+                  minValue="0" maxValue="7" backgroundColor="white" color="white" verticalAlignment="center" />
+          <Label col="2" text="7" fontSize="16" verticalAlignment="center"/>
+        </GridLayout>
+      </StackLayout>
+      <Button class="btn" @tap="updateGoals">OK</Button>
+      <Button class="btn" @tap="closeModal">Back</Button>
+    </StackLayout>
+  </ScrollView>
+</template>
+
+<script type="ts">
+  import {Component, Vue} from 'vue-property-decorator';
+  import {GameSaveHelper} from '@/utils/GameSaveHelper';
+
+  @Component
+  export default class GoalEditModal extends Vue {
+    game = this.$modelManager.settings.getCopy();
+    goalOptions = GameSaveHelper.goalOptions;
+
+    sliderChangeTriforce(val){
+      this.game.triforceGoal = val.value;
+    }
+    sliderChangeGT(val){
+      this.game.openGT = val.value;
+    }
+    sliderChangeGanon(val) {
+      this.game.openGanon = val.value;
+    }
+    updateGoals() {
+      if(this.game.goal === this.goalOptions.triforce.id) {
+        this.$modelManager.settings.triforceGoal = this.game.triforceGoal;
+      }
+      this.$modelManager.settings.openGT = this.game.openGT;
+      this.$modelManager.settings.openGanon = this.game.openGanon;
+      this.$modelManager.saveSettings();
+      this.closeModal();
+    }
+    closeModal() {
+      this['$modal'].close('cancel');
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .btn {
+    font-size: 20;
+    padding: 10;
+    margin: -3;
+    color: white;
+    horizontal-align: center;
+    vertical-align: center;
+    font-family: "Return of Ganon", "ReturnofGanon";
+    width: 100%;
+    background-color: #005500;
+  }
+</style>
diff --git a/app/components/Home.vue b/app/components/Home.vue
index aa89e3a..cc573bd 100644
--- a/app/components/Home.vue
+++ b/app/components/Home.vue
@@ -5,12 +5,12 @@
       <StackLayout orientation="vertical" horizontalAlignment="center" verticalAlignment="top">
         <Label text="Welcome to the ALLTP Tracker!" class="welcome" fontSize="24" textAlignment="center"/>
         <Label text="Track item collection and dungeon progress as well as find locations using the maps." class="welcome" textWrap="true" fontSize="20"  textAlignment="center"/>
-        <Button :visibility="this.showUpgradeBtn?'collapsed':'visible'" class="btn" @tap="showWhatsNew">What's New</Button>
-        <Button :visibility="this.showUpgradeBtn?'visible':'collapsed'" class="btn" @tap="clickUpgrade" backgroundColor="#8b0000">New Version! {{this.upgradeVersion}}</Button>
+        <Button :visibility="this.showUpgradeBtn?'collapsed':'visible'" class="btn highlight padded" @tap="showWhatsNew">What's New</Button>
+        <Button :visibility="this.showUpgradeBtn?'visible':'collapsed'" class="btn danger padded" @tap="clickUpgrade">New Version! {{this.upgradeVersion}}</Button>
         <Label text="Special thanks to the randomizer community. Visit them!" class="welcome" textWrap="true" fontSize="20"  textAlignment="center"/>
-        <Button class="btn" @tap="clickRandomizer">ALTTP Randomizer</Button>
-        <Button class="btn" @tap="clickReddit">ALTTPR on Reddit</Button>
-        <Button class="btn" @tap="clickDiscord">ALTTPR Discord</Button>
+        <Button class="btn highlight padded" @tap="clickRandomizer">ALTTP Randomizer</Button>
+        <Button class="btn highlight padded" @tap="clickReddit">ALTTPR on Reddit</Button>
+        <Button class="btn highlight padded" @tap="clickDiscord">ALTTPR Discord</Button>
       </StackLayout>
     </ScrollView>
   </Page>
@@ -69,22 +69,9 @@
   @import '~@nativescript/theme/scss/variables/forest';
 
   // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
   .welcome {
     color:white;
     font-family: "Return of Ganon", "ReturnofGanon";
     padding: 10;
   }
-  .btn {
-    font-size: 20;
-    background-color: darkgreen;
-    padding: 10;
-    color: white;
-    horizontal-align: center;
-    vertical-align: center;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    width: 90%
-  }
 </style>
diff --git a/app/components/Items.vue b/app/components/Items.vue
index 764f729..95aa68f 100644
--- a/app/components/Items.vue
+++ b/app/components/Items.vue
@@ -36,12 +36,14 @@
               <Label :text="'('+itemCount+'/'+itemMax+')'" verticalAlignment="center" style="padding-left:5"/>
             </StackLayout>
           </StackLayout>
-          <Image class="item" row="0" col="3" height="32" width="32" verticalAlignment="top"
-                 :src="goal === 'triforce' ? '~/img/items/triforce.png' : goal === 'pedestal'
+          <GridLayout columns="*,*,*" rows="100" row="0" col="3" colSpan="3" @tap="editGoal">
+            <Image class="item" row="0" col="0" height="32" width="32" verticalAlignment="top"
+                   :src="goal === 'triforce' ? '~/img/items/triforce.png' : goal === 'pedestal'
                  ? '~/img/items/pedestal.png' : goal === 'fastGanon' ? '~/img/items/fast-ganon.png'
                  : goal === 'allDungeons' ? '~/img/items/all-dungeons.png' : '~/img/items/ganon.png'" />
-          <Image class="item" row="0" col="4" :src="'~/img/items/req-crystals'+openGT+'.png'" height="32" width="32" verticalAlignment="top"/>
-          <Image class="item" row="0" col="5" :src="'~/img/items/req-ganon'+openGanon+'.png'" height="32" width="32" verticalAlignment="top"/>
+            <Image class="item" row="0" col="1" :src="'~/img/items/req-crystals'+openGT+'.png'" height="32" width="32" verticalAlignment="top"/>
+            <Image class="item" row="0" col="2" :src="'~/img/items/req-ganon'+openGanon+'.png'" height="32" width="32" verticalAlignment="top"/>
+          </GridLayout>
         </GridLayout>
       </StackLayout>
     </ScrollView>
@@ -51,6 +53,8 @@
 <script type="ts">
 
   import {Component, Vue} from 'vue-property-decorator';
+  import GameEditModal from '@/components/GameEditModal.vue';
+  import GoalEditModal from '@/components/GoalEditModal.vue';
 
   @Component
   export default class Items extends Vue {
@@ -147,6 +151,12 @@
       }
       return retval;
     }
+    async editGoal() {
+      await this.$showModal(GoalEditModal);
+      this.openGT = this.$modelManager.settings.openGT;
+      this.openGanon = this.$modelManager.settings.openGanon;
+      this.triforceGoal = this.$modelManager.settings.triforceGoal;
+    }
   }
 </script>
 
diff --git a/app/components/LightList.vue b/app/components/LightList.vue
index df1f338..8dfaf19 100644
--- a/app/components/LightList.vue
+++ b/app/components/LightList.vue
@@ -2,7 +2,7 @@
   <Page>
     <Navbar></Navbar>
     <StackLayout orientation="vertical">
-      <GridLayout columns="28,*,*" rows="20" class="top-header">
+      <GridLayout columns="28,*,*" rows="20" class="list-top-header">
         <Image col="0" row="0" height="16" width="16" src="~/img/map_btn.png" style="padding-left:10" @tap="toggleMode" verticalAlignment="top"/>
         <Label col="1" row="0" style="padding:0 8 0 0" text="Return to Map" @tap="toggleMode"/>
         <Label col="2" row="0" style="padding:0 8" horizontalAlignment="right" @tap="setFilterList"
@@ -24,7 +24,7 @@
                 <Image
                     :src="mapHandler.locations[key].checked ? '~/img/checked.png' : '~/img/unchecked.png'"
                     width="32" height="32" @tap="clickCheck(key)"/>
-                <Label class="title" :text="mapHandler.staticLocations[key].title"/>
+                <Label class="list-title" :text="mapHandler.staticLocations[key].title"/>
               </StackLayout>
               <StackLayout orientation="horizontal" style="padding-right:4;padding-top:6;">
                 <Image v-for="img in mapHandler.staticLocations[key].req" v-bind:key="img"
@@ -36,7 +36,7 @@
                      @tap="clickCompass(key)" horizontalAlignment="center"/>
               <StackLayout orientation="horizontal" style="margin-top:4;" horizontalAlignment="right">
                 <Image src="~/img/chest.png" height="16" width="16" />
-                <Label class="title" fontSize="16"
+                <Label class="list-title" fontSize="16"
                        :text="'x'+mapHandler.staticLocations[key].itemCount"/>
               </StackLayout>
 
@@ -187,37 +187,4 @@
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
 
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-  .rog {
-    @include colorize($color: accent);
-  }
-  .top-header {
-    background-color: black;
-    font-family: "Return of Ganon", "ReturnofGanon",serif;
-    font-size: 18;
-    color: white;
-    padding-top: 6;
-  }
-  .locale-wrapper {
-    background-color: darkgreen;
-    margin:4;
-    border-width: 2;
-    border-color: #003400;
-    color: white;
-    padding: 4;
-    font-family: "Return of Ganon", "ReturnofGanon",serif;
-    font-size: 20;
-    &.darkred {background-color:darkred;}
-    &.darkgreen {background-color: darkgreen;}
-    &.gray {background-color: gray;}
-
-  }
-  .title {
-    font-family: "Return of Ganon", "ReturnofGanon",serif;
-    font-size: 20;
-    padding:5;
-  }
 </style>
diff --git a/app/components/LightMap.vue b/app/components/LightMap.vue
index 66b12a0..15d5dea 100644
--- a/app/components/LightMap.vue
+++ b/app/components/LightMap.vue
@@ -424,33 +424,4 @@
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
 
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-  .location-label {
-    font-family: "Return of Ganon";
-    font-size: 16;
-    color: #fff;
-  }
-  .locale-green {
-    border-width: 3;
-    border-color: black;
-    background-color: aqua;
-  }
-  .locale-gray {
-    border-width: 3;
-    border-color: black;
-    background-color: gray;
-  }
-  .locale-red {
-    border-width: 3;
-    border-color: black;
-    background-color: red;
-  }
-  .center-key{
-    border-width: 3;
-    border-color: black;
-    background-color: yellow;
-  }
 </style>
diff --git a/app/components/Navbar.vue b/app/components/Navbar.vue
index e2d01ae..011e80f 100644
--- a/app/components/Navbar.vue
+++ b/app/components/Navbar.vue
@@ -75,11 +75,6 @@
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
 
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-
   .action-bar {
     margin-left: -12;
     margin-top:0;
diff --git a/app/components/SaveList.vue b/app/components/SaveList.vue
index e611e8c..1ef13e0 100644
--- a/app/components/SaveList.vue
+++ b/app/components/SaveList.vue
@@ -3,7 +3,7 @@
     <Navbar></Navbar>
     <ScrollView orientation="vertical">
       <StackLayout orientation="vertical">
-        <GridLayout columns="52,*" rows="*" orientation="horizontal" class="save-wrapper" v-for="game in gameSaves"
+        <GridLayout columns="52,*" rows="*" orientation="horizontal" class="save-list-wrapper" v-for="game in gameSaves"
                     v-bind:key="game.id"
                     :class="game.loaded ? 'loaded' : !game.timestamp ? 'empty' : game.valid ? 'valid': 'invalid'"
                     @tap="navToEdit(game)">
@@ -62,42 +62,37 @@
 
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
+  @import "../global_vars";
 
   // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-
-  .lbl {
-    font-size: 20;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    color: white;
-  }
 
-  .save-wrapper {
+  .save-list-wrapper {
     font-size: 20;
     margin: 4;
     padding: 4;
-    color: white;
+    color: $standard-font-color;
     border-width: 2;
-    border-color: #003400;
     vertical-align: top;
-    font-family: "Return of Ganon", "ReturnofGanon";
+    font-family: $font-ganon;
 
     &.loaded {
-      background-color: forestgreen;
+      background-color: $highlight-bg;
+      border-color: $highlight-border;
     }
 
     &.empty {
-      background-color: gray;
+      background-color: $empty-bg;
+      border-color: $empty-border;
     }
 
     &.valid {
-      background-color: darkgreen;
+      background-color: $standard-bg;
+      border-color: $standard-border;
     }
 
     &.invalid {
-      background-color: darkred;
+      background-color: $danger-bg;
+      border-color: $danger-border;
     }
   }
 </style>
diff --git a/app/components/Settings.vue b/app/components/Settings.vue
index 7b1d69d..442e7d2 100644
--- a/app/components/Settings.vue
+++ b/app/components/Settings.vue
@@ -1,14 +1,14 @@
 <template>
   <Page backgroundColor="black">
     <Navbar></Navbar>
-    <GridLayout columns="*" , rows="50,50,50,50,50,50" style="margin-top:10">
-      <Button row="0" col="0" class="btn" @tap="navSaveList">Saved Games</Button>
+    <GridLayout columns="*" , rows="60,60,60,60,60,60" style="margin-top:10">
+      <Button row="0" col="0" class="btn highlight padded" @tap="navSaveList">Saved Games</Button>
       <Label row="2" col="0" class="lbl" horizontalAlignment="center" verticalAlignment="center"
              :text="'Version: '+appVersion"/>
-      <Button row="3" col="0" class="btn" @tap="navFAQ">FAQ Page</Button>
-      <Button row="4" col="0" class="btn" @tap="mailme">Email Me!</Button>
+      <Button row="3" col="0" class="btn highlight padded" @tap="navFAQ">FAQ Page</Button>
+      <Button row="4" col="0" class="btn highlight padded" @tap="mailme">Email Me!</Button>
       <!--
-      <Button row="5" col="0" class="btn" @tap="navDebugger">Debugger</Button>
+      <Button row="5" col="0" class="btn danger padded" @tap="navDebugger">Debugger</Button>
       -->
     </GridLayout>
   </Page>
@@ -42,25 +42,4 @@
 <style scoped lang="scss">
   @import '~@nativescript/theme/scss/variables/forest';
 
-  // Custom styles
-  .fas {
-    @include colorize($color: accent);
-  }
-
-  .lbl {
-    font-size: 20;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    color: white;
-  }
-
-  .btn {
-    font-size: 20;
-    background-color: darkgreen;
-    padding: 10;
-    color: white;
-    horizontal-align: center;
-    vertical-align: center;
-    font-family: "Return of Ganon", "ReturnofGanon";
-    width: 90%
-  }
 </style>
diff --git a/app/utils/ModelManager.ts b/app/utils/ModelManager.ts
index 5b630ed..5618dda 100644
--- a/app/utils/ModelManager.ts
+++ b/app/utils/ModelManager.ts
@@ -333,7 +333,7 @@ export class ModelManager {
   saveSettings(skipGameSave?:boolean) {
     const d = new DefaultSettings();
     d.data = this.settings;
-    console.log('saving game');
+    //console.log('saving game', d.toJSONString());
     setString('settings', d.toJSONString());
     if(!skipGameSave) {
       this.saveCurrentGame();
diff --git a/tsconfig.json b/tsconfig.json
index 48486bb..8eb1c44 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
     "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "outDir": "./app/dist",
     "lib": [
       "dom", "es2015"
     ],                             /* Specify library files to be included in the compilation. */