diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index 5a6bc6fc..21e993bf 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -9,308 +9,250 @@
     :whatsappBox="whatsappBox"
     :modalRef="modalRef"
   />
-  <div
-    v-if="all_activities?.loading"
-    class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
-  >
-    <LoadingIndicator class="h-6 w-6" />
-    <span>{{ __('Loading...') }}</span>
-  </div>
   <FadedScrollableDiv
-    v-else-if="title == 'WhatsApp' && whatsappMessages.data?.length"
     :maskHeight="30"
-    class="activities flex-1 overflow-y-auto"
-  >
-    <WhatsAppArea
-      class="px-4 sm:px-10"
-      v-model="whatsappMessages"
-      v-model:reply="replyMessage"
-      :messages="whatsappMessages.data"
-    />
-  </FadedScrollableDiv>
-  <FadedScrollableDiv
-    v-else-if="activities?.length"
-    :maskHeight="30"
-    class="activities flex-1 overflow-y-auto"
+    class="flex flex-col flex-1 overflow-y-auto"
   >
     <div
-      v-if="title == 'Notes'"
-      class="grid grid-cols-1 gap-4 px-4 pb-3 sm:px-10 sm:pb-5 lg:grid-cols-2 xl:grid-cols-3"
+      v-if="all_activities?.loading"
+      class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
     >
-      <div v-for="note in activities" @click="modalRef.showNote(note)">
-        <NoteArea :note="note" v-model="all_activities" />
-      </div>
+      <LoadingIndicator class="h-6 w-6" />
+      <span>{{ __('Loading...') }}</span>
     </div>
-    <div v-else-if="title == 'Comments'" class="pb-5">
-      <div v-for="(comment, i) in activities">
-        <div
-          class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 px-4 sm:gap-4 sm:px-10"
-        >
-          <div
-            class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
-            :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
-          >
-            <div class="z-10 flex h-8 w-7 items-center justify-center bg-white">
-              <CommentIcon class="text-gray-800" />
-            </div>
-          </div>
-          <CommentArea class="mb-4" :activity="comment" />
+    <div
+      v-else-if="
+        activities?.length ||
+        (whatsappMessages.data?.length && title == 'WhatsApp')
+      "
+      class="activities"
+    >
+      <div v-if="title == 'WhatsApp' && whatsappMessages.data?.length">
+        <WhatsAppArea
+          class="px-4 sm:px-10"
+          v-model="whatsappMessages"
+          v-model:reply="replyMessage"
+          :messages="whatsappMessages.data"
+        />
+      </div>
+      <div
+        v-else-if="title == 'Notes'"
+        class="grid grid-cols-1 gap-4 px-4 pb-3 sm:px-10 sm:pb-5 lg:grid-cols-2 xl:grid-cols-3"
+      >
+        <div v-for="note in activities" @click="modalRef.showNote(note)">
+          <NoteArea :note="note" v-model="all_activities" />
         </div>
       </div>
-    </div>
-    <div v-else-if="title == 'Tasks'" class="px-4 pb-3 sm:px-10 sm:pb-5">
-      <TaskArea
-        v-model="all_activities"
-        v-model:doc="doc"
-        :modalRef="modalRef"
-        :tasks="activities"
-        :doctype="doctype"
-      />
-    </div>
-    <div v-else-if="title == 'Calls'" class="activity">
-      <div v-for="(call, i) in activities">
-        <div
-          class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-4 sm:px-10"
-        >
+      <div v-else-if="title == 'Comments'" class="pb-5">
+        <div v-for="(comment, i) in activities">
           <div
-            class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
-            :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
+            class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 px-4 sm:gap-4 sm:px-10"
           >
             <div
