diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss
index 14c554b2fc9a3ba414b9a82f2ffebd374f60fafa..f777f47f7d365258e4e99399cfbcd67b23f8c6d7 100644
--- a/src/assets/scss/global.scss
+++ b/src/assets/scss/global.scss
@@ -1,9 +1,5 @@
 @import "./custom";
 
-// Tags styling
-$blue-tag-background: transparentize($blue-100, 0.5);
-$teal-tag-background: transparentize($teal-100, 0.5);
-
 .fileTag {
   text-transform: uppercase;
   font-size: 0.8rem;
@@ -13,13 +9,13 @@ $teal-tag-background: transparentize($teal-100, 0.5);
 }
 
 .tagBlue {
-  color: $blue-700;
-  background: $blue-tag-background;
+  color: var(--lecture-text);
+  background: var(--lecture-background);
 }
   
 .tagTeal {
-  color: $teal-700;
-  background: $teal-tag-background;
+  color: var(--deadline-text);
+  background: var(--deadline-background);
 }
 
 // Section header with checkbox settings
@@ -36,17 +32,20 @@ $teal-tag-background: transparentize($teal-100, 0.5);
 }
 
 .sectionHeaderButton {
-  background-color: $white;
-  color: $gray-500;
+  color: var(--tertiary-text-color);
+  background-color: var(--background-color);
+
   border-width: 0px;
   border-radius: 8px;
+
   margin-left: 20px;
   justify-content: space-between;
   height: 2.25rem;
+  font-size: 1.05rem;
+
   transition: 0.2s background-color;
   -webkit-transition: 0.2s background-color;
   -moz-transition: 0.2s background-color;
-  font-size: 1.05rem;
 }
 
 .buttonIcon {
@@ -64,7 +63,7 @@ $teal-tag-background: transparentize($teal-100, 0.5);
 }
 
 .sectionHeaderButton:hover, .sectionHeaderButton:focus {
-  background-color: $gray-200;
-	color: $gray-700 !important;
+  color: var(--tertiary-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 0a513f62060cd3529f67811d220e436d279a44d0..e92315f5c07cfbc4ab92b769bea0f86e5b879bc2 100644
--- a/src/components/App.scss
+++ b/src/components/App.scss
@@ -8,6 +8,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-overflow-scrolling: touch;
   overflow-y: scroll;
+  background-color: var(--background-color);
 }
 
 code {
@@ -15,51 +16,150 @@ code {
     monospace;
 }
 
-
 :root {
-	--primary-color: #{$gray-100};
-	--font-color: #{$black};
-	--bg-color: #{$white};
+  --background-color: #{$white};
+  --secondary-background-color: #{$gray-100};
+
+  --primary-text-color: #{$black};
+  --secondary-text-color: #{$gray-700};
+  --tertiary-text-color: #{$gray-500};
+
+  --border-color: #{$gray-200};
+  --border-color-hover: #{$gray-300};
+  --border-color-focus: #{$gray-300};
+
+  --primary-button: #{$gray-100};
+  --primary-button-hover: #{$gray-200};
+  --primary-button-active: #{$black};
+
+  --primary-button-text: #{$black};
+  --primary-button-text-active: #{$white};
+  --primary-button-text-inactive: #{$gray-300};
+
+  --secondary-button: #{$white};
+  --secondary-button-hover: #{$gray-100};
+  --secondary-button-active: #{$gray-200};
+
+  --secondary-button-text: #{$gray-400};
+  --secondary-button-text-active: #{$gray-500};
+
+  --tertiary-button: #{$gray-100};
+  --tertiary-button-hover: #{$gray-200};
+  --tertiary-button-active: #{$gray-300};
+
+  --tertiary-button-text: #{$gray-400};
+  --tertiary-button-text-hover: #{$gray-500};
+
+  --input-bar: #{$gray-100};
+  --input-bar-placeholder: #{$gray-400};
+  --input-bar-focus: #{$white};
+
+  --image-invert: 0%;
+  --box-shadow-color: rgba(0, 0, 0, 0.1);
+
+  --scrollbar: #{$gray-400};
+  --email-text: #{$blue-500};
+
+  --lecture-background: #{rgba($blue-100, 0.5)}; 
+  --labs-background: #{rgba($pink-100, 0.5)};
+  --deadline-background: #{rgba($teal-100, 0.5)};
+
+  --lecture-text: #{$blue-700};
+  --labs-text: #{$pink-700};
+  --deadline-text: #{$teal-700};
 }
 
 [data-theme="dark"] {
-	--primary-color: #{$gray-900};
-	--font-color: #{$white};
-	--bg-color: #{$black};
+  --background-color: #{$gray-900};
+  --secondary-background-color: #{$gray-800};
+
+  --primary-text-color: #{$white};
+  --secondary-text-color: #{$gray-300};
+  --tertiary-text-color: #{$gray-500};
+
+  --border-color: #{$gray-700};
+  --border-color-hover: #{$gray-600};
+  --border-color-focus: #{$gray-600};
+
+  --primary-button: #{$gray-800};
+  --primary-button-hover: #{$gray-700};
+  --primary-button-active: #{$white};
+
+  --primary-button-text: #{$white};
+  --primary-button-text-active: #{$black};
+  --primary-button-text-inactive: #{$gray-900};
+
+  --secondary-button: #{$gray-900};
+  --secondary-button-hover: #{$gray-800};
+  --seconary-button-active: #{$gray-200};
+
+  --secondary-button-text: #{$gray-400};
+  --secondary-button-text-active: #{$gray-500};
+
+  --tertiary-button: #{$gray-800};
+  --tertiary-button-hover: #{$gray-700};
+  --tertiary-button-active: #{$gray-600};
+
+  --tertiary-button-text: #{$gray-600};
+  --tertiary-button-text-hover: #{$gray-500};
+
+  --input-bar: #{$gray-800};
+  --input-bar-placeholder: #{$gray-600};
+  --input-bar-focus: #{$gray-900};
+
+  --image-invert: 100%;
+  --box-shadow-color: rgba(0, 0, 0, 0.5);
+
+  --scrollbar: #{$gray-700};
+  --email-text: #{$blue-400};
+
+  --lecture-background: #{rgba($blue-800, 0.5)}; 
+  --labs-background: #{rgba($pink-800, 0.5)};
+  --deadline-background: #{rgba($teal-800, 0.5)};
+
+  --lecture-text: #{$blue-300};
+  --labs-text: #{$pink-300};
+  --deadline-text: #{$teal-300};
 }
 
 .btn-primary.focus,
 .btn-primary:focus {
   color: #000;
-  background-color: #f8f9fa;
-  border-color: #0062cc;
+  background-color: #f8f9fa !important;
+  border-color: #0062cc !important;
   box-shadow: none;
 }
 
 .btn-primary {
   margin-bottom: 0.625rem;
-  color: var(--font-color);
-  background: var(--primary-color);
+
+  color: var(--primary-button-text);
+  background: var(--primary-button);
+
   font-size: 1.05rem;
   letter-spacing: 0;
-  border-width: 0rem;
   line-height: 1.375rem;
+  text-align: left;
+
   height: 2.25rem;
+  width: 100%;
+
+  border-width: 0rem;
   border-radius: 0.5rem !important;
-  text-align: left;
-  transition: 0.2s background;
-  -webkit-transition: 0.2s background;
-  -moz-transition: 0.2s background;
+
   display: flex;
-  width: 100%;
   justify-content: space-between;
   align-items: center;
+
+  transition: 0.2s background;
+  -webkit-transition: 0.2s background;
+  -moz-transition: 0.2s background;
 }
 
 .btn-primary.active,
 .btn-primary:active {
-  color: #fff;
-  background: #000 !important;
+  color: var(--primary-button-text-active) !important;
+  background: var(--primary-button-active) !important;
   font-weight: 500;
   text-align: left;
   border-width: 0rem;
@@ -68,9 +168,8 @@ code {
 }
 
 .btn-primary:hover {
-  background: #dee2e6;
-  border-color: #fff;
-  color: #000;
+  background: var(--primary-button-hover);
+  color: var(--primary-button-text);
 }
 
 .modal-backdrop {
diff --git a/src/components/atoms/FileCard/style.module.scss b/src/components/atoms/FileCard/style.module.scss
index 03610bb1d6c86d90445e54c1eec401edbc603ad2..36e81664f6e05b56f32b04a58909ed84e1057c25 100644
--- a/src/components/atoms/FileCard/style.module.scss
+++ b/src/components/atoms/FileCard/style.module.scss
@@ -4,16 +4,17 @@
 .fileCard {
   border-radius: 0.5rem;
   transition: transform 0.2s, box-shadow 0.2s;
-  background-color: $white;
+  background-color: var(--background-color);
   height: 96%;
   cursor: pointer;
-  border: 1px solid $gray-200;
+  border: 1px solid var(--border-color);
+  color: var(--primary-text-color);
 }
 
 .fileCard:hover {
   transform: scale(1.03);
-  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
-  border-color: $gray-300;
+  box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
+  border-color: var(--border-color-hover);
 }
 
 .fileCard :global(.card-body) {
@@ -62,4 +63,4 @@
 	.fileCard :global(.card-img-top) {
 		height: 100px;
 	}
-}
\ No newline at end of file
+}
diff --git a/src/components/atoms/FileListItem/style.module.scss b/src/components/atoms/FileListItem/style.module.scss
index 9dbc812132a83253e797856a3b7bb3ed42a550c4..3c116874806aec34172f99a67d3cfaa5e9abe7a7 100644
--- a/src/components/atoms/FileListItem/style.module.scss
+++ b/src/components/atoms/FileListItem/style.module.scss
@@ -5,11 +5,12 @@
   margin: 0;
   padding: 0.25rem 1.25rem;
   border: 0 !important;
+  color: var(--primary-text-color);
 }
 
 .listRow:hover {
   transform: scale(1.01);
-  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
 }
 
 .listRow {
diff --git a/src/components/atoms/FolderCard/style.module.scss b/src/components/atoms/FolderCard/style.module.scss
index 9eeca2c0a35333682c528e90e40209556e1c98be..2a1fc8e2f8fd1683865667f48c8dd3cc1095e0d5 100644
--- a/src/components/atoms/FolderCard/style.module.scss
+++ b/src/components/atoms/FolderCard/style.module.scss
@@ -2,17 +2,18 @@
 
 .folderCard {
   border-radius: 0.5rem;
-  border: 1px solid $gray-200;
+  border: 1px solid var(--border-color);
   transition: transform 0.2s, box-shadow 0.2s;
-  background-color: $white;
+  background-color: var(--background-color);
   margin-top: 0.67rem;
   cursor: pointer;
+  color: var(--primary-text-color);
 }
 
 .folderCard:hover {
   transform: scale(1.03);
-  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
-  border-color: $gray-300;
+  box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
+  border-color: var(--border-color-hover);
 }
 
 .folderCard :global(.card-body) {
diff --git a/src/components/atoms/ModuleCard/index.tsx b/src/components/atoms/ModuleCard/index.tsx
index 07f7aeebc73717edfdbea858644f65a5db8fb289..59059a7b0ee64ef80af6c5b350cb5193c41dccee 100644
--- a/src/components/atoms/ModuleCard/index.tsx
+++ b/src/components/atoms/ModuleCard/index.tsx
@@ -86,7 +86,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module }: ModuleCardProps) => {
           src={module.image}
         />
         <Card.Body>
-          <Card.Title style={{ color: "#000" }}>{module.title}</Card.Title>
+          <Card.Title>{module.title}</Card.Title>
         </Card.Body>
         <Card.Footer>
           <span
diff --git a/src/components/atoms/ModuleCard/style.module.scss b/src/components/atoms/ModuleCard/style.module.scss
index cea396f8c44b80029e78e50bd223b7174fe94c1c..db78423251e17c671d08e9674e8a87abfbf0697e 100644
--- a/src/components/atoms/ModuleCard/style.module.scss
+++ b/src/components/atoms/ModuleCard/style.module.scss
@@ -1,19 +1,19 @@
 @import "assets/scss/custom";
 
 .moduleCard {
-  background: #ffffff;
+  background: var(--background-color);
   height: 100%;
   border-width: 0rem;
   border-radius: 0.5rem !important;
   transition: transform 0.2s, box-shadow 0.2s;
-  border: 1px solid $gray-200;
+  border: 1px solid var(--border-color);
 }
 
 .moduleCard:hover {
   transform: scale(1.03);
   text-decoration: none;
-  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
-  border-color: $gray-300;
+  box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
+  border-color: var(--border-color-hover);
 }
 
 .termIcons > * {
@@ -22,11 +22,11 @@
 }
 
 .moduleCard :global(.card-header) {
-  background: #fff;
+  background: var(--background-color);
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
   border-width: 0rem;
-  color: #000;
+  color: var(--primary-text-color);
   font-weight: 500;
   text-transform: uppercase;
   text-align: right;
@@ -37,6 +37,7 @@
 
 .moduleCard :global(.card-body) {
   padding: 0.5rem;
+  color: var(--primary-text-color);
 }
 
 .moduleCard :global(.card-title) {
@@ -45,7 +46,7 @@
 
 .moduleCard :global(.card-footer) {
   border-radius: 0.5rem !important;
-  background: #fff;
+  background: var(--background-color);
   border-width: 0rem;
   padding: 0.5rem;
   display: flex;
diff --git a/src/components/atoms/MyBreadcrumbs/style.module.scss b/src/components/atoms/MyBreadcrumbs/style.module.scss
index eb64290fbdc7dc81d6ab5664560776dd59b8e6d6..de0895eeb556a1e35c6667c839fb561268e36f2d 100644
--- a/src/components/atoms/MyBreadcrumbs/style.module.scss
+++ b/src/components/atoms/MyBreadcrumbs/style.module.scss
@@ -2,7 +2,7 @@
 
 .breadcrumb,
 :global(.breadcrumb) {
-  background: #fff !important;
+  background: var(--background-color) !important;
   text-transform: uppercase;
   font-weight: 500;
   padding: 0rem;
@@ -10,6 +10,6 @@
 }
 
 .breadcrumbItem * {
-  color: #000 !important;
+  color: var(--primary-text-color) !important;
   text-decoration: none !important;
 }
diff --git a/src/components/atoms/PersonCard/style.module.scss b/src/components/atoms/PersonCard/style.module.scss
index 8e51acb83ec357651ac7c0504bfd87ba3de70a1c..e723f52df7de1112b0111cbcfde0f3018890603d 100644
--- a/src/components/atoms/PersonCard/style.module.scss
+++ b/src/components/atoms/PersonCard/style.module.scss
@@ -10,14 +10,14 @@
 .userName {
   font-weight: 600;
   font-size: 1.5rem;
-  color: $black;
+  color: var(--primary-text-color);
   margin-bottom: 0rem;
   line-height: 2rem;
 }
 
 .userEmail {
   font-size: 1rem;
-  color: $blue-500;
+  color: var(--email-text);
   margin-bottom: 0rem;
   line-height: 1.25rem;
 }
@@ -31,25 +31,26 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  color: var(--primary-text-color);
 }
 
 .userYear {
   font-size: 1.063rem;
-  color: $gray-700;
+  color: var(--secondary-text-color);
   margin-bottom: 0rem;
   line-height: 1.375rem;
 }
 
 .userDepartment {
   font-size: 1.063rem;
-  color: $gray-600;
+  color: var(--tertiary-text-color);
   margin-bottom: 0rem;
   line-height: 1.375rem;
 }
 
 .userCourse {
   font-size: 1.063rem;
-  color: $gray-800;
+  color: var(--secondary-text-color);
   margin-top: 0.625rem;
   margin-bottom: 0rem;
   line-height: 1.375rem;
diff --git a/src/components/atoms/SideBarCard/style.module.scss b/src/components/atoms/SideBarCard/style.module.scss
index f0e04027235bfd5c6b30825f9e18c5a08ae5dff7..9db8c26c6e445495d9d4fc11b6b5a4deb390fcb6 100644
--- a/src/components/atoms/SideBarCard/style.module.scss
+++ b/src/components/atoms/SideBarCard/style.module.scss
@@ -1,18 +1,13 @@
 @import "assets/scss/custom";
 
-$lecture-background: transparentize($blue-100, 0.5);
-$labs-background: transparentize($pink-100, 0.5);
-$deadline-background: transparentize($teal-100, 0.5);
-
 .sideBarCard {
   margin-top: 0.3125rem;
   margin-bottom: 0.3125rem;
-  color: #000;
   border-width: 0rem;
   width: 100%;
   border-radius: 0.5rem !important;
   text-align: left;
-  transition: transform 0.2s;
+  transition: transform .2s;
 }
 
 .sideBarCard:hover {
@@ -20,27 +15,27 @@ $deadline-background: transparentize($teal-100, 0.5);
 }
 
 .sideBarRedCard * {
-  color: $pink-700;
+  color: var(--labs-text);
 }
 
 .sideBarRedCard {
-  background: $labs-background;
+  background: var(--labs-background);
 }
 
 .sideBarBlueCard * {
-  color: $blue-700;
+  color: var(--lecture-text);
 }
 
 .sideBarBlueCard {
-  background: $lecture-background;
+  background: var(--lecture-background);
 }
 
 .sideBarGreenCard * {
-  color: $teal-700;
+  color: var(--deadline-text);
 }
 
 .sideBarGreenCard {
-  background: $deadline-background;
+  background: var(--deadline-background);
 }
 
 .sideBarCard :global(.card-body) {
@@ -67,8 +62,6 @@ $deadline-background: transparentize($teal-100, 0.5);
 
 .sideBarCard:global(.active),
 .claendarCard:active {
-  color: #fff;
-  background-color: #000 !important;
   font-weight: 500;
   text-align: left;
   border-width: 0rem;
diff --git a/src/components/atoms/TutorCard/style.module.scss b/src/components/atoms/TutorCard/style.module.scss
index b4fda3b0b052038a329a01a46aaf83311dc71ebc..600f12540728b75f997d69c6475d2efdfdbc63d7 100644
--- a/src/components/atoms/TutorCard/style.module.scss
+++ b/src/components/atoms/TutorCard/style.module.scss
@@ -6,8 +6,8 @@
   margin-top: 1.25rem;
   align-items: center;
   width: 100%;
-  background: $white;
-  border: 1px solid $gray-200;
+  background: var(--background-color);
+  border: 1px solid var(--border-color);
   padding: 0.75rem;
   border-radius: 0.5rem;
   transition: 0.2s transform, 0.2s box-shadow;
@@ -16,9 +16,9 @@
 }
 
 .tutorContainer:hover {
-  border-color: $gray-300;
+  border-color: var(--border-color-hover);
   transform: scale(1.03);
-  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
 }
 
 .tutorImage {
@@ -41,12 +41,14 @@
   word-break: break-word;
 }
 
+.tutorName {
+  color: var(--primary-text-color);
+}
+
 .tutorEmail {
-	color: $gray-700;
-  color: $blue-500;
-	
+  color: var(--email-text);
 }
 
 .tutorAddress {
-  color: $gray-600;
+  color: var(--tertiary-text-color);
 }
diff --git a/src/components/molecules/CategoryHeader/index.tsx b/src/components/molecules/CategoryHeader/index.tsx
index 9573568aa8121237d8b84b79a3c9843bfc98c083..bc60573220057104f8ee861d91c8e37f87496fe0 100644
--- a/src/components/molecules/CategoryHeader/index.tsx
+++ b/src/components/molecules/CategoryHeader/index.tsx
@@ -25,7 +25,6 @@ const CategoryHeader: React.FC<CategoryHeaderProps> = ({
         { !selectAllIcon ||
         <div className={styles.sectionHeaderButtonGroup}>
           <Button
-            style={{ color: checkBoxColor }}
             className={styles.sectionHeaderButton}
             onClick={onSelectAllClick}
             variant="secondary"
diff --git a/src/components/molecules/CategoryHeader/style.module.scss b/src/components/molecules/CategoryHeader/style.module.scss
index 8dc409771d43f8418d49e78bb4d1416703109bf1..f659a15e0d4060452d53c8b14bf575e21f9c2f54 100644
--- a/src/components/molecules/CategoryHeader/style.module.scss
+++ b/src/components/molecules/CategoryHeader/style.module.scss
@@ -4,11 +4,12 @@
 .sectionHeader {
   font-size: 1.25rem;
   text-transform: capitalize;
+  color: var(--primary-text-color);
 }
 
 .sectionHeaderContainer {
   padding: 0.25rem 0rem;
 	margin-top: 1.25rem;
-  border-bottom: 1px solid $gray-300;
+  border-bottom: 1px solid var(--border-color);
   margin-bottom: 1rem;
 }
diff --git a/src/components/molecules/Dandruff/index.tsx b/src/components/molecules/Dandruff/index.tsx
index 027b34f389b1e1d3406bebac2755f3a8979fbbad..d82c1275eb043e2af19eb04c4fdf196919650d43 100644
--- a/src/components/molecules/Dandruff/index.tsx
+++ b/src/components/molecules/Dandruff/index.tsx
@@ -10,8 +10,9 @@ const Dandruff: React.FC<DandruffProps> = ({ heading }: DandruffProps) => {
     <>
       <MyBreadcrumbs />
 
-      <h3>{heading}</h3>
-      <hr />
+      <div style={{ borderBottom: "1px solid var(--border-color)"}}>
+        <h3 style={{ color: "var(--primary-text-color)"}}>{heading}</h3>
+      </div>
     </>
   );
 };
diff --git a/src/components/molecules/QuickAccessRow/style.module.scss b/src/components/molecules/QuickAccessRow/style.module.scss
index d45af642fa52b216524fb52f07ef947943b9ca04..e3f9fc2765c0fe0e668d687af2cf45e803408dc3 100644
--- a/src/components/molecules/QuickAccessRow/style.module.scss
+++ b/src/components/molecules/QuickAccessRow/style.module.scss
@@ -2,7 +2,7 @@
 
 .quickAccessRow {
   scrollbar-width: thin;
-  scrollbar-color: $white $white;
+  scrollbar-color: var(--background-color) var(--background-color);
   margin-top: 0.625rem;
   overflow-y: visible;
   overflow-x: auto;
@@ -15,19 +15,19 @@
   height: 0.5rem;
 }
 .quickAccessRow::-webkit-scrollbar-track {
-  background: $white;
+  background: var(--background-color);
   margin-left: 0.625rem;
   margin-right: 0.625rem;
 }
 .quickAccessRow::-webkit-scrollbar-thumb {
-  background-color: $white;
+  background-color: var(--background-color);
   border-radius: 0.5rem;
 }
 
 .quickAccessRow:hover {
-  scrollbar-color: $gray-400 $white;
+  scrollbar-color: var(--scrollbar) var(--background-color);
 }
 
 .quickAccessRow:hover::-webkit-scrollbar-thumb {
-  background-color: $gray-400;
+  background-color: var(--scrollbar);
 }
diff --git a/src/components/molecules/SearchBox/style.module.scss b/src/components/molecules/SearchBox/style.module.scss
index 057ad01303a1933f55ad8db3eaf8a3221ea814eb..ae693f79577a2160fc72aca4e77b128514d88253 100644
--- a/src/components/molecules/SearchBox/style.module.scss
+++ b/src/components/molecules/SearchBox/style.module.scss
@@ -5,39 +5,44 @@ $button-border: transparentize($gray-300, 1);
 
 .searchBar {
   border-radius: 0.5rem;
-  background-color: $button-background;
-  border-color: $button-background;
+  border-width: 1px;
+  border-color: var(--input-bar);
+
+  background-color: var(--input-bar);
+  color: var(--primary-text-color);
+
   transition: 0.2s background-color;
   -webkit-transition: 0.2s background-color;
   -moz-transition: 0.2s back-ground-color;
 }
 
 .searchBar::placeholder {
-  color: #acb5bd;
+  color: var(--input-bar-placeholder);
   opacity: 1;
 }
 
 .searchBar:focus + :global(.input-group-append) .searchBarIcon {
   box-shadow: none !important;
   border-left: none;
-  border-color: $gray-300;
-  background-color: $white;
+  border-color: var(--border-color-focus);
+  background-color: var(--background-color);
 }
 
 .searchBar:focus {
   box-shadow: none !important;
   border-right: none;
-  border-color: $gray-300;
-  background-color: $white;
+  border-color: var(--border-color-focus);
+  background-color: var(--input-bar-focus);
+  color: var(--primary-text-color);
 }
 
 .searchBarIcon {
   border-radius: 0.5rem;
   border-top-right-radius: 0.5rem !important;
   border-bottom-right-radius: 0.5rem !important;
-  background-color: $gray-100;
-  border-color: $gray-100;
-  color: $gray-500;
+  background-color: var(--tertiary-button);
+  border-color: var(--tertiary-button);
+  color: var(--tertiary-button-text);
   transition: 0.2s background-color !important;
   -webkit-transition: 0.2s background-color !important;
   -moz-transition: 0.2s back-ground-color !important;
@@ -47,24 +52,25 @@ $button-border: transparentize($gray-300, 1);
 .searchBarIcon:active,
 .searchBarIcon:hover,
 .searchBarIcon:focus {
-  background: $gray-200 !important;
-  color: $gray-700 !important;
-  border-color: $gray-200 !important;
+  background: var(--tertiary-button-hover) !important;
+  color: var(--tertiary-button-text-hover) !important;
+  border-color: var(--tertiary-button-hover) !important;
   box-shadow: none !important;
 }
 
 .dropdownMenu {
   border-radius: 0.5rem;
   margin-top: 0.5rem;
-  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
-  border: 1px solid $gray-300;
+  box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
+  border: 1px solid var(--border-color);
   padding: 0.75rem;
+  background-color: var(--background-color);
 }
 
 .dropdownHeader {
   font-weight: 500;
   font-size: 1rem;
-  color: $black;
+  color: var(--primary-text-color);
   padding: 0px;
   margin-bottom: 0.75rem;
 }
@@ -75,7 +81,8 @@ $button-border: transparentize($gray-300, 1);
 
 .dropdownItem {
   border-radius: 0.5rem;
-  background: $gray-100;
+  background: var(--primary-button);
+  color: var(--primary-button-text);
   font-size: 1rem;
   text-align: center;
   transition: 0.2s background;
@@ -88,12 +95,13 @@ $button-border: transparentize($gray-300, 1);
 }
 
 .dropdownItem:hover {
-  background: $gray-200;
+  background: var(--primary-button-hover);
+  color: var(--primary-button-text);
 }
 
 .dropdownItem:active,
 .dropdown:global(.active) {
-  color: $white;
+  color: var(--primary-button-text-active);
   font-weight: 500;
-  background: $black;
+  background: var(--primary-button-active);
 }
diff --git a/src/components/molecules/SelectionView/components/SectionHeader/index.tsx b/src/components/molecules/SelectionView/components/SectionHeader/index.tsx
index 68b3ac9a6b1a75aa687ba38bf761598f0a3de5e1..b538d0182b307aaafde092d6392de4cf7660927d 100644
--- a/src/components/molecules/SelectionView/components/SectionHeader/index.tsx
+++ b/src/components/molecules/SelectionView/components/SectionHeader/index.tsx
@@ -34,7 +34,6 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
           <Fade in={show} timeout={500}>
             <span id="download-button">
               <Button
-                style={{ color: checkBoxColur }}
                 variant="secondary"
                 className={styles.sectionHeaderButton}
                 onClick={onDownloadClick}
@@ -47,7 +46,6 @@ const ResourceSectionHeader: React.FC<SectionHeaderProps> = ({
             </span>
           </Fade>
           <Button
-            style={{ color: checkBoxColur }}
             className={styles.sectionHeaderButton}
             onClick={onSelectAllClick}
             variant="secondary"
diff --git a/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss b/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss
index f5ac4f915da66f567c77784b536c452c18a2faa8..25c1a82ef93e11709e811bd2cd0368ca3f4bff69 100644
--- a/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss
+++ b/src/components/molecules/SelectionView/components/SectionHeader/style.module.scss
@@ -5,6 +5,7 @@
   cursor: pointer;
   font-size: 1.5rem;
   text-transform: capitalize;
+  color: var(--primary-text-color);
 }
 
 .alert-enter {
diff --git a/src/components/molecules/SideBarCardGroup/style.module.scss b/src/components/molecules/SideBarCardGroup/style.module.scss
index 796c4d5ee127d3cd7b50cf42643da7773ddcf3c0..24b753a769d35a55281fd65050b10fc02f2c34a3 100644
--- a/src/components/molecules/SideBarCardGroup/style.module.scss
+++ b/src/components/molecules/SideBarCardGroup/style.module.scss
@@ -11,7 +11,7 @@
 
   .sideBarCardGroupHeading {
     font-size: 1.5rem;
-    color: #000000;
+    color: var(--primary-text-color);
     text-align: left;
     margin-top: 1.875rem;
     margin-left: 1rem;
@@ -33,7 +33,7 @@
 
   .sideBarCardGroupHeading {
     font-size: 1.5rem;
-    color: #000000;
+    color: var(--primary-text-color);
     text-align: left;
     margin-top: 1.875rem;
     margin-left: 2rem;
diff --git a/src/components/molecules/SideBarTabGroup/style.module.scss b/src/components/molecules/SideBarTabGroup/style.module.scss
index fb262c69077fd5924546cb8e7f0b70b5b3f73950..8ef4f0428886ca227c6f29d833c1f7e7e880c9c9 100644
--- a/src/components/molecules/SideBarTabGroup/style.module.scss
+++ b/src/components/molecules/SideBarTabGroup/style.module.scss
@@ -1,8 +1,5 @@
 @import "assets/scss/custom";
 
-$button-background: transparentize($gray-200, 0.75);
-$button-border: transparentize($gray-300, 1);
-
 .tabGroupButtonSvg {
   float: right;
   margin-top: 0.22rem;
@@ -19,7 +16,7 @@ $button-border: transparentize($gray-300, 1);
 
   .tabGroupHeading {
     font-size: 1.5rem;
-    color: #000000;
+    color: var(--primary-text-color);
     text-align: left;
     margin-top: 1.875rem;
     margin-left: 1rem;
@@ -42,7 +39,7 @@ $button-border: transparentize($gray-300, 1);
 
   .tabGroupHeading {
     font-size: 1.5rem;
-    color: #000000;
+    color: var(--primary-text-color);
     text-align: left;
     margin-top: 1.875rem;
     margin-left: 2rem;
diff --git a/src/components/molecules/TutorCardGroup/style.module.scss b/src/components/molecules/TutorCardGroup/style.module.scss
index 69a94a7eec1932c708a6132fa9161c303f01c049..4d2b6848d7c857dc8cd699bd4a03e7cd6d9ffbd7 100644
--- a/src/components/molecules/TutorCardGroup/style.module.scss
+++ b/src/components/molecules/TutorCardGroup/style.module.scss
@@ -18,9 +18,9 @@
 }
 
 .tutorEmail {
-  color: $gray-700;
+  color: var(--secondary-text-color);
 }
 
 .tutorAddress {
-  color: $gray-600;
+  color: var(--tertiary-text-color);
 }
diff --git a/src/components/organisms/BottomBar/BottomBarItem/style.module.scss b/src/components/organisms/BottomBar/BottomBarItem/style.module.scss
index 60a3c13f24d89075bfc0445c0cac5cfc1f5b35ce..6d562f82a718f6d6fe7e33d7dd64a2901fa6ebb4 100644
--- a/src/components/organisms/BottomBar/BottomBarItem/style.module.scss
+++ b/src/components/organisms/BottomBar/BottomBarItem/style.module.scss
@@ -3,8 +3,8 @@
   .btn:active,
   .btn:global(.active) {
     border: 0;
-    background-color: #000 !important;
-    color: #fff;
+    background-color: var(--primary-button-active) !important;
+    color: var(--primary-button-text-active) !important;
   }
 
   .btn {
@@ -14,8 +14,8 @@
     border-radius: 0rem;
     width: 25%;
     margin-left: 0;
-    color: #000;
-    background-color: #fff;
+    color: var(--primary-button-text);
+    background-color: var(--primary-button);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -28,12 +28,7 @@
 
   .btn:hover {
     border: 0rem;
-    background-color: #ced4da;
-    color: #000;
-  }
-
-  .btn:active:hover,
-  .btn:global(.active):hover {
-    background-color: $gray-900 !important;
+    background-color: var(--primary-button-hover);
+    color: var(--primary-button-text);
   }
 }
diff --git a/src/components/organisms/BottomBar/style.module.scss b/src/components/organisms/BottomBar/style.module.scss
index 7b4852a4ea96a1c7c29dae3c479fb33ddc09f4c7..f710bfe1d2d9c3a216afc3206d06a8e9a7c0786b 100644
--- a/src/components/organisms/BottomBar/style.module.scss
+++ b/src/components/organisms/BottomBar/style.module.scss
@@ -6,8 +6,8 @@
     bottom: 0;
     width: 100%;
     height: 3.75rem;
-    background-color: #fff;
-    border-top: 1px solid #cdd4db;
+    background-color: var(--background-color);
+    border-top: 1px solid var(--border-color);
     padding: 0rem;
   }
 
diff --git a/src/components/organisms/LeftBar/style.module.scss b/src/components/organisms/LeftBar/style.module.scss
index 4fe993ed1e240fdf78033980e390eae673640f3d..cc8e98f7d0502b18519ca10dddb6bc4d9f5c72e9 100644
--- a/src/components/organisms/LeftBar/style.module.scss
+++ b/src/components/organisms/LeftBar/style.module.scss
@@ -21,8 +21,8 @@
   z-index: 5000;
   margin-top: 3.8125rem;
   padding-bottom: 1.875rem;
-  background: #fff;
-  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+  background: var(--background-color);
+  box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
 }
 
 #leftbarWrapper::-webkit-scrollbar {
@@ -41,7 +41,7 @@
 
 .leftbarStatus a {
   text-decoration: none !important;
-  color: #000 !important;
+  color: var(--primary-text-color) !important;
 }
 
 @media (max-width: 62rem) {
@@ -52,7 +52,7 @@
     margin-bottom: 0rem;
     font-size: 1rem;
     font-weight: 500;
-    color: #000000;
+    color: var(--primary-text-color);
     letter-spacing: 0;
     position: relative;
     width: max-content;
@@ -72,7 +72,7 @@
     margin-bottom: 0rem;
     font-size: 1rem;
     font-weight: 500;
-    color: #000000;
+    color: var(--primary-text-color);
     letter-spacing: 0;
     position: relative;
     width: max-content;
diff --git a/src/components/organisms/RightBar/style.module.scss b/src/components/organisms/RightBar/style.module.scss
index 22ff870765b37f553b8dd665bed219e854905670..346906c881cf478a5c6796da0d03c7cfc17a0e7b 100644
--- a/src/components/organisms/RightBar/style.module.scss
+++ b/src/components/organisms/RightBar/style.module.scss
@@ -21,8 +21,8 @@
   z-index: 5000;
   margin-top: 3.813rem;
   padding-bottom: 1.875rem;
-  background: #fff;
-  box-shadow: 0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.1);
+  background: var(--background-color);
+  box-shadow: 0 0.125rem 0.625rem 0 var(--box-shadow-color);
 }
 
 #rightbarWrapper::-webkit-scrollbar {
@@ -47,7 +47,7 @@
     margin-bottom: 0rem;
     font-size: 1rem;
     font-weight: 500;
-    color: #000000;
+    color: var(--primary-text-color);
     letter-spacing: 0;
     position: relative;
     width: max-content;
@@ -68,7 +68,7 @@
     font-size: 1rem;
     font-weight: 500;
     text-align: right;
-    color: #000000;
+    color: var(--primary-text-color);
     letter-spacing: 0;
     position: relative;
     width: max-content;
diff --git a/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss b/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss
index 7f619ea5b8bdf13fd54f1c018b782eb518417409..9a3fb8d4840f970e7c85d1297c1cf6ec322ed024 100644
--- a/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss
+++ b/src/components/organisms/TopBar/components/NavBarBrand/style.module.scss
@@ -1,26 +1,30 @@
 @import "assets/scss/custom";
 
+
 .brandImage {
   margin-right: 0.625rem;
   width: 1.875rem;
   height: 1.875rem;
+  // Please do not change this:
+  filter: Invert(var(--image-invert));
 }
 
 .brandContainer {
   font-family: "IBM Plex Sans";
   font-weight: 500;
   font-size: 1.5rem;
-  color: #000;
   text-align: left;
+
   padding: 0rem;
+  margin: 0rem;
+
   display: flex;
   justify-content: left;
   align-items: center;
-  margin: 0rem;
 }
 
 .brandContainer a {
-  color: #000 !important;
+  color: var(--primary-text-color) !important;
   text-decoration: none !important;
 }
 
diff --git a/src/components/organisms/TopBar/components/NavBarTabItem/style.module.scss b/src/components/organisms/TopBar/components/NavBarTabItem/style.module.scss
index e301ab65f933c93c7a9148e5781fdf2ec067527d..93df09a4af84d8807e7761d2e822f5a4dc2f7806 100644
--- a/src/components/organisms/TopBar/components/NavBarTabItem/style.module.scss
+++ b/src/components/organisms/TopBar/components/NavBarTabItem/style.module.scss
@@ -2,35 +2,35 @@
 
 @media (min-width: 62rem) {
   .pageButton {
-    background: $gray-100;
+    background: var(--primary-button);
+    color: var(--primary-button-text) !important;
+
     border-radius: 0.5rem !important;
+
     font-family: "IBM Plex Sans";
     font-size: 1.05rem;
-    color: $black !important;
     text-align: center;
     line-height: 1.375rem;
+
     width: 7.5rem;
     height: 2.25rem;
+
     margin-right: 0.625rem;
     margin-left: 0.625rem;
+
     transition: 0.2s background;
     -webkit-transition: 0.2s background;
     -moz-transition: 0.2s background;
   }
 
   .pageButton:hover {
-    background: $gray-200;
-    color: $black !important;
+    background: var(--primary-button-hover);
+    color: var(--primary-button-text) !important;
   }
 
   .pageButton:global(.active) {
-    background: $black !important;
+    background: var(--primary-button-active) !important;
+    color: var(--primary-button-text-active) !important;
     font-weight: 500 !important;
-    color: $white !important;
-  }
-
-  .pageButton:active:hover,
-  .pageButton:global(.active):hover {
-    background-color: $gray-900 !important;
   }
 }
diff --git a/src/components/organisms/TopBar/style.module.scss b/src/components/organisms/TopBar/style.module.scss
index 99a195120d14e10de4a8e21646dde56e52e31ede..ec8b81be17c400458bf2e61919e07fef09c96a83 100644
--- a/src/components/organisms/TopBar/style.module.scss
+++ b/src/components/organisms/TopBar/style.module.scss
@@ -2,6 +2,6 @@
 
 .navBar {
   padding: 0.75rem 1rem;
-  background: #fff;
-  border-bottom: 1px solid #cdd4db;
+  background: var(--background-color);
+  border-bottom: 1px solid var(--border-color);
 }
diff --git a/src/components/pages/ModuleDashboard/index.tsx b/src/components/pages/ModuleDashboard/index.tsx
index 78982de89c74cd7bbab2fec2fecbfc2b65b8e740..72769368c695ad71475b3a1cd506e503b59fdf35 100644
--- a/src/components/pages/ModuleDashboard/index.tsx
+++ b/src/components/pages/ModuleDashboard/index.tsx
@@ -63,7 +63,7 @@ const ModuleDashboard: React.FC = () => {
       <Dandruff heading={generateHeading(id)} />
 
       <h4 className={classNames(styles.moduleSectionHeader)}>Module Aims</h4>
-      <div style={{ paddingTop: "0.75rem" }}>
+      <div className={styles.moduleDashboardText} style={{ paddingTop: "0.75rem" }}>
         <span>In this module you will have the opportunity to:</span>
         <ul>
           <li>
diff --git a/src/components/pages/ModuleDashboard/style.module.scss b/src/components/pages/ModuleDashboard/style.module.scss
index 0df877f84d5726f81c8c538576acb7aa5510b5f3..d54f4bc90e503588a74f8b0c51a756e31822cdd9 100644
--- a/src/components/pages/ModuleDashboard/style.module.scss
+++ b/src/components/pages/ModuleDashboard/style.module.scss
@@ -2,12 +2,17 @@
 
 .moduleSectionHeader {
   margin-top: 1.875rem;
+  color: var(--primary-text-color);
 }
 
 .moduleParagraph {
   margin-top: 1rem;
 }
 
+.moduleDashboardText {
+  color: var(--primary-text-color);
+}
+
 @media (max-width: 62rem) {
 }
 
diff --git a/src/components/pages/ModuleList/style.module.scss b/src/components/pages/ModuleList/style.module.scss
index 0df877f84d5726f81c8c538576acb7aa5510b5f3..7113c00a5ed05db74cc6f6de3ace3a922dfb3cb0 100644
--- a/src/components/pages/ModuleList/style.module.scss
+++ b/src/components/pages/ModuleList/style.module.scss
@@ -2,10 +2,12 @@
 
 .moduleSectionHeader {
   margin-top: 1.875rem;
+  color: var(--primary-text-color);
 }
 
 .moduleParagraph {
   margin-top: 1rem;
+  color: var(--primary-text-color);
 }
 
 @media (max-width: 62rem) {
diff --git a/src/components/pages/ModuleOverview/style.module.scss b/src/components/pages/ModuleOverview/style.module.scss
index 09456cf288875baa570d062a3a803e7635b48412..41cf02c274876acd5b8f92bed030c4ec3eb5013a 100644
--- a/src/components/pages/ModuleOverview/style.module.scss
+++ b/src/components/pages/ModuleOverview/style.module.scss
@@ -25,7 +25,7 @@
 }
 
 .weekCard {
-  background: $white;
+  background: var(--background-color);
   border-width: 0rem;
   margin-bottom: 0.5rem;
   transition: 0.2s transform;
@@ -33,19 +33,24 @@
 }
 
 .weekCardHeader {
-  background: $gray-100;
+  background: var(--primary-button);
+  color: var(--primary-text-color);
+
   transition: 0.2s background;
   -webkit-transition: 0.2s background;
   -moz-transition: 0.2s background;
+
   border-radius: 0.5rem !important;
+  border-width: 0px;
+
   font-size: 1.125rem;
+
   margin-bottom: 0px !important;
   padding: 0.5rem 0.75rem;
-  border-width: 0px;
 }
 
 .weekCardHeader:hover {
-  background: $gray-200;
+  background: var(--primary-button-hover);
 }
 
 .weekCardBody {
diff --git a/src/components/pages/SettingsModal/index.tsx b/src/components/pages/SettingsModal/index.tsx
index b96ee1dea4a9a4210fad2097d28644fbf142a80c..d87e33390d5f954187f9e457d135716ae87fa909 100644
--- a/src/components/pages/SettingsModal/index.tsx
+++ b/src/components/pages/SettingsModal/index.tsx
@@ -33,7 +33,7 @@ const SettingsModal: React.FC<Props> = ({
 
   return (
     <Modal
-      style={{ zIndex: "10000" }}
+      className={styles.settingsModal}
       dialogClassName={styles.modal}
       show={show}
       onHide={onHide}
@@ -49,7 +49,7 @@ const SettingsModal: React.FC<Props> = ({
           <FontAwesomeIcon className={styles.buttonIcon} icon={faTimes} />
         </Button>
       </Modal.Header>
-      <Modal.Body style={{ minHeight: "60vh" }}>
+      <Modal.Body className={styles.modalBody}>
         <h5 className={styles.modalSubHeading}>Interface</h5>
 
         <Form className={styles.interfaceGroup}>
diff --git a/src/components/pages/SettingsModal/style.module.scss b/src/components/pages/SettingsModal/style.module.scss
index babe60ffd67cbe39d6b7fed39c9218e8be0b1166..a0f923b37747b611f1661bd4d68e5b6dfa82680c 100644
--- a/src/components/pages/SettingsModal/style.module.scss
+++ b/src/components/pages/SettingsModal/style.module.scss
@@ -10,15 +10,44 @@
   }
 }
 
+.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.75rem;
+  padding: 0.5rem 0.5rem;
+  padding-left: 0.75rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  background-color: var(--background-color);
+  border-bottom: 1px solid var(--border-color);
+  color: var(--primary-text-color);
+  border-top-right-radius: 0.5rem !important;
+  border-top-left-radius: 0.5rem !important;
+}
+
+.settingsModal :global(.modal-content) {
+  background-color: var(--background-color);
+  border-radius: 0.5rem;
+}
+
+.modalBody {
+  min-height: 60vh;
+  background-color: var(--background-color);
+  color: var(--primary-text-color);
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
 }
 
 .interfaceGroup {
-  border-bottom: 1px solid $gray-300;
+  border-bottom: 1px solid var(--border-color);
   padding: 0rem 0.5rem;
 }
 
@@ -28,61 +57,59 @@ $button-border: transparentize($gray-300, 1);
 .inputBar {
   border-radius: 0.5rem;
   border-width: 1px;
-  background-color: $button-background;
+  border-color: var(--input-bar);
+
+  background-color: var(--input-bar);
+  color: var(--primary-text-color);
+
   text-align: right;
-  border-color: $button-background;
+
   transition: 0.2s background-color;
   -webkit-transition: 0.2s background-color;
   -moz-transition: 0.2s back-ground-color;
 }
 
-.inputBar::placeholder {
-  color: #acb5bd;
-  opacity: 1;
-}
-
 .inputBar:focus {
   box-shadow: none !important;
-  border-color: $gray-300;
-  background-color: $white;
+  border-color: var(--border-color-focus);
+  background-color: var(--input-bar-focus);
+  color: var(--primary-text-color);
+}
+
+.settingsModal {
+  z-index: 10000;
 }
 
 .modalToggleButton {
-  background-color: $gray-100;
-  color: $black;
+  background-color: var(--primary-button);
+  color: var(--primary-button-text);
+
   border-width: 0px;
   border-radius: 8px;
+
   margin-left: 20px;
   justify-content: space-between;
   height: 2.25rem;
+  font-size: 1.05rem;
+
   transition: 0.2s background-color;
   -webkit-transition: 0.2s background-color;
   -moz-transition: 0.2s background-color;
-  font-size: 1.05rem;
 }
 
 .modalToggleButton:active,
-.modalToggleButton:global(.active),
-.modalToggleButton:active:focus,
-.modalToggleButton:global(.active):focus {
-  background: $black !important;
+.modalToggleButton:global(.active) {
+  background: var(--primary-button-active) !important;
+  color: var(--primary-button-text-active) !important;
   font-weight: 500;
   text-align: left;
   border-width: 0rem;
   height: 2.25rem;
   line-height: 1.375rem;
-  color: $white !important;
 }
 
-.modalToggleButton:hover,
-.modalToggleButton:focus {
-  background-color: $gray-200;
-  color: $gray-700 !important;
+.modalToggleButton:hover {
+  background-color: var(--primary-button-hover);
+  color: var(--primary-button-text);
   box-shadow: none !important;
 }
-
-.modalToggleButton:active:hover,
-.modalToggleButton:global(.active):hover {
-  background-color: $gray-900;
-  color: $white !important;
-}
diff --git a/src/components/pages/Timeline/index 2.tsx b/src/components/pages/Timeline/index 2.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a86a366c3f007ea7815ad4ba1cce54785fdd32a6
--- /dev/null
+++ b/src/components/pages/Timeline/index 2.tsx	
@@ -0,0 +1,12 @@
+import React from "react";
+import Dandruff from "components/molecules/Dandruff";
+
+const Timeline: React.FC = () => {
+  return (
+    <>
+      <Dandruff heading="Timeline" />
+    </>
+  );
+};
+
+export default Timeline;