diff --git a/src/App.vue b/src/App.vue
index 0af71ea..a221b76 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,10 +27,10 @@ onMounted(() => {
     <Navbar class="flex-none" />
     <div class="flex-1 min-h-0 flex flex-row">
       <ProfileManager
-        class="basis-1/3 min-w-60 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
+        class="basis-1/3 min-w-60 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-50" />
       <DevicePreview class="basis-1/3 flex-col flex-1 flex border-solid border-0 border-r" />
       <ConfigPane
-        class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
+        class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-50" />
     </div>
   </main>
   <p
diff --git a/src/components/config/ConfigPane.vue b/src/components/config/ConfigPane.vue
index ca9fa57..e20be7c 100644
--- a/src/components/config/ConfigPane.vue
+++ b/src/components/config/ConfigPane.vue
@@ -4,7 +4,7 @@
       <div v-for="(option, index) in configPageOptions" :key="index" class="flex flex-1 items-center">
         <button
           class="flex-1 h-12 items-center text-center group px-3 font-heading"
-          :class="index===currentPage ? 'bg-zinc-900': 'hover:bg-zinc-800 text-zinc-200 bg-zinc-950'"
+          :class="index===currentPage ? 'bg-zinc-900': 'hover:bg-zinc-800 text-zinc-200'"
           @click="currentPage = index">
           {{ $t(option.titleKey) }}
         </button>
diff --git a/src/components/profile/ProfileButton.vue b/src/components/profile/ProfileButton.vue
index 38e9fd2..90a35f1 100644
--- a/src/components/profile/ProfileButton.vue
+++ b/src/components/profile/ProfileButton.vue
@@ -12,7 +12,7 @@
         onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
         class="flex-1 pl-6 h-full bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0"
         :class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
-        'hover:bg-zinc-900 bg-opacity-50 text-white': !selected}"
+        'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
         @blur="onNameInputBlur">
       <button
         ref="nameSubmitButton"
@@ -26,7 +26,7 @@
     <button
       v-else
       :class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
-      'hover:bg-zinc-900 bg-opacity-50 text-white': !selected}"
+      'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
       class="flex-1 h-full text-left whitespace-nowrap overflow-hidden text-ellipsis pr-4"
       @click="!editing && $emit('select') && $refs.profileTitle.scramble()">
       <span class="ml-4 w-4 mr-2" :class="{'ml-4': !draggable}">
@@ -38,7 +38,7 @@
       </span>
       <ScrambleText
         ref="profileTitle"
-        :class="{'text-black': selected, 'text-zinc-100': !selected}"
+        :class="{'text-black': selected, 'text-muted-foreground': !selected}"
         :text="profile.name" />
       <span
         v-if="showId"