-              class="z-10 flex h-8 w-7 items-center justify-center bg-white text-gray-800"
-            >
-              <MissedCallIcon
-                v-if="call.status == 'No Answer'"
-                class="text-red-600"
-              />
-              <DeclinedCallIcon v-else-if="call.status == 'Busy'" />
-              <component
-                v-else
-                :is="
-                  call.type == 'Incoming' ? InboundCallIcon : OutboundCallIcon
-                "
-              />
-            </div>
-          </div>
-          <CallArea class="mb-4" :activity="call" />
-        </div>
-      </div>
-    </div>
-    <div
-      v-else
-      v-for="(activity, i) in activities"
-      class="activity px-4 sm:px-10"
-      :class="
-        title == 'Activity'
-          ? 'grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 sm:gap-4'
-          : ''
-      "
-    >
-      <div
-        v-if="title == 'Activity'"
-        class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-gray-200"
-        :class="[i != activities.length - 1 ? 'before:h-full' : 'before:h-4']"
-      >
-        <div
-          class="z-10 flex h-7 w-7 items-center justify-center bg-white"
-          :class="{
-            '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),
-          }"
-        >
-          <UserAvatar
-            v-if="activity.activity_type == 'communication'"
-            :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"
-            :class="
-              ['added', 'removed', 'changed'].includes(activity.activity_type)
-                ? 'text-gray-500'
-                : 'text-gray-800'
-            "
-          />
-        </div>
-      </div>
-      <div v-if="activity.activity_type == 'communication'" class="pb-5 mt-px">
-        <EmailArea :activity="activity" :emailBox="emailBox" />
-      </div>
-      <div
-        class="mb-4"
-        :id="activity.name"
-        v-else-if="activity.activity_type == 'comment'"
-      >
-        <CommentArea :activity="activity" />
-      </div>
-      <div
-        v-else-if="
-          activity.activity_type == 'incoming_call' ||
-          activity.activity_type == 'outgoing_call'
-        "
-        class="mb-4"
-      >
-        <CallArea :activity="activity" />
-      </div>
-      <div v-else class="mb-4 flex flex-col gap-2 py-1.5">
-        <div class="flex items-center justify-stretch gap-2 text-base">
-          <div
-            v-if="activity.other_versions"
-            class="inline-flex gap-1.5 text-gray-800 font-medium"
-          >
-            <div class="inline-flex gap-1">
-              <span>{{ activity.show_others ? __('Hide') : __('Show') }}</span>
-              <span> +{{ activity.other_versions.length + 1 }} </span>
-              <span>{{ __('changes from') }}</span>
-              <span>{{ activity.owner_name }}</span>
-            </div>
-            <Button
-              class="!size-4"
-              variant="ghost"
-              @click="activity.show_others = !activity.show_others"
-            >
-              <template #icon>
-                <SelectIcon />
-              </template>
-            </Button>
-          </div>
-          <div
-            v-else
-            class="inline-flex items-center flex-wrap gap-1 text-gray-600"
-          >
-            <span class="font-medium text-gray-800">
-              {{ activity.owner_name }}
-            </span>
-            <span v-if="activity.type">{{ __(activity.type) }}</span>
-            <span
-              v-if="activity.data.field_label"
-              class="max-w-xs truncate font-medium text-gray-800"
-            >
-              {{ __(activity.data.field_label) }}
-            </span>
-            <span v-if="activity.value">{{ __(activity.value) }}</span>
-            <span
-              v-if="activity.data.old_value"
-              class="max-w-xs font-medium text-gray-800"
+              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
+              :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
             >
               <div
-                class="flex items-center gap-1"
-                v-if="activity.options == 'User'"
+                class="z-10 flex h-8 w-7 items-center justify-center bg-white"
               >
-                <UserAvatar :user="activity.data.old_value" size="xs" />
-                {{ getUser(activity.data.old_value).full_name }}
+                <CommentIcon class="text-gray-800" />
               </div>
-              <div class="truncate" v-else>
-                {{ activity.data.old_value }}
-              </div>
-            </span>
-            <span v-if="activity.to">{{ __('to') }}</span>
-            <span
-              v-if="activity.data.value"
-              class="max-w-xs font-medium text-gray-800"
-            >
-              <div
-                class="flex items-center gap-1"
-                v-if="activity.options == 'User'"
-              >
-                <UserAvatar :user="activity.data.value" size="xs" />
-                {{ getUser(activity.data.value).full_name }}
-              </div>
-              <div class="truncate" v-else>
-                {{ activity.data.value }}
-              </div>
-            </span>
-          </div>
-
-          <div class="ml-auto whitespace-nowrap">
-            <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
-              <div class="text-sm text-gray-600">
-                {{ __(timeAgo(activity.creation)) }}
-              </div>
-            </Tooltip>
+            </div>
+            <CommentArea class="mb-4" :activity="comment" />
           </div>
         </div>
