diff --git a/bun.lockb b/bun.lockb
index 6b2556e..70a8fe5 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/AboutShell.vue b/components/AboutShell.vue
index 09452b2..1231c29 100644
--- a/components/AboutShell.vue
+++ b/components/AboutShell.vue
@@ -5,7 +5,7 @@
   >
     <div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
       <h2
-          class="text-lg font-semibold text-lunar-700 dark:text-lunar-300"
+          class="text-lg font-semibold text-lunar-700 dark:text-buffy-100"
       >
         <slot name="title"></slot>
       </h2>
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
index d2764fb..a535b41 100644
--- a/components/AppFooter.vue
+++ b/components/AppFooter.vue
@@ -7,17 +7,17 @@
     >
       <div>
         <span
-            class="text-sm text-evening-sea-900 sm:text-center dark:text-evening-sea-200"
+            class="text-sm text-evening-sea-900 sm:text-center dark:text-blade-200"
         >© {{ new Date().getFullYear() }} Angus Goody
         </span>
       </div>
 
       <div>
         <div class="grid grid-flow-col gap-4">
-          <a v-if="footerData?.github" class="text-lunar-800/90 hover:text-evening-sea-800 dark:text-lunar-200 dark:hover:text-evening-sea-100" :href="footerData.github" target="_blank">
+          <a v-if="footerData?.github" class="text-lunar-800/90 hover:text-evening-sea-800 dark:text-dracula-100 dark:hover:text-dracula-200" :href="footerData.github" target="_blank">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="fill-current"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>
 
-          <a v-if="footerData?.linkedin" class="text-lunar-800/90 hover:text-evening-sea-800 dark:text-lunar-200 dark:hover:text-evening-sea-100" :href="footerData.linkedin" target="_blank">
+          <a v-if="footerData?.linkedin" class="text-lunar-800/90 hover:text-evening-sea-800 dark:text-dracula-100 dark:hover:text-dracula-200" :href="footerData.linkedin" target="_blank">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="fill-current"><title>Linkedin</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
         </div>
       </div>
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index b0d1441..4f0bb31 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -20,7 +20,7 @@
                 :key="item.id"
                 :to="item.href"
                 :class="[
-                  item.current ? 'text-evening-sea-600 dark:text-evening-sea-400' : 'text-zinc-600 dark:text-zinc-200 dark:hover:text-lunar-300 hover:text-lunar-600',
+                  item.current ? 'text-evening-sea-600 dark:text-blade-300' : 'text-zinc-600 dark:text-zinc-200 dark:hover:text-dracula-200 hover:text-lunar-600',
                   'px-3 py-2 transition'
                 ]"
 
@@ -46,7 +46,6 @@
 <script setup lang="ts">
 import AppMobileMenu from "~/components/AppMobileMenu.vue";
 const route = useRoute();
