From f39a0cee4b09866f5c14cf4b6b5b9cc3f1a3af7d Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 20 Aug 2023 19:08:48 +0000
Subject: [PATCH] CLASSROOMIO-T-127: Theming configuration

CLASSROOMIO-T-127: Add 4 themes configurations into the app

Clean up


Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>


Merge-request: CLASSROOMIO-MR-51
Merged-by: Best Admin <best@digdippa.com>
---
 src/app.html                                  |   2 +-
 src/app.postcss                               | 369 +++++++++++++++++-
 src/error.html                                |   2 +-
 .../components/Poll/components/Avatar.svelte  |   6 +-
 .../components/Poll/components/Poll.svelte    |  33 +-
 src/lib/components/AuthUI/index.svelte        |   6 +-
 src/lib/components/Avatar/index.svelte        |   6 +-
 src/lib/components/Buttons/Close/index.svelte |   4 +-
 src/lib/components/ComingSoon/index.svelte    |   2 +-
 .../components/Ceritficate/Reports.svelte     |  22 +-
 .../certificates/Professional.svelte          |   8 +-
 .../Lesson/Exercise/DeleteConfirmation.svelte |   6 +-
 .../Lesson/Exercise/EditMode.svelte           |   4 +-
 .../Lesson/Exercise/MarkExerciseModal.svelte  |  32 +-
 .../Lesson/Exercise/OrderModal.svelte         |  12 +-
 .../Lesson/Exercise/ViewMode.svelte           |   2 +-
 .../Lesson/Materials/Video/LocalVideo.svelte  |   2 +-
 .../Course/components/Navigation/index.svelte |   4 +-
 .../Course/components/Settings/index.svelte   |   4 +-
 .../components/CourseLandingPage/index.svelte |  13 +-
 src/lib/components/Dropdown/index.svelte      |   9 +-
 src/lib/components/EditContent/index.svelte   |   4 +-
 src/lib/components/Email/EmailTemplate.svelte |   3 +-
 src/lib/components/Footer/index.svelte        |   6 +-
 src/lib/components/Form/TextArea.svelte       |   4 +-
 src/lib/components/Form/TextField.svelte      |   4 +-
 src/lib/components/HashTags/index.svelte      |   5 +-
 .../components/Icons/SiteSettingsIcon.svelte  |   2 +-
 src/lib/components/LMS/SideBar.svelte         |  10 +-
 .../components/LMS/components/Student.svelte  |   2 +-
 .../components/MarkdownEditor/index.svelte    |   2 +-
 src/lib/components/Navigation/app.svelte      |  23 +-
 src/lib/components/Navigation/lms.svelte      |   6 +-
 .../Org/Community/DeleteCommentModal.svelte   |  13 +-
 .../components/Org/LandingPage/index.svelte   |  20 +-
 .../components/Org/Quiz/DeleteModal.svelte    |   9 +-
 .../Org/Quiz/Play/Header/CircleContent.svelte |   6 +-
 .../Org/Settings/OrgSettings.svelte           | 114 ++++--
 .../components/Org/Settings/Profile.svelte    |   2 +-
 src/lib/components/Org/SideBar.svelte         |  10 +-
 .../OrgSelector/OrgSelectorItem.svelte        |   7 +-
 src/lib/components/PageBody/index.svelte      |   2 +-
 src/lib/components/PrimaryButton/constants.js |   9 +-
 src/lib/components/PrimaryButton/index.svelte |   2 +-
 .../PrimaryContainedButton/index.svelte       |   2 +-
 src/lib/components/Progress/index.svelte      |   2 +-
 .../components/QuestionContainer/index.svelte |   6 +-
 src/lib/components/Snackbar/constants.js      |   6 +-
 src/lib/components/Tabs/index.svelte          |   8 +-
 src/lib/components/UploadImage/index.svelte   |   2 +-
 .../WelcomeModal/WelcomeModal.svelte          |  19 +-
 src/lib/utils/constants/reusableClass.js      |   2 +-
 src/lib/utils/services/org/index.js           |  13 +-
 src/lib/utils/store/org.js                    |   1 +
 src/routes/+error.svelte                      |   8 +-
 src/routes/+layout.server.js                  |   7 +-
 src/routes/+layout.svelte                     |  15 +-
 src/routes/+page.svelte                       |   4 +-
 .../courses/[id]/attendance/+page.svelte      |   6 +-
 src/routes/courses/[id]/lessons/+page.svelte  |  13 +-
 src/routes/courses/[id]/people/+page.svelte   |  12 +-
 .../courses/[id]/submissions/+page.svelte     |   2 +-
 src/routes/dashboard/+page.svelte             |   8 +-
 src/routes/forgot/+page.svelte                |  25 +-
 src/routes/lms/+page.svelte                   |   2 +-
 src/routes/lms/exercises/+page.svelte         |   2 +-
 src/routes/login/+page.svelte                 |   4 +-
 src/routes/onboarding/+page.svelte            |  67 ++--
 src/routes/org/[slug]/+page.svelte            |   6 +-
 .../org/[slug]/quiz/[slug]/+page.svelte       |   2 +-
 .../org/[slug]/settings/domains/+page.svelte  |   5 +-
 .../org/[slug]/settings/teams/+page.svelte    |   5 +-
 src/routes/profile/[id]/+page.svelte          |   8 +-
 tailwind.config.cjs                           |   9 +-
 tailwind.config.js                            |   4 +-
 75 files changed, 709 insertions(+), 379 deletions(-)

diff --git a/src/app.html b/src/app.html
index c29773a1..23a64582 100644
--- a/src/app.html
+++ b/src/app.html
@@ -24,7 +24,7 @@
 	%sveltekit.head%
 </head>
 
-<body data-sveltekit-preload-data="hover">
+<body data-sveltekit-preload-data="hover" class="">
 	<div style="display: contents">
 		%sveltekit.body%
 	</div>
diff --git a/src/app.postcss b/src/app.postcss
index 30f1edea..e9aa82b3 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -91,10 +91,371 @@ code {
   fill: red;
 }
 
-.dark :global(svg.carbon-icon) {
-  fill: #fff;
-}
-
 @tailwind components;
 
 @tailwind utilities;
+
+/**
+  Rose Theme
+*/
+.theme-rose .bg-primary-50 {
+  background-color: #fff1f2;
+}
+.theme-rose .text-primary-50 {
+  color: #fff1f2;
+}
+
+.theme-rose .bg-primary-100 {
+  background-color: #ffe4e7;
+}
+.theme-rose .text-primary-100 {
+  color: #ffe4e7;
+}
+
+.theme-rose .bg-primary-200 {
+  background-color: #fecdd4;
+}
+.theme-rose .text-primary-200 {
+  color: #fecdd4;
+}
+
+.theme-rose .bg-primary-300 {
+  background-color: #fda4b2;
+}
+.theme-rose .text-primary-300 {
+  color: #fda4b2;
+}
+
+.theme-rose .bg-primary-400 {
+  background-color: #fb7189;
+}
+.theme-rose .text-primary-400 {
+  color: #fb7189;
+}
+
+.theme-rose .bg-primary-500 {
+  background-color: #f43f63;
+}
+.theme-rose .text-primary-500 {
+  color: #f43f63;
+}
+
+.theme-rose .bg-primary-600 {
+  background-color: #e21d4e;
+}
+.theme-rose .text-primary-600 {
+  color: #e21d4e;
+}
+
+.theme-rose .bg-primary-700 {
+  background-color: #be1241;
+}
+.theme-rose .text-primary-700 {
+  color: #be1241;
+}
+
+.theme-rose .bg-primary-800 {
+  background-color: #9f123d;
+}
+.theme-rose .text-primary-800 {
+  color: #9f123d;
+}
+
+.theme-rose .bg-primary-900 {
+  background-color: #88133a;
+}
+.theme-rose .text-primary-900 {
+  color: #88133a;
+}
+
+/**
+  Blue Theme
+*/
+.bg-primary-50 {
+  background-color: #eff6ff;
+}
+.text-primary-50 {
+  color: #eff6ff;
+}
+
+.bg-primary-100 {
+  background-color: #dbeafe;
+}
+.text-primary-100 {
+  color: #dbeafe;
+}
+
+.bg-primary-200 {
+  background-color: #bfdafe;
+}
+.text-primary-200 {
+  color: #bfdafe;
+}
+
+.bg-primary-300 {
+  background-color: #92c4fe;
+}
+.text-primary-300 {
+  color: #92c4fe;
+}
+
+.bg-primary-400 {
+  background-color: #5fa3fb;
+}
+.text-primary-400 {
+  color: #5fa3fb;
+}
+
+.bg-primary-500 {
+  background-color: #3a7ff7;
+}
+.text-primary-500 {
+  color: #3a7ff7;
+}
+
+.bg-primary-600 {
+  background-color: #2460ec;
+}
+.text-primary-600 {
+  color: #2460ec;
+}
+
+.bg-primary-700 {
+  background-color: #1d4ee2;
+}
+.text-primary-700 {
+  color: #1d4ee2;
+}
+
+.bg-primary-800 {
+  background-color: #1d3eb0;
+}
+.text-primary-800 {
+  color: #1d3eb0;
+}
+
+.bg-primary-900 {
+  background-color: #1d398b;
+}
+.text-primary-900 {
+  color: #1d398b;
+}
+
+/**
+  Green Theme
+*/
+.theme-green .bg-primary-50 {
+  background-color: #effef0;
+}
+.theme-green .text-primary-50 {
+  color: #effef0;
+}
+
+.theme-green .bg-primary-100 {
+  background-color: #d9ffdc;
+}
+.theme-green .text-primary-100 {
+  color: #d9ffdc;
+}
+
+.theme-green .bg-primary-200 {
+  background-color: #b6fcbc;
+}
+.theme-green .text-primary-200 {
+  color: #b6fcbc;
+}
+
+.theme-green .bg-primary-300 {
+  background-color: #7df88a;
+}
+.theme-green .text-primary-300 {
+  color: #7df88a;
+}
+
+.theme-green .bg-primary-400 {
+  background-color: #3deb51;
+}
+.theme-green .text-primary-400 {
+  color: #3deb51;
+}
+
+.theme-green .bg-primary-500 {
+  background-color: #12bf26;
+}
+.theme-green .text-primary-500 {
+  color: #12bf26;
+}
+
+.theme-green .bg-primary-600 {
+  background-color: #0aaf1d;
+}
+.theme-green .text-primary-600 {
+  color: #0aaf1d;
+}
+
+.theme-green .bg-primary-700 {
+  background-color: #0c891b;
+}
+.theme-green .text-primary-700 {
+  color: #0c891b;
+}
+
+.theme-green .bg-primary-800 {
+  background-color: #0f6c1b;
+}
+.theme-green .text-primary-800 {
+  color: #0f6c1b;
+}
+
+.theme-green .bg-primary-900 {
+  background-color: #0f581a;
+}
+.theme-green .text-primary-900 {
+  color: #0f581a;
+}
+
+/**
+  Orange Theme
+*/
+.theme-orange .bg-primary-50 {
+  background-color: #fff8ec;
+}
+.theme-orange .text-primary-50 {
+  color: #fff8ec;
+}
+
+.theme-orange .bg-primary-100 {
+  background-color: #fff0d3;
+}
+.theme-orange .text-primary-100 {
+  color: #fff0d3;
+}
+
+.theme-orange .bg-primary-200 {
+  background-color: #ffdca5;
+}
+.theme-orange .text-primary-200 {
+  color: #ffdca5;
+}
+
+.theme-orange .bg-primary-300 {
+  background-color: #ffc26d;
+}
+.theme-orange .text-primary-300 {
+  color: #ffc26d;
+}
+
+.theme-orange .bg-primary-400 {
+  background-color: #ff9d32;
+}
+.theme-orange .text-primary-400 {
+  color: #ff9d32;
+}
+
+.theme-orange .bg-primary-500 {
+  background-color: #ff7f0a;
+}
+.theme-orange .text-primary-500 {
+  color: #ff7f0a;
+}
+
+.theme-orange .bg-primary-600 {
+  background-color: #ff6600;
+}
+.theme-orange .text-primary-600 {
+  color: #ff6600;
+}
+
+.theme-orange .bg-primary-700 {
+  background-color: #cc4902;
+}
+.theme-orange .text-primary-700 {
+  color: #cc4902;
+}
+
+.theme-orange .bg-primary-800 {
+  background-color: #a1390b;
+}
+.theme-orange .text-primary-800 {
+  color: #a1390b;
+}
+
+.theme-orange .bg-primary-900 {
+  background-color: #82310c;
+}
+.theme-orange .text-primary-900 {
+  color: #82310c;
+}
+
+/**
+  Violet Theme
+*/
+.theme-violet .bg-primary-50 {
+  background-color: #fff2fe;
+}
+.theme-violet .text-primary-50 {
+  color: #fff2fe;
+}
+
+.theme-violet .bg-primary-100 {
+  background-color: #ffe3fe;
+}
+.theme-violet .text-primary-100 {
+  color: #ffe3fe;
+}
+
+.theme-violet .bg-primary-200 {
+  background-color: #ffc6fe;
+}
+.theme-violet .text-primary-200 {
+  color: #ffc6fe;
+}
+
+.theme-violet .bg-primary-300 {
+  background-color: #ff99f7;
+}
+.theme-violet .text-primary-300 {
+  color: #ff99f7;
+}
+
+.theme-violet .bg-primary-400 {
+  background-color: #ff5df2;
+}
+.theme-violet .text-primary-400 {
+  color: #ff5df2;
+}
+
+.theme-violet .bg-primary-500 {
+  background-color: #ff21f5;
+}
+.theme-violet .text-primary-500 {
+  color: #ff21f5;
+}
+
+.theme-violet .bg-primary-600 {
+  background-color: #fb00ff;
+}
+.theme-violet .text-primary-600 {
+  color: #fb00ff;
+}
+
+.theme-violet .bg-primary-700 {
+  background-color: #cf00ce;
+}
+.theme-violet .text-primary-700 {
+  color: #cf00ce;
+}
+
+.theme-violet .bg-primary-800 {
+  background-color: #a900a6;
+}
+.theme-violet .text-primary-800 {
+  color: #a900a6;
+}
+
+.theme-violet .bg-primary-900 {
+  background-color: #890684;
+}
+.theme-violet .text-primary-900 {
+  color: #890684;
+}
diff --git a/src/error.html b/src/error.html
index 7a7ad86c..d6a9465a 100644
--- a/src/error.html
+++ b/src/error.html
@@ -13,7 +13,7 @@
       have gotten the error notification and will push a fix ASAP. In the
       meantime, take a short break and come back a bit later.
     </p>