-        <div
-          v-if="activity.other_versions && activity.show_others"
-          class="flex flex-col gap-0.5"
-        >
+      </div>
+      <div v-else-if="title == 'Tasks'" class="px-4 pb-3 sm:px-10 sm:pb-5">
+        <TaskArea
+          v-model="all_activities"
+          v-model:doc="doc"
+          :modalRef="modalRef"
+          :tasks="activities"
+          :doctype="doctype"
+        />
+      </div>
+      <div v-else-if="title == 'Calls'" class="activity">
+        <div v-for="(call, i) in activities">
           <div
-            v-for="activity in [activity, ...activity.other_versions]"
-            class="flex items-start justify-stretch gap-2 py-1.5 text-base"
+            class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-4 sm:px-10"
           >
-            <div class="flex items-start gap-1 text-gray-600">
-              <div class="flex flex-1 items-center gap-1">
-                <span
-                  v-if="activity.data.field_label"
-                  class="max-w-xs truncate text-gray-600"
-                >
-                  {{ __(activity.data.field_label) }}
-                </span>
-                <FeatherIcon
-                  name="arrow-right"
-                  class="mx-1 h-4 w-4 text-gray-600"
+            <div
+              class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
+              :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
+            >
+              <div
+                class="z-10 flex h-8 w-7 items-center justify-center bg-white text-gray-800"
+              >
+                <MissedCallIcon
+                  v-if="call.status == 'No Answer'"
+                  class="text-red-600"
+                />
+                <DeclinedCallIcon v-else-if="call.status == 'Busy'" />
+                <component
+                  v-else
+                  :is="
+                    call.type == 'Incoming' ? InboundCallIcon : OutboundCallIcon
+                  "
                 />
               </div>
