diff --git a/src/App.vue b/src/App.vue
index f748df2..d4b73d6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -87,14 +87,16 @@ body {
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
-   overflow: hidden;
+   overflow-y: auto; /* Scroll tall modals instead of cutting them off */
    background-color: rgb(0, 0, 0); /* Fallback color */
-   background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
+   background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
 }
 .modalContainer {
-   background-color: #eeeeee;
+   background-color: #333;
+   color: white;
    margin: 10% auto; /* 15% from the top and centered */
-   border: 1px solid #888;
+   border: 1px solid #ff9c00;
+   border-radius: 10px;
    width: 50%; /* Could be more or less, depending on screen size */
 }
 .modalWrapper {
@@ -114,16 +116,29 @@ body {
    top: 8px;
    cursor: pointer;
    opacity: 70%;
+   font-size: 2rem;
+   line-height: 1;
+   color: #ff9c00;
+}
+/* The close icon is a black svg, recolor it to the app's orange */
+img.closeModalImg {
+   filter: invert(66%) sepia(96%) saturate(2783%) hue-rotate(1deg) brightness(105%) contrast(103%);
+}
+.closeModalImg:hover {
+   opacity: 100%;
 }
 .modal h1 {
-   color: black;
+   color: white;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    font-size: 1.9rem;
 }
 .modal p {
-   color: black;
+   color: white;
+}
+.modal a {
+   color: #ff9c00;
 }
 
 @media only screen and (max-width: 1000px) {
diff --git a/src/components/items/SearchModal.vue b/src/components/items/SearchModal.vue
index 468f4df..17e5521 100644
--- a/src/components/items/SearchModal.vue
+++ b/src/components/items/SearchModal.vue
@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <span class="closeModalImg" @click="closeModal">&times;</span>
@@ -68,11 +68,6 @@ export default {
             this.searchTimeout = null;
          }
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
       debouncedSearch() {
          // Clear existing timeout
          if (this.searchTimeout) {
@@ -160,7 +155,9 @@ export default {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
-   border: 1px solid #ccc;
+   border: 1px solid #777;
+   background-color: rgb(66, 66, 66);
+   color: white;
    border-radius: 5px;
    box-sizing: border-box;
 }
@@ -178,7 +175,7 @@ export default {
 }
 
 .loading {
-   color: #666;
+   color: #bbb;
    font-style: italic;
    text-align: center;
    padding: 20px;
@@ -191,19 +188,19 @@ export default {
 .resultItem {
    padding: 12px;
    margin-bottom: 8px;
-   background-color: #f8f8f8;
-   border: 1px solid #ddd;
+   background-color: rgb(66, 66, 66);
+   border: 1px solid #555;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
 }
 
 .resultItem:hover {
-   background-color: #e8e8e8;
+   background-color: #555;
 }
 
 .noResults {
-   color: #666;
+   color: #bbb;
    text-align: center;
    padding: 20px;
    font-style: italic;
diff --git a/src/components/items/SyncProgressModal.vue b/src/components/items/SyncProgressModal.vue
index 5f1bcd0..652ee8c 100644
--- a/src/components/items/SyncProgressModal.vue
+++ b/src/components/items/SyncProgressModal.vue
@@ -1,67 +1,69 @@
 <template>
-    <div class="modal" v-if="isOpen">
-        <div class="modalContainer syncProgressContainer">
-            <span class="closeModalImg" @click="closeModal">&times;</span>
-            <h1>Sync in Progress</h1>
+    <transition name="modalAni">
+        <div class="modal" v-if="isOpen" @click.self="closeModal">
+            <div class="modalContainer syncProgressContainer">
+                <span class="closeModalImg" @click="closeModal">&times;</span>
+                <h1>Sync in Progress</h1>
             
-            <div v-if="!syncComplete" class="progressSection">
-                <div class="progressBarContainer">
-                    <div class="progressBar" :style="{ width: progress + '%' }"></div>
+                <div v-if="!syncComplete" class="progressSection">
+                    <div class="progressBarContainer">
+                        <div class="progressBar" :style="{ width: progress + '%' }"></div>
+                    </div>
+                    <p class="progressText">{{ progress }}% complete</p>
+                    <p class="timeText">Time spent: {{ timeSpent }}</p>
                 </div>
-                <p class="progressText">{{ progress }}% complete</p>
-                <p class="timeText">Time spent: {{ timeSpent }}</p>
-            </div>
             
-            <div v-else class="resultsSection">
-                <h2>Sync Complete!</h2>
-                <p>Total time: {{ syncData.total_time }}</p>
+                <div v-else class="resultsSection">
+                    <h2>Sync Complete!</h2>
+                    <p>Total time: {{ syncData.total_time }}</p>
                 
-                <div v-if="syncData.soundtracks_added && syncData.soundtracks_added.length > 0" class="resultItem">
-                    <h3>Soundtracks Added: {{ syncData.soundtracks_added.length }}</h3>
-                    <ul class="soundtrackList">
-                        <li v-for="soundtrack in syncData.soundtracks_added" :key="soundtrack">{{ soundtrack }}</li>
-                    </ul>
+                    <div v-if="syncData.soundtracks_added && syncData.soundtracks_added.length > 0" class="resultItem">
+                        <h3>Soundtracks Added: {{ syncData.soundtracks_added.length }}</h3>
+                        <ul class="soundtrackList">
+                            <li v-for="soundtrack in syncData.soundtracks_added" :key="soundtrack">{{ soundtrack }}</li>
+                        </ul>
+                    </div>
+                
+                    <div v-if="syncData.soundtracks_re_added && syncData.soundtracks_re_added.length > 0" class="resultItem">
+                        <h3>Soundtracks Re-added: {{ syncData.soundtracks_re_added.length }}</h3>
+                        <ul class="soundtrackList">
+                            <li v-for="soundtrack in syncData.soundtracks_re_added" :key="soundtrack">{{ soundtrack }}</li>
+                        </ul>
+                    </div>
+                
+                    <div v-if="syncData.soundtracks_removed && syncData.soundtracks_removed.length > 0" class="resultItem">
+                        <h3>Soundtracks Removed: {{ syncData.soundtracks_removed.length }}</h3>
+                        <ul class="soundtrackList">
+                            <li v-for="soundtrack in syncData.soundtracks_removed" :key="soundtrack">{{ soundtrack }}</li>
+                        </ul>
+                    </div>
+                
+                    <div v-if="Object.keys(syncData.soundtracks_changed_title || {}).length > 0" class="resultItem">
+                        <h3>Soundtracks with Changed Title: {{ Object.keys(syncData.soundtracks_changed_title || {}).length }}</h3>
+                        <ul class="soundtrackList">
+                            <li v-for="(newTitle, oldTitle) in syncData.soundtracks_changed_title" :key="oldTitle">{{ oldTitle }} → {{ newTitle }}</li>
+                        </ul>
+                    </div>
+                
+                    <div v-if="syncData.soundtracks_changed_content && syncData.soundtracks_changed_content.length > 0" class="resultItem">
+                        <h3>Soundtracks with Changed Content: {{ syncData.soundtracks_changed_content.length }}</h3>
+                        <ul class="soundtrackList">
+                            <li v-for="soundtrack in syncData.soundtracks_changed_content" :key="soundtrack">{{ soundtrack }}</li>
+                        </ul>
+                    </div>
+                
+                    <div v-if="syncData.catched_errors && syncData.catched_errors.length > 0" class="resultItem errors">
+                        <h3>Errors: {{ syncData.catched_errors.length }}</h3>
+                        <ul class="soundtrackList">
+                            <li v-for="error in syncData.catched_errors" :key="error">{{ error }}</li>
+                        </ul>
+                    </div>
+                
+                    <p v-if="noChanges" class="noChanges">No changes detected.</p>
                 </div>
-                
-                <div v-if="syncData.soundtracks_re_added && syncData.soundtracks_re_added.length > 0" class="resultItem">
-                    <h3>Soundtracks Re-added: {{ syncData.soundtracks_re_added.length }}</h3>
-                    <ul class="soundtrackList">
-                        <li v-for="soundtrack in syncData.soundtracks_re_added" :key="soundtrack">{{ soundtrack }}</li>
-                    </ul>
-                </div>
-                
-                <div v-if="syncData.soundtracks_removed && syncData.soundtracks_removed.length > 0" class="resultItem">
-                    <h3>Soundtracks Removed: {{ syncData.soundtracks_removed.length }}</h3>
-                    <ul class="soundtrackList">
-                        <li v-for="soundtrack in syncData.soundtracks_removed" :key="soundtrack">{{ soundtrack }}</li>
-                    </ul>
-                </div>
-                
-                <div v-if="Object.keys(syncData.soundtracks_changed_title || {}).length > 0" class="resultItem">
-                    <h3>Soundtracks with Changed Title: {{ Object.keys(syncData.soundtracks_changed_title || {}).length }}</h3>
-                    <ul class="soundtrackList">
-                        <li v-for="(newTitle, oldTitle) in syncData.soundtracks_changed_title" :key="oldTitle">{{ oldTitle }} → {{ newTitle }}</li>
-                    </ul>
-                </div>
-                
-                <div v-if="syncData.soundtracks_changed_content && syncData.soundtracks_changed_content.length > 0" class="resultItem">
-                    <h3>Soundtracks with Changed Content: {{ syncData.soundtracks_changed_content.length }}</h3>
-                    <ul class="soundtrackList">
-                        <li v-for="soundtrack in syncData.soundtracks_changed_content" :key="soundtrack">{{ soundtrack }}</li>
-                    </ul>
-                </div>
-                
-                <div v-if="syncData.catched_errors && syncData.catched_errors.length > 0" class="resultItem errors">
-                    <h3>Errors: {{ syncData.catched_errors.length }}</h3>
-                    <ul class="soundtrackList">
-                        <li v-for="error in syncData.catched_errors" :key="error">{{ error }}</li>
-                    </ul>
-                </div>
-                
-                <p v-if="noChanges" class="noChanges">No changes detected.</p>
             </div>
         </div>
-    </div>
+    </transition>
 </template>
 
 <script>
@@ -211,48 +213,26 @@ export default {
 
 <style scoped>
 .syncProgressContainer {
-    background-color: #eeeeee;
-    margin: 10% auto;
-    border: 1px solid #888;
+    position: relative;
     width: 70%;
     max-width: 800px;
     padding: 20px;
-    border-radius: 10px;
-}
-
-.closeModalImg {
-    position: absolute;
-    right: 8px;
-    top: 8px;
-    cursor: pointer;
-    opacity: 70%;
-    font-size: 2rem;
-    color: #555;
-}
-
-.closeModalImg:hover {
-    opacity: 100%;
+    box-sizing: border-box;
 }
 
 .syncProgressContainer h1 {
-    color: black;
-    margin-left: auto;
-    margin-right: auto;
-    padding-top: 10px;
-    font-size: 1.9rem;
     text-align: center;
     margin-bottom: 20px;
 }
 
 .syncProgressContainer h2 {
-    color: black;
+    color: white;
     text-align: center;
     font-size: 1.5rem;
     margin-bottom: 15px;
 }
 
 .syncProgressContainer p {
-    color: black;
     text-align: center;
 }
 
@@ -266,7 +246,7 @@ export default {
 .progressBarContainer {
     width: 100%;
     height: 30px;
-    background-color: #ddd;
+    background-color: rgb(66, 66, 66);
     border-radius: 15px;
     overflow: hidden;
     margin-bottom: 10px;
@@ -290,7 +270,7 @@ export default {
 
 .timeText {
     font-size: 1rem;
-    color: #666;
+    color: #bbb;
 }
 
 .resultsSection {
@@ -301,7 +281,7 @@ export default {
 .resultItem {
     margin-bottom: 20px;
     padding: 10px;
-    background-color: #f8f8f8;
+    background-color: rgb(66, 66, 66);
     border-radius: 8px;
     border-left: 4px solid #4CAF50;
 }
@@ -311,7 +291,7 @@ export default {
 }
 
 .resultItem h3 {
-    color: #333;
+    color: white;
     font-size: 1.1rem;
     margin-bottom: 8px;
 }
@@ -324,12 +304,12 @@ export default {
 
 .soundtrackList li {
     padding: 3px 0;
-    color: #555;
+    color: #ddd;
 }
 
 .noChanges {
     text-align: center;
-    color: #666;
+    color: #bbb;
     font-style: italic;
     padding: 20px;
 }
diff --git a/src/components/items/aboutModal.vue b/src/components/items/aboutModal.vue
index 823165b..90e9d7c 100644
--- a/src/components/items/aboutModal.vue
+++ b/src/components/items/aboutModal.vue
@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <img
@@ -46,11 +46,6 @@ export default {
       openModal() {
          this.show = true;
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
    },
 };
 </script>
diff --git a/src/components/items/characterModal.vue b/src/components/items/characterModal.vue
index ada2a49..8d29fd9 100644
--- a/src/components/items/characterModal.vue
+++ b/src/components/items/characterModal.vue
@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <img
@@ -50,11 +50,6 @@ export default {
          this.show = true;
          await this.fetchCharacters();
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
       async fetchCharacters() {
          this.isLoading = true;
          try {
@@ -150,7 +145,7 @@ export default {
    text-align: center;
    padding: 40px;
    font-size: 1.2rem;
-   color: #666;
+   color: #bbb;
 }
 
 @media only screen and (max-width: 1000px) {
diff --git a/src/components/items/mobileMenu.vue b/src/components/items/mobileMenu.vue
index 8cd01c8..feb2f61 100644
--- a/src/components/items/mobileMenu.vue
+++ b/src/components/items/mobileMenu.vue
@@ -109,7 +109,8 @@ export default {
 }
 
 .mobileMenuContainer {
-   background-color: #c4c4c4;
+   background-color: #333;
+   color: white;
    width: 80vw;
    height: 100%;
    margin-left: 20%;
diff --git a/src/components/items/settingsModal.vue b/src/components/items/settingsModal.vue
index 9b6e3ff..56cf304 100644
--- a/src/components/items/settingsModal.vue
+++ b/src/components/items/settingsModal.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- Round Settings, Stop after current, Don't hide title -->
     <transition name="modalAni">
-        <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+        <div v-if="show" class="modal" @click.self="closeModal">
             <div class="modalContainer">
                 <div class="modalWrapper">
                     <img
@@ -98,11 +98,6 @@ export default {
         openModal() {
             this.show = true;
         },
-        checkIfClickShouldCloseModal(event) {
-            if (event.target.classList[0] === "modal") {
-                this.closeModal();
-            }
-        },
         updateOptionHideTitle() {
             if (this.checkboxHideTitle) {
                 this.$store.dispatch("updateHideNextTitle", true);
@@ -165,6 +160,7 @@ export default {
     margin-top: 20px;
 }
 .checkboxDiv input {
+    accent-color: #ff9c00;
     transform: scale(1.3);
 }
 .checkboxDiv label {
@@ -181,9 +177,6 @@ export default {
     display: flex;
     width: 50px;
     height: 33px;
-    background: rgb(16, 99, 194);
-    color: rgb(235, 235, 235);
-    border-color: rgb(161, 161, 161);
     justify-content: center;
     align-items: center;
     line-height: 0;
diff --git a/src/components/items/statisticsModal.vue b/src/components/items/statisticsModal.vue
index 9527e82..8c99b07 100644
--- a/src/components/items/statisticsModal.vue
+++ b/src/components/items/statisticsModal.vue
@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <img
@@ -35,11 +35,6 @@ export default {
       openModal() {
          this.show = true;
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
    },
 };
 </script>
diff --git a/src/components/items/winningModal.vue b/src/components/items/winningModal.vue
index c1d92e0..105a34e 100644
--- a/src/components/items/winningModal.vue
+++ b/src/components/items/winningModal.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="modalAni">
-        <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+        <div v-if="show" class="modal" @click.self="closeModal">
             <div class="modalContainer">
                 <div class="modalWrapper">
                     <img
@@ -38,11 +38,6 @@ export default {
             this.playerName = playerName;
             this.show = true;
         },
-        checkIfClickShouldCloseModal(event) {
-            if (event.target.classList[0] === "modal") {
-                this.closeModal();
-            }
-        },
     },
 };
 </script>