-import {HomeIcon, FolderIcon, UserCircleIcon} from "@heroicons/vue/24/outline";
 import { computed } from 'vue';
 
 const navigation = computed(() => [
@@ -55,21 +54,18 @@ const navigation = computed(() => [
     name: "Home",
     href: "/",
     current: route.name === 'index',
-    icon: HomeIcon,
   },
   {
     id: 2,
     name: "Projects",
     href: "/projects",
     current: route.name === 'projects',
-    icon: FolderIcon,
   },
   {
     id: 3,
     name: "About",
     href: "/about",
     current: route.name === 'about',
-    icon: UserCircleIcon,
   },
 ]);
 </script>
diff --git a/components/AppMobileMenu.vue b/components/AppMobileMenu.vue
index f5bb79f..ae0ceb5 100644
--- a/components/AppMobileMenu.vue
+++ b/components/AppMobileMenu.vue
@@ -46,7 +46,7 @@
       >
         <PopoverPanel
             v-slot="{ close }"
-            class="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-5 dark:bg-ninja-light bg-opacity-90 dark:ring-ninja/50"
+            class="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-5 dark:bg-nosferatu bg-opacity-90 dark:ring-aro"
         >
 
           <div class="flex flex-row-reverse gap-x-5 items-center justify-between">
@@ -54,19 +54,18 @@
             <PopoverButton
                 aria-label="Close menu"
                 type="button"
-                class="inline-flex items-center w-full  p-1 sm:w-10 h-10 justify-center text-sm rounded-lg md:hidden bg-mulberry-200 dark:bg-mulberry-500/50 hover:bg-mulberry-300/80 dark:hover:bg-mulberry-800/80 text-mulberry-800 dark:text-mulberry-200 focus:outline-none focus:ring-2 focus:ring-mulberry-800/40 dark:focus:ring-mulberry-300/60   "
+                class="inline-flex items-center p-1 w-10 h-10 justify-center text-sm rounded-lg md:hidden bg-mulberry-200 dark:bg-buffy-500/50 hover:bg-mulberry-300/80 dark:hover:bg-buffy-800/80 text-mulberry-800 dark:text-buffy-100 focus:outline-none focus:ring-2 focus:ring-mulberry-800/40 dark:focus:ring-buffy-100/50   "
                 aria-controls="navbar-cta"
                 aria-expanded="false"
             >
               <span class="sr-only">Open main menu</span>
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 hidden sm:block">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
               </svg>
-              <span class="sm:hidden">Close</span>
             </PopoverButton>
 
-            <div class="hidden sm:flex">
-              <p class="p-1 px-2 rounded w-full  h-10 text-lg leading-8 dark:text-evening-sea-100 text-evening-sea-800">Menu</p>
+            <div class="">
+              <p class="p-1 px-2 rounded w-full  h-10 text-lg leading-8 dark:text-blade-200 text-evening-sea-800">Navigation</p>
             </div>
 
 
@@ -77,22 +76,9 @@
                       :to="item.href"
                       :key="item.id"
                       :class="[
-                        item.current ? 'bg-evening-sea-600 dark:bg-evening-sea-400/60 focus:ring-evening-sea-500/50' : 'bg-lunar-200 dark:bg-evening-sea-100/10 dark:hover:bg-evening-sea-100/20  hover:bg-lunar-300/80 focus:ring-lunar-800/50 dark:focus:ring-evening-sea-200/40',
-                        'group my-2 relative flex items-center gap-x-6 rounded-lg p-4  focus:outline-none focus:ring-2 '
+                        item.current ? 'bg-evening-sea-600 dark:bg-nosferatu-600 focus:ring-evening-sea-500/50 dark:focus:ring-dracula-100/40' : 'bg-lunar-200 dark:bg-nosferatu-800 dark:hover:bg-nosferatu-700  hover:bg-lunar-300/80 focus:ring-lunar-800/50 dark:focus:ring-dracula-200/40',
+                        'group my-2 relative flex items-center gap-x-6 rounded-lg p-3  focus:outline-none focus:ring-2 '
                       ]">
-              <div :class="[
-                        item.current ? '' : 'dark:bg-inherit ',
-                        'mt-1 flex h-11 w-11 flex-none bg-white items-center justify-center rounded-lg'
-                      ]"
-              >
-                <component
-                    :is="item.icon"
-                    :class="[
-                        item.current ? 'dark:text-evening-sea-700' : '',
-                        'h-6 w-6 text-evening-sea-800 dark:text-evening-sea-200/70'
-                     ]"
-                    aria-hidden="true" />
-              </div>
               <div>
                 <p
                    :class="[
@@ -115,7 +101,6 @@
 <script setup>
 import { Popover, PopoverButton, PopoverPanel, PopoverOverlay } from '@headlessui/vue'
 import NuxtLink from "#app/components/nuxt-link.js";
