diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss
index f777f47f7d365258e4e99399cfbcd67b23f8c6d7..1a792422d66c9357e864e32ca58f2454ca256121 100644
--- a/src/assets/scss/global.scss
+++ b/src/assets/scss/global.scss
@@ -54,7 +54,7 @@
 
 .sectionHeaderButton:global(.active),
 .sectionHeaderButton:active {
-  background: $gray-400 !important;
+  background:var(--secondary-text-color) !important;
   font-weight: 500;
   text-align: left;
   border-width: 0rem;
@@ -63,7 +63,7 @@
 }
 
 .sectionHeaderButton:hover, .sectionHeaderButton:focus {
-  color: var(--tertiary-text-color) !important;
+	color: var(--secondary-text-color) !important;
   background-color: var(--secondary-background-color) !important;
 	box-shadow: none !important;
 }
diff --git a/src/components/App.scss b/src/components/App.scss
index cc0e22f3f33b66b25342dd13059bc221a76effe7..f7d3b06c27eea99c21b1caee4f370ba2a994f7c2 100644
--- a/src/components/App.scss
+++ b/src/components/App.scss
@@ -18,7 +18,7 @@ code {
 
 :root {
   --background-color: #{$white};
-  --secondary-background-color: #{$gray-100};
+  --secondary-background-color: #{$gray-200};
 
   --checker-even-color: #{$gray-100};
   --checker-odd-color: #{$gray-200};
diff --git a/src/components/molecules/SelectionView/index.tsx b/src/components/molecules/SelectionView/index.tsx
index 82550be768274c7b18a0066d0bd26a33315c1e30..3b0dadca9c4ed0ac5d1f4bd2fb1800817a7ded10 100644
--- a/src/components/molecules/SelectionView/index.tsx
+++ b/src/components/molecules/SelectionView/index.tsx
@@ -7,8 +7,8 @@ export interface SelectionItem {
   id: number;
   folder?: string;
   type?: string;
-	tags?: string[];
-	thumbnail?: string;
+  tags?: string[];
+  thumbnail?: string;
 }
 
 type idBooleanMap = { [key: number]: boolean };
@@ -128,23 +128,27 @@ class SelectionView extends React.Component<MyProps, MyState> {
     let selection: SelectionProps = {
       selectionItems: this.props.selectionItems,
       state: this.state,
-      setIsSelected: selection => this.setState({ isSelected: selection }),
+      setIsSelected: (selection) => this.setState({ isSelected: selection }),
       isAnySelected: () => this.isAnySelected(),
       handleCardClick: (id: number) => this.handleCardClick(id),
       handleIconClick: (id: number) => this.handleIconClick(id),
       handleMouseOver: (id: number) => this.handleMouseOver(id),
-      handleMouseOut: (id: number) => this.handleMouseOut(id)
+      handleMouseOut: (id: number) => this.handleMouseOut(id),
     };
 
     return (
       <>
         <ResourceSectionHeader
           heading={this.props.heading}
-          onDownloadClick={e => this.handleDownloadClick(e)}
+          onDownloadClick={(e) => this.handleDownloadClick(e)}
           showDownload={this.isAnySelected()}
           onSelectAllClick={() => this.handleSelectAllClick()}
           selectAllIcon={this.isAllSelected() ? faCheckSquare : faSquare}
-          checkBoxColur={this.isAnySelected() ? "#495057" : "#e9ecef"}
+          checkBoxColur={
+            this.isAnySelected()
+              ? "var(--secondary-text-color)"
+              : "var(--secondary-button-active)"
+          }
         />
 
         {this.props.render(selection)}
diff --git a/src/components/pages/ModuleResources/components/ListView.tsx b/src/components/pages/ModuleResources/components/ListView.tsx
index 7ca236fb4d87811459dc9bf472e691aa0ca9cdaa..f00462629c828cfcd3a3a6b0db638f5b88251664 100644
--- a/src/components/pages/ModuleResources/components/ListView.tsx
+++ b/src/components/pages/ModuleResources/components/ListView.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import SelectionView, {
-  SelectionProps
+  SelectionProps,
 } from "components/molecules/SelectionView";
 import CategoryList from "components/molecules/CategoryList";
 import CategoryHeader from "components/molecules/CategoryHeader";
@@ -23,11 +23,11 @@ const ListView: React.FC<ListViewProps> = ({
   searchText,
   onDownloadClick,
   onItemClick,
-  includeInSearchResult
+  includeInSearchResult,
 }) => {
   let filesContent: Resource[] = resources;
   if (searchText !== "") {
-    filesContent = filesContent.filter(item =>
+    filesContent = filesContent.filter((item) =>
       includeInSearchResult(item, searchText.toLowerCase())
     );
   }
@@ -42,13 +42,11 @@ const ListView: React.FC<ListViewProps> = ({
         <>
           {folders.map(({ title, id }) => {
             let categoryItems = filesContent.filter(
-              res => res.folder === title
+              (res) => res.folder === title
             );
             function isAllSelected(): boolean {
               let isSelected = select.state.isSelected;
-              return categoryItems.every(
-                item => isSelected[item.id]
-              );
+              return categoryItems.every((item) => isSelected[item.id]);
             }
 
             function onSelectAllClick() {
@@ -68,7 +66,11 @@ const ListView: React.FC<ListViewProps> = ({
                   heading={title}
                   onSelectAllClick={onSelectAllClick}
                   selectAllIcon={isAllSelected() ? faCheckSquare : faSquare}
-                  checkBoxColor={select.isAnySelected() ? "#495057" : "#e9ecef"}
+                  checkBoxColor={
+                    select.isAnySelected()
+                      ? "var(--secondary-text-color)"
+                      : "var(--secondary-button-active)"
+                  }
                 />
                 <CategoryList
                   categoryItems={categoryItems}
diff --git a/src/components/pages/SettingsModal/style.module.scss b/src/components/pages/SettingsModal/style.module.scss
index a0f923b37747b611f1661bd4d68e5b6dfa82680c..49221bc1c9257fc85572c9b7164148bacc1eb5d2 100644
--- a/src/components/pages/SettingsModal/style.module.scss
+++ b/src/components/pages/SettingsModal/style.module.scss
@@ -10,16 +10,6 @@
   }
 }
 
-.sectionHeaderButton {
-  color: var(--tertiary-text-color);
-  background-color: var(--background-color);
-}
-
-.sectionHeaderButton:hover {
-  color: var(--tertiary-text-color);
-  background-color: var(--secondary-background-color);
-}
-
 .modalHeader {
   padding: 0.5rem 0.5rem;
   padding-left: 0.75rem;