diff --git a/app/src/main/res/color/checkbox_text_color.xml b/app/src/main/res/color/checkbox_text_color.xml
index dff1ece24e9..0224c0f546d 100644
--- a/app/src/main/res/color/checkbox_text_color.xml
+++ b/app/src/main/res/color/checkbox_text_color.xml
@@ -1,12 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-  <item android:color="@color/oppia_primary_text"
+  <item android:color="@color/component_color_mark_chapters_completed_checkbox_text_unselected_state_color"
     android:alpha="0.38"
     android:state_checked="false"
     android:state_enabled="false"/>
-  <item android:color="@color/oppia_primary_text"
+  <item android:color="@color/component_color_mark_chapters_completed_checkbox_text_unselected_state_color"
     android:state_enabled="true"
     android:state_checked="false"/>
-  <item android:color="@color/oppia_primary_text"
+  <item android:color="@color/component_color_mark_chapters_completed_checkbox_text_selected_state_color"
     android:state_checked="true"/>
 </selector>
diff --git a/app/src/main/res/drawable/ic_check_box_checked.xml b/app/src/main/res/drawable/ic_check_box_checked.xml
index 85ca608c033..f18efa940af 100644
--- a/app/src/main/res/drawable/ic_check_box_checked.xml
+++ b/app/src/main/res/drawable/ic_check_box_checked.xml
@@ -1,4 +1,4 @@
-<vector android:height="24dp" android:tint="#008577"
+<vector android:height="24dp" android:tint="@color/component_color_mark_chapters_completed_checkbox_selected_state_color"
     android:viewportHeight="24.0" android:viewportWidth="24.0"
     android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
     <path android:fillColor="#FF000000" android:pathData="M19,3L5,3c-1.11,0 -2,0.9 -2,2v14c0,1.1 0.89,2 2,2h14c1.11,0 2,-0.9 2,-2L21,5c0,-1.1 -0.89,-2 -2,-2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z"/>
diff --git a/app/src/main/res/layout/mark_chapters_completed_fragment.xml b/app/src/main/res/layout/mark_chapters_completed_fragment.xml
index 3389d5e652b..e7bbd5fe6fb 100644
--- a/app/src/main/res/layout/mark_chapters_completed_fragment.xml
+++ b/app/src/main/res/layout/mark_chapters_completed_fragment.xml
@@ -32,7 +32,7 @@
         android:id="@+id/mark_chapters_completed_toolbar"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
-        android:background="@color/oppia_primary"
+        android:background="@color/component_color_mark_chapters_completed_primary_toolbar_color"
         android:textSize="20sp"
         app:navigationContentDescription="@string/navigate_up"
         app:navigationIcon="?attr/homeAsUpIndicator"
@@ -44,7 +44,7 @@
       <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/oppia_primary">
+        android:background="@color/component_color_mark_chapters_completed_container_background_color">
 
         <androidx.constraintlayout.widget.ConstraintLayout
           android:id="@+id/mark_chapters_completed_all_check_box_container"
@@ -63,7 +63,7 @@
             android:layout_height="wrap_content"
             android:layout_marginStart="20dp"
             android:text="@string/modify_lesson_progress_all"
-            android:textColor="@color/color_def_white"
+            android:textColor="@color/component_color_mark_chapters_completed_text_all_color"
             app:layout_constraintBottom_toTopOf="@id/mark_chapters_completed_all_check_box"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
@@ -93,7 +93,7 @@
           android:minWidth="48dp"
           android:minHeight="48dp"
           android:text="@string/modify_lesson_progress_mark_completed_uppercase"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_mark_chapters_completed_text_mark_completed_color"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
@@ -112,7 +112,7 @@
         android:id="@+id/mark_chapters_completed_recycler_view"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/profile_edit_background"
+        android:background="@color/component_color_mark_chapters_completed_background_color"
         android:clipToPadding="false"
         android:overScrollMode="never"
         android:paddingBottom="40dp"