-    <a class="bg-blue-700 hover:bg-blue-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
+    <a class="bg-primary-700 hover:bg-primary-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
       href="mailto:support@classroomio.com">Contact Us</a>
   </div>
 
diff --git a/src/lib/components/Apps/components/Poll/components/Avatar.svelte b/src/lib/components/Apps/components/Poll/components/Avatar.svelte
index 9b0b603a..d11f6620 100644
--- a/src/lib/components/Apps/components/Poll/components/Avatar.svelte
+++ b/src/lib/components/Apps/components/Poll/components/Avatar.svelte
@@ -4,8 +4,4 @@
   export let className;
 </script>
 
-<img
-  alt={name}
-  {src}
-  class="w-10 h-10 rounded-full bg-light-blue-100 {className}"
-/>
+<img alt={name} {src} class="w-10 h-10 rounded-full bg-primary-100 {className}" />
diff --git a/src/lib/components/Apps/components/Poll/components/Poll.svelte b/src/lib/components/Apps/components/Poll/components/Poll.svelte
index 6add5898..0cf7b851 100644
--- a/src/lib/components/Apps/components/Poll/components/Poll.svelte
+++ b/src/lib/components/Apps/components/Poll/components/Poll.svelte
@@ -30,9 +30,7 @@
     const totalVoteOfAllOptions = getTotalVotes(options);
     const totalVotesOfCurrentOption = currentOption.selectedBy.length;
 
-    return (
-      Math.round((totalVotesOfCurrentOption / totalVoteOfAllOptions) * 100) || 0
-    );
+    return Math.round((totalVotesOfCurrentOption / totalVoteOfAllOptions) * 100) || 0;
   }
 
   function didUserSelect(option) {
@@ -52,10 +50,7 @@
   {#if selectedOptionToView}
     <div>
       <div class="flex items-center mb-5">
-        <button
-          class="text-xl w-10 px-3"
-          on:click={() => (selectedOptionToView = null)}
-        >
+        <button class="text-xl w-10 px-3" on:click={() => (selectedOptionToView = null)}>
           {`<`}
         </button>
         <div class="flex-grow text-center">
@@ -79,7 +74,7 @@
         </h3>
         <p class="dark:text-white text-sm italic">
           Created by <a
-            class="text-blue-500"
+            class="text-primary-500"
             href="https://twitter.com/rotimi_best"
             target="_blank">@{poll.author.label}</a
           >
@@ -124,15 +119,12 @@
           <div class="flex items-center">
             <div class="w-4/5 h-2 bg-gray-200 relative">
               <span
-                class="absolute top-0 left-0 bg-blue-700 h-full"
+                class="absolute top-0 left-0 bg-primary-700 h-full"
                 style="width: {calculatePercent(poll.options, option)}%;"
               />
             </div>
             {#if option.selectedBy.length}
-              <button
-                class="text-xl px-3 ml-5"
-                on:click={() => (selectedOptionToView = option)}
-              >
+              <button class="text-xl px-3 ml-5" on:click={() => (selectedOptionToView = option)}>
                 >
               </button>
             {/if}
@@ -151,19 +143,17 @@
           class="bg-white dark:bg-gray-800 rounded-md border-2 border-gray-500 {didUserSelect(
             option
           ) &&
-            'focus:border-blue-700 border-blue-700'} text-black p-2 w-full mb-3 text-left relative"
+            'focus:border-primary-700 border-primary-700'} text-black p-2 w-full mb-3 text-left relative"
           on:click={handleSelect(index)}
         >
           {#if hasUserVoted}
             <span
               class="progress absolute top-0 left-0 {didUserSelect(option)
-                ? 'bg-blue-700'
+                ? 'bg-primary-700'
                 : 'bg-gray-300'} h-full bg-opacity-25"
               style="width: {calculatePercent(poll.options, option)}%;"
             />
-            <strong class="mr-3"
-              >{calculatePercent(poll.options, option)}%</strong
-            >
+            <strong class="mr-3">{calculatePercent(poll.options, option)}%</strong>
           {/if}
           {option.label}
         </button>
@@ -182,7 +172,7 @@
     {#if isAuthor}
       <div class="w-full text-center mt-3">
         <button
-          class="px-5 py-3 bg-blue-700 text-white"
+          class="px-5 py-3 bg-primary-700 text-white"
           on:click={() => (viewResult = !viewResult)}
         >
           {#if viewResult}
@@ -191,10 +181,7 @@
             View results
           {/if}
         </button>
-        <button
-          class="px-5 py-3 bg-red-500 text-white"
-          on:click={handlePollDelete}
-        >
+        <button class="px-5 py-3 bg-red-500 text-white" on:click={handlePollDelete}>
           Delete
         </button>
       </div>
diff --git a/src/lib/components/AuthUI/index.svelte b/src/lib/components/AuthUI/index.svelte
index 6be3b372..8b13ffb7 100644
--- a/src/lib/components/AuthUI/index.svelte
+++ b/src/lib/components/AuthUI/index.svelte
@@ -75,9 +75,11 @@
     {#if !showOnlyContent}
       <div class="w-full p-6 border-t border-grey text-center">
         {#if isLogin}
-          Not registered yet? <a class="hover:underline text-blue-700" href="/signup">Sign up</a>
+          Not registered yet? <a class="hover:underline text-primary-700" href="/signup">Sign up</a>
         {:else}
-          Already have an account? <a class="hover:underline text-blue-700" href="/login">Log In</a>
+          Already have an account? <a class="hover:underline text-primary-700" href="/login"
+            >Log In</a
+          >
         {/if}
       </div>
     {/if}
diff --git a/src/lib/components/Avatar/index.svelte b/src/lib/components/Avatar/index.svelte
index 472618ed..7ba647c9 100644
--- a/src/lib/components/Avatar/index.svelte
+++ b/src/lib/components/Avatar/index.svelte
@@ -7,8 +7,4 @@
   export let height = 'h-10';
 </script>
 
-<img
-  alt={name}
-  {src}
-  class="{className} {width} {height} {shape} bg-light-blue-100"
-/>
+<img alt={name} {src} class="{className} {width} {height} {shape} bg-primary-100" />
diff --git a/src/lib/components/Buttons/Close/index.svelte b/src/lib/components/Buttons/Close/index.svelte
index 7a81c895..c2cb0d3f 100644
--- a/src/lib/components/Buttons/Close/index.svelte
+++ b/src/lib/components/Buttons/Close/index.svelte
@@ -4,7 +4,7 @@
 
   export let onClick;
   export let contained;
-  export let color = 'text-blue-700 bg-blue-200 dark:bg-gray-500';
+  export let color = 'text-primary-700 bg-primary-200 dark:bg-gray-500';
   export let size = 'large';
 </script>
 
@@ -15,4 +15,4 @@
     <CloseIcon size={20} class="carbon-icon dark:text-white" title="Delete" />
   {/if}
 </IconButton>
-<!-- color="text-blue-700 bg-blue-200 dark:bg-gray-200 dark:text-black" -->
+<!-- color="text-primary-700 bg-primary-200 dark:bg-gray-200 dark:text-black" -->
diff --git a/src/lib/components/ComingSoon/index.svelte b/src/lib/components/ComingSoon/index.svelte
index 7cc4df0e..2c86445a 100644
--- a/src/lib/components/ComingSoon/index.svelte
+++ b/src/lib/components/ComingSoon/index.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <p
-  class="org-avatar text-xs bg-blue-200 text-blue-700 font-bold py-1 px-1 rounded-md text-center"
+  class="org-avatar text-xs bg-primary-200 text-primary-700 font-bold py-1 px-1 rounded-md text-center"
 >
   {label}
 </p>
diff --git a/src/lib/components/Course/components/Ceritficate/Reports.svelte b/src/lib/components/Course/components/Ceritficate/Reports.svelte
index bac981f4..a1a72d0e 100644
--- a/src/lib/components/Course/components/Ceritficate/Reports.svelte
+++ b/src/lib/components/Course/components/Ceritficate/Reports.svelte
@@ -8,7 +8,7 @@
     StructuredListRow,
     StructuredListCell,
     StructuredListBody,
-    Pagination,
+    Pagination
   } from 'carbon-components-svelte';
 
   let searchValue = '';
@@ -17,9 +17,7 @@
 
 <section class="flex flex-wrap items-start gap-2 mb-10 -ml-4 -mr-4">
   {#each CertificateReportData as data (data.id)}
-    <div
-      class="box flex flex-col rounded border border-gray-200 justify-center px-2 mb-5"
-    >
+    <div class="box flex flex-col rounded border border-gray-200 justify-center px-2 mb-5">
       <p class="text-xs font-normal">{data.title}</p>
       <bold class="text-2xl font-medium">{data.value}</bold>
     </div>
@@ -39,22 +37,18 @@
 
 <section class="mt-14 border-t border-gray-300">
   <StructuredList>
-    <StructuredListHead class="bg-blue-50 py-0">
+    <StructuredListHead class="bg-primary-50 py-0">
       <StructuredListRow head class="py-0">
         <StructuredListCell head class="py-0">
           <div
-            class="flex-3 flex flex-row items-center justify-start w-full text-blue-600 text-sm font-medium"
+            class="flex-3 flex flex-row items-center justify-start w-full text-primary-600 text-sm font-medium"
           >
             <Checkbox bind:checked />
-            <p class="text-blue-900 text-start w-full text-sm font-medium">
-              Name of student
-            </p>
+            <p class="text-primary-900 text-start w-full text-sm font-medium">Name of student</p>
           </div>
         </StructuredListCell>
         <StructuredListCell head class="py-0">
-          <div
-            class="flex-2 items-center w-full text-blue-900 text-sm font-medium"
-          >
+          <div class="flex-2 items-center w-full text-primary-900 text-sm font-medium">
             <p class="align-middle text-sm font-medium pt-1">Date issued</p>
             <p class="opacity-0">personalized</p>
           </div>
@@ -76,8 +70,8 @@
             <div class="flex-2 flex flex-row items-center gap-10 w-full">
               <p class="text-sm font-normal align-middle">{item.issued}</p>
               {#if item.peronalized == true}
-                <span class="text-center bg-blue-100 px-3 py-2 rounded-lg">
-                  <p class="opacity-100 text-xs text-blue-600">personalized</p>
+                <span class="text-center bg-primary-100 px-3 py-2 rounded-lg">
+                  <p class="opacity-100 text-xs text-primary-600">personalized</p>
                 </span>
               {:else}
                 <p class="opacity-0">personalized</p>
diff --git a/src/lib/components/Course/components/Ceritficate/certificates/Professional.svelte b/src/lib/components/Course/components/Ceritficate/certificates/Professional.svelte
index f9b1d122..44d8b862 100644
--- a/src/lib/components/Course/components/Ceritficate/certificates/Professional.svelte
+++ b/src/lib/components/Course/components/Ceritficate/certificates/Professional.svelte
@@ -4,11 +4,13 @@
 
   export let studentName;
   let borderwidth = 'border-l-8';
-  let bordercolor = 'border-blue-800';
+  let bordercolor = 'border-primary-800';
   let logo = './logo-512.png';
 </script>
 
-<div class="certificate-bg flex items-center justify-center border border-dashed border-blue-400">
+<div
+  class="certificate-bg flex items-center justify-center border border-dashed border-primary-400"
+>
   <div class="{borderwidth} {bordercolor}">
     <div class="w-full px-5 py-3">
       <p class="text-sm font-normal my-2 uppercase text-gray-500">
@@ -24,7 +26,7 @@
         </p>
         <div>
           <p
-            class="clamp bg-transparent text-base font-semibold text-blue-800 text-center uppercase my-2"
+            class="clamp bg-transparent text-base font-semibold text-primary-800 text-center uppercase my-2"
           >
             {$course.title}
           </p>
diff --git a/src/lib/components/Course/components/Lesson/Exercise/DeleteConfirmation.svelte b/src/lib/components/Course/components/Lesson/Exercise/DeleteConfirmation.svelte
index 66dcef2f..84e2c779 100644
--- a/src/lib/components/Course/components/Lesson/Exercise/DeleteConfirmation.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercise/DeleteConfirmation.svelte
@@ -21,9 +21,7 @@
   modalHeading="Delete question"
 >
   <div>
-    <h1 class="dark:text-white text-lg">
-      Are you sure you want to delete this question?
-    </h1>
+    <h1 class="dark:text-white text-lg">Are you sure you want to delete this question?</h1>
 
     <div class="mt-5 flex items-center justify-between">
       <PrimaryButton
@@ -37,7 +35,7 @@
       />
       <PrimaryButton
         className="px-6 py-3"
-        variant={VARIANTS.CONTAINED_DANGER}
+        variant={VARIANTS.CONTAINED}
         label="Yes, delete"
         onClick={() => {
           onDelete();
diff --git a/src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte b/src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte
index 807c1626..41097a55 100644
--- a/src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte
@@ -132,7 +132,7 @@
         />
         <PrimaryButton
           className="px-6 py-3"
-          variant={VARIANTS.CONTAINED_DANGER}
+          variant={VARIANTS.CONTAINED}
           label={isDeleting ? 'Deleting...' : 'Yes, delete'}
           isDisabled={isDeleting}
           onClick={handleDelete}
@@ -168,7 +168,7 @@
       <div class="float-right">
         <PrimaryButton
           className="px-6 py-3"
-          variant={VARIANTS.CONTAINED_DANGER}
+          variant={VARIANTS.CONTAINED}
           label="Delete this exercise"
           onClick={() => (shouldDelete = true)}
         />
diff --git a/src/lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte b/src/lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte
index 430cc151..3dab291e 100644
--- a/src/lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte
@@ -22,18 +22,12 @@
   let maxPoints = 0;
 
   function getMaxPoints(questions) {
-    return (questions || []).reduce(
-      (acc, question) => acc + question.points,
-      0
-    );
+    return (questions || []).reduce((acc, question) => acc + question.points, 0);
   }
 
   function calculateTotal(grades) {
     if (!grades) return 0;
-    return Object.values(grades).reduce(
-      (acc, grade) => acc + parseInt(grade),
-      0
-    );
+    return Object.values(grades).reduce((acc, grade) => acc + parseInt(grade), 0);
   }
 
   function handleStatusChange() {
@@ -41,7 +35,7 @@
       submissionId: data.id,
       prevStatusId: data.status_id,
       nextStatusId: status.value,
-      total,
+      total
     });
 
     $snackbarStore.open = true;
@@ -49,9 +43,7 @@
   }
 
   function setStatus(data) {
-    status = SELECTABLE_STATUS.find(
-      (status) => status.value === data.status_id
-    );
+    status = SELECTABLE_STATUS.find((status) => status.value === data.status_id);
   }
 
   function getStatusColor(status) {
@@ -62,7 +54,7 @@
     //   case STATUS.SUBMITTED:
     //     return '';
     //   case STATUS.IN_PROGRESS:
-    //     return 'text-white bg-blue-700';
+    //     return 'text-white bg-primary-700';
     //   case STATUS.GRADED:
     //     return 'text-white bg-green-700';
     // }
@@ -91,7 +83,7 @@
         : []}
       questionnaireMetaData={{
         answers: data.answers || {},
-        isFinished: true,
+        isFinished: true
       }}
       bind:grades={data.questionAnswerByPoint}
     />
@@ -121,17 +113,9 @@
         <p class="dark:text-white font-bold text-lg">
           Details
           {#if data.isEarly}
-            <span
-              class="ml-2 text-sm badge rounded-sm px-2 bg-green-500 text-white"
-            >
-              early
-            </span>
+            <span class="ml-2 text-sm badge rounded-sm px-2 bg-green-500 text-white"> early </span>
           {:else}
-            <span
-              class="ml-2 badge text-sm rounded-sm px-2 bg-red-500 text-white"
-            >
-              late
-            </span>
+            <span class="ml-2 badge text-sm rounded-sm px-2 bg-red-500 text-white"> late </span>
           {/if}
         </p>
       </div>
diff --git a/src/lib/components/Course/components/Lesson/Exercise/OrderModal.svelte b/src/lib/components/Course/components/Lesson/Exercise/OrderModal.svelte
index 73754b0b..67bc8939 100644
--- a/src/lib/components/Course/components/Lesson/Exercise/OrderModal.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercise/OrderModal.svelte
@@ -39,16 +39,14 @@
         }
       });
     });
-    $questionnaire.questions = $questionnaire.questions.sort(
-      (a, b) => a.order - b.order
-    );
+    $questionnaire.questions = $questionnaire.questions.sort((a, b) => a.order - b.order);
     $questionnaireOrder.open = false;
   }
 
   $: items = filterOutDeleted($questionnaire.questions).map((q) => ({
     id: q.id,
     name: q.title,
-    type: q.question_type.id,
+    type: q.question_type.id
   }));
 </script>
 
