diff --git a/src/app/modules/admin/apps/scrumboard/board/add-list/add-list.component.html b/src/app/modules/admin/apps/scrumboard/board/add-list/add-list.component.html
index 13940db4..321496b7 100644
--- a/src/app/modules/admin/apps/scrumboard/board/add-list/add-list.component.html
+++ b/src/app/modules/admin/apps/scrumboard/board/add-list/add-list.component.html
@@ -1,7 +1,7 @@
 <div
     class="mt-11 w-64 py-2.5 px-2"
     [class.h-15]="!formVisible">
-    <div class="relative flex w-full h-full overflow-hidden rounded-xl bg-gray-200">
+    <div class="relative flex w-full h-full overflow-hidden rounded-xl bg-gray-200 dark:bg-gray-700">
         <button
             class="absolute inset-0 justify-start w-full px-3 rounded-xl bg-transparent"
             [ngClass]="{'opacity-0 pointer-events-none': formVisible}"
@@ -18,7 +18,7 @@
             [ngClass]="{'opacity-0': !formVisible}"
             [formGroup]="form">
             <input
-                class="w-full py-2 px-3 leading-5 rounded-md shadow-sm border border-gray-300 bg-white focus:border-primary"
+                class="w-full py-2 px-3 leading-5 rounded-md shadow-sm border border-gray-300 bg-white focus:border-primary dark:border-gray-500 dark:focus:border-primary dark:bg-black dark:bg-opacity-5"
                 [autocomplete]="'off'"
                 [formControlName]="'title'"
                 [placeholder]="'Enter list title...'"
diff --git a/src/app/modules/admin/apps/scrumboard/board/board.component.html b/src/app/modules/admin/apps/scrumboard/board/board.component.html
index e212afb3..6708c41f 100644
--- a/src/app/modules/admin/apps/scrumboard/board/board.component.html
+++ b/src/app/modules/admin/apps/scrumboard/board/board.component.html
@@ -57,7 +57,7 @@
                         <div
                             class="flex items-center justify-between"
                             cdkDragHandle>
-                            <div class="flex items-center w-full py-2 px-3 rounded-md cursor-text border border-transparent focus-within:bg-white focus-within:shadow-sm focus-within:border-primary">
+                            <div class="flex items-center w-full py-2 px-3 rounded-md cursor-text border border-transparent focus-within:bg-white focus-within:shadow-sm focus-within:border-primary dark:focus-within:bg-gray-900">
                                 <input
                                     class="w-full font-medium leading-5 bg-transparent"
                                     [spellcheck]="'false'"
@@ -66,7 +66,7 @@
                                     (keydown.enter)="listTitleInput.blur()"
                                     #listTitleInput>
                             </div>
-                            <div class="flex items-center justify-center min-w-6 ml-4 text-sm font-semibold leading-6 rounded-full bg-gray-300 text-secondary">
+                            <div class="flex items-center justify-center min-w-6 ml-4 text-sm font-semibold leading-6 rounded-full bg-gray-300 text-secondary dark:bg-gray-700">
                                 {{list.cards.length}}
                             </div>
                             <div class="ml-1">
@@ -100,7 +100,7 @@
                         </div>
 
                         <!-- Cards -->
-                        <div class="mt-2 rounded-xl bg-gray-400 bg-opacity-12">
+                        <div class="mt-2 rounded-xl bg-gray-400 bg-opacity-12 dark:bg-transparent dark:border">
                             <div
                                 [id]="list.id"
                                 class="p-3 pb-0"
diff --git a/src/app/modules/admin/apps/scrumboard/boards/boards.component.html b/src/app/modules/admin/apps/scrumboard/boards/boards.component.html
index c26bc342..7a6019d5 100644
--- a/src/app/modules/admin/apps/scrumboard/boards/boards.component.html
+++ b/src/app/modules/admin/apps/scrumboard/boards/boards.component.html
@@ -16,7 +16,7 @@
                 <a
                     class="flex flex-col items-start w-56 p-6 rounded-lg shadow bg-card rounded-lg hover:shadow-xl transition-shadow duration-150 ease-in-out"
                     [routerLink]="[board.id]">
-                    <div class="flex items-center justify-center p-4 rounded-full bg-primary-50 text-primary-700">
+                    <div class="flex items-center justify-center p-4 rounded-full bg-primary-50 text-primary-700 dark:bg-primary dark:text-on-primary">
                         <mat-icon
                             class="text-current"
                             [svgIcon]="board.icon"></mat-icon>
@@ -31,12 +31,12 @@
                         <div class="flex items-center mt-6 -space-x-1.5">
                             <ng-container *ngFor="let member of board.members.slice(0, 5); trackBy: trackByFn">
                                 <img
-                                    class="flex-0 w-8 h-8 rounded-full ring ring-offset-1 ring-bg-card ring-offset-bg-card object-cover"
+                                    class="flex-0 w-8 h-8 rounded-full ring ring-offset-1 ring-bg-card ring-offset-transparent object-cover"
                                     [src]="member.avatar"
                                     alt="Member avatar">
                             </ng-container>
                             <ng-container *ngIf="board.members.length > 5">
-                                <div class="flex flex-0 items-center justify-center w-8 h-8 rounded-full ring ring-offset-1 ring-bg-card ring-offset-bg-card bg-gray-200 text-gray-500">
+                                <div class="flex flex-0 items-center justify-center w-8 h-8 rounded-full ring ring-offset-1 ring-bg-card ring-offset-transparent bg-gray-200 text-gray-500">
                                     <div class="text-md font-semibold">
                                         +{{ board.members.slice(5).length }}
                                     </div>