diff --git a/app/src/main/res/layout/mark_chapters_completed_story_summary_view.xml b/app/src/main/res/layout/mark_chapters_completed_story_summary_view.xml
index fa69fa12717..186998e2ba1 100644
--- a/app/src/main/res/layout/mark_chapters_completed_story_summary_view.xml
+++ b/app/src/main/res/layout/mark_chapters_completed_story_summary_view.xml
@@ -18,13 +18,13 @@
       android:id="@+id/mark_chapters_completed_story_name_text_view"
       style="@style/Subtitle1ViewStart"
       android:layout_width="match_parent"
-      android:background="@color/color_def_white"
+      android:background="@color/component_color_mark_chapters_completed_subtext_heading_background_color"
       android:paddingStart="16dp"
       android:paddingTop="20dp"
       android:paddingEnd="16dp"
       android:paddingBottom="20dp"
       android:text="@{viewModel.storyName}"
-      android:textColor="@color/oppia_primary_text_dark"
+      android:textColor="@color/component_color_mark_chapters_completed_subtext_heading_color"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />
diff --git a/app/src/main/res/layout/mark_stories_completed_fragment.xml b/app/src/main/res/layout/mark_stories_completed_fragment.xml
index d657f17009d..1bae6f2cfff 100644
--- a/app/src/main/res/layout/mark_stories_completed_fragment.xml
+++ b/app/src/main/res/layout/mark_stories_completed_fragment.xml
@@ -32,7 +32,7 @@
         android:id="@+id/mark_stories_completed_toolbar"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
-        android:background="@color/oppia_primary"
+        android:background="@color/component_color_mark_stories_completed_primary_toolbar_color"
         android:textSize="20sp"
         app:navigationContentDescription="@string/navigate_up"
         app:navigationIcon="?attr/homeAsUpIndicator"
@@ -44,7 +44,7 @@
       <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/oppia_primary">
+        android:background="@color/component_color_mark_stories_completed_container_background_color">
 
         <androidx.constraintlayout.widget.ConstraintLayout
           android:id="@+id/mark_stories_completed_all_check_box_container"
@@ -63,7 +63,7 @@
             android:layout_height="wrap_content"
             android:layout_marginStart="20dp"
             android:text="@string/modify_lesson_progress_all"
-            android:textColor="@color/color_def_white"
+            android:textColor="@color/component_color_mark_stories_completed_text_all_color"
             app:layout_constraintBottom_toTopOf="@id/mark_stories_completed_all_check_box"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
@@ -93,7 +93,7 @@
           android:minWidth="48dp"
           android:minHeight="48dp"
           android:text="@string/modify_lesson_progress_mark_completed_uppercase"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_mark_stories_completed_text_mark_completed_color"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
@@ -112,7 +112,7 @@
         android:id="@+id/mark_stories_completed_recycler_view"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/profile_edit_background"
+        android:background="@color/component_color_mark_stories_completed_background_color"
         android:clipToPadding="false"
         android:overScrollMode="never"
         android:paddingVertical="40dp"
diff --git a/app/src/main/res/layout/mark_stories_completed_story_summary_view.xml b/app/src/main/res/layout/mark_stories_completed_story_summary_view.xml
index 94b41e448d3..e9205d0c07f 100644
--- a/app/src/main/res/layout/mark_stories_completed_story_summary_view.xml
+++ b/app/src/main/res/layout/mark_stories_completed_story_summary_view.xml
@@ -33,7 +33,7 @@
       android:paddingBottom="26dp"
       android:text="@{viewModel.storySummary.storyName}"
       android:textAlignment="viewStart"
-      android:textColor="@color/oppia_primary_text"
+      android:textColor="@color/checkbox_text_color"
       android:textSize="16sp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/layout/mark_topics_completed_fragment.xml b/app/src/main/res/layout/mark_topics_completed_fragment.xml
index 01ec032cc88..00ea5dda2ba 100644
--- a/app/src/main/res/layout/mark_topics_completed_fragment.xml
+++ b/app/src/main/res/layout/mark_topics_completed_fragment.xml
@@ -32,7 +32,7 @@
         android:id="@+id/mark_topics_completed_toolbar"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
-        android:background="@color/oppia_primary"
+        android:background="@color/component_color_mark_topics_completed_primary_toolbar_color"
         android:textSize="20sp"
         app:navigationContentDescription="@string/navigate_up"
         app:navigationIcon="?attr/homeAsUpIndicator"
