diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index d71bcb69..57c86c23 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -431,17 +431,16 @@
         <div
           class="z-10 flex h-7 w-7 items-center justify-center bg-white"
           :class="{
-            'mt-2.5': [
+            'mt-2.5': ['communication'].includes(activity.activity_type),
+            'bg-white': ['added', 'removed', 'changed'].includes(
+              activity.activity_type,
+            ),
+            'h-8': [
+              'comment',
               'communication',
               'incoming_call',
               'outgoing_call',
             ].includes(activity.activity_type),
-            'bg-white': ['added', 'removed', 'changed'].includes(
-              activity.activity_type,
-            ),
-            'h-8': ['comment', 'communication'].includes(
-              activity.activity_type,
-            ),
           }"
         >
           <UserAvatar
@@ -449,6 +448,21 @@
             :user="activity.data.sender"
             size="md"
           />
+          <MissedCallIcon
+            v-else-if="
+              ['incoming_call', 'outgoing_call'].includes(
+                activity.activity_type,
+              ) && activity.status == 'No Answer'
+            "
+            class="text-red-600"
+          />
+          <DeclinedCallIcon
+            v-else-if="
+              ['incoming_call', 'outgoing_call'].includes(
+                activity.activity_type,
+              ) && activity.status == 'Busy'
+            "
+          />
           <component
             v-else
             :is="activity.icon"
@@ -594,17 +608,25 @@
           activity.activity_type == 'incoming_call' ||
           activity.activity_type == 'outgoing_call'
         "
-        class="mb-3 flex flex-col gap-3 rounded-md bg-gray-50 p-4 sm:max-w-[70%]"
+        class="mb-4"
       >
-        <div class="flex items-center justify-between">
-          <div>
-            {{
+        <div class="mb-1 flex items-start justify-stretch gap-2 py-1 text-base">
+          <div class="inline-flex items-center flex-wrap gap-1 text-gray-600">
+            <Avatar
+              :image="activity.caller.image"
+              :label="activity.caller.label"
+              size="md"
+            />
+            <span class="font-medium text-gray-800 ml-1">
+              {{ activity.caller.label }}
+            </span>
+            <span>{{
               activity.type == 'Incoming'
-                ? __('Inbound Call')
-                : __('Outbound Call')
-            }}
+                ? __('has reached out')
+                : __('has made a call')
+            }}</span>
           </div>
-          <div>
+          <div class="ml-auto whitespace-nowrap">
             <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
               <div class="text-sm text-gray-600">
                 {{ __(timeAgo(activity.creation)) }}
@@ -612,75 +634,77 @@
             </Tooltip>
           </div>
         </div>
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-1">
-            <DurationIcon class="h-4 w-4 text-gray-600" />
-            <div class="text-sm text-gray-600">{{ __('Duration') }}</div>
-            <div class="text-sm">
-              {{ activity.duration }}
+        <div
+          class="flex flex-col gap-2 border border-gray-200 rounded-md bg-white px-3 py-2.5"
+        >
+          <div class="flex items-center justify-between">
+            <div class="inline-flex gap-2 items-center text-base font-medium">
+              <div>
+                {{
+                  activity.type == 'Incoming'
+                    ? __('Inbound Call')
+                    : __('Outbound Call')
+                }}
+              </div>
             </div>
+            <div>
+              <MultipleAvatar
+                :avatars="[
+                  {
+                    image: activity.caller.image,
+                    label: activity.caller.label,
+                    name: activity.caller.label,
+                  },
+                  {
+                    image: activity.receiver.image,
+                    label: activity.receiver.label,
+                    name: activity.receiver.label,
+                  },
+                ]"
+                size="sm"
+              />
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <Badge :label="dateFormat(activity.creation, 'MMM D, dddd')">
+              <template #prefix>
+                <CalendarIcon class="size-3" />
+              </template>
+            </Badge>
+            <Badge
+              v-if="activity.status == 'Completed'"
+              :label="activity.duration"
+            >
+              <template #prefix>
+                <DurationIcon class="size-3" />
+              </template>
+            </Badge>
+            <Badge
+              v-if="activity.recording_url"
+              :label="
+                activity.show_recording ? __('Hide Recording') : __('Listen')
+              "
+              class="cursor-pointer"
+              @click="activity.show_recording = !activity.show_recording"
+            >
+              <template #prefix>
+                <PlayIcon class="size-3" />
+              </template>
+            </Badge>
+            <Badge
+              :label="statusLabelMap[activity.status]"
+              :theme="statusColorMap[activity.status]"
+            />
           </div>
           <div
