diff --git a/package.json b/package.json
index 67c8ad52..0000b24c 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+    "@catppuccin/tailwindcss": "^0.1.1",
     "@fontsource/inter": "^4.5.15",
     "eleventy-plugin-heroicons": "^1.1.0",
     "eslint": "^8.39.0",
@@ -51,7 +52,6 @@
     "markdown-it-footnote": "^3.0.3",
     "markdownlint-cli": "^0.34.0",
     "marked": "^5.0.0",
-    "tailwind-dracula": "^1.1.0",
     "tailwindcss": "^3.3.2"
   },
   "lint-staged": {
diff --git a/src/_includes/base.liquid b/src/_includes/base.liquid
index 3ccfe29d..74a9d722 100644
--- a/src/_includes/base.liquid
+++ b/src/_includes/base.liquid
@@ -15,7 +15,7 @@
     <meta property="og:type" content="article" />
     <meta property="og:url" content="https://coryd.dev{{ page.url }}" />
     <meta property="og:image" content="{{ post | getFirstAttachment }}">
-    <meta name="theme-color" content="#bd93f9" />
+    <meta name="theme-color" content="#a855f7" />
     <link
       rel="icon"
       type="image/x-icon"
diff --git a/src/_includes/footer.liquid b/src/_includes/footer.liquid
index 36e147ba..3c4252e4 100644
--- a/src/_includes/footer.liquid
+++ b/src/_includes/footer.liquid
@@ -9,8 +9,8 @@
     {% include "icons/oku.liquid" %}
   </div>
   <p class="text-sm text-gray-500 dark:text-gray-100 text-center pb-8">
-    <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a>
+    <a class="text-gray-700 hover:text-purple-400 dark:text-gray-200{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a>
     •
-    <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
+    <a class="text-gray-700 hover:text-purple-400 dark:text-gray-200{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
     • Cory Dransfeldt • © {{ "now" | date: "%Y" }}</p>
 </footer>
\ No newline at end of file
diff --git a/src/_includes/nav.liquid b/src/_includes/nav.liquid
index 8606f741..ded2eac5 100644
--- a/src/_includes/nav.liquid
+++ b/src/_includes/nav.liquid
@@ -1,10 +1,10 @@
 <nav>
   <ul class="flex">
     <li class="mr-6">
-      <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url == '/now/' %} active{% endif %}" href="/now">Now</a>
+      <a class="text-gray-700 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400{% if page.url == '/now/' %} active{% endif %}" href="/now">Now</a>
     </li>
     <li class="mr-6">
-      <a class="text-gray-700 hover:text-primary-400 dark:text-gray-200{% if page.url == '/about/' %} active{% endif %}" href="/about">About</a>
+      <a class="text-gray-700 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400{% if page.url == '/about/' %} active{% endif %}" href="/about">About</a>
     </li>
     <li class="mr-6">
       {% include "icons/coffee.liquid" %}
diff --git a/src/_includes/now-topper.liquid b/src/_includes/now-topper.liquid
index 26a6fef0..3d30bf85 100644
--- a/src/_includes/now-topper.liquid
+++ b/src/_includes/now-topper.liquid
@@ -1,6 +1,6 @@
 <div class="border-b border-gray-200 pb-8 dark:border-gray-700 mb-8 pb-8 dark:text-white text-gray-800">
   <a class="no-underline" href="/now">
-    <h2 class="m-0 text-xl font-black leading-tight tracking-normal md:text-2xl text-primary-500 hover:text-primary-400 mb-4">Now</h2>
+    <h2 class="m-0 text-xl font-black leading-tight tracking-normal md:text-2xl text-purple-500 hover:text-purple-400 mb-4">Now</h2>
   </a>
   <p>I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies.</p>
   <p class="mb-0">{{ status.emoji }} {{ status.content }}</p>
diff --git a/src/_includes/now.liquid b/src/_includes/now.liquid
index 84205f96..e864c7b2 100644
--- a/src/_includes/now.liquid
+++ b/src/_includes/now.liquid
@@ -48,7 +48,7 @@ layout: main
         {% for artist in artists %}
           <a href="{{artist.url}}" title="{{artist.name | escape}}">
             <div class="relative block">
-              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
+              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 hover:border-purple-400 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
               <div class="absolute left-1 bottom-2 drop-shadow-md">
                 <div class="px-1 text-xs font-bold text-white">{{ artist.name }}</div>
                 <div class="px-1 text-xs text-white">
@@ -78,7 +78,7 @@ layout: main
         {% for album in albums %}
           <a href="{{album.url}}" title="{{album.name | escape}}">
             <div class="relative block">
