diff --git a/src/app/mock-api/pages/activities/data.ts b/src/app/mock-api/pages/activities/data.ts
index 3dde090a..c7c39543 100644
--- a/src/app/mock-api/pages/activities/data.ts
+++ b/src/app/mock-api/pages/activities/data.ts
@@ -4,10 +4,10 @@ import { Activity } from 'app/modules/admin/pages/activities/activities.types';
 
 export const activities: Activity[] = [
     {
-        id           : '493190c9-5b61-4912-afe5-78c21f1044d7',
-        icon         : 'heroicons_solid:star',
-        description  : 'Your submission has been accepted',
-        date         : moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago
+        id          : '493190c9-5b61-4912-afe5-78c21f1044d7',
+        icon        : 'heroicons_solid:star',
+        description : 'Your submission has been accepted',
+        date        : moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago
         extraContent: `<div class="font-bold">Congratulations for your acceptance!</div><br>
                         <div>Hi Brian,<br>Your submission has been accepted and you are ready to move into the next phase. Once you are ready, reach out to me and we will ...</div>`
     },
@@ -39,10 +39,11 @@ export const activities: Activity[] = [
         useRouter    : true
     },
     {
-        id         : 'ef7b95a7-8e8b-4616-9619-130d9533add9',
-        image      : 'assets/images/avatars/male-06.jpg',
-        description: '<strong>Roger Murray</strong> accepted your friend request',
-        date       : moment().subtract(7, 'hours').toISOString() // 7 hours ago
+        id          : 'ef7b95a7-8e8b-4616-9619-130d9533add9',
+        image       : 'assets/images/avatars/male-06.jpg',
+        description : '<strong>Roger Murray</strong> accepted your friend request',
+        date        : moment().subtract(7, 'hours').toISOString(), // 7 hours ago
+        extraContent: `You have <span class="font-semibold">8</span> mutual friends.`
     },
     {
         id         : 'eb8aa470-635e-461d-88e1-23d9ea2a5665',
@@ -55,11 +56,11 @@ export const activities: Activity[] = [
         icon         : 'heroicons_solid:mail',
         description  : 'You have 3 new mails',
         date         : moment().subtract(1, 'day').toISOString(), // 1 day ago
-        extraContent: `<div class="space-y-2">
-                            <div class="font-medium">Please review and sign the attached agreement</div>
-                            <div class="font-medium">Delivery address confirmation</div>
-                            <div class="font-medium">Previous clients and their invoices</div>
-                        </div>`,
+        extraContent : `<ol class="list-decimal list-inside space-y-2">
+                            <li class="font-medium">Please review and sign the attached agreement</li>
+                            <li class="font-medium">Delivery address confirmation</li>
+                            <li class="font-medium">Previous clients and their invoices</li>
+                        </ol>`,
         linkedContent: 'Mailbox',
         link         : '/apps/mailbox',
         useRouter    : true
diff --git a/src/app/modules/admin/pages/activities/activities.component.html b/src/app/modules/admin/pages/activities/activities.component.html
index 1203299a..ffa9b941 100644
--- a/src/app/modules/admin/pages/activities/activities.component.html
+++ b/src/app/modules/admin/pages/activities/activities.component.html
@@ -36,7 +36,7 @@
                                     <div class="relative flex flex-auto">
                                         <!-- Icon -->
                                         <ng-container *ngIf="activity.icon && !activity.image">
-                                            <div class="flex flex-shrink-0 items-center justify-center w-10 h-10 mr-4 rounded-full bg-gray-500">
+                                            <div class="flex flex-shrink-0 items-center justify-center w-10 h-10 mr-4 rounded-full bg-gray-400">
                                                 <mat-icon
                                                     class="icon-size-5 text-white"
                                                     [svgIcon]="activity.icon">
@@ -89,7 +89,7 @@
                                             <!-- Extra content -->
                                             <ng-container *ngIf="activity.extraContent">
                                                 <div
-                                                    class="mt-4 py-4 px-5 rounded bg-gray-200 dark:bg-gray-800"
+                                                    class="mt-4 py-4 px-5 rounded-lg bg-gray-200 dark:bg-gray-800"
                                                     [innerHTML]="activity.extraContent"></div>
                                             </ng-container>
                                         </div>