-            v-if="activity.recording_url"
-            class="flex cursor-pointer select-none items-center gap-1"
-            @click="activity.show_recording = !activity.show_recording"
+            v-if="activity.show_recording && activity.recording_url"
+            class="flex items-center justify-between"
           >
-            <PlayIcon class="h-4 w-4 text-gray-600" />
-            <div class="text-sm text-gray-600">
-              {{
-                activity.show_recording
-                  ? __('Hide Recording')
-                  : __('Listen to Call')
-              }}
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="activity.show_recording && activity.recording_url"
-          class="flex items-center justify-between rounded border"
-        >
-          <audio
-            class="audio-control"
-            controls
-            :src="activity.recording_url"
-          ></audio>
-        </div>
-        <div
-          class="flex items-center justify-between sm:justify-start sm:gap-1"
-        >
-          <div class="flex items-center gap-1">
-            <Avatar
-              :image="activity.caller.image"
-              :label="activity.caller.label"
-              class="sm:h-8 sm:w-8"
-            />
-            <div class="ml-1 flex flex-col gap-1">
-              <div class="text-xs font-medium sm:text-base">
-                {{ __(activity.caller.label) }}
-              </div>
-              <div class="text-2xs text-gray-600 sm:text-xs">
-                {{ activity.from }}
-              </div>
-            </div>
-          </div>
-          <FeatherIcon
-            name="arrow-right"
-            class="size-4 text-gray-600 sm:mx-2 sm:size-5"
-          />
-          <div class="flex items-center gap-1">
-            <Avatar
-              :image="activity.receiver.image"
-              :label="activity.receiver.label"
-              class="sm:h-8 sm:w-8"
-            />
-            <div class="ml-1 flex flex-col gap-1">
-              <div class="text-xs font-medium sm:text-base">
-                {{ __(activity.receiver.label) }}
-              </div>
-              <div class="text-2xs text-gray-600 sm:text-xs">
-                {{ activity.to }}
-              </div>
-            </div>
+            <audio
+              class="audio-control"
+              controls
+              :src="activity.recording_url"
+            ></audio>
           </div>
         </div>
       </div>
@@ -904,6 +928,7 @@
   />
 </template>
 <script setup>
+import MultipleAvatar from '@/components/MultipleAvatar.vue'
 import EmailContent from '@/components/EmailContent.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
@@ -925,6 +950,8 @@ import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DotIcon from '@/components/Icons/DotIcon.vue'
 import CommentIcon from '@/components/Icons/CommentIcon.vue'
 import SelectIcon from '@/components/Icons/SelectIcon.vue'
+import MissedCallIcon from '@/components/Icons/MissedCallIcon.vue'
+import DeclinedCallIcon from '@/components/Icons/DeclinedCallIcon.vue'
 import InboundCallIcon from '@/components/Icons/InboundCallIcon.vue'
 import OutboundCallIcon from '@/components/Icons/OutboundCallIcon.vue'
 import ReplyIcon from '@/components/Icons/ReplyIcon.vue'
@@ -943,6 +970,7 @@ import {
   startCase,
   taskStatusOptions,
 } from '@/utils'