-              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
+              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 hover:border-purple-400 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
               <div class="absolute left-1 bottom-2 drop-shadow-md">
                 <div class="px-1 text-xs font-bold text-white">{{ album.name }}</div>
                 <div class="px-1 text-xs text-white">
@@ -140,7 +140,7 @@ layout: main
         {% for movie in movies %}
           <a href="{{movie.link}}" title="{{movie.title | escape}}">
             <div class="relative block" style="max-width:226px">
-              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
+              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 hover:border-purple-400 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
               <div class="absolute left-1 bottom-2 drop-shadow-md">
                 <div class="px-1 text-xs font-bold text-white">{{ movie.title }}</div>
               </div>
diff --git a/src/_includes/paginator.liquid b/src/_includes/paginator.liquid
index 4de8ae2f..0b341086 100644
--- a/src/_includes/paginator.liquid
+++ b/src/_includes/paginator.liquid
@@ -1,7 +1,7 @@
 <nav class="flex justify-between mt-8 items-center">
   {% if pagination.href.previous %}
     <a href="{{ pagination.href.previous }}">
-      <button class="py-2 pr-4 text-primary-500 hover:text-primary-400" aria-label="Previous page">
+      <button class="py-2 pr-4 text-purple-500 hover:text-purple-400" aria-label="Previous page">
         {% heroicon "solid" "arrow-left" "Prevous" "width=20 height=20" %}
       </button>
     </a>
@@ -17,7 +17,7 @@
   <div class="flex flex-row items-center">
     <select
       id="pagination"
-      class="block w-12 h-12 rounded-full text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-500 dark:hover:bg-primary-300 mr-1 focus-visible:outline-none focus-visible:bg-primary-400 appearance-none text-center"
+      class="block cursor-pointer w-12 h-12 rounded-full text-white dark:text-gray-900 bg-purple-500 hover:bg-purple-500 dark:hover:bg-purple-300 mr-1 focus-visible:outline-none focus-visible:bg-purple-400 appearance-none text-center"
       style="text-align-last:center">
       {% for pageEntry in pagination.pages %}
         <option {% if page.url == pagination.hrefs[forloop.index0] %}selected{% endif %} value="{{ forloop.index }}">{{ forloop.index }}</option>
@@ -30,7 +30,7 @@
 
   {% if pagination.href.next %}
     <a href="{{ pagination.href.next }}">
-      <button class="py-2 pl-4 text-primary-500 hover:text-primary-400" aria-label="Next page">
+      <button class="py-2 pl-4 text-purple-500 hover:text-purple-400" aria-label="Next page">
         {% heroicon "solid" "arrow-right" "Next" "width=20 height=20" %}
       </button>
     </a>
diff --git a/src/_includes/webmentions.liquid b/src/_includes/webmentions.liquid
index 70ceb071..195d5074 100644
--- a/src/_includes/webmentions.liquid
+++ b/src/_includes/webmentions.liquid
@@ -11,7 +11,7 @@
                 <img
                   src={{mention.author.photo}}
                   alt={{mention.author.name}}
-                  class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-primary-500 dark:hover:border-primary-300"
+                  class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-300"
                   loading="lazy" />
               </a>
             </li>
@@ -29,7 +29,7 @@
                 <img
                   src={{mention.author.photo}}
                   alt={{mention.author.name}}
-                  class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-primary-500 dark:hover:border-primary-300"
+                  class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-300"
                   loading="lazy" />
               </a>
             </li>
@@ -46,11 +46,11 @@
               <img
                 src={{mention.author.photo}}
                 alt={{mention.author.name}}
-                class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-primary-500 dark:group-hover:border-primary-300"
+                class="bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-purple-500 dark:group-hover:border-purple-300"
                 loading="lazy" />
               <div class="ml-3">
-                <p class="text-sm group-hover:text-primary-500 dark:group-hover:text-primary-300">{{ mention.content.text }}</p>
-                <p class="mt-1 text-xs group-hover:text-primary-500 dark:group-hover:text-primary-300">{{ mention.published | isoDateOnly }}</p>
+                <p class="text-sm group-hover:text-purple-500 dark:group-hover:text-purple-300">{{ mention.content.text }}</p>
+                <p class="mt-1 text-xs group-hover:text-purple-500 dark:group-hover:text-purple-300">{{ mention.published | isoDateOnly }}</p>
               </div>
             </a>
           </div>
diff --git a/src/assets/atom-feed-links.xsl b/src/assets/atom-feed-links.xsl
index dbbc5180..0c4bb735 100644
--- a/src/assets/atom-feed-links.xsl
+++ b/src/assets/atom-feed-links.xsl
@@ -69,7 +69,7 @@ xmlns:atom="http://www.w3.org/2005/Atom">
 </xsl:template>
 <xsl:template match="atom:feed/atom:entry">
 <li>
