diff --git a/resources/js/components/ui/Box.vue b/resources/js/components/ui/Box.vue
index bcf9fd5e..9e1da28b 100644
--- a/resources/js/components/ui/Box.vue
+++ b/resources/js/components/ui/Box.vue
@@ -1,10 +1,12 @@
 <template>
-    <section class="p-3 rounded-lg flex flex-col" :class="{'bg-gray-800': second === false, 'bg-gray-700': second === true}">
+    <section class="p-3 rounded-lg flex flex-col"
+        :class="{ 'bg-gray-800 group-[.is-popup]:bg-zinc-700': second === false, 'bg-gray-700 group-[.is-popup]:bg-zinc-600': second === true }">
         <div class="flex items-center">
-            <div class="col-span-full font-semibold text-gray-300" v-if="heading" v-text="heading"></div>
+            <div v-if="heading" class="col-span-full font-semibold text-gray-300 group-[.is-popup]:text-zinc-300"
+                v-text="heading"></div>
             <slot name="in-title"></slot>
         </div>
-        <main :class="{'mt-2': heading, [containerClass]: true}">
+        <main :class="{ 'mt-2': heading, [containerClass]: true }">
             <slot></slot>
         </main>
     </section>
diff --git a/resources/js/components/ui/Popup.vue b/resources/js/components/ui/Popup.vue
index c33773ef..75dbbd6a 100644
--- a/resources/js/components/ui/Popup.vue
+++ b/resources/js/components/ui/Popup.vue
@@ -5,7 +5,7 @@
                 <ui-sprite src="close" class="text-zinc-400 w-6 h-6"></ui-sprite>
             </a>
             <h3 v-if="heading" class="font-semibold text-primary-200 text-xl" v-html="heading"></h3>
-            <div class="text-primary-100">
+            <div class="text-primary-100 group is-popup">
                 <slot></slot>
             </div>
         </div>