+import { statusLabelMap, statusColorMap } from '@/utils/callLog.js'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
diff --git a/frontend/src/components/Icons/DeclinedCallIcon.vue b/frontend/src/components/Icons/DeclinedCallIcon.vue
new file mode 100644
index 00000000..27b068fa
--- /dev/null
+++ b/frontend/src/components/Icons/DeclinedCallIcon.vue
@@ -0,0 +1,28 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.08176 7.30769C2.58005 6.18305 2.23673 4.92355 2.07547 3.60766C2.07054 3.53793 2.06535 3.47026 2.06011 3.40458C1.99269 2.56006 2.6315 2 3.47871 2H4.3983C4.85717 2 5.25715 2.31229 5.36844 2.75746L5.51307 3.33596C5.82745 4.59341 5.2987 5.91056 4.20214 6.60162L3.08176 7.30769ZM3.08176 7.30769C3.24962 7.68396 3.43521 8.04513 3.63764 8.38827C4.49814 9.85258 5.70274 11.085 7.14706 11.9786C7.42755 12.1528 7.71775 12.308 8.01716 12.4466C8.09664 12.4834 8.17677 12.5191 8.25753 12.5536M8.25753 12.5536C9.40645 13.0447 10.6848 13.3091 12.0659 13.4781L12.136 13.4867V13.4867C12.963 13.5892 13.5034 12.7424 13.5025 11.9091L13.5016 11.1801C13.5011 10.7318 13.2023 10.3386 12.7705 10.2181L12.2906 10.0842C10.9753 9.71699 9.57793 10.2845 8.89108 11.4648L8.25753 12.5536Z"
+      stroke="currentColor"
+    />
+    <path
+      d="M10.8983 2.18433L13.8151 5.10114"
+      stroke="currentColor"
+      stroke-width="0.8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <circle
+      cx="12.25"
+      cy="3.75"
+      r="2.35"
+      stroke="currentColor"
+      stroke-width="0.8"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/InboundCallIcon.vue b/frontend/src/components/Icons/InboundCallIcon.vue
index cf7f92d3..cc779efe 100644
--- a/frontend/src/components/Icons/InboundCallIcon.vue
+++ b/frontend/src/components/Icons/InboundCallIcon.vue
@@ -9,7 +9,7 @@
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M10.7659 5.02696V2.49055C10.7659 2.21441 10.5421 1.99055 10.2659 1.99055C9.98979 1.99055 9.76593 2.21441 9.76593 2.49055V6.22461C9.76593 6.50075 9.98979 6.72461 10.2659 6.72461L14 6.72461C14.2761 6.72461 14.5 6.50075 14.5 6.22461C14.5 5.94847 14.2761 5.72461 14 5.72461L11.4825 5.72461L14.8535 2.35355C15.0488 2.15829 15.0488 1.84171 14.8535 1.64645C14.6583 1.45118 14.3417 1.45118 14.1464 1.64645L10.7659 5.02696ZM3.95262 3.01471C3.92305 2.96757 3.85703 2.96079 3.81849 3.00094L2.78472 4.07779C2.49483 4.37975 2.42118 4.80645 2.58821 5.15824C2.84578 5.7007 3.21973 6.43293 3.69626 7.22349L5.4337 5.5008C5.46212 5.47262 5.4672 5.42851 5.44593 5.39462L3.95262 3.01471ZM4.24559 8.08705L6.13779 6.21091C6.49848 5.85329 6.56295 5.29336 6.29299 4.86312L4.79968 2.48321C4.42423 1.88484 3.58632 1.79881 3.09711 2.30841L2.06333 3.38526C1.50617 3.96563 1.32728 4.83405 1.68487 5.58716C2.28388 6.84874 3.52538 9.17888 5.26635 10.9491C7.06226 12.7753 9.57149 14.1765 10.8502 14.8261C11.5427 15.1779 12.3553 15.0724 12.9518 14.6132L14.0767 13.7472C14.6547 13.3022 14.638 12.425 14.0434 12.0023L11.6812 10.323C11.2786 10.0367 10.7335 10.0585 10.3549 10.3758L8.26185 12.1305C7.46603 11.5789 6.66354 10.9437 5.97933 10.2479C5.32711 9.58475 4.7457 8.83116 4.24559 8.08705ZM9.13279 12.7053C9.97097 13.2327 10.7473 13.6522 11.3031 13.9345C11.6307 14.1009 12.0316 14.0597 12.3418 13.8209L13.4666 12.9548C13.5122 12.9198 13.5109 12.8507 13.464 12.8174L11.1018 11.138C11.0701 11.1155 11.0271 11.1172 10.9973 11.1422L9.13279 12.7053Z"
+      d="M14.8532 1.14645C15.0485 1.34171 15.0485 1.65829 14.8532 1.85355L11.4822 5.22461L14.0089 5.22461C14.2851 5.22461 14.5089 5.44847 14.5089 5.72461C14.5089 6.00075 14.2851 6.22461 14.0089 6.22461L10.2749 6.22461C9.99874 6.22461 9.77489 6.00075 9.77489 5.72461L9.77489 1.99055C9.77489 1.71441 9.99874 1.49055 10.2749 1.49055C10.551 1.49055 10.7749 1.71441 10.7749 1.99055V4.51768L14.1461 1.14645C14.3414 0.951184 14.658 0.951184 14.8532 1.14645ZM2.80797 3.6148C2.78573 3.33617 2.8774 3.1345 3.02118 2.99721C3.17153 2.85363 3.41272 2.75 3.72816 2.75H4.64775C4.87718 2.75 5.07717 2.90615 5.13282 3.12873L5.27745 3.70723C5.53943 4.7551 5.0988 5.85273 4.185 6.42862L3.56569 6.81892C3.20623 5.88631 2.95354 4.86847 2.82274 3.80936C2.81796 3.74239 2.81297 3.67751 2.80797 3.6148ZM4.71817 7.27463L3.97179 7.745C4.08077 7.96488 4.19618 8.17818 4.31773 8.38422L4.31816 8.38495C5.13747 9.77916 6.28441 10.9525 7.65958 11.8034L7.66026 11.8038C7.86826 11.933 8.08253 12.0513 8.30302 12.16L8.70837 11.4634C8.71361 11.4544 8.71888 11.4454 8.72419 11.4365C9.53099 10.0777 11.15 9.42701 12.6745 9.85257L13.1543 9.98651C13.802 10.1673 14.2502 10.7571 14.251 11.4295L14.2519 12.1585C14.2525 12.6744 14.0876 13.2069 13.7721 13.6079C13.4485 14.0194 12.9454 14.3097 12.3244 14.2329L12.3239 14.2329L12.2547 14.2244C10.8516 14.0527 9.52086 13.7807 8.31046 13.2634C8.22523 13.2269 8.14057 13.1893 8.0565 13.1503C7.73994 13.0037 7.43191 12.8391 7.13333 12.6537C5.62004 11.7174 4.35788 10.4262 3.45622 8.89196C3.24384 8.53192 3.04973 8.15399 2.87459 7.7614C2.35125 6.58828 1.99551 5.28024 1.82863 3.91848L1.82707 3.90575L1.82617 3.89296C1.82136 3.82509 1.8163 3.75896 1.81114 3.69437C1.76597 3.12847 1.95999 2.62785 2.33056 2.27398C2.69456 1.9264 3.19638 1.75 3.72816 1.75H4.64775C5.33604 1.75 5.93602 2.21844 6.10296 2.88619L6.24759 3.46468C6.61436 4.93171 5.99749 6.46839 4.71817 7.27463ZM9.5209 12.0553L9.23286 12.5503C9.69175 12.7132 10.1733 12.845 10.6771 12.9534C11.2179 13.0698 11.7844 13.1594 12.3761 13.2318L12.3764 13.2318L12.4464 13.2404L12.3853 13.7371L12.4469 13.2405C12.6527 13.266 12.8331 13.1843 12.9862 12.9897C13.1474 12.7847 13.2523 12.477 13.2519 12.1597L13.251 11.4307C13.2508 11.2065 13.1014 11.01 12.8855 10.9497L12.4056 10.8157C11.3095 10.5098 10.1451 10.9827 9.57269 11.9663L9.5209 12.0553Z"
       fill="currentColor"
     />
   </svg>
