diff --git a/frontend/src/components/Activities/AudioPlayer.vue b/frontend/src/components/Activities/AudioPlayer.vue
index 2841e5bb..71b28b1c 100644
--- a/frontend/src/components/Activities/AudioPlayer.vue
+++ b/frontend/src/components/Activities/AudioPlayer.vue
@@ -11,7 +11,7 @@
         <input
           class="w-full slider !h-[0.5] bg-surface-gray-3 [&::-webkit-slider-thumb]:shadow [&::-webkit-slider-thumb:hover]:outline [&::-webkit-slider-thumb:hover]:outline-[0.5px]"
           :style="{
-            background: `linear-gradient(to right, #171717 ${progress}%, #ededed ${progress}%)`,
+            background: `linear-gradient(to right, var(--surface-gray-7, #171717) ${progress}%, var(--surface-gray-3, #ededed) ${progress}%)`,
           }"
           type="range"
           id="track"
diff --git a/frontend/src/components/Activities/CallArea.vue b/frontend/src/components/Activities/CallArea.vue
index b5b23f58..ee65bca4 100644
--- a/frontend/src/components/Activities/CallArea.vue
+++ b/frontend/src/components/Activities/CallArea.vue
@@ -25,7 +25,7 @@
       </div>
     </div>
     <div
-      class="flex flex-col gap-2 border border-outline-gray-modals rounded-md bg-surface-white px-3 py-2.5 text-ink-gray-9"
+      class="flex flex-col gap-2 border border-outline-gray-modals rounded-md bg-surface-cards px-3 py-2.5 text-ink-gray-9"
     >
       <div class="flex items-center justify-between">
         <div class="inline-flex gap-2 items-center text-base font-medium">
diff --git a/frontend/src/components/Activities/EmailArea.vue b/frontend/src/components/Activities/EmailArea.vue
index 40662d64..61ee2f69 100644
--- a/frontend/src/components/Activities/EmailArea.vue
+++ b/frontend/src/components/Activities/EmailArea.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="cursor-pointer flex flex-col rounded-md shadow bg-surface-white px-3 py-1.5 text-base transition-all duration-300 ease-in-out"
+    class="cursor-pointer flex flex-col rounded-md shadow bg-surface-cards px-3 py-1.5 text-base transition-all duration-300 ease-in-out"
   >
     <div class="-mb-0.5 flex items-center justify-between gap-2 truncate text-ink-gray-9">
       <div class="flex items-center gap-2 truncate">
diff --git a/frontend/src/components/Fields.vue b/frontend/src/components/Fields.vue
index 4e19a818..cc39778c 100644
--- a/frontend/src/components/Fields.vue
+++ b/frontend/src/components/Fields.vue
@@ -133,11 +133,13 @@
             <DateTimePicker
               v-else-if="field.type === 'Datetime'"
               v-model="data[field.name]"
+              icon-left=""
               :placeholder="getPlaceholder(field)"
               input-class="border-none"
             />
             <DatePicker
               v-else-if="field.type === 'Date'"
+              icon-left=""
               v-model="data[field.name]"
               :placeholder="getPlaceholder(field)"
               input-class="border-none"