diff --git a/frontend/index.html b/frontend/index.html
index 7fa35a7fe..31636be2b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -27,7 +27,7 @@
     <style>
       html,
       body {
-        background-color: rgba(13, 17, 23) !important;
+        background-color: rgba(242, 244, 248) !important;
         overflow-y: auto;
         margin: 0 !important;
       }
@@ -42,7 +42,7 @@
         width: 100vw;
         height: 100vh;
         z-index: 1020 !important;
-        background-color: rgba(13, 17, 23) !important;
+        background-color: rgba(242, 244, 248) !important;
       }
 
       #app-loading-logo img {
@@ -50,6 +50,24 @@
         height: 30%;
         opacity: 0.1;
       }
+
+      @media (prefers-color-scheme: dark) {
+        html,
+        body {
+          background-color: rgba(13, 17, 23) !important;
+        }
+
+        #app-loading-logo {
+          background-color: rgba(13, 17, 23) !important;
+        }
+      }
+
+      @media (max-width: 960px) {
+        #app-loading-logo img {
+          width: 50%;
+          height: 50%;
+        }
+      }
     </style>
 
     <script type="module" src="/src/main.ts"></script>
diff --git a/frontend/src/components/Gallery/AppBar/common/CharIndexBar.vue b/frontend/src/components/Gallery/AppBar/common/CharIndexBar.vue
index 33ae0b4eb..deb2e110e 100644
--- a/frontend/src/components/Gallery/AppBar/common/CharIndexBar.vue
+++ b/frontend/src/components/Gallery/AppBar/common/CharIndexBar.vue
@@ -90,7 +90,7 @@ watch(
     height="100%"
     class="position-fixed bg-surface mt-4 char-index-toolbar"
     :style="{
-      'max-height': calculatedHeight,
+      height: calculatedHeight,
     }"
   >
     <v-tabs