diff --git a/resources/scripts/components/base/BaseCard.vue b/resources/scripts/components/base/BaseCard.vue
index 1a1b7a29..ba7fe35f 100644
--- a/resources/scripts/components/base/BaseCard.vue
+++ b/resources/scripts/components/base/BaseCard.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="bg-white rounded-lg shadow">
+  <div
+    class="bg-white rounded-lg shadow dark:bg-gray-800 dark:text-white dark:shadow-glass dark:border dark:border-white/10 dark:bg-gray-800/70 relative"
+  >
+    <BaseDarkHighlight class="z-[-1] mt-10" />
+
     <div
       v-if="hasHeaderSlot"
       class="px-5 py-4 text-black border-b border-gray-100 border-solid"
diff --git a/resources/scripts/components/base/BaseDarkHighlight.vue b/resources/scripts/components/base/BaseDarkHighlight.vue
new file mode 100644
index 00000000..f0b608cf
--- /dev/null
+++ b/resources/scripts/components/base/BaseDarkHighlight.vue
@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="
+      hidden
+      top-0
+      w-full
+      absolute
+      ml-auto
+      mr-auto
+      left-0
+      right-0
+      text-center
+      h-full
+      rounded-full
+      bg-highlight/[.10]
+      blur-2xl
+      dark:block
+      z-[-1]
+    "
+  />
+</template>
diff --git a/tailwind.config.js b/tailwind.config.js
index fa18c191..62a73d08 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -36,6 +36,7 @@ module.exports = {
           900: withOpacityValue('--color-primary-900'),
         },
         black: '#040405',
+        highlight: 'rgb(56, 189, 248)',
         red: colors.red,
         teal: colors.teal,
         gray: colors.slate,