diff --git a/frontend/src/components/Icons/MissedCallIcon.vue b/frontend/src/components/Icons/MissedCallIcon.vue
new file mode 100644
index 00000000..210751cf
--- /dev/null
+++ b/frontend/src/components/Icons/MissedCallIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.02118 2.99721C2.8774 3.1345 2.78573 3.33617 2.80797 3.6148C2.81297 3.67751 2.81796 3.74239 2.82274 3.80936C2.95354 4.86847 3.20623 5.88631 3.56569 6.81892L4.185 6.42862C5.0988 5.85273 5.53943 4.7551 5.27745 3.70723L5.13282 3.12873C5.07717 2.90615 4.87718 2.75 4.64775 2.75H3.72816C3.41272 2.75 3.17153 2.85363 3.02118 2.99721ZM3.97179 7.745L4.71817 7.27463C5.99749 6.46839 6.61436 4.93171 6.24759 3.46468L6.10296 2.88619C5.93602 2.21844 5.33604 1.75 4.64775 1.75H3.72816C3.19638 1.75 2.69456 1.9264 2.33056 2.27398C1.95999 2.62785 1.76597 3.12847 1.81114 3.69437C1.8163 3.75896 1.82136 3.82509 1.82617 3.89296L1.82707 3.90575L1.82863 3.91848C1.99551 5.28024 2.35125 6.58828 2.87459 7.7614C3.04973 8.15399 3.24384 8.53192 3.45622 8.89196C4.35788 10.4262 5.62004 11.7174 7.13333 12.6537C7.43191 12.8391 7.73994 13.0037 8.0565 13.1503C8.14057 13.1893 8.22523 13.2269 8.31046 13.2634C9.52086 13.7807 10.8516 14.0527 12.2547 14.2244L12.3239 14.2329L12.3244 14.2329C12.9454 14.3097 13.4485 14.0194 13.7721 13.6079C14.0876 13.2069 14.2525 12.6744 14.2519 12.1585L14.251 11.4295C14.2502 10.7571 13.802 10.1673 13.1543 9.98651L12.6745 9.85257C11.15 9.42701 9.53099 10.0777 8.72419 11.4365L8.70837 11.4634L8.30302 12.16C8.08253 12.0513 7.86826 11.933 7.66026 11.8038L7.65958 11.8034C6.28441 10.9525 5.13747 9.77916 4.31816 8.38495L4.31773 8.38422C4.19618 8.17818 4.08077 7.96488 3.97179 7.745ZM9.23286 12.5503L9.5209 12.0553L9.57269 11.9663C10.1451 10.9827 11.3095 10.5098 12.4056 10.8157L12.8855 10.9497C13.1014 11.01 13.2508 11.2065 13.251 11.4307L13.2519 12.1597C13.2523 12.477 13.1474 12.7847 12.9862 12.9897C12.8331 13.1843 12.6527 13.266 12.4469 13.2405L12.3853 13.7371L12.4464 13.2404L12.3764 13.2318L12.3761 13.2318C11.7844 13.1594 11.2179 13.0698 10.6771 12.9534C10.1733 12.845 9.69175 12.7132 9.23286 12.5503ZM10.1715 1.93846C10.3668 1.7432 10.6834 1.7432 10.8786 1.93846L12.1161 3.1759L13.3535 1.93846C13.5488 1.7432 13.8654 1.7432 14.0606 1.93846C14.2559 2.13373 14.2559 2.45031 14.0606 2.64557L12.8232 3.88301L14.0606 5.12044C14.2559 5.31571 14.2559 5.63229 14.0606 5.82755C13.8654 6.02281 13.5488 6.02281 13.3535 5.82755L12.1161 4.59011L10.8786 5.82755C10.6834 6.02281 10.3668 6.02281 10.1715 5.82755C9.97627 5.63229 9.97627 5.31571 10.1715 5.12044L11.409 3.88301L10.1715 2.64557C9.97627 2.45031 9.97627 2.13373 10.1715 1.93846Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/OutboundCallIcon.vue b/frontend/src/components/Icons/OutboundCallIcon.vue
index 063a00f2..429a90bb 100644
--- a/frontend/src/components/Icons/OutboundCallIcon.vue
+++ b/frontend/src/components/Icons/OutboundCallIcon.vue
@@ -9,7 +9,7 @@
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M10.7656 1.5C10.4894 1.5 10.2656 1.72386 10.2656 2C10.2656 2.27614 10.4894 2.5 10.7656 2.5H13.2927L9.92161 5.87106C9.72634 6.06632 9.72634 6.3829 9.92161 6.57816C10.1169 6.77342 10.4334 6.77342 10.6287 6.57816L13.9997 3.20722V5.73406C13.9997 6.0102 14.2235 6.23406 14.4997 6.23406C14.7758 6.23406 14.9997 6.0102 14.9997 5.73406V2.01073C15.0025 1.87922 14.9537 1.74681 14.8533 1.64645C14.7935 1.58659 14.7222 1.54509 14.6466 1.52193C14.6001 1.50767 14.5508 1.5 14.4997 1.5H10.7656ZM3.95262 3.04013C3.92305 2.99299 3.85703 2.98621 3.81849 3.02636L2.78472 4.10321C2.49483 4.40518 2.42118 4.83187 2.58821 5.18366C2.84578 5.72612 3.21973 6.45835 3.69626 7.24891L5.4337 5.52622C5.46212 5.49804 5.4672 5.45393 5.44593 5.42004L3.95262 3.04013ZM4.24559 8.11247L6.13779 6.23633C6.49848 5.87871 6.56295 5.31878 6.29299 4.88854L4.79968 2.50863C4.42423 1.91026 3.58632 1.82423 3.09711 2.33383L2.06333 3.41068C1.50617 3.99105 1.32728 4.85947 1.68487 5.61258C2.28388 6.87416 3.52538 9.2043 5.26635 10.9746C7.06226 12.8007 9.57149 14.2019 10.8502 14.8515C11.5427 15.2033 12.3553 15.0979 12.9518 14.6386L14.0767 13.7726C14.6547 13.3276 14.638 12.4504 14.0434 12.0278L11.6812 10.3484C11.2786 10.0622 10.7335 10.0839 10.3549 10.4013L8.26185 12.1559C7.46603 11.6043 6.66354 10.9691 5.97933 10.2734C5.32711 9.61018 4.7457 8.85659 4.24559 8.11247ZM9.13279 12.7307C9.97097 13.2581 10.7473 13.6776 11.3031 13.9599C11.6307 14.1264 12.0316 14.0851 12.3418 13.8463L13.4666 12.9802C13.5122 12.9452 13.5109 12.8761 13.464 12.8428L11.1018 11.1634C11.0701 11.1409 11.0271 11.1426 10.9973 11.1676L9.13279 12.7307Z"
+      d="M10.765 1C10.4889 1 10.265 1.22386 10.265 1.5C10.265 1.77614 10.4889 2 10.765 2H13.2921L9.92106 5.37106C9.72579 5.56632 9.72579 5.8829 9.92106 6.07816C10.1163 6.27342 10.4329 6.27342 10.6282 6.07816L13.9992 2.70714L13.9991 5.23405C13.9991 5.51019 14.2229 5.73405 14.4991 5.73406C14.7752 5.73407 14.9991 5.51022 14.9991 5.23408L14.9992 1.50002C14.9992 1.3674 14.9465 1.24022 14.8528 1.14645C14.759 1.05268 14.6318 1 14.4992 1H10.765ZM2.80797 3.61483C2.78573 3.3362 2.8774 3.13453 3.02118 2.99724C3.17153 2.85366 3.41272 2.75003 3.72816 2.75003H4.64775C4.87718 2.75003 5.07717 2.90618 5.13282 3.12876L5.27745 3.70726C5.53943 4.75513 5.0988 5.85276 4.185 6.42865L3.56569 6.81894C3.20623 5.88634 2.95354 4.8685 2.82274 3.80939C2.81796 3.74242 2.81297 3.67754 2.80797 3.61483ZM4.71817 7.27466L3.97179 7.74503C4.08077 7.96491 4.19618 8.17821 4.31773 8.38425L4.31816 8.38498C5.13747 9.77919 6.28441 10.9526 7.65958 11.8034L7.66026 11.8039C7.86826 11.933 8.08253 12.0514 8.30302 12.16L8.70837 11.4634C8.71361 11.4544 8.71888 11.4454 8.72419 11.4365C9.53099 10.0777 11.15 9.42704 12.6745 9.8526L13.1543 9.98654C13.802 10.1673 14.2502 10.7571 14.251 11.4295L14.2519 12.1585C14.2525 12.6744 14.0876 13.2069 13.7721 13.608C13.4485 14.0194 12.9454 14.3098 12.3244 14.233L12.3239 14.2329L12.2547 14.2244C10.8516 14.0528 9.52086 13.7807 8.31046 13.2634C8.22523 13.227 8.14057 13.1893 8.0565 13.1504C7.73994 13.0038 7.43191 12.8391 7.13333 12.6538C5.62004 11.7174 4.35788 10.4262 3.45622 8.89199C3.24384 8.53194 3.04973 8.15402 2.87459 7.76142C2.35125 6.58831 1.99551 5.28027 1.82863 3.91851L1.82707 3.90578L1.82617 3.89299C1.82136 3.82512 1.8163 3.75899 1.81114 3.6944C1.76597 3.1285 1.95999 2.62788 2.33056 2.27401C2.69456 1.92643 3.19638 1.75003 3.72816 1.75003H4.64775C5.33604 1.75003 5.93602 2.21847 6.10296 2.88621L6.24759 3.46471C6.61436 4.93174 5.99749 6.46842 4.71817 7.27466ZM9.5209 12.0553L9.23286 12.5503C9.69175 12.7132 10.1733 12.845 10.6771 12.9535C11.2179 13.0699 11.7844 13.1594 12.3761 13.2318L12.3764 13.2318L12.4464 13.2404L12.3853 13.7372L12.4469 13.2405C12.6527 13.266 12.8331 13.1843 12.9862 12.9897C13.1474 12.7847 13.2523 12.4771 13.2519 12.1597L13.251 11.4307C13.2508 11.2066 13.1014 11.01 12.8855 10.9497L12.4056 10.8158C11.3095 10.5098 10.1451 10.9827 9.57269 11.9663L9.5209 12.0553Z"
       fill="currentColor"
     />
   </svg>