-              <div class="flex flex-wrap items-center gap-1">
-                <span v-if="activity.type">{{
-                  startCase(__(activity.type))
+            </div>
+            <CallArea class="mb-4" :activity="call" />
+          </div>
+        </div>
+      </div>
+      <div
+        v-else
+        v-for="(activity, i) in activities"
+        class="activity px-4 sm:px-10"
+        :class="
+          title == 'Activity'
+            ? 'grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 sm:gap-4'
+            : ''
+        "
+      >
+        <div
+          v-if="title == 'Activity'"
+          class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-gray-200"
+          :class="[i != activities.length - 1 ? 'before:h-full' : 'before:h-4']"
+        >
+          <div
+            class="z-10 flex h-7 w-7 items-center justify-center bg-white"
+            :class="{
+              '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),
+            }"
+          >
+            <UserAvatar
+              v-if="activity.activity_type == 'communication'"
+              :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"
+              :class="
+                ['added', 'removed', 'changed'].includes(activity.activity_type)
+                  ? 'text-gray-500'
+                  : 'text-gray-800'
+              "
+            />
+          </div>
+        </div>
+        <div
+          v-if="activity.activity_type == 'communication'"
+          class="pb-5 mt-px"
+        >
+          <EmailArea :activity="activity" :emailBox="emailBox" />
+        </div>
+        <div
+          class="mb-4"
+          :id="activity.name"
+          v-else-if="activity.activity_type == 'comment'"
+        >
+          <CommentArea :activity="activity" />
+        </div>
+        <div
+          v-else-if="
+            activity.activity_type == 'incoming_call' ||
+            activity.activity_type == 'outgoing_call'
+          "
+          class="mb-4"
+        >
+          <CallArea :activity="activity" />
+        </div>
+        <div v-else class="mb-4 flex flex-col gap-2 py-1.5">
+          <div class="flex items-center justify-stretch gap-2 text-base">
+            <div
+              v-if="activity.other_versions"
+              class="inline-flex gap-1.5 text-gray-800 font-medium"
+            >
+              <div class="inline-flex gap-1">
+                <span>{{
+                  activity.show_others ? __('Hide') : __('Show')
                 }}</span>
-                <span
-                  v-if="activity.data.old_value"
-                  class="max-w-xs font-medium text-gray-800"
-                >
-                  <div
-                    class="flex items-center gap-1"
-                    v-if="activity.options == 'User'"
-                  >
-                    <UserAvatar :user="activity.data.old_value" size="xs" />
-                    {{ getUser(activity.data.old_value).full_name }}
-                  </div>
-                  <div class="truncate" v-else>
-                    {{ activity.data.old_value }}
-                  </div>
-                </span>
-                <span v-if="activity.to">{{ __('to') }}</span>
-                <span
-                  v-if="activity.data.value"
-                  class="max-w-xs font-medium text-gray-800"
-                >
-                  <div
-                    class="flex items-center gap-1"
-                    v-if="activity.options == 'User'"
-                  >
-                    <UserAvatar :user="activity.data.value" size="xs" />
-                    {{ getUser(activity.data.value).full_name }}
-                  </div>
-                  <div class="truncate" v-else>
-                    {{ activity.data.value }}
-                  </div>
-                </span>
+                <span> +{{ activity.other_versions.length + 1 }} </span>
+                <span>{{ __('changes from') }}</span>
+                <span>{{ activity.owner_name }}</span>
               </div>
+              <Button
+                class="!size-4"
+                variant="ghost"
+                @click="activity.show_others = !activity.show_others"
+              >
+                <template #icon>
+                  <SelectIcon />
+                </template>
+              </Button>
+            </div>
+            <div
+              v-else
+              class="inline-flex items-center flex-wrap gap-1 text-gray-600"
+            >
+              <span class="font-medium text-gray-800">
+                {{ activity.owner_name }}
+              </span>
+              <span v-if="activity.type">{{ __(activity.type) }}</span>
+              <span
+                v-if="activity.data.field_label"
+                class="max-w-xs truncate font-medium text-gray-800"
+              >
+                {{ __(activity.data.field_label) }}
+              </span>
+              <span v-if="activity.value">{{ __(activity.value) }}</span>
+              <span
+                v-if="activity.data.old_value"
+                class="max-w-xs font-medium text-gray-800"
+              >
+                <div
+                  class="flex items-center gap-1"
+                  v-if="activity.options == 'User'"
+                >
+                  <UserAvatar :user="activity.data.old_value" size="xs" />
+                  {{ getUser(activity.data.old_value).full_name }}
+                </div>
+                <div class="truncate" v-else>
+                  {{ activity.data.old_value }}
+                </div>
+              </span>
+              <span v-if="activity.to">{{ __('to') }}</span>
+              <span
+                v-if="activity.data.value"
+                class="max-w-xs font-medium text-gray-800"
+              >
+                <div
+                  class="flex items-center gap-1"
+                  v-if="activity.options == 'User'"
+                >
+                  <UserAvatar :user="activity.data.value" size="xs" />
+                  {{ getUser(activity.data.value).full_name }}
+                </div>
+                <div class="truncate" v-else>
+                  {{ activity.data.value }}
+                </div>
+              </span>
             </div>
 
             <div class="ml-auto whitespace-nowrap">
@@ -321,59 +263,131 @@
               </Tooltip>
             </div>
           </div>
+          <div
+            v-if="activity.other_versions && activity.show_others"
+            class="flex flex-col gap-0.5"
+          >
+            <div
+              v-for="activity in [activity, ...activity.other_versions]"
+              class="flex items-start justify-stretch gap-2 py-1.5 text-base"
+            >
+              <div class="flex items-start gap-1 text-gray-600">
+                <div class="flex flex-1 items-center gap-1">
+                  <span
+                    v-if="activity.data.field_label"
+                    class="max-w-xs truncate text-gray-600"
+                  >
+                    {{ __(activity.data.field_label) }}
+                  </span>
+                  <FeatherIcon
+                    name="arrow-right"
+                    class="mx-1 h-4 w-4 text-gray-600"
+                  />
+                </div>
+                <div class="flex flex-wrap items-center gap-1">
+                  <span v-if="activity.type">{{
+                    startCase(__(activity.type))
+                  }}</span>
+                  <span
+                    v-if="activity.data.old_value"
+                    class="max-w-xs font-medium text-gray-800"
+                  >
+                    <div
+                      class="flex items-center gap-1"
+                      v-if="activity.options == 'User'"
+                    >
+                      <UserAvatar :user="activity.data.old_value" size="xs" />
+                      {{ getUser(activity.data.old_value).full_name }}
+                    </div>
+                    <div class="truncate" v-else>
+                      {{ activity.data.old_value }}
+                    </div>
+                  </span>
+                  <span v-if="activity.to">{{ __('to') }}</span>
+                  <span
+                    v-if="activity.data.value"
+                    class="max-w-xs font-medium text-gray-800"
+                  >
+                    <div
+                      class="flex items-center gap-1"
+                      v-if="activity.options == 'User'"
+                    >
+                      <UserAvatar :user="activity.data.value" size="xs" />
+                      {{ getUser(activity.data.value).full_name }}
+                    </div>
+                    <div class="truncate" v-else>
+                      {{ activity.data.value }}
+                    </div>
+                  </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)) }}
+                  </div>
+                </Tooltip>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
+    <div
+      v-else
+      class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
+    >
+      <component :is="emptyTextIcon" class="h-10 w-10" />
+      <span>{{ __(emptyText) }}</span>
+      <Button
+        v-if="title == 'Calls'"
+        :label="__('Make a Call')"
+        @click="makeCall(doc.data.mobile_no)"
+      />
+      <Button
+        v-else-if="title == 'Notes'"
+        :label="__('Create Note')"
+        @click="modalRef.showNote()"
+      />
+      <Button
+        v-else-if="title == 'Emails'"
+        :label="__('New Email')"
+        @click="emailBox.show = true"
+      />
+      <Button
+        v-else-if="title == 'Comments'"
+        :label="__('New Comment')"
+        @click="emailBox.showComment = true"
+      />
+      <Button
+        v-else-if="title == 'Tasks'"
+        :label="__('Create Task')"
+        @click="modalRef.showTask()"
+      />
+    </div>
   </FadedScrollableDiv>
