diff --git a/src/components/InstalledApp.vue b/src/components/InstalledApp.vue
index f6c400d..fc0b821 100644
--- a/src/components/InstalledApp.vue
+++ b/src/components/InstalledApp.vue
@@ -192,7 +192,7 @@ export default defineComponent({
   .installed-app-link {
     text-decoration: none;
     .installed-app-icon {
-      box-shadow: 0px 10px 30px rgba(209, 213, 223, 0.5);
+      box-shadow: var(--card-shadow);
     }
   }
   .uninstall-btn {
diff --git a/src/components/Utility/CircularCheckmark.vue b/src/components/Utility/CircularCheckmark.vue
index 5a0a99f..ef295df 100644
--- a/src/components/Utility/CircularCheckmark.vue
+++ b/src/components/Utility/CircularCheckmark.vue
@@ -65,7 +65,7 @@ defineProps({
     transform: translate3d(-50%, -50%, 0) scale(1); //animated
     transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     background: #00cd98;
-    box-shadow: 0px 10px 30px rgba(209, 213, 223, 0.5);
+    box-shadow: var(--card-shadow);
     border-radius: 50%;
     z-index: 0;
   }
diff --git a/src/components/Utility/Seed.vue b/src/components/Utility/Seed.vue
index 7e7c569..fa99f7e 100644
--- a/src/components/Utility/Seed.vue
+++ b/src/components/Utility/Seed.vue
@@ -173,11 +173,11 @@ export default defineComponent({
   width: 5rem;
   border-radius: 50%;
   background: #ffffff;
-  box-shadow: 0px 5px 15px rgba(143, 149, 163, 0.25) !important;
+  box-shadow: var(--btn-shadow) !important;
   transition: box-shadow 0.5s, opacity 0.5s, transform 0.5s ease;
   &:not([disabled]) {
     &:hover {
-      box-shadow: 0px 5px 30px rgba(143, 149, 163, 0.35) !important;
+      box-shadow: var(--btn-shadow-hover) !important;
       &.btn-neu-circle-next:not([disabled]) {
         transform: translateX(3px);
       }
diff --git a/src/global-styles/custom.scss b/src/global-styles/custom.scss
index 178759b..813414e 100644
--- a/src/global-styles/custom.scss
+++ b/src/global-styles/custom.scss
@@ -138,6 +138,8 @@ html[data-theme='dark'] {
   --card-bg: #fff;
   --card-shadow: 0px 10px 30px rgba(209, 213, 223, 0.5);
   --card-shadow-hover: 0px 10px 30px rgba(209, 213, 223, 0.6);
+  --btn-shadow: 0px 5px 15px rgba(143, 149, 163, 0.25);
+  --btn-shadow-hover: 0px 5px 30px rgba(143, 149, 163, 0.35);
   --toggle-switch-bg: linear-gradient(346.78deg, #f7fcfc 0%, #fafcfa 100%);
   --toggle-switch-selected: #fff;
 }
@@ -152,6 +154,8 @@ html[data-theme='dark'] {
   --card-bg: #2a3244;
   --card-shadow: 0px 10px 30px rgba(0, 0, 0, 0.4);
   --card-shadow-hover: 0px 10px 30px rgba(0, 0, 0, 0.5);
+  --btn-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
+  --btn-shadow-hover: 0px 5px 30px rgba(0, 0, 0, 0.35);
   --toggle-switch-bg: linear-gradient(346.78deg, #484848 0%, #414241 100%);
   --toggle-switch-selected: #1c1c26;
 
diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
index bbe658c..10599a0 100644
--- a/src/layouts/DashboardLayout.vue
+++ b/src/layouts/DashboardLayout.vue
@@ -514,7 +514,7 @@ html[data-theme='dark'] {
   max-width: 280px;
   height: calc(var(--vh100, 100vh) - 84px);
   background: #fff;
-  box-shadow: 0px 10px 30px rgba(209, 213, 223, 0.5);
+  box-shadow: var(--card-shadow);
   transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
 }