diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index ede3f0350..47783114b 100644
--- a/src/components/misc/card.vue
+++ b/src/components/misc/card.vue
@@ -60,13 +60,13 @@ export default {
   background-color: var(--white);
   border-radius: $radius;
   margin-bottom: 1rem;
-  border: 1px solid var(--grey-200);
+  border: 1px solid var(--card-border-color);
   box-shadow: var(--shadow-sm);
 }
 
 .card-header {
   box-shadow: none;
-  border-bottom: 1px solid var(--grey-200);
+  border-bottom: 1px solid var(--card-border-color);
   border-radius: $radius $radius 0 0;
 }
 
diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss
index f3d35db73..cb601d6d6 100644
--- a/src/styles/custom-properties/colors.scss
+++ b/src/styles/custom-properties/colors.scss
@@ -74,9 +74,12 @@
   --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
   --primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
 
-  // Define custom color to prevent change in dark mode
+  // Define custom color variable to prevent change in dark mode
   --switch-view-color: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
 
+  // Define custom color variable to alow change in dark mode
+  --card-border-color: var(--grey-200);
+
 
   @media (prefers-color-scheme: dark) {
     // Light mode colours reversed for dark mode
@@ -108,5 +111,7 @@
     // need to be overriden in dark mode
     --input-placeholder-color: hsla(var(--grey-900-hsl), 0.6) !important;
 
+    // Custom color variables we need to override
+    --card-border-color: hsla(var(--grey-100-hsl), 0.3);
   }
 }
\ No newline at end of file