diff --git a/app/javascript/dashboard/assets/scss/_next-colors.scss b/app/javascript/dashboard/assets/scss/_next-colors.scss
index 784edce6c..4a67e5182 100644
--- a/app/javascript/dashboard/assets/scss/_next-colors.scss
+++ b/app/javascript/dashboard/assets/scss/_next-colors.scss
@@ -145,6 +145,12 @@
     --black-alpha-2: 0, 0, 0, 0.04;
     --border-blue: 39, 129, 246, 0.5;
     --white-alpha: 255, 255, 255, 0.8;
+
+    // Voice call widget - light mode
+    --call-widget: 33, 34, 38, 0.95;
+    --call-widget-border: 255, 255, 255, 0.1;
+    --call-widget-text: 237, 238, 240, 1;
+    --call-widget-sub-text: 173, 177, 184, 1;
   }
 
   .dark {
@@ -291,6 +297,12 @@
     --border-blue: 39, 129, 246, 0.5;
     --border-container: 255, 255, 255, 0;
     --white-alpha: 255, 255, 255, 0.1;
+
+    // Voice call widget - dark mode
+    --call-widget: 50, 53, 61, 1;
+    --call-widget-border: 255, 255, 255, 0.07;
+    --call-widget-text: 237, 238, 240, 1;
+    --call-widget-sub-text: 173, 177, 184, 1;
   }
 }
 // NEXT COLORS END
diff --git a/app/javascript/dashboard/components-next/call/CallCard.vue b/app/javascript/dashboard/components-next/call/CallCard.vue
index 55da3dacf..d041150c2 100644
--- a/app/javascript/dashboard/components-next/call/CallCard.vue
+++ b/app/javascript/dashboard/components-next/call/CallCard.vue
@@ -75,11 +75,11 @@ const channelIcon = computed(() => {
 
 <template>
   <div
-    class="flex flex-col gap-2 pt-4 bg-n-solid-2/95 rounded-2xl shadow-xl outline outline-1 outline-n-strong backdrop-blur-md"
+    class="flex flex-col gap-1 pt-4 bg-n-call-widget rounded-2xl shadow-xl outline outline-1 outline-n-call-widget-border backdrop-blur-md"
     :class="call?.conversationId ? 'pb-2' : 'pb-4'"
   >
     <!-- Top section: status badge + location/inbox + duration -->
-    <div class="flex flex-col gap-3">
+    <div class="flex flex-col gap-3 pb-3 border-b border-n-call-widget-border">
       <div class="flex items-center gap-2 px-4">
         <!-- Ongoing: status badge on left -->
         <div v-if="isOngoing" class="flex items-center gap-1.5 shrink-0">
@@ -100,10 +100,10 @@ const channelIcon = computed(() => {
           <Icon
             v-else-if="!isOngoing"
             :icon="channelIcon"
-            class="size-3.5 text-n-slate-10 shrink-0"
+            class="size-3.5 text-n-call-widget-sub-text shrink-0"
           />
           <span
-            class="text-xs font-medium text-n-slate-11 tracking-tight truncate"
+            class="text-xs font-medium text-n-call-widget-sub-text tracking-tight truncate"
           >
             {{ callInfo.location }}
           </span>
@@ -112,7 +112,7 @@ const channelIcon = computed(() => {
         <!-- Ongoing: duration on right -->
         <p
           v-if="isOngoing"
-          class="font-display text-base font-medium text-n-slate-11 shrink-0 mb-0 tabular-nums tracking-tight"
+          class="font-display text-base font-medium text-n-call-widget-sub-text shrink-0 mb-0 tabular-nums tracking-tight"
         >
           {{ duration }}
         </p>
@@ -132,7 +132,7 @@ const channelIcon = computed(() => {
             slate
             ghost
             xs
-            class="!rounded-full -my-1"
+            class="!rounded-full -my-1 -me-1 !text-n-call-widget-sub-text"
             @click="$emit('dismiss')"
           />
         </div>
@@ -149,13 +149,13 @@ const channelIcon = computed(() => {
         </div>
         <div class="flex-1 min-w-0">
           <p
-            class="font-display text-sm font-medium text-n-slate-12 truncate mb-0.5 tracking-tight leading-tight"
+            class="font-display text-sm font-medium text-n-call-widget-text truncate mb-0.5 tracking-tight leading-tight"
           >
             {{ callInfo.contactName }}
           </p>
           <p
             v-if="callInfo.phoneNumber"
-            class="text-sm text-n-slate-11 truncate mb-0 tracking-tight leading-tight"
+            class="text-sm text-n-call-widget-sub-text truncate mb-0 tracking-tight leading-tight"
           >
             {{ callInfo.phoneNumber }}
           </p>
@@ -217,23 +217,23 @@ const channelIcon = computed(() => {
     >
       <template #icon>
         <span
-          class="flex items-center gap-1 text-n-slate-11 group-hover:text-n-slate-12"
+          class="flex items-center gap-1 text-n-call-widget-sub-text group-hover:text-n-call-widget-text"
         >
           <Icon
             icon="i-ph-chat-circle-text-bold"
-            class="size-3.5 text-n-slate-11 shrink-0"
+            class="size-3.5 text-n-call-widget-sub-text shrink-0"
           />
           <span class="text-sm tracking-tight tabular-nums">
             #{{ call.conversationId }}
           </span>
           <Icon
             icon="i-ph-caret-right-bold"
-            class="size-3 text-n-slate-11 shrink-0"
+            class="size-3 text-n-call-widget-sub-text shrink-0"
           />
         </span>
       </template>
       <span
-        class="text-sm text-n-slate-11 tracking-tight group-hover:text-n-slate-12"
+        class="text-sm text-n-call-widget-sub-text tracking-tight group-hover:text-n-call-widget-text"
       >
         {{ $t('CONVERSATION.VOICE_WIDGET.GO_TO_CONVERSATION') }}
       </span>
diff --git a/theme/colors.js b/theme/colors.js
index 0f4d2af10..9dcfbeb8c 100644
--- a/theme/colors.js
+++ b/theme/colors.js
@@ -258,6 +258,11 @@ export const colors = {
       black2: 'rgba(var(--black-alpha-2))',
       white: 'rgba(var(--white-alpha))',
     },
+    // Voice call widget
+    'call-widget': 'rgba(var(--call-widget))',
+    'call-widget-border': 'rgba(var(--call-widget-border))',
+    'call-widget-text': 'rgba(var(--call-widget-text))',
+    'call-widget-sub-text': 'rgba(var(--call-widget-sub-text))',
     // Border colors
     weak: 'rgb(var(--border-weak) / <alpha-value>)',
     container: 'rgba(var(--border-container))',