diff --git a/frontend/src/components/Icons/PlayIcon.vue b/frontend/src/components/Icons/PlayIcon.vue
index a2c1a03a..b7177171 100644
--- a/frontend/src/components/Icons/PlayIcon.vue
+++ b/frontend/src/components/Icons/PlayIcon.vue
@@ -1,18 +1,16 @@
 <template>
   <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 7.61305 18.0518 5.32387 16.364 3.63604C14.6761 1.94821 12.3869 1 10 1Z"
-      fill="#DEEEFC"
-    />
-    <path
-      d="M13.2581 10.5593L9.02502 13.3556C8.7895 13.5169 8.48212 13.5452 8.21897 13.4297C7.95581 13.3143 7.77698 13.0728 7.75 12.7964V7.20365C7.77698 6.92722 7.95581 6.68568 8.21897 6.57025C8.48212 6.45482 8.7895 6.48309 9.02502 6.64438L13.2581 9.44073C13.4602 9.56041 13.5833 9.77207 13.5833 10C13.5833 10.2279 13.4602 10.4396 13.2581 10.5593Z"
-      fill="#2D95F0"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.76527 2.76476L3.76515 2.76469C3.76518 2.76471 3.76516 2.7647 3.76508 2.76466C3.76417 2.76417 3.75528 2.75942 3.73828 2.7571V9.24215C3.75528 9.23982 3.76418 9.23508 3.76508 9.23459C3.76516 9.23455 3.76518 9.23454 3.76515 9.23456L3.76527 9.23448L8.75611 5.99962L3.76527 2.76476ZM9.5471 6.67863L4.30917 10.0736C4.01166 10.2665 3.61363 10.2975 3.28101 10.1538C2.94839 10.01 2.73828 9.71611 2.73828 9.39463V2.60462C2.73828 2.28313 2.94839 1.98924 3.28101 1.84547C3.61363 1.7017 4.01166 1.73272 4.30917 1.92561L9.5471 5.32062C9.79432 5.48091 9.93982 5.73247 9.93982 5.99962C9.93982 6.26677 9.79432 6.51833 9.5471 6.67863Z"
+      fill="currentColor"
     />
   </svg>
 </template>