diff --git a/src/components/Course/components/Navigation/index.svelte b/src/components/Course/components/Navigation/index.svelte
index 4851deb8..54126d82 100644
--- a/src/components/Course/components/Navigation/index.svelte
+++ b/src/components/Course/components/Navigation/index.svelte
@@ -230,6 +230,7 @@
       value="toggle"
       onClick={() => (show = !show)}
       size={$isMobile ? 'large' : 'small'}
+      color="text-black"
       toolTipProps={$isMobile
         ? {}
         : {
@@ -239,9 +240,9 @@
           }}
     >
       {#if show}
-        <ChevronLeft16 class="carbon-icon" />
+        <ChevronLeft16 />
       {:else}
-        <ChevronRight16 class="carbon-icon" />
+        <ChevronRight16 />
       {/if}
     </IconButton>
   </div>
diff --git a/src/components/CourseLandingPage/components/Editor/Container.svelte b/src/components/CourseLandingPage/components/Editor/Container.svelte
index 0971d12f..8feb8ca7 100644
--- a/src/components/CourseLandingPage/components/Editor/Container.svelte
+++ b/src/components/CourseLandingPage/components/Editor/Container.svelte
@@ -21,6 +21,7 @@
       value="toggle"
       onClick={() => (show = !show)}
       size={$isMobile ? 'large' : 'small'}
+      color="text-black"
       toolTipProps={$isMobile
         ? {}
         : {
@@ -30,9 +31,9 @@
           }}
     >
       {#if show}
-        <ChevronLeft16 class="carbon-icon" />
+        <ChevronLeft16 />
       {:else}
-        <ChevronRight16 class="carbon-icon" />
+        <ChevronRight16 />
       {/if}
     </IconButton>
   </div>
diff --git a/src/routes/courses/[id]/lessons/index.svelte b/src/routes/courses/[id]/lessons/index.svelte
index 0d88ff59..8a87edb5 100644
--- a/src/routes/courses/[id]/lessons/index.svelte
+++ b/src/routes/courses/[id]/lessons/index.svelte
@@ -152,7 +152,7 @@
       {#each $lessons as lesson (lesson.id)}
         <div
           bind:this={ref}
-          class="group relative m-auto rounded-md border-2 border-gray-100 py-3 px-5 mb-4 flex items-center hover:shadow-md shadow-xl transition delay-150 duration-300 ease-in-out"
+          class="group relative m-auto rounded-md border-2 border-gray-100 py-3 px-5 mb-4 flex items-center hover:shadow-md shadow-xl transition delay-150 duration-300 ease-in-out dark:bg-gray-700"
         >
           <!-- Complete or Not complete icon -->
           <div class="absolute -left-6 -top-6 success">
@@ -211,7 +211,7 @@
                   href={isStudent && !lesson.is_complete
                     ? $page.path
                     : '/courses/' + $course.id + '/lessons/' + lesson.id}
-                  class="hover:underline text-black {isStudent &&
+                  class="dark:text-white hover:underline text-black {isStudent &&
                   !lesson.is_complete
                     ? 'cursor-not-allowed'
                     : ''}"
@@ -320,6 +320,5 @@
   }
   .group {
     min-height: 170px;
-    background-color: #fafafa;
   }
 </style>
diff --git a/src/routes/courses/[id]/people.svelte b/src/routes/courses/[id]/people.svelte
index 899ff80d..d0d29849 100644
--- a/src/routes/courses/[id]/people.svelte
+++ b/src/routes/courses/[id]/people.svelte
@@ -128,7 +128,7 @@
         label="Filter by"
         bind:value={filterBy}
         options={ROLES}
-        className="flex items-center"
+        className="flex items-center dark:text-black"
       />
     </div>