-  <div
-    v-else
-    class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
-  >
-    <component :is="emptyTextIcon" class="h-10 w-10" />
-    <span>{{ __(emptyText) }}</span>
-    <Button
-      v-if="title == 'Calls'"
-      :label="__('Make a Call')"
-      @click="makeCall(doc.data.mobile_no)"
+  <div>
+    <CommunicationArea
+      ref="emailBox"
+      v-if="['Emails', 'Comments', 'Activity'].includes(title)"
+      v-model="doc"
+      v-model:reload="reload_email"
+      :doctype="doctype"
+      @scroll="scroll"
     />
-    <Button
-      v-else-if="title == 'Notes'"
-      :label="__('Create Note')"
-      @click="modalRef.showNote()"
-    />
-    <Button
-      v-else-if="title == 'Emails'"
-      :label="__('New Email')"
-      @click="emailBox.show = true"
-    />
-    <Button
-      v-else-if="title == 'Comments'"
-      :label="__('New Comment')"
-      @click="emailBox.showComment = true"
-    />
-    <Button
-      v-else-if="title == 'Tasks'"
-      :label="__('Create Task')"
-      @click="modalRef.showTask()"
+    <WhatsAppBox
+      ref="whatsappBox"
+      v-if="title == 'WhatsApp'"
+      v-model="doc"
+      v-model:reply="replyMessage"
+      v-model:whatsapp="whatsappMessages"
+      :doctype="doctype"
+      @scroll="scroll"
     />
   </div>
-  <CommunicationArea
-    ref="emailBox"
-    v-if="['Emails', 'Comments', 'Activity'].includes(title)"
-    v-model="doc"
-    v-model:reload="reload_email"
-    :doctype="doctype"
-    @scroll="scroll"
-  />
-  <WhatsAppBox
-    ref="whatsappBox"
-    v-if="title == 'WhatsApp'"
-    v-model="doc"
-    v-model:reply="replyMessage"
-    v-model:whatsapp="whatsappMessages"
-    :doctype="doctype"
-    @scroll="scroll"
-  />
   <WhatsappTemplateSelectorModal
     v-if="whatsappEnabled"
     v-model="showWhatsappTemplates"