-<a class="no-underline text-gray-800 dark:text-gray-200 leading-tight m-0 cursor-pointer">
+<a class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
     <xsl:attribute name="href">
     <xsl:value-of select="atom:link/@href"/>
     </xsl:attribute>
diff --git a/src/assets/atom-feed.xsl b/src/assets/atom-feed.xsl
index 3ec37e67..269cdaa5 100644
--- a/src/assets/atom-feed.xsl
+++ b/src/assets/atom-feed.xsl
@@ -73,7 +73,7 @@ xmlns:atom="http://www.w3.org/2005/Atom">
 <xsl:template match="atom:feed/atom:entry">
 <div class="pb-4 border-b border-gray-200 dark:border-gray-700 mb-8">
     <h3 class="mb-0">
-    <a class="no-underline text-gray-800 dark:text-gray-200 leading-tight m-0 md:text-2xl text-xl tracking-normal font-black">
+    <a class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
         <xsl:attribute name="href">
         <xsl:value-of select="atom:link/@href"/>
         </xsl:attribute>
diff --git a/src/assets/img/favicon/apple-touch-icon.png b/src/assets/img/favicon/apple-touch-icon.png
index 2cb2b595..425ac65c 100644
Binary files a/src/assets/img/favicon/apple-touch-icon.png and b/src/assets/img/favicon/apple-touch-icon.png differ
diff --git a/src/assets/img/favicon/favicon-16x16.png b/src/assets/img/favicon/favicon-16x16.png
index 1682c552..fb7ae0f4 100644
Binary files a/src/assets/img/favicon/favicon-16x16.png and b/src/assets/img/favicon/favicon-16x16.png differ
diff --git a/src/assets/img/favicon/favicon-192x192.png b/src/assets/img/favicon/favicon-192x192.png
index fc59c44a..3d1742a0 100644
Binary files a/src/assets/img/favicon/favicon-192x192.png and b/src/assets/img/favicon/favicon-192x192.png differ
diff --git a/src/assets/img/favicon/favicon-32x32.png b/src/assets/img/favicon/favicon-32x32.png
index a97fba63..0342ce94 100644
Binary files a/src/assets/img/favicon/favicon-32x32.png and b/src/assets/img/favicon/favicon-32x32.png differ
diff --git a/src/assets/img/favicon/favicon-512x512.png b/src/assets/img/favicon/favicon-512x512.png
index 2cb2b595..fec50852 100644
Binary files a/src/assets/img/favicon/favicon-512x512.png and b/src/assets/img/favicon/favicon-512x512.png differ
diff --git a/src/assets/img/favicon/favicon.png b/src/assets/img/favicon/favicon.png
index 5d44a293..0097638c 100644
Binary files a/src/assets/img/favicon/favicon.png and b/src/assets/img/favicon/favicon.png differ
diff --git a/src/assets/img/logo.webp b/src/assets/img/logo.webp
index 6733f911..16489453 100644
Binary files a/src/assets/img/logo.webp and b/src/assets/img/logo.webp differ
diff --git a/src/assets/img/social-card.png b/src/assets/img/social-card.png
index 4fc967bf..ae556632 100644
Binary files a/src/assets/img/social-card.png and b/src/assets/img/social-card.png differ
diff --git a/src/assets/styles/prism.css b/src/assets/styles/prism.css
index 1c6d78c3..b93736dd 100644
--- a/src/assets/styles/prism.css
+++ b/src/assets/styles/prism.css
@@ -1,375 +1,133 @@
-:root {
-  --background: #282a36;
-  --comment: #6272a4;
-  --foreground: #f8f8f2;
-  --selection: #44475a;
-  --cyan: #8be9fd;
-  --green: #50fa7b;
-  --orange: #ffb86c;
-  --pink: #ff79c6;
-  --purple: #bd93f9;
-  --red: #ff5555;
-  --yellow: #f1fa8c;
-  --background-30: #282a3633;
-  --comment-30: #6272a433;
-  --foreground-30: #f8f8f233;
-  --selection-30: #44475a33;
-  --cyan-30: #8be9fd33;
-  --green-30: #50fa7b33;
-  --orange-30: #ffb86c33;
-  --pink-30: #ff79c633;
-  --purple-30: #bd93f933;
-  --red-30: #ff555533;
-  --yellow-30: #f1fa8c33;
-  --background-40: #282a3666;
-  --comment-40: #6272a466;
-  --foreground-40: #f8f8f266;
-  --selection-40: #44475a66;
-  --cyan-40: #8be9fd66;
-  --green-40: #50fa7b66;
-  --orange-40: #ffb86c66;
-  --pink-40: #ff79c666;
-  --purple-40: #bd93f966;
-  --red-40: #ff555566;
-  --yellow-40: #f1fa8c66;
-}
-pre::-webkit-scrollbar {
-  width: 14px;
-}
-pre::-webkit-scrollbar-track {
-  background-color: var(--comment);
-  border-radius: 0;
-}
-pre::-webkit-scrollbar-thumb {
-  background-color: var(--purple);
-  border-radius: 0;
-}
-code[class*='language-'] ::-moz-selection,
-code[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection,
-pre[class*='language-']::-moz-selection {
-  text-shadow: none;
-  background-color: var(--selection);
-}
-code[class*='language-'] ::selection,
-code[class*='language-']::selection,
-pre[class*='language-'] ::selection,
-pre[class*='language-']::selection {
-  text-shadow: none;
-  background-color: var(--selection);
-}
-pre.line-numbers {
-  position: relative;
-  padding-left: 3.8em;
-  counter-reset: linenumber;
-}
-pre.line-numbers > code {
-  position: relative;
-  white-space: inherit;
-}
-.line-numbers .line-numbers-rows {
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  font-size: 100%;
-  left: -3.8em;
-  width: 3em;
-  letter-spacing: -1px;
-  border-right: 1px solid #999;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.line-numbers-rows > span {
-  pointer-events: none;
-  display: block;
-  counter-increment: linenumber;
-}
-.line-numbers-rows > span:before {
-  content: counter(linenumber);
-  color: #999;
-  display: block;
-  padding-right: 0.8em;
-  text-align: right;
-}
-div.code-toolbar {
-  position: relative;
-}
-div.code-toolbar > .toolbar {
-  position: absolute;
-  top: 0.3em;
-  right: 0.2em;
-  transition: opacity 0.3s ease-in-out;
-  opacity: 0;
-}
-div.code-toolbar:hover > .toolbar {
-  opacity: 1;
-}
-div.code-toolbar > .toolbar .toolbar-item {
-  display: inline-block;
-  padding-right: 20px;
-}
-div.code-toolbar > .toolbar a {
-  cursor: pointer;
-}
-div.code-toolbar > .toolbar button {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  padding: 0;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-div.code-toolbar > .toolbar a,
-div.code-toolbar > .toolbar button,
-div.code-toolbar > .toolbar span {
-  color: var(--foreground);
-  font-size: 0.8em;
-  padding: 0.5em;
-  background: var(--comment);
-  border-radius: 0.5em;
-}
-div.code-toolbar > .toolbar a:focus,
-div.code-toolbar > .toolbar a:hover,
-div.code-toolbar > .toolbar button:focus,
-div.code-toolbar > .toolbar button:hover,
-div.code-toolbar > .toolbar span:focus,
-div.code-toolbar > .toolbar span:hover {
-  color: inherit;
-  text-decoration: none;
-  background-color: var(--green);
-}
-@media print {
-  code[class*='language-'],
-  pre[class*='language-'] {
-    text-shadow: none;
-  }
-}
+/*
+ * Laserwave Theme originally by Jared Jones for Visual Studio Code
+ * https://github.com/Jaredk3nt/laserwave
+ *
+ * Ported for PrismJS by Simon Jespersen [https://github.com/simjes]
+ */
+
 code[class*='language-'],
 pre[class*='language-'] {
-  color: var(--foreground);
-  background: var(--background);
-  text-shadow: none;
-  font-family: PT Mono, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  background: #27212e;
+  color: #ffffff;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* this is the default */
+  /* The following properties are standard, please leave them as they are */
+  font-size: 1em;
+  direction: ltr;
   text-align: left;
   white-space: pre;
   word-spacing: normal;
   word-break: normal;
-  word-wrap: normal;
   line-height: 1.5;
   -moz-tab-size: 2;
   -o-tab-size: 2;
   tab-size: 2;
+  /* The following properties are also standard */
   -webkit-hyphens: none;
   -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
 }
+
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection,
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection {
+  background: #eb64b927;
+  color: inherit;
+}
+
+code[class*='language-']::selection,
+code[class*='language-'] ::selection,
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection {
+  background: #eb64b927;
+  color: inherit;
+}
+
+/* Properties specific to code blocks */
 pre[class*='language-'] {
-  background: var(--background);
+  padding: 1em; /* this is standard */
+  margin: 0.5em 0; /* this is the default */
+  overflow: auto; /* this is standard */
   border-radius: 0.5em;
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-  height: auto;
-}
-:not(pre) > code[class*='language-'],
-pre[class*='language-'] {
-  background: var(--background);
 }
+
+/* Properties specific to inline code */
 :not(pre) > code[class*='language-'] {
-  padding: 4px 7px;
-  border-radius: 0.3em;
-  white-space: normal;
+  padding: 0.2em 0.3em;
+  border-radius: 0.5rem;
+  white-space: normal; /* this is standard */
 }
-.limit-300 {
-  height: 300px !important;
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+  color: #91889b;
 }
-.limit-300 {
-  height: 400px !important;
+
+.token.punctuation {
+  color: #7b6995;
 }
-.limit-500 {
-  height: 500px !important;
+
+.token.builtin,
+.token.constant,
+.token.boolean {
+  color: #ffe261;
 }
-.limit-600 {
-  height: 600px !important;
+
+.token.number {
+  color: #b381c5;
 }
-.limit-700 {
-  height: 700px !important;
+
+.token.important,
+.token.atrule,
+.token.property,
+.token.keyword {
+  color: #40b4c4;
 }
-.limit-800 {
-  height: 800px !important;
+
+.token.doctype,
+.token.operator,
+.token.inserted,
+.token.tag,
+.token.class-name,
+.token.symbol {
+  color: #74dfc4;
 }
-.language-css {
-  color: var(--purple);
+
+.token.attr-name,
+.token.function,
+.token.deleted,
+.token.selector {
+  color: #eb64b9;
 }
-.token {
-  color: var(--pink);
+
+.token.attr-value,
+.token.regex,
+.token.char,
+.token.string {
+  color: #b4dce7;
 }
-.language-css .token {
-  color: var(--pink);
-}
-.token.script {
-  color: var(--foreground);
+
+.token.entity,
+.token.url,
+.token.variable {
+  color: #ffffff;
 }
+
+/* The following rules are pretty similar across themes, but feel free to adjust them */
 .token.bold {
-  font-weight: 700;
+  font-weight: bold;
 }
+
 .token.italic {
   font-style: italic;
 }
-.token.atrule,
-.token.attr-name,
-.token.attr-value {
-  color: var(--green);
-}
-.language-css .token.atrule {
-  color: var(--purple);
-}
-.language-html .token.attr-value,
-.language-markup .token.attr-value {
-  color: var(--yellow);
-}
-.token.boolean {
-  color: var(--purple);
-}
-.token.builtin,
-.token.class-name {
-  color: var(--cyan);
-}
-.token.comment {
-  color: var(--comment);
-}
-.token.constant {
-  color: var(--purple);
-}
-.language-javascript .token.constant {
-  color: var(--orange);
-  font-style: italic;
-}
+
 .token.entity {
-  color: var(--pink);
-}
-.language-css .token.entity {
-  color: var(--green);
-}
-.language-html .token.entity.named-entity {
-  color: var(--purple);
-}
-.language-html .token.entity:not(.named-entity) {
-  color: var(--pink);
-}
-.language-markup .token.entity.named-entity {
-  color: var(--purple);
-}
-.language-markup .token.entity:not(.named-entity) {
-  color: var(--pink);
-}
-.token.function {
-  color: var(--green);
-}
-.language-css .token.function {
-  color: var(--cyan);
-}
-.token.important,
-.token.keyword {
-  color: var(--pink);
-}
-.token.prolog {
-  color: var(--foreground);
-}
-.token.property {
-  color: var(--orange);
-}
-.language-css .token.property {
-  color: var(--cyan);
-}
-.token.punctuation {
-  color: var(--pink);
-}
-.language-css .token.punctuation {
-  color: var(--orange);
-}
-.language-html .token.punctuation,
-.language-markup .token.punctuation {
-  color: var(--foreground);
-}
-.token.selector {
-  color: var(--pink);
-}
-.language-css .token.selector {
-  color: var(--green);
-}
-.token.regex {
-  color: var(--red);
-}
-.language-css .token.rule:not(.atrule) {
-  color: var(--foreground);
-}
-.token.string {
-  color: var(--yellow);
-}
-.token.tag {
-  color: var(--pink);
-}
-.token.url {
-  color: var(--cyan);
-}
-.language-css .token.url {
-  color: var(--orange);
-}
-.token.variable {
-  color: var(--comment);
-}
-.token.number {
-  color: rgba(189, 147, 249, 1);
-}
-.token.operator {
-  color: rgba(139, 233, 253, 1);
-}
-.token.char {
-  color: rgba(255, 135, 157, 1);
-}
-.token.symbol {
-  color: rgba(255, 184, 108, 1);
-}
-.token.deleted {
-  color: #e2777a;
+  cursor: help;
 }
+
 .token.namespace {
-  color: #e2777a;
-}
-.highlight-line {
-  color: inherit;
-  display: inline-block;
-  text-decoration: none;
-  border-radius: 4px;
-  padding: 2px 10px;
-}
-.highlight-line:empty:before {
-  content: ' ';
-}
-.highlight-line:not(:last-child) {
-  min-width: 100%;
-}
-.highlight-line .highlight-line:not(:last-child) {
-  min-width: 0;
-}
-.highlight-line-isdir {
-  color: var(--foreground);
-  background-color: var(--selection-30);
-}
-.highlight-line-active {
-  background-color: var(--comment-30);
-}
-.highlight-line-add {
-  background-color: var(--green-30);
-}
-.highlight-line-remove {
-  background-color: var(--red-30);
+  opacity: 0.7;
 }
diff --git a/src/index.html b/src/index.html
index 358d3c2b..ae7ba94a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,7 +14,7 @@ pagination:
   >
     <a class="no-underline" href="{{ post.url }}">
       <h2
-        class="p-name m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl"
+        class="p-name m-0 text-xl font-black leading-tight tracking-normal hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 md:text-2xl"
       >
         {{ post.data.title }}
       </h2>
diff --git a/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md b/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md
index 2286ed3d..c2db61c4 100644
--- a/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md
+++ b/src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md
@@ -69,7 +69,7 @@ export default function Now(props) {
             <p className="mt-2 text-lg leading-7 text-gray-500 dark:text-gray-100">
               <CodeBracketIcon className="mr-1 inline h-6 w-6" />
               Working at <Link
-                className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+                className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
                 href="https://hashicorp.com"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -81,7 +81,7 @@ export default function Now(props) {
               <MegaphoneIcon className="mr-1 inline h-6 w-6" />
               Rooting for the{` `}
               <Link
-                className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+                className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
                 href="https://lakers.com"
                 target="_blank"
                 rel="noopener noreferrer"
@@ -98,7 +98,7 @@ export default function Now(props) {
             <p className="mt-2 text-lg leading-7 text-gray-500 dark:text-gray-100">
               <CommandLineIcon className="mr-1 inline h-6 w-6" />
               Hacking away on random projects like this page, my <Link
-                className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+                className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
                 href="/blog"
                 passHref
               >
@@ -114,7 +114,7 @@ export default function Now(props) {
           <p className="pt-8 text-center text-xs text-gray-900 dark:text-gray-100">
             (This is a{' '}
             <Link
-              className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+              className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
               href="https://nownownow.com/about"
               target="_blank"
               rel="noopener noreferrer"
@@ -122,7 +122,7 @@ export default function Now(props) {
               now page
             </Link>
             , and if you have your own site, <Link
-              className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+              className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
               href="https://nownownow.com/about"
               target="_blank"
               rel="noopener noreferrer"
@@ -309,14 +309,14 @@ const Cover = (props: { media: Media; type: 'artist' | 'album' }) => {
 
   return (
     <Link
-      className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+      className="text-purple-500 hover:text-purple-600 dark:hover:text-purple-400"
       href={media.url}
       target="_blank"
       rel="noopener noreferrer"
       title={media.name}
     >
       <div className="relative">
-        <div className="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
+        <div className="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 bg-cover-gradient dark:border-gray-500"></div>
         <div className="absolute left-1 bottom-2 drop-shadow-md">
           <div className="px-1 text-xs font-bold text-white">{media.name}</div>
           <div className="px-1 text-xs text-white">
diff --git a/src/posts/2023/building-my-now-page-using-eleventy.md b/src/posts/2023/building-my-now-page-using-eleventy.md
index bfd05f5d..4f04c0c5 100644
--- a/src/posts/2023/building-my-now-page-using-eleventy.md
+++ b/src/posts/2023/building-my-now-page-using-eleventy.md
@@ -56,7 +56,7 @@ The **Listening: albums** call is quite similar, swapping the `user.gettopartist
             {% for artist in artists %}
                 <a href="{{artist.url}}" title="{{artist.name | escape}}">
                     <div class="relative block">
-                        <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
+                        <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 bg-cover-gradient dark:border-gray-500"></div>
                         <div class="absolute left-1 bottom-2 drop-shadow-md">
                             <div class="px-1 text-xs font-bold text-white">{{artist.name}}</div>
                             <div class="px-1 text-xs text-white">
@@ -106,7 +106,7 @@ These images are all cropped to `350x350` and hosted over on <a href="https://bu
             {% for album in albums %}
                 <a href="{{album.url}}" title="{{album.name | escape}}">
                     <div class="relative block">
-                        <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
+                        <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-500 bg-cover-gradient dark:border-gray-500"></div>
                         <div class="absolute left-1 bottom-2 drop-shadow-md">
                             <div class="px-1 text-xs font-bold text-white">{{album.name}}</div>
                             <div class="px-1 text-xs text-white">
diff --git a/src/posts/2023/client-side-webmentions-in-nextjs.md b/src/posts/2023/client-side-webmentions-in-nextjs.md
index bad025e5..50d1a42e 100644
--- a/src/posts/2023/client-side-webmentions-in-nextjs.md
+++ b/src/posts/2023/client-side-webmentions-in-nextjs.md
@@ -76,7 +76,7 @@ const WebmentionsCore = () => {
                 <li key={mention['wm-id']} className="-ml-2">
                   <Link href={mention.url} target="_blank" rel="noopener noreferrer">
                     <Image
-                      className="h-10 w-10 rounded-full border border-primary-500 dark:border-gray-500"
+                      className="h-10 w-10 rounded-full border border-purple-500 dark:border-gray-500"
                       src={mention.author.photo}
                       alt={mention.author.name}
                       width="40"
@@ -105,7 +105,7 @@ const WebmentionsCore = () => {
                 rel="noopener noreferrer"
               >
                 <Image
-                  className="h-12 w-12 rounded-full border border-primary-500 dark:border-gray-500"
+                  className="h-12 w-12 rounded-full border border-purple-500 dark:border-gray-500"
                   src={mention.author.photo}
                   alt={mention.author.name}
                   width="48"
diff --git a/src/posts/2023/lazy-select-based-pagination-eleventy.md b/src/posts/2023/lazy-select-based-pagination-eleventy.md
index bf703480..76134003 100644
--- a/src/posts/2023/lazy-select-based-pagination-eleventy.md
+++ b/src/posts/2023/lazy-select-based-pagination-eleventy.md
@@ -15,7 +15,7 @@ Given that I was already iterating through all pages in my posts collection, my
   <div class="flex flex-row items-center">
     <select
       id="pagination"
-      class="block w-12 h-12 rounded-full text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-500 dark:hover:bg-primary-300 mr-1 focus-visible:outline-none focus-visible:bg-primary-400 appearance-none text-center"
+      class="block w-12 h-12 rounded-full text-white dark:text-gray-900 bg-purple-500 hover:bg-purple-500 dark:hover:bg-purple-300 mr-1 focus-visible:outline-none focus-visible:bg-purple-400 appearance-none text-center"
       style="text-align-last:center">
       {% for pageEntry in pagination.pages %}
         <option {% if page.url == pagination.hrefs[forloop.index0] %}selected{% endif %} value="{{ forloop.index }}">{{ forloop.index }}</option>
diff --git a/src/posts/2023/webmentions-in-eleventy.md b/src/posts/2023/webmentions-in-eleventy.md
index 6477ac2f..8161cfa7 100644
--- a/src/posts/2023/webmentions-in-eleventy.md
+++ b/src/posts/2023/webmentions-in-eleventy.md
@@ -79,7 +79,7 @@ When the build runs, it renders any mentions of a given post via a [liquid.js](h
                     <img
                         src={{mention.author.photo}}
                         alt={{mention.author.name}}
-                        class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-primary-500 dark:hover:border-primary-300"
+                        class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-300"
                         loading="lazy"
                     />
                 </a>
@@ -98,7 +98,7 @@ When the build runs, it renders any mentions of a given post via a [liquid.js](h
                     <img
                         src={{mention.author.photo}}
                         alt={{mention.author.name}}
-                        class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-primary-500 dark:hover:border-primary-300"
+                        class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all hover:border-purple-500 dark:hover:border-purple-300"
                         loading="lazy"
                     />
                 </a>
@@ -116,12 +116,12 @@ When the build runs, it renders any mentions of a given post via a [liquid.js](h
                 <img
                     src={{mention.author.photo}}
                     alt={{mention.author.name}}
-                    class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-primary-500 dark:group-hover:border-primary-300"
+                    class="h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-purple-500 dark:group-hover:border-purple-300"
                     loading="lazy"
                 />
                 <div class="ml-3">
-                    <p class="text-sm group-hover:text-primary-500 dark:group-hover:text-primary-300">{{mention.content.text}}</p>
-                    <p class="mt-1 text-xs group-hover:text-primary-500 dark:group-hover:text-primary-300">{{mention.published | isoDateOnly}}</p>
+                    <p class="text-sm group-hover:text-purple-500 dark:group-hover:text-purple-300">{{mention.content.text}}</p>
+                    <p class="mt-1 text-xs group-hover:text-purple-500 dark:group-hover:text-purple-300">{{mention.published | isoDateOnly}}</p>
                 </div>
             </a>
         </div>
diff --git a/src/tags.md b/src/tags.md
index 7b717740..9b21b931 100644
--- a/src/tags.md
+++ b/src/tags.md
@@ -7,7 +7,7 @@ title: Tags
 
 <span>
   <a href="/tags/{{ tag }}" class="no-underline">
-    <button class="font-semibold py-2 px-4 mr-4 mb-4 rounded-full text-white dark:text-gray-900 bg-primary-400 hover:bg-primary-500 dark:hover:bg-primary-300">
+    <button class="font-semibold py-2 px-4 mr-4 mb-4 rounded-full text-white dark:text-gray-900 bg-purple-400 hover:bg-purple-500 dark:hover:bg-purple-300">
       {{ tag }}
     </button>
   </a>
diff --git a/tailwind.config.js b/tailwind.config.js
index ffb6f228..bf71a13b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,4 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
-const dracula = require('tailwind-dracula/colors')
 
 module.exports = {
   darkMode: 'class',
@@ -17,22 +16,6 @@ module.exports = {
       fontFamily: {
         sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
       },
-      colors: {
-        ...dracula,
-        primary: dracula.purple,
-        gray: dracula.darker,
-        blue: dracula.blue,
-        cyan: dracula.cyan,
-        green: dracula.green,
-        orange: dracula.orange,
-        pink: dracula.pink,
-        purple: dracula.purple,
-        red: dracula.red,
-        yellow: dracula.yellow,
-        dark: dracula.dark,
-        darker: dracula.darker,
-        light: dracula.light,
-      },
       backgroundImage: {
         'cover-gradient':
           'linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) 70%,rgba(0,0,0,.5))',
@@ -41,11 +24,11 @@ module.exports = {
         DEFAULT: {
           css: {
             a: {
-              color: theme('colors.primary.500'),
+              color: theme('colors.purple.500'),
               '&:hover': {
-                color: `${theme('colors.primary.400')} !important`,
+                color: `${theme('colors.purple.400')} !important`,
               },
-              code: { color: theme('colors.primary.400') },
+              code: { color: theme('colors.purple.400') },
             },
             pre: {
               backgroundColor: theme('colors.gray.900'),
@@ -67,7 +50,9 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/typography'),
-    require('tailwind-dracula')('dracula'),
+    require('@catppuccin/tailwindcss', {
+      defaultFlavour: 'mocha',
+    }),
     require('@tailwindcss/aspect-ratio'),
   ],
   content: ['./src/**/*.md', './src/**/*.html', './src/_includes/**/*.liquid'],
diff --git a/tailwind.css b/tailwind.css
index 86b591d3..92ae9d21 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -3,12 +3,12 @@
 @tailwind utilities;
 
 ::-moz-selection {
-  color: theme(colors.gray.800);
+  color: theme(colors.white);
   background: theme(colors.purple.400);
 }
 
 ::selection {
-  color: theme(colors.gray.800);
+  color: theme(colors.white);
   background: theme(colors.purple.400);
 }
 
@@ -33,5 +33,11 @@
 }
 
 .active {
-  @apply text-primary-400 !important;
+  @apply text-purple-500 !important;
+}
+
+.active:hover,
+.active:active,
+.active:focus {
+  @apply text-purple-400 !important;
 }
diff --git a/yarn.lock b/yarn.lock
index c0be2c3d..c526a1ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -230,6 +230,19 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@catppuccin/palette@0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@catppuccin/palette/-/palette-0.1.5.tgz#79350555c86707913942bf4feaac9fe9bc0c1d7c"
+  integrity sha512-IQLsZwXDMpLc5CFGjIMa/gFnnFL/QLB280F11B51JweZHerZ/FgPXdIR4eQqn1CgrqI3wGfgnj1LVPx12DV/Uw==
+
+"@catppuccin/tailwindcss@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@catppuccin/tailwindcss/-/tailwindcss-0.1.1.tgz#16cfeec67591fe2b0428d6aaca718c72cdb67e53"
+  integrity sha512-WWOzx8uOf3QPZ1HdVSkpgaqzMzrfYpOgAketQAQ7493eFhlYC4bJ1ViT5ukhwfhzuu3xnmke+Op2qjhHnyjt8g==
+  dependencies:
+    "@catppuccin/palette" "0.1.5"
+    tailwindcss "^3.0.24"
+
 "@commitlint/cli@^17.6.3":
   version "17.6.3"
   resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-17.6.3.tgz#a02194a2bb6efe4e681eda2addd072a8d02c9497"
@@ -5304,12 +5317,7 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-tailwind-dracula@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/tailwind-dracula/-/tailwind-dracula-1.1.0.tgz#3b53341841e065f75e9af253c3f94f4e01affe98"
-  integrity sha512-LjU1df6WGS5eUwozdPtZ7jARojHYTIe6y1Gj5v2QNaNnMnLm7ipPtlIEGlNXXraWjVnWeRbLZl4vvr48mMFGxw==
-
-tailwindcss@^3.3.2:
+tailwindcss@^3.0.24, tailwindcss@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.2.tgz#2f9e35d715fdf0bbf674d90147a0684d7054a2d3"
   integrity sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==