-import {PhoneIcon, PlayCircleIcon} from "@heroicons/vue/20/solid";
 defineProps({
   navItems: {
     type: Array,
diff --git a/components/BlockShell.vue b/components/BlockShell.vue
index 8f0f2b8..56f9983 100644
--- a/components/BlockShell.vue
+++ b/components/BlockShell.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="p-5 rounded-xl bg-zinc-50 dark:bg-lunar-800/20 shadow">
+  <section class="p-5 rounded-xl bg-zinc-50 dark:bg-aro/30 shadow">
 
     <!-- Top row -->
     <div class="flex flex-row items-center justify-start">
@@ -12,7 +12,7 @@
 
       <!-- Slot for the title -->
       <div>
-        <h2 class="text-lg text-evening-sea-900 dark:text-zinc-50 font-bold tracking-tight">
+        <h2 class="text-lg text-evening-sea-900 dark:text-cullen-50 font-bold tracking-tight">
           <slot name="title">
 
           </slot>
diff --git a/components/TextSection.vue b/components/TextSection.vue
index fbd7aaa..7787343 100644
--- a/components/TextSection.vue
+++ b/components/TextSection.vue
@@ -1,5 +1,5 @@
 <template>
-  <p class="text-base font-semibold tracking-tight text-evening-sea-800 dark:text-evening-sea-200">
+  <p class="text-base font-semibold tracking-tight text-evening-sea-800 dark:text-blade-200">
     {{ title }}
   </p>
   <p class="mt-2 text-sm text-lunar-900/80 dark:text-lunar-200/70">
diff --git a/components/TitleAndSubtitle.vue b/components/TitleAndSubtitle.vue
index 2beedcd..5b67c09 100644
--- a/components/TitleAndSubtitle.vue
+++ b/components/TitleAndSubtitle.vue
@@ -1,10 +1,10 @@
 <template>
   <h1
-    class="text-4xl font-bold tracking-tight text-evening-sea-950 dark:text-zinc-100 sm:text-6xl"
+    class="text-4xl font-bold tracking-tight text-evening-sea-950 dark:text-cullen-50 sm:text-6xl"
   >
     {{ title }}
   </h1>
-  <p class="mt-4 text-lg leading-8 dark:text-evening-sea-100">{{ subtitle }}</p>
+  <p class="mt-4 text-lg leading-8 dark:text-dracula-100">{{ subtitle }}</p>
 </template>
 <script setup lang="ts">
 defineProps({
diff --git a/components/buttons/DarkToggle.vue b/components/buttons/DarkToggle.vue
index b5bf3db..ef789a5 100644
--- a/components/buttons/DarkToggle.vue
+++ b/components/buttons/DarkToggle.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="p-2 rounded-full bg-evening-sea-400/20 dark:bg-evening-sea-900 text-evening-sea-800 dark:text-evening-sea-200"
+    class="p-2 rounded-full bg-evening-sea-400/20 dark:bg-nosferatu-700 text-evening-sea-800 dark:text-morbius-200"
     @click="toggleDarkMode"
     :title="`Turn on ${currentMode === 'dark' ? 'light' : 'dark'} mode`"
   >
diff --git a/components/education/EducationBlock.vue b/components/education/EducationBlock.vue
index 177a61e..8ab4a39 100644
--- a/components/education/EducationBlock.vue
+++ b/components/education/EducationBlock.vue
@@ -1,7 +1,7 @@
 <template>
   <BlockShell>
     <template #icon>
-      <AcademicCapIcon class="h-5 w-5 text-evening-sea-900 dark:text-zinc-50" />
+      <AcademicCapIcon class="h-5 w-5 text-evening-sea-900 dark:text-cullen-50" />
     </template>
 
     <template #title>
diff --git a/components/education/EducationRow.vue b/components/education/EducationRow.vue
index 2545759..3fb9643 100644
--- a/components/education/EducationRow.vue
+++ b/components/education/EducationRow.vue
@@ -17,16 +17,16 @@
       <!-- Employer and Title -->
       <div class="flex flex-col justify-start flex-1">
         <div
-          class="text-lg text-evening-sea-900 dark:text-zinc-100 font-semibold tracking-tight"
+          class=" text-evening-sea-900 dark:text-cullen-50 font-semibold tracking-tight"
         >
           <p>{{ education.school }}</p>
         </div>
         <div class="flex flex-wrap justify-between">
-          <div class="text-sm text-evening-sea-700 dark:text-evening-sea-200">
+          <div class="text-sm text-evening-sea-700 dark:text-blade-200">
             <span>{{ education.level }}</span>
-            <span v-if="education.grade" class="ml-2 text-mulberry-700 dark:text-mulberry-300">{{ education.grade }}</span>
+            <span v-if="education.grade" class="ml-2 text-mulberry-700 dark:text-buffy-100">{{ education.grade }}</span>
           </div>
-          <div class="text-sm text-evening-sea-700 dark:text-evening-sea-200">
+          <div class="text-sm text-evening-sea-700 dark:text-vanHelsing-200">
             {{ convertDateToYear(education.start_date) }} -
             <span v-if="education.end_date">{{ convertDateToYear(education.end_date, true) }}</span>
           </div>
diff --git a/components/employment/EmploymentBlock.vue b/components/employment/EmploymentBlock.vue
index be5aa77..fa4e19f 100644
--- a/components/employment/EmploymentBlock.vue
+++ b/components/employment/EmploymentBlock.vue
@@ -1,7 +1,7 @@
 <template>
   <BlockShell>
     <template #icon>
-      <BriefcaseIcon class="h-5 w-5 text-evening-sea-900 dark:text-zinc-50" />
+      <BriefcaseIcon class="h-5 w-5 text-evening-sea-900 dark:text-cullen-50" />
     </template>
 
     <template #title>
diff --git a/components/employment/EmploymentRow.vue b/components/employment/EmploymentRow.vue
index 2185aa8..b532464 100644
--- a/components/employment/EmploymentRow.vue
+++ b/components/employment/EmploymentRow.vue
@@ -17,15 +17,15 @@
       <!-- Employer and Title -->
       <div class="flex flex-col justify-start flex-1">
         <div
-          class="text-lg text-evening-sea-900 dark:text-zinc-100 font-semibold tracking-tight"
+          class="text-evening-sea-900 dark:text-cullen-50 font-semibold tracking-tight"
         >
           <p>{{ employment.employer }}</p>
         </div>
         <div class="flex flex-wrap justify-between">
-          <div class="text-sm text-evening-sea-700 dark:text-evening-sea-200">
+          <div class="text-sm text-evening-sea-700 dark:text-blade-200">
             <p>{{ employment.job_title }}</p>
           </div>
-          <div class="text-sm text-evening-sea-700 dark:text-evening-sea-200">
+          <div class="text-sm text-evening-sea-700 dark:text-vanHelsing-200">
             <span>{{ convertDateToYear(employment.start_date) }}</span> -
             <span v-if="employment.end_date">{{ convertDateToYear(employment.end_date, true) }}</span>
           </div>
diff --git a/components/project/ProjectBreadcrumb.vue b/components/project/ProjectBreadcrumb.vue
index dc68c8a..7d994ce 100644
--- a/components/project/ProjectBreadcrumb.vue
+++ b/components/project/ProjectBreadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <NuxtLink to="/projects" class="inline-flex items-center font-medium text-evening-sea-800 dark:text-evening-sea-200 hover:underline">
+  <NuxtLink to="/projects" class="inline-flex items-center font-medium text-evening-sea-800 dark:text-aro-300 hover:underline">
     <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5H1m0 0l4-4m-4 4l4 4"/>
     </svg>
diff --git a/components/project/ProjectCard.vue b/components/project/ProjectCard.vue
index b1f6818..1fc49b6 100644
--- a/components/project/ProjectCard.vue
+++ b/components/project/ProjectCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-      class="group max-w-sm rounded-lg shadow bg-zinc-100 dark:bg-lunar-900/40 flex flex-col h-full"
-      :class="project.coming_soon ? '' : ' hover:bg-zinc-50 dark:hover:bg-lunar-900/60'"
+      class="group max-w-sm rounded-lg shadow bg-zinc-100 dark:bg-aro/80 flex flex-col h-full"
+      :class="project.coming_soon ? '' : ' hover:bg-zinc-50 dark:hover:bg-aro'"
   >
     <ProjectLink :project="project" class="flex-1">
       <div class="border-b dark:border-lunar-800/20">
@@ -19,15 +19,15 @@
         <div class="flex flex-row justify-between">
           <div>
             <h3
-                class="text-xl text-evening-sea-900 dark:text-zinc-50 font-semibold tracking-tight"
+                class="text-xl text-evening-sea-900 dark:text-cullen-50 font-semibold tracking-tight"
             >
               {{ project.title }}
             </h3>
           </div>
           <div>
-            <p class="text-lunar-800/80 dark:text-lunar-200/70">
+            <p class="text-lunar-800/80 dark:text-vanHelsing-100">
               <span v-if="!project.coming_soon">{{ formatDate(project.date_created) }}</span>
-              <span v-else class="group-hover:text-evening-sea-700 dark:group-hover:text-evening-sea-200">Coming soon</span>
+              <span v-else class="group-hover:text-evening-sea-700 dark:group-hover:text-blade-200">Coming soon</span>
             </p>
           </div>
         </div>
@@ -36,7 +36,7 @@
         <div v-if="project.tags" class="flex flex-row justify-start flex-wrap gap-y-3 my-5">
           <div v-for="tag in projectTags" class="mr-2">
             <span
-                class="px-2 py-1 text-xs rounded-full bg-mulberry-700 bg-opacity-90 dark:bg-mulberry-200 text-mulberry-50 dark:text-mulberry-800"
+                class="px-2 py-1 text-xs rounded-full text-mulberry-50 bg-mulberry-700 bg-opacity-90 dark:bg-dracula-200 dark:text-aro-900"
             >{{ tag.value.title }}</span
             >
           </div>
diff --git a/components/project/ProjectShow.vue b/components/project/ProjectShow.vue
index f8da19f..637313f 100644
--- a/components/project/ProjectShow.vue
+++ b/components/project/ProjectShow.vue
@@ -40,33 +40,33 @@
         <div class="mx-auto w-full mt-14 max-w-2xl sm:mt-16 lg:col-span-3 lg:row-span-2 lg:row-end-2 lg:mt-0 lg:max-w-none">
           <div class="flex flex-col-reverse">
             <div class="">
-              <h1 class="text-2xl font-bold tracking-tight sm:text-3xl text-zinc-700 dark:text-zinc-100">{{ project.title }}</h1>
+              <h1 class="text-2xl font-bold tracking-tight sm:text-3xl text-zinc-700 dark:text-cullen-50">{{ project.title }}</h1>
 
               <h2 id="information-heading" class="sr-only">Date created</h2>
-              <p class="mt-2 text-sm text-lunar-700 dark:text-lunar-300 dark:opacity-80">
+              <p class="mt-2 text-sm text-lunar-700 dark:text-aro-400">
                 {{ formatDate(project.date_created) }}
               </p>
             </div>
 
           </div>
 
-          <p class="mt-6 text-zinc-600 dark:text-zinc-200 dark:opacity-70">
+          <p class="mt-6 text-zinc-600 dark:text-aro-100/80 ">
             <span v-if="project.medium_description">{{ project.medium_description }}</span>
             <span v-else>{{ project.short_description }}</span>
 
           </p>
 
           <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
-            <a v-if="project.links.web_link" :href="project.links.web_link" target="_blank" class="flex w-full items-center justify-center rounded-md border border-transparent bg-evening-sea-600 px-8 py-3 text-base font-medium text-white hover:bg-evening-sea-700 focus:outline-none focus:ring-2 focus:ring-evening-sea-700 focus:ring-offset-2 focus:ring-offset-gray-50">
+            <a v-if="project.links.web_link" :href="project.links.web_link" target="_blank" class="flex w-full items-center justify-center rounded-md border border-transparent bg-evening-sea-600 dark:bg-dracula-300 dark:hover:bg-dracula-400 dark:text-nosferatu-900 px-8 py-3 text-base font-medium text-white hover:bg-evening-sea-700 focus:outline-none focus:ring-2 focus:ring-evening-sea-700 dark:focus:ring-aro-400 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-nosferatu">
               Website
             </a>
-            <a v-if="project.links.git_link" :href="project.links.git_link" target="_blank" class="flex w-full items-center justify-center rounded-md border border-transparent bg-lunar-200 px-8 py-3 text-base font-medium text-lunar-800 hover:bg-lunar-300 focus:outline-none focus:ring-2 focus:ring-lunar-500 focus:ring-offset-2 focus:ring-offset-gray-50">
+            <a v-if="project.links.git_link" :href="project.links.git_link" target="_blank" class="flex w-full items-center justify-center rounded-md border border-transparent bg-lunar-200 dark:bg-vonCount-100 dark:hover:bg-vonCount-200 px-8 py-3 text-base font-medium text-lunar-800 hover:bg-lunar-300 focus:outline-none focus:ring-2 focus:ring-lunar-500 dark:focus:ring-vonCount-200 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-nosferatu">
               <span>GitHub</span>
             </a>
           </div>
 
           <div v-if="hasProjectHighlights()" class="mt-10 border-t border-zinc-300 dark:border-lunar-600/20 pt-10">
-            <h3 class="text-sm font-medium text-lunar-700 dark:text-lunar-200">Highlights</h3>
+            <h3 class="text-sm font-semibold text-lunar-700 dark:text-aro-200">Highlights</h3>
             <div class="prose prose-sm mt-4 prose-polo dark:prose-invert">
               <ul role="list">
                 <li v-for="highlight in project.highlights" :key="highlight.id">{{ highlight.title }}</li>
@@ -75,7 +75,7 @@
           </div>
 
           <div v-if="project.stack" class="mt-10 border-t border-zinc-300  dark:border-lunar-600/20 pt-10">
-            <h3 class="text-sm font-medium text-lunar-700 dark:text-lunar-200">Tech stack</h3>
+            <h3 class="text-sm font-semibold text-lunar-700 dark:text-aro-200">Tech stack</h3>
             <div class="my-10 grid grid-cols-4 gap-5">
               <div v-for="skill in project.stack" class="mx-auto flex flex-col items-center space-y-3">
                 <div :class="'w-10 h-10 xs:w-14 xs:h-14 flex flex-col justify-center transition-opacity duration-200 ease-in-out'"
diff --git a/components/skills/SkillsBlock.vue b/components/skills/SkillsBlock.vue
index 2b613d3..e950883 100644
--- a/components/skills/SkillsBlock.vue
+++ b/components/skills/SkillsBlock.vue
@@ -8,7 +8,7 @@
         <div class="relative mb-10 flex flex-row items-center">
           <div class="w-full flex-1 border-t border-gray-300 dark:border-lunar-600/20" />
           <div class="">
-            <h3 class="px-2 text-sm text-gray-500 dark:text-evening-sea-200">{{  category.title  }}</h3>
+            <h3 class="px-2 text-sm text-gray-500 dark:text-vanHelsing-200">{{  category.title  }}</h3>
           </div>
           <div class="w-full flex-1 border-t border-gray-300 dark:border-lunar-600/20" />
         </div>
diff --git a/layouts/default.vue b/layouts/default.vue
index e2bc46e..e65b9f7 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- Angus was here 2023 -->
-  <div class="font-sans bg-paper-dark dark:bg-ninja-dark ">
+  <div class="font-sans bg-paper-dark dark:bg-[#18171C]  ">
     <div
-      class="body max-w-7xl mx-auto dark:bg-ninja bg-paper text-[#172119] dark:text-[#D3D3D3]"
+      class="body max-w-7xl mx-auto dark:bg-[#232129] bg-paper text-[#172119] dark:text-[#D3D3D3]"
     >
       <AppHeader />
 
diff --git a/package.json b/package.json
index 980d7e1..a15b60b 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@headlessui/vue": "^1.7.16",
     "@heroicons/vue": "latest",
     "postcss-loader": "^7.3.3",
+    "tailwind-dracula": "^1.1.0",
     "vue-spinner": "^1.0.4"
   }
 }
diff --git a/pages/index.vue b/pages/index.vue
index 15d143b..205f5ef 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,7 +11,7 @@
     </div>
 
     <div class="text-center my-28">
-      <h2 class="h2 text-lunar-800 dark:text-lunar-300">My skills</h2>
+      <h2 class="h2 text-lunar-800 dark:text-cullen-50">My skills</h2>
 
       <SkillsBlock class="mt-20" />
     </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 1d29b6d..af74ce7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -39,8 +39,8 @@ export default {
           dark: "#DEE3E8",
         },
         "ninja": {
-          DEFAULT: "#171923",
-          dark: "#12141C",
+          DEFAULT: "#17202A",
+          dark: "#161C25",
           light: "#1B1D27"
 
         },
@@ -111,5 +111,6 @@ export default {
   },
   plugins: [
     require('@tailwindcss/typography'),
+    require('tailwind-dracula')(),
   ],
 };