@@ -44,7 +44,7 @@
       <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/oppia_primary">
+        android:background="@color/component_color_mark_topics_completed_container_background_color">
 
         <androidx.constraintlayout.widget.ConstraintLayout
           android:id="@+id/mark_topics_completed_all_check_box_container"
@@ -63,7 +63,7 @@
             android:layout_height="wrap_content"
             android:layout_marginStart="20dp"
             android:text="@string/modify_lesson_progress_all"
-            android:textColor="@color/color_def_white"
+            android:textColor="@color/component_color_mark_topics_completed_text_all_color"
             app:layout_constraintBottom_toTopOf="@id/mark_topics_completed_all_check_box"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
@@ -93,7 +93,7 @@
           android:minWidth="48dp"
           android:minHeight="48dp"
           android:text="@string/modify_lesson_progress_mark_completed_uppercase"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_mark_topics_completed_text_mark_completed_color"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
@@ -112,7 +112,7 @@
         android:id="@+id/mark_topics_completed_recycler_view"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/profile_edit_background"
+        android:background="@color/component_color_mark_topics_completed_background_color"
         android:clipToPadding="false"
         android:overScrollMode="never"
         android:paddingVertical="40dp"
diff --git a/app/src/main/res/layout/mark_topics_completed_topic_view.xml b/app/src/main/res/layout/mark_topics_completed_topic_view.xml
index 846260a5647..15eb7c66fbf 100644
--- a/app/src/main/res/layout/mark_topics_completed_topic_view.xml
+++ b/app/src/main/res/layout/mark_topics_completed_topic_view.xml
@@ -33,7 +33,7 @@
       android:paddingBottom="26dp"
       android:text="@{viewModel.topic.name}"
       android:textAlignment="viewStart"
-      android:textColor="@color/oppia_primary_text"
+      android:textColor="@color/checkbox_text_color"
       android:textSize="16sp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/values-night/color_palette.xml b/app/src/main/res/values-night/color_palette.xml
index 8778915452d..822352d053f 100644
--- a/app/src/main/res/values-night/color_palette.xml
+++ b/app/src/main/res/values-night/color_palette.xml
@@ -82,4 +82,10 @@
   <color name="color_palette_progress_bar_gradient_center_color">@color/color_def_dark_mode_question_player_progress_bar_gradient_center</color>
   <color name="color_palette_progress_bar_gradient_end_color">@color/color_def_dark_mode_question_player_progress_bar_gradient_end</color>
   <color name="color_palette_submit_text_active_color">@color/color_def_white</color>
+  <color name="color_palette_mark_chapters_background_color">@color/color_def_oppia_light_black</color>
+  <color name="color_palette_checkbox_text_unselected_state_color">@color/color_def_white</color>
+  <color name="color_palette_checkbox_text_selected_state_color">@color/color_def_oppia_turquoise</color>
+  <color name="color_palette_checkbox_selected_state_color">@color/color_def_oppia_turquoise</color>
+  <color name="color_palette_mark_completed_text_color">@color/color_def_white</color>
+  <color name="color_palette_mark_completed_all_text_color">@color/color_def_white</color>
 </resources>
diff --git a/app/src/main/res/values/color_defs.xml b/app/src/main/res/values/color_defs.xml
index 078786856cd..3f420995410 100644
--- a/app/src/main/res/values/color_defs.xml
+++ b/app/src/main/res/values/color_defs.xml
@@ -80,4 +80,6 @@
   <color name="color_def_dark_mode_question_player_progress_bar_gradient_start">#23272A00</color>
   <color name="color_def_dark_mode_question_player_progress_bar_gradient_center">#23272A</color>
   <color name="color_def_dark_mode_question_player_progress_bar_gradient_end">#00C7B6</color>
+  <color name="color_def_whitish_grey">#E5E5E5</color>
+  <color name="color_def_checkbox_green">#008577</color>
 </resources>
diff --git a/app/src/main/res/values/color_palette.xml b/app/src/main/res/values/color_palette.xml
index 5db583630ea..c97e06cfef9 100644
--- a/app/src/main/res/values/color_palette.xml
+++ b/app/src/main/res/values/color_palette.xml
@@ -82,4 +82,10 @@
   <color name="color_palette_progress_bar_gradient_center_color">@color/color_def_question_player_progress_bar_gradient_center</color>
   <color name="color_palette_progress_bar_gradient_end_color">@color/color_def_question_player_progress_bar_gradient_end</color>
   <color name="color_palette_submit_text_active_color">@color/color_def_white</color>