@@ -64,8 +62,8 @@
       flipDurationMs,
       dropTargetStyle: {
         border: '2px #1d4ed8 solid',
-        'border-style': 'dashed',
-      },
+        'border-style': 'dashed'
+      }
     }}
     on:consider={handleDndConsider}
     on:finalize={handleDndFinalize}
@@ -74,7 +72,7 @@
     {#each items as item (item.id)}
       <div
         animate:flip={{ duration: flipDurationMs }}
-        class="flex items-center rounded-md p-4 border border-blue-600"
+        class="flex items-center rounded-md p-4 border border-primary-600"
       >
         {#if item.type === 1}
           <RadioButtonCheckedIcon size={16} class="carbon-icon active" />
diff --git a/src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte b/src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte
index 3d37bcd7..50803a0e 100644
--- a/src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte
+++ b/src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte
@@ -173,7 +173,7 @@
     <h2 class="text-xl my-1.5">No question added for this exercise</h2>
     <p class="text-sm text-center px-44">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
-        Click the <span class="text-blue-700">Edit</span> button to add.
+        Click the <span class="text-primary-700">Edit</span> button to add.
       </RoleBasedSecurity>
     </p>
   </Box>
diff --git a/src/lib/components/Course/components/Lesson/Materials/Video/LocalVideo.svelte b/src/lib/components/Course/components/Lesson/Materials/Video/LocalVideo.svelte
index c4982cff..a8da41ee 100644
--- a/src/lib/components/Course/components/Lesson/Materials/Video/LocalVideo.svelte
+++ b/src/lib/components/Course/components/Lesson/Materials/Video/LocalVideo.svelte
@@ -115,7 +115,7 @@
     disabled={isLoading}
   >
     <form
-      class="h-full w-full flex flex-col items-center justify-center border border-blue-300 border-dashed rounded-xl"
+      class="h-full w-full flex flex-col items-center justify-center border border-primary-300 border-dashed rounded-xl"
       on:submit|preventDefault={onUpload}
     >
       {#if isLoading}
diff --git a/src/lib/components/Course/components/Navigation/index.svelte b/src/lib/components/Course/components/Navigation/index.svelte
index 584b12f3..43f08fbe 100644
--- a/src/lib/components/Course/components/Navigation/index.svelte
+++ b/src/lib/components/Course/components/Navigation/index.svelte
@@ -203,7 +203,7 @@
                     >
                       <TextChip
                         value={getLectureNo(index + 1)}
-                        className="bg-blue-200 text-blue-600 text-xs mr-2"
+                        className="bg-primary-200 text-primary-600 text-xs mr-2"
                         size="sm"
                         shape="rounded-full"
                       />
@@ -253,7 +253,7 @@
 
 <style lang="scss">
   .root {
-    height: calc(100vh - 44px);
+    height: calc(100vh - 45px);
     display: flex;
     flex-direction: column;
     min-width: 360px;
diff --git a/src/lib/components/Course/components/Settings/index.svelte b/src/lib/components/Course/components/Settings/index.svelte
index 1b7d8931..0bf445e4 100644
--- a/src/lib/components/Course/components/Settings/index.svelte
+++ b/src/lib/components/Course/components/Settings/index.svelte
@@ -28,7 +28,7 @@
     $settingsDialog.open = false;
     const logo = await updateCourse($course.id, avatar, {
       title: $course.title,
-      description: $course.description,
+      description: $course.description
     });
 
     if (logo) {
@@ -100,7 +100,7 @@
       <div class="mt-5 flex items-center justify-between">
         <PrimaryButton
           className="px-6 py-3"
-          variant={VARIANTS.CONTAINED_DANGER}
+          variant={VARIANTS.CONTAINED}
           label="Delete"
           onClick={() => (shouldDelete = true)}
         />
diff --git a/src/lib/components/CourseLandingPage/index.svelte b/src/lib/components/CourseLandingPage/index.svelte
index 6a160d61..8018f47e 100644
--- a/src/lib/components/CourseLandingPage/index.svelte
+++ b/src/lib/components/CourseLandingPage/index.svelte
@@ -176,7 +176,7 @@
             <a
               href="{$page.url.pathname}{navItem.key}"
               class="{navItem.key === activeNav &&
-                'active text-blue-700'} rounded-lg px-2 mr-6 text-slate-700 font-normal hover:bg-slate-100 hover:text-slate-900 dark:text-white"
+                'active text-primary-700'} rounded-lg px-2 mr-6 text-slate-700 font-normal hover:bg-slate-100 hover:text-slate-900 dark:text-white"
             >
               {navItem.label}
             </a>
@@ -229,7 +229,10 @@
           {#each lessons as lesson, index}
             <div class="w-full flex md:items-center justify-between mb-6 flex-col md:flex-row">
               <div class="flex items-center mb-3">
-                <Chip value={getLectureNo(index + 1, '0')} className="bg-blue-100 text-blue-700" />
+                <Chip
+                  value={getLectureNo(index + 1, '0')}
+                  className="bg-primary-100 text-primary-700"
+                />
                 <p class="dark:text-white ml-2 text-sm font-light">
                   {lesson.title}
                 </p>
@@ -305,13 +308,13 @@
                       </div>
                       {#if !expandDescription[id] && review.description.split(' ').length > 9}
                         <button
-                          class="underline text-blue-700 mt-2 font-normal"
+                          class="underline text-primary-700 mt-2 font-normal"
                           on:click={() => toggleDescription(id)}>See More</button
                         >
                       {/if}
                       {#if expandDescription[id]}
                         <button
-                          class="underline text-blue-700 mt-2 font-normal"
+                          class="underline text-primary-700 mt-2 font-normal"
                           on:click={() => toggleDescription(id)}>See Less</button
                         >
                       {/if}
@@ -400,7 +403,7 @@
                 {get(instructor, 'role', '')}
               </p>
               <p class="dark:text-white text-md font-light flex items-center">
-                <PlayFilled size={16} class="text-blue-700" />
+                <PlayFilled size={16} class="text-primary-700" />
                 <span class="ml-1">{get(instructor, 'courseNo', '')} courses</span>
               </p>
             </div>
diff --git a/src/lib/components/Dropdown/index.svelte b/src/lib/components/Dropdown/index.svelte
index 5965b2cf..92aaeff1 100644
--- a/src/lib/components/Dropdown/index.svelte
+++ b/src/lib/components/Dropdown/index.svelte
@@ -46,9 +46,8 @@
     >
       {#each options as option, index}
         <button
-          class="block px-4 py-3 text-left hover:bg-blue-100 {!isOptionLast(
-            index
-          ) && 'border-b'} w-full dark:text-white dark:hover:text-black"
+          class="block px-4 py-3 text-left hover:bg-primary-100 {!isOptionLast(index) &&
+            'border-b'} w-full dark:text-white dark:hover:text-black"
           on:click={onClick(option)}
         >
           {option.label}
@@ -60,8 +59,8 @@
 
 <style>
   .dropdown {
-    box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%),
-      0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%);
+    box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%),
+      0px 3px 14px 2px rgb(0 0 0 / 12%);
     right: 0px;
     top: 20px;
     left: unset;
diff --git a/src/lib/components/EditContent/index.svelte b/src/lib/components/EditContent/index.svelte
index e3734f92..82441b6f 100644
--- a/src/lib/components/EditContent/index.svelte
+++ b/src/lib/components/EditContent/index.svelte
@@ -9,7 +9,7 @@
   export let textAreaHeight = '';
   export let textareaRef;
   export let buttonRef;
-  const activeClassName = 'border-b-2 border-blue-700';
+  const activeClassName = 'border-b-2 border-primary-700';
 
   const handleTabClick = (tab) => () => {
     isWriteMode = tab === 1;
@@ -76,7 +76,7 @@
         Styling with Markdown is supported.
         <a
           target="_blank"
-          class="text-blue-500 underline"
+          class="text-primary-500 underline"
           href="https://guides.github.com/features/mastering-markdown"
         >
           Learn more
diff --git a/src/lib/components/Email/EmailTemplate.svelte b/src/lib/components/Email/EmailTemplate.svelte
index 83d22ab4..8e1254b4 100644
--- a/src/lib/components/Email/EmailTemplate.svelte
+++ b/src/lib/components/Email/EmailTemplate.svelte
@@ -24,7 +24,8 @@
 
       <!-- Footer -->
       <div class="w-full p-6 border-t border-grey text-center">
-        Already have an account? <a class="hover:underline text-blue-700" href="/login">Log In</a>
+        Already have an account? <a class="hover:underline text-primary-700" href="/login">Log In</a
+        >
       </div>
     </div>
   </div>
diff --git a/src/lib/components/Footer/index.svelte b/src/lib/components/Footer/index.svelte
index 320ff2be..42ce9777 100644
--- a/src/lib/components/Footer/index.svelte
+++ b/src/lib/components/Footer/index.svelte
@@ -7,10 +7,8 @@
   <div class="flex justify-center w-full">
     <span class="text-gray-700 text-sm py-3"
       >Created with love by
-      <a
-        class="underline text-blue-700"
-        href="https://twitter.com/rotimi_best"
-        target="_blank">Rotimi Best</a
+      <a class="underline text-primary-700" href="https://twitter.com/rotimi_best" target="_blank"
+        >Rotimi Best</a
       ></span
     >
   </div>
diff --git a/src/lib/components/Form/TextArea.svelte b/src/lib/components/Form/TextArea.svelte
index 9bf0b22a..c4394cab 100644
--- a/src/lib/components/Form/TextArea.svelte
+++ b/src/lib/components/Form/TextArea.svelte
@@ -6,7 +6,7 @@
   export let maxRows = 3;
   export let className = '';
   export let labelClassName = '';
-  export let bgColor = 'bg-gray-50 focus:bg-blue-50 dark:bg-white';
+  export let bgColor = 'bg-gray-50 focus:bg-primary-50 dark:bg-white';
   export let helperMessage = '';
   export let errorMessage = '';
   export let isRequired = false;
@@ -38,7 +38,7 @@
     {placeholder}
     bind:value
     required={isRequired}
-    class="form-textarea dark:bg-gray-500 border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-blue-600 mt-1 block w-full
+    class="form-textarea dark:bg-gray-500 border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-primary-600 mt-1 block w-full
     {bgColor} {!!errorMessage ? 'border-red-500' : 'border-gray-300'}"
     on:change={onChange}
   />
diff --git a/src/lib/components/Form/TextField.svelte b/src/lib/components/Form/TextField.svelte
index a046d5ad..15791e70 100644
--- a/src/lib/components/Form/TextField.svelte
+++ b/src/lib/components/Form/TextField.svelte
@@ -11,7 +11,7 @@
   export let className = '';
   export let inputClassName = '';
   export let labelClassName = '';
-  export let bgColor = 'bg-gray-100 focus:bg-blue-50 dark:bg-white';
+  export let bgColor = 'bg-gray-100 focus:bg-primary-50 dark:bg-white';
   export let type = 'text';
   export let isPassword = false;
   export let autoFocus = false;
@@ -67,7 +67,7 @@
   {/if}
   <input
     use:typeAction
-    class="form-input border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-blue-600 {inputClassName} {focusClass} dark:text-black p-3 mt-1 block w-full {bgColor} {errorMessage
+    class="form-input border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 focus:border-primary-600 {inputClassName} {focusClass} dark:text-black p-3 mt-1 block w-full {bgColor} {errorMessage
       ? 'border-red-600'
       : ''}"
     on:keydown={onKeyDown}
diff --git a/src/lib/components/HashTags/index.svelte b/src/lib/components/HashTags/index.svelte
index ef3451fd..7d5686e2 100644
--- a/src/lib/components/HashTags/index.svelte
+++ b/src/lib/components/HashTags/index.svelte
@@ -4,9 +4,8 @@
 
 <div class="break-all">
   {#each tags as tag}
-    <a
-      class="text-blue-700 dark:text-blue-500 mr-5 text-sm"
-      href="?filter={tag}">#{tag.toLowerCase()}</a
+    <a class="text-primary-700 dark:text-primary-500 mr-5 text-sm" href="?filter={tag}"
+      >#{tag.toLowerCase()}</a
     >
   {/each}
 </div>
diff --git a/src/lib/components/Icons/SiteSettingsIcon.svelte b/src/lib/components/Icons/SiteSettingsIcon.svelte
index cb7e5b1c..9e0db91a 100644
--- a/src/lib/components/Icons/SiteSettingsIcon.svelte
+++ b/src/lib/components/Icons/SiteSettingsIcon.svelte
@@ -4,7 +4,7 @@
   viewBox="0 0 24 24"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
-  class="dark"
+  class=""
 >
   <path
     fill-rule="evenodd"
diff --git a/src/lib/components/LMS/SideBar.svelte b/src/lib/components/LMS/SideBar.svelte
index cb7bda98..b877ec69 100644
--- a/src/lib/components/LMS/SideBar.svelte
+++ b/src/lib/components/LMS/SideBar.svelte
@@ -59,7 +59,7 @@
           height="h-7"
         />
       {:else}
-        <TextChip value={$currentOrg.shortName} className="bg-blue-200 font-bold" />
+        <TextChip value={$currentOrg.shortName} className="bg-primary-200 font-bold" />
       {/if}
 
       <OrgSelector />
@@ -77,7 +77,7 @@
                 this={item.icon}
                 color={isActive($page.url.pathname, `${item.link}`) ? 'black' : 'gray'}
                 size={24}
-                class="carbon-icon dark:text-white"
+                class="carbon-icon text-white"
               />
               <p class="dark:text-white ml-2">{item.name}</p>
             </li>
@@ -88,16 +88,14 @@
     <span class="flex-grow" />
     <ul class="my-5 pb-5 px-4">
       <a href="/lms" class="text-black">
-        <li
-          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800"
-        >
+        <li class="flex items-center py-3 px-4 mb-2 rounded">
           <HelpIcon size={20} class="carbon-icon dark:text-white" />
           <p class="dark:text-white ml-2">Help</p>
         </li>
       </a>
       <a href="/lms/settings" class="text-black">
         <li
-          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
+          class="flex items-center py-3 px-4 mb-2 rounded {isActive(
             $page.url.pathname,
             `/lms/settings`
           ) && NavClasses.active}"
diff --git a/src/lib/components/LMS/components/Student.svelte b/src/lib/components/LMS/components/Student.svelte
index 44e1ba9f..4d39269c 100644
--- a/src/lib/components/LMS/components/Student.svelte
+++ b/src/lib/components/LMS/components/Student.svelte
@@ -40,7 +40,7 @@
       <div class="header w-full flex items-center">
         <Datepicker bind:store let:key let:send let:receive>
           <button
-            class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
+            class="text-lg font-bold text-primary-700 p-3 hover:bg-gray-300 rounded-md"
             in:receive|local={{ key }}
             out:send|local={{ key }}
           >
diff --git a/src/lib/components/MarkdownEditor/index.svelte b/src/lib/components/MarkdownEditor/index.svelte
index 3c1af08a..492fd2bc 100644
--- a/src/lib/components/MarkdownEditor/index.svelte
+++ b/src/lib/components/MarkdownEditor/index.svelte
@@ -1,7 +1,7 @@
 <script>
   export let value;
   export let placeholder = ``;
-  const activeClassName = 'border-b-2 border-blue-700';
+  const activeClassName = 'border-b-2 border-primary-700';
   let isWriteMode = true;
 
   const handleTabClick = (tab) => (event) => {
diff --git a/src/lib/components/Navigation/app.svelte b/src/lib/components/Navigation/app.svelte
index d124567f..04a65408 100644
--- a/src/lib/components/Navigation/app.svelte
+++ b/src/lib/components/Navigation/app.svelte
@@ -17,7 +17,7 @@
   export let navClass = '';
   export let isCoursePage = false;
 
-  function toggleTheme() {
+  function toggleDarkMode() {
     $appStore.isDark = !$appStore.isDark;
 
     toggleBodyByTheme($appStore.isDark);
@@ -36,7 +36,9 @@
   }
 </script>
 
-<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-700">
+<nav
+  class="{navClass} flex w-full p-1 md:px-6 bg-primary-700 transition delay-150 duration-300 ease-in-out"
+>
   <ul class="flex w-full items-center">
     <div class="flex items-center text-white">
       {#if isCoursePage}
@@ -66,7 +68,7 @@
       <NotificationIcon size={20} class="text-white mr-2" />
     </li>
     <li>
-      <IconButton size="small" onClick={toggleTheme}>
+      <IconButton size="small" onClick={toggleDarkMode}>
         {#if $appStore.isDark}
           <Sun size={16} class="text-white" />
         {:else}
@@ -100,21 +102,6 @@
     font-weight: 700;
   }
 
-  /* [aria-current] {
-    color: var(--main-primary-color);
-    position: relative;
-    display: inline-block;
-  }
-  [aria-current]::after {
-    position: absolute;
-    content: '';
-    width: calc(100% - 3em);
-    height: 2px;
-    background-color: var(--main-primary-color);
-    display: block;
-    bottom: -17px;
-  } */
-
   @media only screen and (max-width: 1002px) {
     nav.hide {
       display: none;
diff --git a/src/lib/components/Navigation/lms.svelte b/src/lib/components/Navigation/lms.svelte
index 9f5f3735..32f472a6 100644
--- a/src/lib/components/Navigation/lms.svelte
+++ b/src/lib/components/Navigation/lms.svelte
@@ -11,7 +11,7 @@
 
   export let navClass = '';
 
-  function toggleTheme() {
+  function toggleDarkMode() {
     $appStore.isDark = !$appStore.isDark;
 
     toggleBodyByTheme($appStore.isDark);
@@ -21,7 +21,7 @@
   }
 </script>
 
-<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-600">
+<nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-600">
   <ul class="flex w-full items-center">
     <div class="">
       <a href={$page.url.pathname} title="Go to ClassroomIO Home" id="logo" class="text-lg">
@@ -35,7 +35,7 @@
       <NotificationIcon size={20} class="text-white mr-2" />
     </li>
     <li>
-      <IconButton size="small" onClick={toggleTheme}>
+      <IconButton size="small" onClick={toggleDarkMode}>
         {#if $appStore.isDark}
           <SunIcon size={16} class="text-white" />
         {:else}
diff --git a/src/lib/components/Org/Community/DeleteCommentModal.svelte b/src/lib/components/Org/Community/DeleteCommentModal.svelte
index 8fdf1bc8..0679954c 100644
--- a/src/lib/components/Org/Community/DeleteCommentModal.svelte
+++ b/src/lib/components/Org/Community/DeleteCommentModal.svelte
@@ -8,16 +8,9 @@
   export let open = false;
 </script>
 
-<Modal
-  onClose={() => (open = false)}
-  bind:open
-  width="w-96"
-  modalHeading="Delete comment"
->
+<Modal onClose={() => (open = false)} bind:open width="w-96" modalHeading="Delete comment">
   <div>
-    <h1 class="dark:text-white text-lg">
-      Are you sure you want to delete this comment?
-    </h1>
+    <h1 class="dark:text-white text-lg">Are you sure you want to delete this comment?</h1>
 
     <div class="mt-5 flex items-center justify-between">
       <PrimaryButton
@@ -28,7 +21,7 @@
       />
       <PrimaryButton
         className="px-6 py-3"
-        variant={VARIANTS.CONTAINED_DANGER}
+        variant={VARIANTS.CONTAINED}
         label="Yes, delete"
         onClick={onDelete}
       />
diff --git a/src/lib/components/Org/LandingPage/index.svelte b/src/lib/components/Org/LandingPage/index.svelte
index eb9b543d..d2d60c84 100644
--- a/src/lib/components/Org/LandingPage/index.svelte
+++ b/src/lib/components/Org/LandingPage/index.svelte
@@ -145,15 +145,15 @@
     <div class="absolute h-[80vh] top-0 w-full opacity-80 z-10 bg-white" />
 
     {#if video}
-      <div class="flex items-center justify-center">
+      <div class="flex items-center justify-center h-full">
         <div
           class="md:w-11/12 lg:w-5/6 w-full flex items-center justify-between flex-col-reverse md:flex-row z-20 relative"
         >
           <!-- Course Description -->
           <div class="md:w-2/5 w-11/12 py-10 flex flex-col items-start mr-3">
-            <p class=" text-blue-600 text-2xl font-semibold">Coding Dojo</p>
+            <p class=" text-primary-600 text-2xl font-semibold">Coding Dojo</p>
             <h1 class="text-4xl md:text-5xl lg:text-6xl my-4 font-bold">
-              Web Developement Courses for <br /><span class="text-blue-600">Everyone</span>
+              Web Developement Courses for <br /><span class="text-primary-600">Everyone</span>
             </h1>
             <p class="text-md mb-6 text-xl">
               Practical project-based courses that are easy to understand and straight to the point
@@ -179,9 +179,9 @@
     {:else}
       <div class="w-full h-full flex items-center justify-center md:flex-row z-20 relative">
         <div class="max-w-[600px] mx-auto w-11/12 py-10 flex flex-col items-center">
-          <p class=" text-blue-600 text-2xl font-semibold">Coding Dojo</p>
+          <p class=" text-primary-600 text-2xl font-semibold">Coding Dojo</p>
           <h1 class="text-4xl md:text-6xl text-center my-4 font-bold">
-            Web Developement Courses for <br /><span class="text-blue-600">Everyone</span>
+            Web Developement Courses for <br /><span class="text-primary-600">Everyone</span>
           </h1>
           <p class="text-md mb-6 text-center text-xl">
             Practical project-based courses that are easy to understand and straight to the point
@@ -227,7 +227,7 @@
     <div class="w-full">
       <div class="max-w-[500px] mx-auto w-11/12 py-10">
         <h1 class="text-5xl text-center my-4 font-bold">
-          Explore our <span class="text-blue-600">Courses</span>
+          Explore our <span class="text-primary-600">Courses</span>
         </h1>
         <p class="text-md text-center">
           Find courses you will love from best teachers all over the world🌎.
@@ -297,11 +297,11 @@
   </section>
 
   <!-- Contact Section-->
-  <section id="contact" transition:fade class="my-10 w-full bg-blue-50">
+  <section id="contact" transition:fade class="my-10 w-full bg-primary-50">
     <div class="mx-auto max-w-6xl w-full">
       <div class="max-w-[500px] mx-auto w-11/12 py-10">
         <h1 class="text-5xl text-center my-4 font-bold">
-          Have you got any <span class="text-blue-600">Question?</span>
+          Have you got any <span class="text-primary-600">Question?</span>
         </h1>
         <p class="text-md text-center">Reach out to us with any question you might have.</p>
       </div>
@@ -393,7 +393,7 @@
   <!-- Waitlist Section -->
   <section id="waitlist" transition:fade class="my-10 mx-auto max-w-6xl w-[95%]">
     <div
-      class="bg-blue-700 rounded-lg flex flex-col lg:flex-row lg:items-center px-4 md:px-10 py-14"
+      class="bg-primary-700 rounded-lg flex flex-col lg:flex-row lg:items-center px-4 md:px-10 py-14"
     >
       <div class="w-full md:w-[65%] md:mr-4">
         <h1 class="text-4xl font-bold mb-5 mt-0 text-white">Join our mailing list</h1>
@@ -474,7 +474,7 @@
     </ul>
     <p class="text-center mt-5">
       Powered by
-      <a class="text-blue-600 underline" href="https://classroomio.com" target="_blank"
+      <a class="text-primary-600 underline" href="https://classroomio.com" target="_blank"
         >ClassroomIO</a
       >
     </p>
diff --git a/src/lib/components/Org/Quiz/DeleteModal.svelte b/src/lib/components/Org/Quiz/DeleteModal.svelte
index 3a0b7bbb..5095179e 100644
--- a/src/lib/components/Org/Quiz/DeleteModal.svelte
+++ b/src/lib/components/Org/Quiz/DeleteModal.svelte
@@ -12,15 +12,12 @@
       ...m,
       open: false,
       id: null,
-      isQuestion: false,
+      isQuestion: false
     }));
   }
 
   async function deleteQuiz() {
-    const { data, error } = await supabase
-      .from('quiz')
-      .delete()
-      .match({ id: $deleteModal.id });
+    const { data, error } = await supabase.from('quiz').delete().match({ id: $deleteModal.id });
     console.log('data', data);
     console.log('error', error);
 
@@ -53,7 +50,7 @@
     <div class="mt-5">
       <PrimaryButton
         className="px-6 py-3"
-        variant={VARIANTS.CONTAINED_DANGER}
+        variant={VARIANTS.CONTAINED}
         label="Delete"
         onClick={() => {
           if ($deleteModal.isQuestion) {
diff --git a/src/lib/components/Org/Quiz/Play/Header/CircleContent.svelte b/src/lib/components/Org/Quiz/Play/Header/CircleContent.svelte
index 82b135de..b6c16646 100644
--- a/src/lib/components/Org/Quiz/Play/Header/CircleContent.svelte
+++ b/src/lib/components/Org/Quiz/Play/Header/CircleContent.svelte
@@ -12,18 +12,18 @@
       css: (t) => `
 				${slideTrans.css(t)}
 				opacity: ${t};
-			`,
+			`
     };
   }
 </script>
 
 <div class="circle flex items-center flex-col justify-center {className}">
   {#key value}
-    <h3 class="text-blue-600" transition:fadeSlide={{ duration: 500 }}>
+    <h3 class="text-primary-600" transition:fadeSlide={{ duration: 500 }}>
       {value}
     </h3>
   {/key}
-  <p class="text-blue-600 text-md">{label}</p>
+  <p class="text-primary-600 text-md">{label}</p>
 </div>
 
 <style>
diff --git a/src/lib/components/Org/Settings/OrgSettings.svelte b/src/lib/components/Org/Settings/OrgSettings.svelte
index 6feaa269..22baa558 100644
--- a/src/lib/components/Org/Settings/OrgSettings.svelte
+++ b/src/lib/components/Org/Settings/OrgSettings.svelte
@@ -13,29 +13,50 @@
 
   let avatar;
   let loading = false;
+  const themes = {
+    rose: 'theme-rose',
+    green: 'theme-green',
+    orange: 'theme-orange',
+    violet: 'theme-violet',
+    default: ''
+  };
+
+  function handleChangeTheme(t = '') {
+    return async () => {
+      document.body.className = document.body.className
+        .split(' ')
+        .filter((c) => !c.includes('theme'))
+        .join(' ')
+        .concat(!!t ? ' ' : '', t);
+      $currentOrg.theme = t;
+
+      const res = await supabase
+        .from('organization')
+        .update({ theme: t })
+        .match({ id: $currentOrg.id });
+
+      console.log('Update theme', res);
+    };
+  }
 
   async function handleUpdate() {
     try {
       loading = true;
 
       const updates = {
-        name: $currentOrg.name,
+        name: $currentOrg.name
       };
 
       if (avatar) {
         const filename = `user/${$currentOrg.name + Date.now()}.webp`;
 
-        const { data } = await supabase.storage
-          .from('avatars')
-          .upload(filename, avatar, {
-            cacheControl: '3600',
-            upsert: false,
-          });
+        const { data } = await supabase.storage.from('avatars').upload(filename, avatar, {
+          cacheControl: '3600',
+          upsert: false
+        });
 
         if (data && data.Key) {
-          const { publicURL } = supabase.storage
-            .from('avatars')
-            .getPublicUrl(filename);
+          const { publicURL } = supabase.storage.from('avatars').getPublicUrl(filename);
 
           updates.avatar_url = publicURL;
           $currentOrg.avatar_url = publicURL;
@@ -50,7 +71,7 @@
 
       currentOrg.update((_currentOrg) => ({
         ..._currentOrg,
-        ...updates,
+        ...updates
       }));
       $snackbarStore.open = true;
       $snackbarStore.message = 'Update successful';
@@ -78,15 +99,9 @@
 
 <Grid class="border-c rounded border-gray-200 w-full mt-5">
   <Row class="py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}
-      ><SectionTitle>Organization Profile</SectionTitle></Column
-    >
+    <Column sm={2} md={2} lg={4}><SectionTitle>Organization Profile</SectionTitle></Column>
     <Column sm={2} md={6} lg={8}>
-      <TextField
-        label="Organization Name"
-        bind:value={$currentOrg.name}
-        className="w-60 mb-5"
-      />
+      <TextField label="Organization Name" bind:value={$currentOrg.name} className="w-60 mb-5" />
       <UploadImage
         bind:avatar
         src={$currentOrg.avatar_url}
@@ -102,24 +117,64 @@
       />
     </Column>
   </Row>
-  <!-- <Row class="py-7 border-bottom-c">
+  <Row class="py-7 border-bottom-c">
     <Column sm={2} md={2} lg={4}><SectionTitle>Theme</SectionTitle></Column>
     <Column sm={2} md={6} lg={8}>
-      <h4 class="dark:text-white">Set your brand</h4>
+      <h4 class="dark:text-white mt-0">Set your brand color</h4>
+
+      <div class="flex gap-2">
+        <button
+          class="rounded-full border-2 {$currentOrg.theme === themes.default &&
+            'border-[#1d4ee2]'} mr-3"
+          on:click={handleChangeTheme(themes.default)}
+        >
+          <div class="w-6 h-6 bg-[#1d4ee2] rounded-full m-1" />
+        </button>
+
+        <button
+          class="rounded-full border-2 {$currentOrg.theme === themes.rose &&
+            'border-[#be1241]'} mr-3"
+          on:click={handleChangeTheme(themes.rose)}
+        >
+          <div class="w-6 h-6 bg-[#be1241] rounded-full m-1" />
+        </button>
+
+        <button
+          class="rounded-full border-2 {$currentOrg.theme === themes.green &&
+            'border-[#0c891b]'} mr-3"
+          on:click={handleChangeTheme(themes.green)}
+        >
+          <div class="w-6 h-6 bg-[#0c891b] rounded-full m-1" />
+        </button>
+
+        <button
+          class="rounded-full border-2 {$currentOrg.theme === themes.orange &&
+            'border-[#cc4902]'} mr-3"
+          on:click={handleChangeTheme(themes.orange)}
+        >
+          <div class="w-6 h-6 bg-[#cc4902] rounded-full m-1" />
+        </button>
+
+        <button
+          class="rounded-full border-2 {$currentOrg.theme === themes.violet &&
+            'border-[#cf00ce]'} mr-3"
+          on:click={handleChangeTheme(themes.violet)}
+        >
+          <div class="w-6 h-6 bg-[#cf00ce] rounded-full m-1" />
+        </button>
+      </div>
     </Column>
-  </Row> -->
+  </Row>
   <Row class="py-7 border-bottom-c">
-    <Column sm={2} md={2} lg={4}
-      ><SectionTitle>Custom Domain</SectionTitle></Column
-    >
+    <Column sm={2} md={2} lg={4}><SectionTitle>Custom Domain</SectionTitle></Column>
     <Column sm={2} md={6} lg={8}>
-      <h4 class="dark:text-white">Customise your Domain</h4>
+      <h4 class="dark:text-white mt-0">Customise your Domain</h4>
       <p class="text-sm text-gray-500 dark:text-white">
         Create a custom URL so your audience can get to your organization easily
       </p>
       <PrimaryButton
         label="Edit domain"
-        className="my-7 py-5 px-10 text-blue-700"
+        className="my-7 py-5 px-10 text-primary-700"
         variant={VARIANTS.OUTLINED}
         onClick={() => gotoSetting('/domains')}
       />
@@ -130,12 +185,11 @@
     <Column sm={2} md={6} lg={8}>
       <h4 class="dark:text-white">Set up your website</h4>
       <p class="text-sm text-gray-500 dark:text-white">
-        Add team mates to your organization so you can both collaborate on
-        projects.
+        Add team mates to your organization so you can both collaborate on projects.
       </p>
       <PrimaryButton
         label="Manage Team"
-        className="my-7 py-5 px-10 text-blue-700"
+        className="my-7 py-5 px-10 text-primary-700"
         variant={VARIANTS.OUTLINED}
         onClick={() => gotoSetting('/teams')}
       />
diff --git a/src/lib/components/Org/Settings/Profile.svelte b/src/lib/components/Org/Settings/Profile.svelte
index cdc8b10f..15064470 100644
--- a/src/lib/components/Org/Settings/Profile.svelte
+++ b/src/lib/components/Org/Settings/Profile.svelte
@@ -99,6 +99,6 @@
       isDisabled={loading}
       onClick={handleUpdate}
     />
-    <PrimaryButton variant={VARIANTS.CONTAINED_DANGER} label="Log out" onClick={logout} />
+    <PrimaryButton variant={VARIANTS.OUTLINED} label="Log out" onClick={logout} />
   </Row>
 </Grid>
diff --git a/src/lib/components/Org/SideBar.svelte b/src/lib/components/Org/SideBar.svelte
index 7dbdc28a..0816f221 100644
--- a/src/lib/components/Org/SideBar.svelte
+++ b/src/lib/components/Org/SideBar.svelte
@@ -68,7 +68,7 @@
           height="h-7"
         />
       {:else if $currentOrg.shortName}
-        <TextChip value={$currentOrg.shortName} className="bg-blue-200 font-bold" />
+        <TextChip value={$currentOrg.shortName} className="bg-primary-200 font-bold" />
       {/if}
 
       <OrgSelector />
@@ -77,7 +77,7 @@
         {#each menuItems as menuItem}
           <a href="{$currentOrgPath}{menuItem.path}" class="text-black no-underline">
             <li
-              class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
+              class="flex items-center py-3 px-4 mb-2 rounded hover:bg-primary-200 dark:hover:bg-gray-700 {isActive(
                 $page.url.pathname,
                 `${$currentOrgPath}${menuItem.path}`
               ) && NavClasses.active}"
@@ -107,16 +107,14 @@
     <span class="flex-grow" />
     <ul class="my-5 pb-5 px-4">
       <a href={$currentOrgPath} class="text-black no-underline">
-        <li
-          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800"
-        >
+        <li class="flex items-center py-3 px-4 mb-2 rounded">
           <HelpIcon size={20} class="carbon-icon dark:text-white" />
           <p class="dark:text-white ml-2">Help</p>
         </li>
       </a>
       <a href="{$currentOrgPath}/settings" class="text-black no-underline">
         <li
-          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 {isActive(
+          class="flex items-center py-3 px-4 mb-2 rounded {isActive(
             $page.url.pathname,
             `${$currentOrgPath}/settings`
           ) && NavClasses.active}"
diff --git a/src/lib/components/OrgSelector/OrgSelectorItem.svelte b/src/lib/components/OrgSelector/OrgSelectorItem.svelte
index 0405ef1e..11b5997e 100644
--- a/src/lib/components/OrgSelector/OrgSelectorItem.svelte
+++ b/src/lib/components/OrgSelector/OrgSelectorItem.svelte
@@ -13,15 +13,14 @@
 
 <div class="relative">
   <button
-    class="{disabled &&
-      'opacity-25'} flex items-center w-60 py-2 px-3 {hasDivider &&
-      'border-b border-gray-100'} {active && 'bg-blue-100 dark:bg-gray-500'}"
+    class="{disabled && 'opacity-25'} flex items-center w-60 py-2 px-3 {hasDivider &&
+      'border-b border-gray-100'} {active && 'bg-primary-100 dark:bg-gray-500'}"
     on:click={onClick}
   >
     {#if avatarText}
       <TextChip
         value={avatarText}
-        className="mr-2 bg-blue-200 font-bold dark:bg-gray-600"
+        className="mr-2 bg-primary-200 font-bold dark:bg-gray-600"
         {size}
       />
     {/if}
diff --git a/src/lib/components/PageBody/index.svelte b/src/lib/components/PageBody/index.svelte
index 70676a48..1c9117a7 100644
--- a/src/lib/components/PageBody/index.svelte
+++ b/src/lib/components/PageBody/index.svelte
@@ -1,6 +1,6 @@
 <script>
   // import
-  //   border border-gray-300 rounded-md p-3 bg-blue-200 bg-opacity-25
+  //   border border-gray-300 rounded-md p-3 bg-primary-200 bg-opacity-25
   export let width = 'max-w-4xl w-full lg:w-11/12';
   export let padding = 'pb-5 px-4';
   export let className = '';
diff --git a/src/lib/components/PrimaryButton/constants.js b/src/lib/components/PrimaryButton/constants.js
index dfe4751d..a5ac46f8 100644
--- a/src/lib/components/PrimaryButton/constants.js
+++ b/src/lib/components/PrimaryButton/constants.js
@@ -12,15 +12,16 @@ export const VARIANTS = {
 };
 
 export const VARIANTS_CLASS = {
-  [VARIANTS.CONTAINED]: 'border-none bg-blue-700 hover:bg-blue-900 text-white font-bold',
-  [VARIANTS.CONTAINED_LIGHT]: 'border-none bg-blue-600 hover:bg-blue-900 text-white font-bold',
+  [VARIANTS.CONTAINED]: 'border-none bg-primary-700 hover:bg-primary-900 text-white font-bold',
+  [VARIANTS.CONTAINED_LIGHT]:
+    'border-none bg-primary-600 hover:bg-primary-900 text-white font-bold',
   [VARIANTS.CONTAINED_WHITE]:
-    'border-none hover:border-black-300 hover:bg-blue-700 dark:hover:bg-blue-900 text-black hover:text-white bg-white',
+    'border-none hover:border-black-300 hover:bg-primary-700 dark:hover:bg-primary-900 text-black hover:text-white bg-white',
   [VARIANTS.CONTAINED_INFO]: 'border-none bg-gray-400 hover:bg-gray-600 text-white',
   [VARIANTS.CONTAINED_SUCCESS]: 'bg-green-700 hover:bg-green-900 text-white',
   [VARIANTS.CONTAINED_DANGER]: 'bg-red-700 hover:bg-red-900 text-white',
   [VARIANTS.OUTLINED]:
-    'border border-blue-700 hover:border-black-300 hover:bg-blue-700 text-black hover:text-white dark:text-white',
+    'border border-primary-700 hover:border-black-300 hover:bg-primary-700 text-black dark:text-white',
   [VARIANTS.NONE]:
     'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
   [VARIANTS.TEXT]: 'text-black hover:underline',
diff --git a/src/lib/components/PrimaryButton/index.svelte b/src/lib/components/PrimaryButton/index.svelte
index a33bd4bd..17fb1ef0 100644
--- a/src/lib/components/PrimaryButton/index.svelte
+++ b/src/lib/components/PrimaryButton/index.svelte
@@ -23,7 +23,7 @@
     isLoading ? VARIANTS.OUTLINED : variant
   ]} {!disablePadding &&
     'py-[0.60rem] px-6'} rounded-md {className} w-fit justify-center sm:w-auto {isLoading &&
-    'py-[0.60rem] border-blue-700'} {variant !== VARIANTS.TEXT &&
+    'py-[0.60rem] border-primary-700'} {variant !== VARIANTS.TEXT &&
     'hover:shadow-xl'} transition delay-150 duration-300 ease-in-out {variant !==
   VARIANTS.CONTAINED_WHITE
     ? 'dark:text-white'
diff --git a/src/lib/components/PrimaryContainedButton/index.svelte b/src/lib/components/PrimaryContainedButton/index.svelte
index 47fdfd09..88a038a0 100644
--- a/src/lib/components/PrimaryContainedButton/index.svelte
+++ b/src/lib/components/PrimaryContainedButton/index.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <a
-  class="root bg-blue-700 hover:bg-blue-900 text-white font-bold rounded inline-flex items-center float-right"
+  class="root bg-primary-700 hover:bg-primary-900 text-white font-bold rounded inline-flex items-center float-right"
   {href}
   on:click={handleClick}
 >
diff --git a/src/lib/components/Progress/index.svelte b/src/lib/components/Progress/index.svelte
index 1e774291..2da9dcfb 100644
--- a/src/lib/components/Progress/index.svelte
+++ b/src/lib/components/Progress/index.svelte
@@ -4,7 +4,7 @@
 
 <div class="w-full h-3 rounded-md bg-gray-300 relative">
   <span
-    class="progress absolute top-0 left-0 rounded-md bg-blue-700 h-full"
+    class="progress absolute top-0 left-0 rounded-md bg-primary-700 h-full"
     style="width: {value}%;"
   />
 </div>
diff --git a/src/lib/components/QuestionContainer/index.svelte b/src/lib/components/QuestionContainer/index.svelte
index 5f8916ac..9d30c798 100644
--- a/src/lib/components/QuestionContainer/index.svelte
+++ b/src/lib/components/QuestionContainer/index.svelte
@@ -21,7 +21,7 @@
       ref.scrollIntoView({
         block: 'start',
         behavior: 'smooth',
-        inline: 'nearest',
+        inline: 'nearest'
       });
     }
   }
@@ -31,10 +31,10 @@
   bind:this={ref}
   class="bg-white dark:bg-gray-800 border {hasError
     ? 'border-red-700'
-    : 'border-gray hover:border-blue-700'} rounded-md mb-6 relative root"
+    : 'border-gray hover:border-primary-700'} rounded-md mb-6 relative root"
 >
   {#if isTitle}
-    <div class="title absolute bg-blue-700" />
+    <div class="title absolute bg-primary-700" />
   {/if}
 
   {#if onClose && !isTitle}
diff --git a/src/lib/components/Snackbar/constants.js b/src/lib/components/Snackbar/constants.js
index af085102..7b88b7a3 100644
--- a/src/lib/components/Snackbar/constants.js
+++ b/src/lib/components/Snackbar/constants.js
@@ -3,13 +3,13 @@ export const SNACKBAR_SEVERITY = {
   WARNING: 'WARNING',
   DEFAULT: 'DEFAULT',
   INFO: 'INFO',
-  SUCCESS: 'SUCCESS',
+  SUCCESS: 'SUCCESS'
 };
 
 export const SNACKBAR_SEVERITY_COLOR = {
   ERROR: 'bg-red-600',
   WARNING: 'bg-yellow-600',
-  INFO: 'bg-blue-600',
+  INFO: 'bg-primary-600',
   DEFAULT: 'bg-gray-600',
-  SUCCESS: 'bg-green-600',
+  SUCCESS: 'bg-green-600'
 };
diff --git a/src/lib/components/Tabs/index.svelte b/src/lib/components/Tabs/index.svelte
index 6f955eb5..15a6a787 100644
--- a/src/lib/components/Tabs/index.svelte
+++ b/src/lib/components/Tabs/index.svelte
@@ -11,7 +11,7 @@
       {#if !tab.icon && !tab.badgeValue}
         <button
           class="relative {currentTab === tab.value
-            ? 'text-blue-700'
+            ? 'text-primary-700'
             : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-fit mr-8 text-center py-3"
           on:click={onChange(tab.value)}
         >
@@ -19,7 +19,7 @@
             {tab.label}
           </div>
           <span
-            class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
+            class="absolute bottom-0 left-0 h-1 bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
             tab.value
               ? 'w-full'
               : 'w-0'}"
@@ -28,7 +28,7 @@
       {:else}
         <button
           class="relative {currentTab === tab.value
-            ? 'text-blue-700'
+            ? 'text-primary-700'
             : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
           on:click={onChange(tab.value)}
         >
@@ -47,7 +47,7 @@
             {/if}
           </div>
           <span
-            class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
+            class="absolute bottom-0 left-0 h-1 bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
             tab.value
               ? 'w-full'
               : 'w-0'}"
diff --git a/src/lib/components/UploadImage/index.svelte b/src/lib/components/UploadImage/index.svelte
index 1174901d..b79c6b9d 100644
--- a/src/lib/components/UploadImage/index.svelte
+++ b/src/lib/components/UploadImage/index.svelte
@@ -39,7 +39,7 @@
   </div>
 
   <button
-    class="width-fit text-blue-700 flex items-center cursor-pointer text-sm mt-3"
+    class="width-fit text-primary-700 flex items-center cursor-pointer text-sm mt-3"
     on:click={() => {
       fileinput.click();
     }}
diff --git a/src/lib/components/WelcomeModal/WelcomeModal.svelte b/src/lib/components/WelcomeModal/WelcomeModal.svelte
index c2e5bc41..c692eaf2 100644
--- a/src/lib/components/WelcomeModal/WelcomeModal.svelte
+++ b/src/lib/components/WelcomeModal/WelcomeModal.svelte
@@ -18,18 +18,13 @@
   <p class="text-black text-sm md:text-base lg:text-lg">
     We at <a
       href="https://app.classroomio.com/"
-      class="text-blue-700 no-underline hover:no-underline">ClassroomIO</a
+      class="text-primary-700 no-underline hover:no-underline">ClassroomIO</a
     >
-    are a small team with a large mission to empower educators with great
-    technology to help them train the future generation. Education is the most
-    powerful gift you can give anyone, and it makes so much sense to give you
-    all the tools you need to give more people this GIFT.
-    <span class="text-blue-700">Thank you for choosing us;</span> we deeply appreciate
-    it and are at your service.
+    are a small team with a large mission to empower educators with great technology to help them train
+    the future generation. Education is the most powerful gift you can give anyone, and it makes so much
+    sense to give you all the tools you need to give more people this GIFT.
+    <span class="text-primary-700">Thank you for choosing us;</span> we deeply appreciate it and are
+    at your service.
   </p>
-  <img
-    src="/images/welcome-modal-banner.svg"
-    alt="A welcome banner"
-    class="w-full my-6"
-  />
+  <img src="/images/welcome-modal-banner.svg" alt="A welcome banner" class="w-full my-6" />
 </Modal>
diff --git a/src/lib/utils/constants/reusableClass.js b/src/lib/utils/constants/reusableClass.js
index 508e9a65..d6208262 100644
--- a/src/lib/utils/constants/reusableClass.js
+++ b/src/lib/utils/constants/reusableClass.js
@@ -1,4 +1,4 @@
 export const NavClasses = {
-  active: 'bg-gray-200 dark:bg-gray-700',
+  active: 'active-sidenav bg-primary-700 text-white transition delay-150 duration-300 ease-in-out',
   background: ''
 };
diff --git a/src/lib/utils/services/org/index.js b/src/lib/utils/services/org/index.js
index 4498cb3d..ca708227 100644
--- a/src/lib/utils/services/org/index.js
+++ b/src/lib/utils/services/org/index.js
@@ -58,6 +58,7 @@ export async function getOrganizations(userId) {
         id,
         name,
         siteName,
+        theme,
         avatar_url
       )
     `
@@ -72,6 +73,7 @@ export async function getOrganizations(userId) {
         name: orgMember?.organization?.name,
         shortName: orgMember?.organization?.name?.substring(0, 2)?.toUpperCase() || '',
         siteName: orgMember?.organization?.siteName,
+        theme: orgMember?.organization?.theme,
         avatar_url: orgMember?.organization?.avatar_url,
         memberId: orgMember?.id
       });
@@ -155,7 +157,7 @@ export async function getCourseBySiteName(siteName) {
   return data;
 }
 
-export async function getCurrentOrg(siteName) {
+export async function getCurrentOrg(siteName, justGet = false) {
   const { data, error } = await supabase
     .from('organization')
     .select(
@@ -163,15 +165,20 @@ export async function getCurrentOrg(siteName) {
       id,
       name,
       siteName,
+      theme,
       avatar_url
     `
     )
     .eq('siteName', siteName);
 
-  if (error || isEmpty(data)) {
+  if (!justGet && (error || isEmpty(data))) {
     console.error('Error getOrganization', error);
     return goto('/404');
   }
 
-  currentOrg.set(data[0]);
+  if (!justGet) {
+    currentOrg.set(data[0]);
+  } else {
+    return data[0];
+  }
 }
diff --git a/src/lib/utils/store/org.js b/src/lib/utils/store/org.js
index b9c70dbc..2c20390e 100644
--- a/src/lib/utils/store/org.js
+++ b/src/lib/utils/store/org.js
@@ -9,6 +9,7 @@ export const currentOrg = writable({
   shortName: '',
   siteName: '',
   avatar_url: '',
+  theme: '',
   memberId: ''
 });
 export const orgAudience = writable([]);
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 6689e52f..4e24af96 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -24,12 +24,12 @@
       Something unexpected occured.
     </h2>
     <p class="dark:text-white w-full text-base font-normal my-6 text-gray-600">
-      Don't worry, your learning is safe. It isn't your fault, it is ours. We
-      have gotten the error notification and will push a fix ASAP. In the
-      meantime, take a short break and come back a bit later.
+      Don't worry, your learning is safe. It isn't your fault, it is ours. We have gotten the error
+      notification and will push a fix ASAP. In the meantime, take a short break and come back a bit
+      later.
     </p>
     <a
-      class="bg-blue-700 hover:bg-blue-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
+      class="bg-primary-700 hover:bg-primary-900 hover:no-underline transition-all py-3 px-9 rounded-xl text-white mt-3"
       href="mailto:support@classroomio.com">Contact Us</a
     >
   </div>
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
index 145c28ba..46a338c4 100644
--- a/src/routes/+layout.server.js
+++ b/src/routes/+layout.server.js
@@ -1,8 +1,9 @@
 // import { redirect } from '@sveltejs/kit';
 import { blockedSubdomain } from '$lib/utils/constants/app';
+import { getCurrentOrg } from '$lib/utils/services/org';
 
 /** @type {import('./$types').LayoutServerLoad} */
-export const load = ({ url, cookies }) => {
+export const load = async ({ url, cookies }) => {
   // if (url.hostname === 'classroomio.com') {
   //   throw redirect(301, 'https://about.classroomio.com');
   // }
@@ -10,7 +11,8 @@ export const load = ({ url, cookies }) => {
   let response = {
     orgSiteName: '',
     isOrgSite: false,
-    skipAuth: false
+    skipAuth: false,
+    org: {}
   };
 
   const debugOrgLandingPage = cookies.get('debugOrgLandingPage');
@@ -26,6 +28,7 @@ export const load = ({ url, cookies }) => {
 
     response.isOrgSite = debugMode || answer;
     response.orgSiteName = debugMode ? 'codingdojo' : subdomain;
+    response.org = await getCurrentOrg(response.orgSiteName, true);
   } else if (subdomain === 'play' || debugPlay === 'true') {
     response.skipAuth = true;
   }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8e2acd35..74b4d322 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -34,7 +34,6 @@
   import { toggleBodyByTheme } from '$lib/utils/functions/app';
   import { appStore } from '$lib/utils/store/app';
   import { currentOrg } from '$lib/utils/store/org';
-  import { blockedSubdomain } from '$lib/utils/constants/app';
 
   import '../app.postcss';
 
@@ -48,6 +47,10 @@
     setTimeout(() => set(currentPreloading), 250);
   });
 
+  function setTheme(theme) {
+    document.body.className = document.body.className.concat(' ', theme);
+  }
+
   function setupSentry() {
     if (!dev) {
       Sentry.init({
@@ -173,6 +176,8 @@
           // By default redirect to first organization
           goto(`/org/${orgRes.currentOrg.siteName}`);
         }
+
+        setTheme(orgRes.currentOrg.theme);
       }
     }
   }
@@ -237,9 +242,11 @@
     }
 
     if (data.isOrgSite) {
+      console.log('data', data);
       $appStore.orgSiteName = data.orgSiteName;
       $appStore.isOrgSite = data.isOrgSite;
-      getCurrentOrg(data.orgSiteName);
+
+      currentOrg.set(data.org);
     }
 
     return () => {
@@ -357,7 +364,9 @@
     width: 100%;
   }
 
-  :global(.dark svg.dark path) {
+  :global(.dark svg.dark path),
+  :global(.active-sidenav svg.dark path),
+  :global(.active-sidenav svg.carbon-icon path) {
     fill: #fff;
   }
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3242202b..648721da 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -62,7 +62,7 @@
   -->
   <div>
     <h3 class="dark:text-white text-4xl text-center">
-      Classroom<span class="text-blue-700">IO</span>
+      Classroom<span class="text-primary-700">IO</span>
     </h3>
     <p class="dark:text-white text-lg text-center">
       The operating system for classroooms of the future 🚀🚀🚀.
@@ -90,7 +90,7 @@
   <div class="flex flex-col md:flex-row">
     {#each areas as area, index}
       <div
-        class="box m-3 bg-white dark:bg-gray-800 rounded-md py-3 px-12 active shadow-xl border-2 hover:border-blue-700 {animate}"
+        class="box m-3 bg-white dark:bg-gray-800 rounded-md py-3 px-12 active shadow-xl border-2 hover:border-primary-700 {animate}"
       >
         <h3 class="dark:text-white text-3xl">
           {#if index === 0}
diff --git a/src/routes/courses/[id]/attendance/+page.svelte b/src/routes/courses/[id]/attendance/+page.svelte
index 79ea67b2..8c14abb3 100644
--- a/src/routes/courses/[id]/attendance/+page.svelte
+++ b/src/routes/courses/[id]/attendance/+page.svelte
@@ -162,11 +162,11 @@
   <section class="my-5 mx-9">
     <StructuredList class="m-0">
       <!-- Moved the lesson headers outside the students loop -->
-      <StructuredListHead class="bg-blue-100">
+      <StructuredListHead class="bg-primary-100">
         <StructuredListRow head class="mx-7">
-          <StructuredListCell head class="text-blue-600 py-3">Student</StructuredListCell>
+          <StructuredListCell head class="text-primary-600 py-3">Student</StructuredListCell>
           {#each $lessons as lesson, index}
-            <StructuredListCell head class="text-blue-600 py-3"
+            <StructuredListCell head class="text-primary-600 py-3"
               >Lesson 0{getLectureNo(index + 1)}</StructuredListCell
             >
           {/each}
diff --git a/src/routes/courses/[id]/lessons/+page.svelte b/src/routes/courses/[id]/lessons/+page.svelte
index 1e1ad2ef..108ab062 100644
--- a/src/routes/courses/[id]/lessons/+page.svelte
+++ b/src/routes/courses/[id]/lessons/+page.svelte
@@ -29,6 +29,7 @@
   import { course, setCourse, group } from '$lib/components/Course/store';
   import PageBody from '$lib/components/PageBody/index.svelte';
   import TextChip from '$lib/components/Chip/Text.svelte';
+  import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
 
   export let data;
   const { courseId } = data;
@@ -143,7 +144,7 @@
               value={getLessonOrder(lesson.id)}
               size="sm"
               shape="rounded-full"
-              className="bg-blue-200 text-blue-600 text-xs"
+              className="bg-primary-200 text-primary-600 text-xs"
             />
           </div>
 
@@ -186,12 +187,10 @@
                   <p class="dark:text-white ml-2 text-sm mb-3">No tutor added</p>
                 {:else}
                   <a href="." class="flex items-center hover:underline mb-2">
-                    <img
-                      alt="Placeholder"
-                      class="block rounded-full"
-                      width="24"
-                      height="20"
+                    <Avatar
+                      className="w-6 h-6"
                       src={lesson.profile.avatar_url}
+                      name="Avatar placeholder"
                     />
                     <p class="dark:text-white ml-2 text-sm">
                       {lesson.profile.fullname}
@@ -231,7 +230,7 @@
                   <div class="flex">
                     <Video size={20} class="carbon-icon text-gray-400 dark:text-white ml-0.5" />
                     <a
-                      class="text-sm ml-2 text-blue-600"
+                      class="text-sm ml-2 text-primary-600"
                       href={lesson.call_url || '#'}
                       target="_blank"
                     >
diff --git a/src/routes/courses/[id]/people/+page.svelte b/src/routes/courses/[id]/people/+page.svelte
index 3dfb4c17..c82c381e 100644
--- a/src/routes/courses/[id]/people/+page.svelte
+++ b/src/routes/courses/[id]/people/+page.svelte
@@ -158,13 +158,13 @@
         class="bg-slate-100 dark:bg-neutral-800 dark:border-2 dark:border-neutral-800"
       >
         <StructuredListRow head class="mx-7">
-          <StructuredListCell head class="text-blue-700 py-3 dark:text-white"
+          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
             >Name</StructuredListCell
           >
-          <StructuredListCell head class="text-blue-700 py-3 dark:text-white"
+          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
             >Role</StructuredListCell
           >
-          <StructuredListCell head class="text-blue-700 py-3 dark:text-white"
+          <StructuredListCell head class="text-primary-700 py-3 dark:text-white"
             >Action</StructuredListCell
           >
           <RoleBasedSecurity allowedRoles={[1, 2]}>
@@ -192,7 +192,7 @@
                       <p class="dark:text-white text-base font-normal">
                         {person.profile.fullname}
                       </p>
-                      <p class="text-xs text-blue-600">
+                      <p class="text-xs text-primary-600">
                         {getEmail(person)}
                       </p>
                     </div>
@@ -210,12 +210,12 @@
                 <div class="flex items-center w-2/4 absolute bottom-3">
                   <TextChip
                     value={person.email.substring(0, 2).toUpperCase()}
-                    className="bg-blue-200 text-black font-semibold text-xs mr-3"
+                    className="bg-primary-200 text-black font-semibold text-xs mr-3"
                     shape="rounded-full"
                   />
                   <a
                     href="mailto:{person.email}"
-                    class="text-md text-blue-600 mr-2 dark:text-white"
+                    class="text-md text-primary-600 mr-2 dark:text-white"
                   >
                     {person.email}
                   </a>
diff --git a/src/routes/courses/[id]/submissions/+page.svelte b/src/routes/courses/[id]/submissions/+page.svelte
index e8f62d98..03a75088 100644
--- a/src/routes/courses/[id]/submissions/+page.svelte
+++ b/src/routes/courses/[id]/submissions/+page.svelte
@@ -286,7 +286,7 @@
                     </p>
                   </a>
                   <a
-                    class="text-blue-700 text-md font-bold"
+                    class="text-primary-700 text-md font-bold"
                     href="{$page.url.pathname}?submissionId={item.id}"
                   >
                     {item.exercise.title}
diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
index 6af22280..c507e6cc 100644
--- a/src/routes/dashboard/+page.svelte
+++ b/src/routes/dashboard/+page.svelte
@@ -138,7 +138,7 @@
         <div class="header w-full flex items-center">
           <Datepicker bind:store let:key let:send let:receive>
             <button
-              class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
+              class="text-lg font-bold text-primary-700 p-3 hover:bg-gray-300 rounded-md"
               in:receive|local={{ key }}
               out:send|local={{ key }}
               on:click={() => {
@@ -150,7 +150,7 @@
           </Datepicker>
         </div>
       {:else}
-        <div class="header text-lg font-bold text-blue-700 flex px-5 items-center">
+        <div class="header text-lg font-bold text-primary-700 flex px-5 items-center">
           {formatDate($store?.selected)}
         </div>
       {/if}
@@ -174,14 +174,14 @@
               {/if}
             </a>
             <p class="dark:text-white text-grey text-sm flex items-center">
-              <a class="underline text-blue-700 my-2" href="/courses/{lessonData.course_id}">
+              <a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
                 {` ${lessonData.course_title}`}
               </a>
             </p>
           </div>
           {#if lessonData.is_unlocked}
             <a
-              class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
+              class="join-call rounded-3xl bg-primary-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
                 'opacity-50 pointer-events-none cursor-not-allowed'}"
               href={!!lessonData.call_url ? lessonData.call_url : undefined}
               target="_blank"
diff --git a/src/routes/forgot/+page.svelte b/src/routes/forgot/+page.svelte
index bb6a04e0..5bf69d94 100644
--- a/src/routes/forgot/+page.svelte
+++ b/src/routes/forgot/+page.svelte
@@ -27,12 +27,9 @@
 
     try {
       loading = true;
-      const { data, error } = await supabase.auth.resetPasswordForEmail(
-        fields.email,
-        {
-          redirectTo: window.location.origin + ROUTE.RESET,
-        }
-      );
+      const { data, error } = await supabase.auth.resetPasswordForEmail(fields.email, {
+        redirectTo: window.location.origin + ROUTE.RESET
+      });
       console.log('data', data);
       if (error) throw error;
 
@@ -55,10 +52,8 @@
       <EmailSentIcon />
       <h3 class="dark:text-white text-xl font-semibold my-3">Email Sent!</h3>
       <p class="dark:text-white text-md mb-6 text-center">
-        We have sent a confirmation email to <span class="text-blue-700"
-          >{fields.email}</span
-        >. Kindly check your inbox to reset password or spam to reset your
-        password.
+        We have sent a confirmation email to <span class="text-primary-700">{fields.email}</span>.
+        Kindly check your inbox to reset password or spam to reset your password.
       </p>
     </div>
 
@@ -72,12 +67,8 @@
     </div>
   {:else}
     <div class="mt-4 w-full">
-      <h3 class="dark:text-white text-xl font-semibold my-3">
-        Forgot Password
-      </h3>
-      <p class="dark:text-white text-sm mb-6">
-        We will send you a reset link to your email
-      </p>
+      <h3 class="dark:text-white text-xl font-semibold my-3">Forgot Password</h3>
+      <p class="dark:text-white text-sm mb-6">We will send you a reset link to your email</p>
       <TextField
         label="Your email"
         bind:value={fields.email}
@@ -105,7 +96,7 @@
       <PrimaryButton
         label="Cancel"
         type="button"
-        className="sm:w-full w-full text-blue-700"
+        className="sm:w-full w-full text-primary-700"
         variant={VARIANTS.NONE}
         onClick={() => goto(ROUTE.LOGIN)}
       />
diff --git a/src/routes/lms/+page.svelte b/src/routes/lms/+page.svelte
index e213d4f9..e9cd5df7 100644
--- a/src/routes/lms/+page.svelte
+++ b/src/routes/lms/+page.svelte
@@ -30,7 +30,7 @@
         <PrimaryButton
           label="Start learning"
           variant={VARIANTS.CONTAINED_WHITE}
-          className="bg-white text-blue-800"
+          className="bg-white text-primary-800"
           onClick={() => goto('/lms/mylearning')}
         />
       </span>
diff --git a/src/routes/lms/exercises/+page.svelte b/src/routes/lms/exercises/+page.svelte
index 7a0d1e7c..2c6a0147 100644
--- a/src/routes/lms/exercises/+page.svelte
+++ b/src/routes/lms/exercises/+page.svelte
@@ -214,7 +214,7 @@
                     </p>
                   </a>
                   <a
-                    class="text-blue-700 text-md font-bold"
+                    class="text-primary-700 text-md font-bold"
                     href="{$page.url.pathname}?submissionId={item.id}"
                   >
                     {item.exercise.title}
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index f75941c0..5882ce77 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -71,12 +71,12 @@
       <p class="text-sm text-red-500">{submitError}</p>
     {/if}
     <div class="w-full text-right">
-      <a class="text-md text-blue-700" href="/forgot"> Forgot password? </a>
+      <a class="text-md text-primary-700" href="/forgot"> Forgot password? </a>
     </div>
   </div>
 
   <div class="my-4 w-full flex justify-end items-center">
-    <!-- <a href="/login" class="text-blue-700 text-sm">Create an account</a> -->
+    <!-- <a href="/login" class="text-primary-700 text-sm">Create an account</a> -->
     <PrimaryButton
       label="Log In"
       type="submit"
diff --git a/src/routes/onboarding/+page.svelte b/src/routes/onboarding/+page.svelte
index b1ff234e..d8ab1bbf 100644
--- a/src/routes/onboarding/+page.svelte
+++ b/src/routes/onboarding/+page.svelte
@@ -29,7 +29,7 @@
   let fields: OnboardingField = {
     fullname: '',
     orgName: '',
-    siteName: '',
+    siteName: ''
   };
   let errors: OnboardingField = {};
   let progress = 50;
@@ -40,39 +40,39 @@
   const educatorGoals: Goal[] = [
     {
       label: 'Sell courses online',
-      value: 'sell-online',
+      value: 'sell-online'
     },
     {
       label: 'Teach my current students online',
-      value: 'teach-online',
+      value: 'teach-online'
     },
     {
       label: 'On another platform, expanding here',
-      value: 'expanding-platform',
+      value: 'expanding-platform'
     },
     {
       label: 'Just here to explore',
-      value: 'explore',
-    },
+      value: 'explore'
+    }
   ];
 
   const sources = [
     {
       label: 'Articles',
-      value: 'articles',
+      value: 'articles'
     },
     {
       label: 'Search engine',
-      value: 'search-engine',
+      value: 'search-engine'
     },
     {
       label: 'Social media',
-      value: 'social-media',
+      value: 'social-media'
     },
     {
       label: 'Friends and family',
-      value: 'friends-family',
-    },
+      value: 'friends-family'
+    }
   ];
 
   async function setMetaData() {
@@ -121,7 +121,7 @@
         .from('organization')
         .insert({
           name: fields.orgName,
-          siteName: fields.siteName,
+          siteName: fields.siteName
         })
         .select();
       console.log('Create organisation', org);
@@ -139,7 +139,7 @@
           .insert({
             organization_id: orgData.id,
             profile_id: $profile.id,
-            role_id: 1,
+            role_id: 1
           })
           .select();
         console.log('Create organisation member', data);
@@ -150,10 +150,7 @@
             'Something went wrong while creating this organization. Please reload and try again';
 
           // Delete organization so it can be recreated.
-          await supabase
-            .from('organization')
-            .delete()
-            .match({ siteName: fields.siteName });
+          await supabase.from('organization').delete().match({ siteName: fields.siteName });
           loading = false;
           return;
         }
@@ -175,7 +172,7 @@
         .update({
           ...fields,
           orgName: undefined,
-          siteName: undefined,
+          siteName: undefined
         })
         .match({ id: $profile.id });
       loading = false;
@@ -205,13 +202,7 @@
       <!-- Header With Logo -->
       <div class="flex flex-col items-center">
         <div class="flex items-center w-full justify-center mb-4">
-          <img
-            src="/logo-192.png"
-            alt="ClassroomIO logo"
-            height="50"
-            width="50"
-            data-atf="1"
-          />
+          <img src="/logo-192.png" alt="ClassroomIO logo" height="50" width="50" data-atf="1" />
           <h4 class="dark:text-white text-xl">ClassroomIO</h4>
         </div>
 
@@ -273,21 +264,14 @@
           <div id="goal-question" class="flex items-center flex-col mb-6">
             <div class="w-10/12">
               <!-- Goal Question -->
-              <div
-                class="w-full flex items-start flex-col justify-between mb-10"
-              >
-                <label
-                  for="text-field"
-                  class="dark:text-white m-0 text-lg font-normal mb-3"
-                >
+              <div class="w-full flex items-start flex-col justify-between mb-10">
+                <label for="text-field" class="dark:text-white m-0 text-lg font-normal mb-3">
                   What brings you to ClassroomIO?
                 </label>
 
                 <!-- Loop through Goals -->
                 {#each educatorGoals as goal}
-                  <label
-                    class="dark:text-white w-full inline-flex items-center mb-1 font-light"
-                  >
+                  <label class="dark:text-white w-full inline-flex items-center mb-1 font-light">
                     <input
                       type="radio"
                       bind:group={fields.goal}
@@ -308,18 +292,13 @@
 
               <!-- Source Question -->
               <div class="w-full flex items-start flex-col justify-between">
-                <label
-                  for="text-field"
-                  class="dark:text-white m-0 text-lg font-normal mb-3"
-                >
+                <label for="text-field" class="dark:text-white m-0 text-lg font-normal mb-3">
                   How did you hear about us?
                 </label>
 
                 <!-- Loop through Goals -->
                 {#each sources as source}
-                  <label
-                    class="dark:text-white w-full inline-flex items-center mb-1 font-light"
-                  >
+                  <label class="dark:text-white w-full inline-flex items-center mb-1 font-light">
                     <input
                       type="radio"
                       bind:group={fields.source}
@@ -346,7 +325,7 @@
       <div class="flex justify-between items-center mt-8 w-full">
         <div class="w-24 h-2 bg-gray-300 relative">
           <span
-            class="progress absolute top-0 left-0 bg-blue-700 h-full"
+            class="progress absolute top-0 left-0 bg-primary-700 h-full"
             style="width: {progress}%;"
           />
         </div>
@@ -356,7 +335,7 @@
             <PrimaryButton
               label="Back"
               variant={VARIANTS.NONE}
-              className="py-3 px-6 mr-2 text-blue-700"
+              className="py-3 px-6 mr-2 text-primary-700"
               onClick={() => (step = step - 1)}
             />
           {/if}
diff --git a/src/routes/org/[slug]/+page.svelte b/src/routes/org/[slug]/+page.svelte
index 6286a53f..942b0d24 100644
--- a/src/routes/org/[slug]/+page.svelte
+++ b/src/routes/org/[slug]/+page.svelte
@@ -222,7 +222,7 @@
           <div class="header w-full flex items-center">
             <Datepicker bind:store let:key let:send let:receive>
               <button
-                class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
+                class="text-lg font-bold text-primary-700 p-3 hover:bg-gray-300 rounded-md"
                 in:receive|local={{ key }}
                 out:send|local={{ key }}
                 on:click={() => {
@@ -258,14 +258,14 @@
                 {/if}
               </a>
               <p class="dark:text-white text-grey text-sm flex items-center">
-                <a class="underline text-blue-700 my-2" href="/courses/{lessonData.course_id}">
+                <a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
                   {` ${lessonData.course_title}`}
                 </a>
               </p>
             </div>
             {#if lessonData.is_unlocked}
               <a
-                class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
+                class="join-call rounded-3xl bg-primary-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
                   'opacity-50 pointer-events-none cursor-not-allowed'}"
                 href={!!lessonData.call_url ? lessonData.call_url : undefined}
                 target="_blank"
diff --git a/src/routes/org/[slug]/quiz/[slug]/+page.svelte b/src/routes/org/[slug]/quiz/[slug]/+page.svelte
index 70b37096..088c378a 100644
--- a/src/routes/org/[slug]/quiz/[slug]/+page.svelte
+++ b/src/routes/org/[slug]/quiz/[slug]/+page.svelte
@@ -351,7 +351,7 @@
         {#each allThemes as _theme}
           <div
             class="theme rounded-md w-full border cursor-pointer mb-5 relative {$quizStore.theme ===
-              _theme.id && 'border-blue-700'}"
+              _theme.id && 'border-primary-700'}"
           >
             {#if $quizStore.theme === _theme.id}
               <CheckmarkFilledIcon
diff --git a/src/routes/org/[slug]/settings/domains/+page.svelte b/src/routes/org/[slug]/settings/domains/+page.svelte
index 68222936..e7339d0f 100644
--- a/src/routes/org/[slug]/settings/domains/+page.svelte
+++ b/src/routes/org/[slug]/settings/domains/+page.svelte
@@ -9,9 +9,8 @@
 
 <section class="w-full max-w-6xl mx-auto">
   <div class="py-10 px-5">
-    <a
-      class="text-gray-500 dark:text-white text-md"
-      href={`${$currentOrgPath}/settings`}>Back to Settings</a
+    <a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
+      >Back to Settings</a
     >
     <div class="flex items-center justify-between mb-10">
       <h1 class="dark:text-white text-3xl font-bold">Custom domain</h1>
diff --git a/src/routes/org/[slug]/settings/teams/+page.svelte b/src/routes/org/[slug]/settings/teams/+page.svelte
index 09c57ab0..f1d1ac4b 100644
--- a/src/routes/org/[slug]/settings/teams/+page.svelte
+++ b/src/routes/org/[slug]/settings/teams/+page.svelte
@@ -9,9 +9,8 @@
 
 <section class="w-full max-w-6xl mx-auto">
   <div class="py-10 px-5">
-    <a
-      class="text-gray-500 dark:text-white text-md"
-      href={`${$currentOrgPath}/settings`}>Back to Settings</a
+    <a class="text-gray-500 dark:text-white text-md" href={`${$currentOrgPath}/settings?tab=org`}
+      >Back to Settings</a
     >
     <div class="flex items-center justify-between mb-10">
       <h1 class="dark:text-white text-3xl font-bold">Team members</h1>
diff --git a/src/routes/profile/[id]/+page.svelte b/src/routes/profile/[id]/+page.svelte
index 6521fe4f..3973eb03 100644
--- a/src/routes/profile/[id]/+page.svelte
+++ b/src/routes/profile/[id]/+page.svelte
@@ -118,7 +118,7 @@
         src={currentProfile.avatar_url}
         height="260"
         width="260"
-        class="rounded-full bg-light-blue-100 mb-4"
+        class="rounded-full bg-primary-100 mb-4"
       /> -->
       <UploadImage bind:avatar src={currentProfile.avatar_url} widthHeight="w-60 h-60" />
 
@@ -163,7 +163,7 @@
 
         <div class="hidden my-3 py-3 px-4 border shadow-sm rounded-md">
           <h4 class="dark:text-white m-0 font-normal">
-            <a class="text-blue-700 font-bold" href="/courses"> CitiBim </a>
+            <a class="text-primary-700 font-bold" href="/courses"> CitiBim </a>
           </h4>
           <p class="dark:text-white text-gray-500">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Non aliquam tenetur magnam.
@@ -183,7 +183,7 @@
 
         <div class="hidden my-2 py-3 px-4 border shadow-sm rounded-md">
           <h4 class="dark:text-white m-0 font-normal">
-            <a class="text-blue-700 font-bold" href="/courses"> Climate Change Group </a>
+            <a class="text-primary-700 font-bold" href="/courses"> Climate Change Group </a>
           </h4>
           <p class="dark:text-white text-gray-500">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quasi autem quo possimus
@@ -200,7 +200,7 @@
           </div>
         </div>
       </div>
-      <PrimaryButton variant={VARIANTS.CONTAINED_DANGER} label="Log out" onClick={logout} />
+      <PrimaryButton variant={VARIANTS.OUTLINED} label="Log out" onClick={logout} />
     </div>
     <!-- {:else if loading}
     <Box>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 75fd684f..25365d3f 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,12 +1,15 @@
 /** @type {import('tailwindcss').Config}*/
 const config = {
-  content: ["./src/**/*.{html,js,svelte,ts}"],
+  content: ['./src/**/*.{html,js,svelte,ts}'],
 
   theme: {
-    extend: {},
+    extend: {}
   },
 
-  plugins: [],
+  plugins: []
 };
 
 module.exports = config;
+// generic name for component
+// add theme-name dynamically on body
+// have globaly style for theme-name .bg-primary-100
diff --git a/tailwind.config.js b/tailwind.config.js
index fa668529..65a928c0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,7 +3,7 @@ export default {
   darkMode: 'class',
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {},
+    extend: {}
   },
-  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')]
 };