diff --git a/src/app/layout/common/messages/messages.component.html b/src/app/layout/common/messages/messages.component.html
index 1fc9bb2c..e7666b4b 100644
--- a/src/app/layout/common/messages/messages.component.html
+++ b/src/app/layout/common/messages/messages.component.html
@@ -144,9 +144,9 @@
             <!-- No messages -->
             <ng-container *ngIf="!messages || !messages.length">
                 <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100">
+                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
                         <mat-icon
-                            class="text-primary-500-700"
+                            class="text-primary-700 dark:text-primary-50"
                             [svgIcon]="'heroicons_outline:inbox'"></mat-icon>
                     </div>
                     <div class="mt-5 text-2xl font-semibold tracking-tight">No messages</div>
diff --git a/src/app/layout/common/notifications/notifications.component.html b/src/app/layout/common/notifications/notifications.component.html
index 23788119..d91bf589 100644
--- a/src/app/layout/common/notifications/notifications.component.html
+++ b/src/app/layout/common/notifications/notifications.component.html
@@ -145,9 +145,9 @@
             <!-- No notifications -->
             <ng-container *ngIf="!notifications || !notifications.length">
                 <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100">
+                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
                         <mat-icon
-                            class="text-primary-500-700"
+                            class="text-primary-700 dark:text-primary-50"
                             [svgIcon]="'heroicons_outline:bell'"></mat-icon>
                     </div>
                     <div class="mt-5 text-2xl font-semibold tracking-tight">No notifications</div>
diff --git a/src/app/layout/common/shortcuts/shortcuts.component.html b/src/app/layout/common/shortcuts/shortcuts.component.html
index 8ff162fd..1ad750c7 100644
--- a/src/app/layout/common/shortcuts/shortcuts.component.html
+++ b/src/app/layout/common/shortcuts/shortcuts.component.html
@@ -148,9 +148,9 @@
                 <!-- No shortcuts -->
                 <ng-container *ngIf="!shortcuts || !shortcuts.length">
                     <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                        <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100">
+                        <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
                             <mat-icon
-                                class="text-primary-500-700"
+                                class="text-primary-700 dark:text-primary-50"
                                 [svgIcon]="'heroicons_outline:bookmark'"></mat-icon>
                         </div>
                         <div class="mt-5 text-2xl font-semibold tracking-tight">No shortcuts</div>