+  <color name="color_palette_mark_chapters_background_color">@color/color_def_whitish_grey</color>
+  <color name="color_palette_checkbox_text_unselected_state_color">@color/color_def_accessible_grey</color>
+  <color name="color_palette_checkbox_text_selected_state_color">@color/color_def_accessible_grey</color>
+  <color name="color_palette_checkbox_selected_state_color">@color/color_def_checkbox_green</color>
+  <color name="color_palette_mark_completed_text_color">@color/color_def_white</color>
+  <color name="color_palette_mark_completed_all_text_color">@color/color_def_white</color>
 </resources>
diff --git a/app/src/main/res/values/component_colors.xml b/app/src/main/res/values/component_colors.xml
index 0e5a42c1e79..638e760ae1a 100644
--- a/app/src/main/res/values/component_colors.xml
+++ b/app/src/main/res/values/component_colors.xml
@@ -186,4 +186,27 @@
   <color name="component_color_math_expression_parser_activity_radio_buttons_color">@color/color_palette_dark_text_color</color>
   <color name="component_color_math_expression_parser_activity_edit_text_color">@color/color_palette_dark_text_color</color>
   <color name="component_color_math_expression_parser_activity_hint_text_color">@color/color_palette_hint_text_color</color>
+  <!-- Mark Chapters Completed Activity -->
+  <color name="component_color_mark_chapters_completed_primary_toolbar_color">@color/color_palette_toolbar_color</color>
+  <color name="component_color_mark_chapters_completed_container_background_color">@color/color_palette_secondary_toolbar_color</color>
+  <color name="component_color_mark_chapters_completed_background_color">@color/color_palette_mark_chapters_background_color</color>
+  <color name="component_color_mark_chapters_completed_checkbox_text_unselected_state_color">@color/color_palette_checkbox_text_unselected_state_color</color>
+  <color name="component_color_mark_chapters_completed_checkbox_text_selected_state_color">@color/color_palette_checkbox_text_selected_state_color</color>
+  <color name="component_color_mark_chapters_completed_checkbox_selected_state_color">@color/color_palette_checkbox_selected_state_color</color>
+  <color name="component_color_mark_chapters_completed_subtext_heading_background_color">@color/color_palette_container_background_color</color>
+  <color name="component_color_mark_chapters_completed_subtext_heading_color">@color/color_palette_highlighted_text_color</color>
+  <color name="component_color_mark_chapters_completed_text_mark_completed_color">@color/color_palette_mark_completed_text_color</color>
+  <color name="component_color_mark_chapters_completed_text_all_color">@color/color_palette_mark_completed_all_text_color</color>
+  <!-- Mark Stories Completed Activity -->
+  <color name="component_color_mark_stories_completed_primary_toolbar_color">@color/color_palette_toolbar_color</color>
+  <color name="component_color_mark_stories_completed_container_background_color">@color/color_palette_secondary_toolbar_color</color>
+  <color name="component_color_mark_stories_completed_background_color">@color/color_palette_mark_chapters_background_color</color>
+  <color name="component_color_mark_stories_completed_text_mark_completed_color">@color/color_palette_mark_completed_text_color</color>
+  <color name="component_color_mark_stories_completed_text_all_color">@color/color_palette_mark_completed_all_text_color</color>
+  <!-- Mark Topics Completed Activity -->
+  <color name="component_color_mark_topics_completed_primary_toolbar_color">@color/color_palette_toolbar_color</color>
+  <color name="component_color_mark_topics_completed_container_background_color">@color/color_palette_secondary_toolbar_color</color>
+  <color name="component_color_mark_topics_completed_background_color">@color/color_palette_mark_chapters_background_color</color>
+  <color name="component_color_mark_topics_completed_text_mark_completed_color">@color/color_palette_mark_completed_text_color</color>
+  <color name="component_color_mark_topics_completed_text_all_color">@color/color_palette_mark_completed_all_text_color</color>
 </resources>