diff --git a/src/App.svelte b/src/App.svelte
index 9c7853c..13344cf 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -108,29 +108,29 @@
             <ViewGridIcon class=" flex-shrink-0 h-6 w-6"/>
         </NavButtonWithLabel>
 
-        <a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'bg-light text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
+        <a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
             <GiftIcon class=" flex-shrink-0 h-6 w-6"/>
             <div class="flex flex-col items-start">
                 <h3 class="text-center">Random Topic</h3>
-                <div class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
+                <div class={(currentView === "/randomtopic" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
             </div>
             
         </a>
 
-        <a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'bg-light text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + "  w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
+        <a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + "  w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
             <GiftIcon class=" flex-shrink-0 h-6 w-6"/>
             <div class="flex flex-col items-start">
                 <h3 class="text-center">Random Item</h3>
-                <div class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
+                <div class={(currentView === "/randomitem" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
             </div>
             
         </a>
 
-        <button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'bg-light text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
+        <button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
             <SearchIcon class=" flex-shrink-0 h-6 w-6"/>
             <div class="flex flex-col items-start">
                 <h3 class="text-center"> Search</h3>
-                <div class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
+                <div class={(currentView === "/search" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
             </div>
             
         </button>
diff --git a/src/AppShell.svelte b/src/AppShell.svelte
index 629342f..b66b440 100644
--- a/src/AppShell.svelte
+++ b/src/AppShell.svelte
@@ -35,24 +35,24 @@
 
 <div >
   <div class="md:pl-64 flex flex-col flex-1">
-    <div class=" sticky top-0 z-10 flex-shrink-0 flex bg-lightPrimary text-lightPrimCont shadow">
+    <div class=" sticky top-0 z-10 flex-shrink-0 flex text-primary shadow">
       {#if isNavDrawerOpen == false}
-      <button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-gray-200 text-lightPrimCont focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
+      <button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-primary text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
         <span class="sr-only">Open sidebar</span>
         <Icon kind="menu"/>
       </button>
       {/if}
 
       {#if isNavDrawerOpen}
-      <button on:click={e => isNavDrawerOpen = false} type="button" class="px-4 border-r border-gray-200 text-lightPrimCont focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
+      <button on:click={e => isNavDrawerOpen = false} type="button" class="px-4 border-r border-primary text-primary focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
         <span class="sr-only">Close sidebar</span>
         <Icon kind="close"/>
       </button>
       {/if}
 
-      <div class="md:hidden py-3 flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold text-lightPrimCont group">
+      <div class="md:hidden py-3 flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold group">
         <a href="/" class="">LearnAwesome</a>
-        <div class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
+        <div class="w-1/5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"></div>
       </div>
 
       <div class="flex-1 flex justify-between">
@@ -83,10 +83,10 @@
   <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
   {#if isNavDrawerOpen}
   <div class="relative z-40 md:hidden" role="dialog" aria-modal="true">
-    <div class="fixed inset-0 bg-lightSecondary bg-opacity-75 mt-12" on:click={e => isNavDrawerOpen = false}></div>
+    <div class="fixed inset-0 bg-nutral_Light bg-opacity-75 mt-12" on:click={e => isNavDrawerOpen = false}></div>
 
     <div class="fixed inset-y-0 left-0 flex z-50 mt-12">
-      <div class="relative flex-1 flex flex-col w-64 w-full pt-5 pb-4 bg-lightPrimary text-lightBg dark:bg-darkSecondary dark:text-darkBg">
+      <div class="relative flex-1 flex flex-col w-64 w-full pt-5 pb-4 bg-primary_light text-primary dark:bg-nutral_dark dark:text-primary_light">
         <!-- <div class="absolute top-0 right-0 -mr-12 pt-2"> -->
           
           <!-- <button on:click={e => isNavDrawerOpen = false} type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
@@ -121,11 +121,12 @@
   <!-- Static sidebar for desktop -->
   <div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
     <!-- Sidebar component, swap this element with another sidebar if you like -->
-    <div class="flex flex-col flex-grow pt-5 border-r overflow-y-auto">
-      <div class="flex items-center flex-shrink-0 px-4 tracking-wider font-bold text-lightTertiary">
+    <div class="flex flex-col flex-grow pt-5 border-r-8 overflow-y-auto">
+      <div class="flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold text-primary">
         <a href="/" class="">LearnAwesome</a>
+        <div class="w-1/5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"></div>
       </div>
-      <div class="mt-5 flex-1 flex flex-col bg-lightPrimary text-lightBg">
+      <div class="mt-5 flex-1 flex flex-col bg-primary_light text-primary">
         <nav class="flex-1 pb-4 space-y-1">
           <slot name="nav"></slot>
           {#if window.location.href.startsWith('http://127.0.0.1')}
diff --git a/src/ButtonGroup.svelte b/src/ButtonGroup.svelte
index f275ea8..c59be55 100644
--- a/src/ButtonGroup.svelte
+++ b/src/ButtonGroup.svelte
@@ -22,8 +22,8 @@
        relative inline-flex flex-nowrap items-center px-4 py-2 
       {i == 0 && 'rounded-l-md'}
       {i == tabs.length-1 && 'rounded-r-md'} 
-      border border-gray-800 text-sm font-medium hover:scale-x-105 focus:z-10 focus:outline-none 
-      {currentlySelected === i? 'bg-lightTertiary text-lightBg dark:bg-darkTertiary dark:text-darkBg' : 'bg-lightPrimCont text-lightPrimary'}
+      border text-sm font-medium hover:scale-x-110 focus:z-10 focus:outline-none 
+      {currentlySelected === i? 'bg-secondary text-primary_light' : 'bg-primary text-primary_light'}
      "
   >
      {tab}
diff --git a/src/FormatList.svelte b/src/FormatList.svelte
index 85e9cf3..29ca380 100644
--- a/src/FormatList.svelte
+++ b/src/FormatList.svelte
@@ -5,11 +5,11 @@
 
 <div class=" mx-auto flex flex-wrap gap-5 justify-center items-center">
   {#each formats as format}
-  <a href="#/format/{format.id}" class="w-52 sm:w-64 flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary">
+  <a href="#/format/{format.id}" class="w-52 sm:w-64 flex flex-col rounded-lg shadow overflow-hidden transform transition ease-out duration-300 hover:scale-105 ">
       <div class="flex-shrink-0">
         <img class="h-48 w-full object-cover" src={format.image} alt="">
       </div>
-      <h1 class="text-lg font-semibold p-2 tracking-wider ">{format.name}</h1>
+      <h1 class="text-lg font-semibold p-2 tracking-wider text-primary">{format.name}</h1>
   </a>
   {/each}
 </div>
\ No newline at end of file
diff --git a/src/GenericCard.svelte b/src/GenericCard.svelte
index 7ab7fac..2bebfd2 100644
--- a/src/GenericCard.svelte
+++ b/src/GenericCard.svelte
@@ -2,7 +2,7 @@
   export let item: {name: string, creators: string, rowid: number};
 </script>
 
-<a class="flex flex-wrap p-2 sm:p-8 justify-between rounded-lg break-inside-avoid sm:w-64 max-w-sm bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary hover:bg-lightPrimary hover:bg-darkPrimary" href="#/item/{item.rowid}">
+<a class="flex flex-wrap p-2 sm:p-8 justify-between rounded break-inside-avoid sm:w-64 max-w-sm bg-white text-primary dark:bg-nutral_dark dark:text-primary_light hover:rounded-3xl border-2 border-secondary ease-in-out duration-300" href="#/item/{item.rowid}">
   <div class="flex flex-col justify-between">
     <div class="flex flex-col">
       <strong class="font-extrabold text-sm sm:text-lg">{item.name}</strong>
diff --git a/src/Home.svelte b/src/Home.svelte
index 8203c5d..b65d401 100644
--- a/src/Home.svelte
+++ b/src/Home.svelte
@@ -2,42 +2,20 @@
     <div class="lg:grid lg:grid-cols-12 lg:gap-8">
       <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
         <h1>
-          <span class="block text-sm font-semibold uppercase tracking-wide text-gray-500 sm:text-base lg:text-sm xl:text-base"></span>
+          <span class="block text-sm font-semibold uppercase tracking-wide sm:text-base lg:text-sm xl:text-base"></span>
           <span class="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-6xl">
-            <span class="block text-gray-900">LearnAwesome</span>
-            <span class="block text-indigo-600 text-3xl mt-2">Humanity's learning map</span>
+            <span class="block">LearnAwesome</span>
+            <span class="block text-secondary text-3xl mt-2">Humanity's learning map</span>
           </span>
         </h1>
-        <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">This is a collection of learning resources organized by topics, formats, difficulty levels, and quality tags like visual / interactive / challenging etc. It also includes reviews from experts and metadata like paywall/loginwall to help you find the best resource for your learning goals.</p>
+        <p class="mt-3 text-base text-nutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">This is a collection of learning resources organized by topics, formats, difficulty levels, and quality tags like visual / interactive / challenging etc. It also includes reviews from experts and metadata like paywall/loginwall to help you find the best resource for your learning goals.</p>
 
-        <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">For certain resources like research paper or books, there will be direct links thanks to projects like InternetArchive, LibGen, Arxiv, SciHub etc.</p>
+        <p class="mt-3 text-base text-nutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">For certain resources like research paper or books, there will be direct links thanks to projects like InternetArchive, LibGen, Arxiv, SciHub etc.</p>
 
-        <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">This requires us to build a giant taxonomy of all human knowledge. Arranging topics in a hierarchy is not sufficient. Instead we are creating a graph of topics and levels with multiple types of edges: "is-a-subtopic-of", "is-a-prerequisite-of" etc. If you are an expert or educator in some domain, you can contribute to this project via our GitHub repository.</p>
+        <p class="mt-3 text-base text-nutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">This requires us to build a giant taxonomy of all human knowledge. Arranging topics in a hierarchy is not sufficient. Instead we are creating a graph of topics and levels with multiple types of edges: "is-a-subtopic-of", "is-a-prerequisite-of" etc. If you are an expert or educator in some domain, you can contribute to this project via our GitHub repository.</p>
 
-        <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">In conjunction with this, we're also building an online game where this is presented as a skill-tree for life and allows you to chase ambitious life goals and keep track of your progress while inspiring and being inspired by your friends. More on this will be revealed soon.</p>
-      </div>
-      <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
-        <svg class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8 scale-75 origin-top sm:scale-100 lg:hidden" width="640" height="784" fill="none" viewBox="0 0 640 784" aria-hidden="true">
-          <defs>
-            <pattern id="4f4f415c-a0e9-44c2-9601-6ded5a34a13e" x="118" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
-              <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor" />
-            </pattern>
-          </defs>
-          <rect y="72" width="640" height="640" class="text-gray-50" fill="currentColor" />
-          <rect x="118" width="404" height="784" fill="url(#4f4f415c-a0e9-44c2-9601-6ded5a34a13e)" />
-        </svg>
-        <div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
-          <!-- <button type="button" class="relative block w-full bg-white rounded-lg overflow-hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-            <span class="sr-only">Watch our video to learn more</span>
-            <img class="w-full" src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="">
-            <div class="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true">
-              <svg class="h-20 w-20 text-indigo-500" fill="currentColor" viewBox="0 0 84 84">
-                <circle opacity="0.9" cx="42" cy="42" r="42" fill="white" />
-                <path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z" />
-              </svg>
-            </div>
-          </button> -->
-        </div>
+        <p class="mt-3 text-base text-nutral_Light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">In conjunction with this, we're also building an online game where this is presented as a skill-tree for life and allows you to chase ambitious life goals and keep track of your progress while inspiring and being inspired by your friends. More on this will be revealed soon.</p>
       </div>
+      
     </div>
   </main>
\ No newline at end of file
diff --git a/src/Icon.svelte b/src/Icon.svelte
index 9e05ce8..c656d09 100644
--- a/src/Icon.svelte
+++ b/src/Icon.svelte
@@ -15,7 +15,7 @@
   </svg>
 {:else if kind === "close"}
   <!-- Heroicon name: outline/x -->
-  <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+  <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
     <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
   </svg>
 {:else if kind === "bell"}
diff --git a/src/NavButtonWithLabel.svelte b/src/NavButtonWithLabel.svelte
index 26fb843..df963a4 100644
--- a/src/NavButtonWithLabel.svelte
+++ b/src/NavButtonWithLabel.svelte
@@ -7,13 +7,13 @@
 </script>
 
 
-<a href={target} target={target.startsWith('http') ? '_blank' : ''} class={(isActive ? 'bg-light text-lightPrimary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex flex-col py-5 pl-4 text-sm font-medium"}>
+<a href={target} target={target.startsWith('http') ? '_blank' : ''} class={(isActive ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex flex-col py-5 pl-4 text-sm font-medium"}>
   <div class="flex justify-start gap-3 items-center">
     <slot></slot>
   
     <div class="flex flex-col items-start">
       <h3 class="text-center"> {label}</h3>
-      <div class="w-1/5 mt-0.25 h-0.5 bg-white group-hover:w-full ease-in-out duration-300"></div>
+      <div class={(isActive ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
     </div>
   </div>  
 </a>
diff --git a/src/TopicList.svelte b/src/TopicList.svelte
index 6313619..83718f8 100644
--- a/src/TopicList.svelte
+++ b/src/TopicList.svelte
@@ -5,6 +5,6 @@
 </script>
 
 <div class="hidden lg:flex lg:justify-end">
-    <a href="#/map" class="font-semibold bg-lightTertiary text-lightBg rounded-lg hover:scale-110 px-3 py-2 hover:ease-in-out transition duration-200">Explore Map</a>
+    <a href="#/map" class="font-semibold bg-secondary text-primary_light rounded-lg hover:scale-110 px-3 py-2 hover:ease-in-out transition duration-200">Explore Map</a>
 </div>
 <TopicMasonryGrid {alltopics}/>
diff --git a/src/TopicMasonryGrid.svelte b/src/TopicMasonryGrid.svelte
index 3dcc96d..009734d 100644
--- a/src/TopicMasonryGrid.svelte
+++ b/src/TopicMasonryGrid.svelte
@@ -88,16 +88,16 @@
   {#each [...map.entries()].sort((t1,t2) => (t1[0].sort_index || 100) - (t2[0].sort_index || 100)) as parent}
   {#if parent[0] !== 'Misc'}
     <a href={"#/topic/" + parent[0].name}>
-        <div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border-8 border-lightPrimCont dark:border-darkPrimCont hover:bg-lightPrimCont dark:bg-darkPrimCont ">
+        <div class="rounded shadow-md p-4 break-inside-avoid mb-4 border border-primary dark:border-primary_light bg-white ease-in-out duration-300 hover:rounded-3xl dark:bg-nutral_light ">
             {#if typeof(parent[0]) == "string"}
-            <span class="mt-1 p-1  font-semibold text-lg">{ parent[0] }</span>
+            <span class="mt-1 p-1  font-extrabold text-lg text-primary underline">{ parent[0] }</span>
             {:else}
-            <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-lightPrimary dark:text-darkPrimary hover:text-lightSecondary dark:hover:text-darkSecondary text-lg ">{ format_topic_name(parent[0]) }</span></a>
+            <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold underline underline-offset-4 text-lg ">{ format_topic_name(parent[0]) }</span></a>
             {/if}
         
             <div class="mt-2 flex flex-wrap">
             {#each parent[1].sort((t1,t2) => (t1.sort_index || 100) - (t2.sort_index || 100)) as child}
-                <a href={"#/topic/" + child.name} class="text-lightSecondary dark:text-darkSecondary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
+                <a href={"#/topic/" + child.name} class="text-primary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
             {/each}
             </div>    
         </div>
@@ -105,16 +105,16 @@
     {/if}
 
     {#if parent[0] == 'Misc'}
-    <div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border-8 border-lightPrimCont dark:border-darkPrimCont hover:bg-lightPrimCont dark:bg-darkPrimCont ">
+    <div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border border-primary dark:border-primary_light bg-primary_light hover:bg-white ">
         {#if typeof(parent[0]) == "string"}
-        <span class="mt-1 p-1  font-semibold text-lg">{ parent[0] }</span>
+        <span class="mt-1 p-1  font-semibold text-lg text-primary">{ parent[0] }</span>
         {:else}
-        <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-lightPrimary dark:text-darkPrimary hover:text-lightSecondary dark:hover:text-darkSecondary text-lg ">{ format_topic_name(parent[0]) }</span></a>
+        <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary text-lg ">{ format_topic_name(parent[0]) }</span></a>
         {/if}
     
         <div class="mt-2 flex flex-wrap">
         {#each parent[1].sort((t1,t2) => (t1.sort_index || 100) - (t2.sort_index || 100)) as child}
-            <a href={"#/topic/" + child.name} class="text-lightSecondary dark:text-darkSecondary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
+            <a href={"#/topic/" + child.name} class="text-primary dark:text-darkSecondary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
         {/each}
         </div>    
     </div>
diff --git a/templates/index.html b/templates/index.html
index beadb49..5cbe799 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,21 +9,12 @@
 				theme: {
 					extend: {
 						colors: {
-							lightPrimary: 'rgb(30 64 175)',  //blue-800
-							lightSecondary: 'rgb(75 85 99)', //gray-600
-							lightTertiary: 'rgb(168 85 247)', //purple-500
-							lightBg: '#fafafa', //zinc-50
-							lightPrimCont: '#dbeafe', // blue-200
-							lightButtonBg: 'rgb(20 83 45)', //green-900
-							light: '#ffffff', //white
-
-							dark: '#0F172A', //slate-900
-							darkPrimary: 'rgb(147 197 253)',  //blue-300
-							darkSecondary: 'rgb(203 213 225)', //slate-300
-							darkTertiary: 'rgb(216 180 254)', //purple-300
-							darkBg: 'rgb(23 23 23)', //nutral-900
-							darkPrimCont: 'rgb(3 105 161)', //sky-700
-							darkButtonBg: 'rgb(34 197 94)'//green-500
+							primary: '#1E3A8A', //blue-900
+							primary_light: '#FAFAFA', //nutral-50
+							nutral_Light: '#737373', // nutral-400
+							nutral_dark: '#262626', // nutral-800
+							secondary: '#6B21A8', // purple-800
+							white: '#ffffff',
 						},
 					},
 					fontFamily: {
@@ -50,7 +41,7 @@
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<link href="https://fonts.googleapis.com/css2?family=Gentium+Plus:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> 
 	</head>
-	<body class="max-w-none mx-auto h-full bg-light dark:bg-dark text-lightPrimary dark:text-darkPrimary font-serif">
+	<body class="max-w-none mx-auto h-full bg-primary_light text-nutral_dark dark:bg-nutral_dark dark:text-nutral_light font-serif">
 		<div class="h-full" id="app"></div>
 	</body>
 </html>