diff --git a/site/components/Features.tsx b/site/components/Features.tsx
index d1679550..76032116 100644
--- a/site/components/Features.tsx
+++ b/site/components/Features.tsx
@@ -38,7 +38,7 @@ const features: { title: string; description: string; icon: string }[] = [
 export default function Features() {
   return (
     <div className="lg:max-w-8xl mx-auto px-4 lg:px-8 xl:px-12">
-      <h2 className="text-3xl font-bold">How Portal.JS works?</h2>
+      <h2 className="text-3xl font-bold text-primary dark:text-primary-dark">How Portal.JS works?</h2>
       <p className="text-lg mt-8">
         Portal.JS is built in JavaScript and React on top of the popular Next.js
         framework, assuming a "decoupled" approach where the frontend is a
@@ -55,7 +55,7 @@ export default function Features() {
             <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.blue.300),theme(colors.blue.400),theme(colors.blue.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]" />
             <div className="relative overflow-hidden rounded-xl p-6">
               <img src={feature.icon} alt="" className="h-24 w-auto" />
-              <h2 className="mt-4 font-display text-base text-slate-900 dark:text-white">
+              <h2 className="mt-4 font-display text-base text-primary dark:text-primary-dark">
                 <span className="absolute -inset-px rounded-xl" />
                 {feature.title}
               </h2>
diff --git a/site/components/MDXPage.tsx b/site/components/MDXPage.tsx
index b710bd6c..739e2fbd 100644
--- a/site/components/MDXPage.tsx
+++ b/site/components/MDXPage.tsx
@@ -11,7 +11,7 @@ export default function MDXPage({ source, frontMatter }) {
   };
 
   return (
-    <div className="prose mx-auto prose-a:text-primary dark:prose-a:text-primary-dark prose-strong:text-primary dark:prose-strong:text-primary-dark prose-code:text-primary dark:prose-code:text-primary-dark prose-headings:text-primary dark:prose-headings:text-primary-dark prose text-primary dark:text-primary-dark prose-headings:font-headings dark:prose-invert prose-a:break-words">
+    <div className="prose mx-auto prose-a:text-primary dark:prose-a:text-primary-dark prose-strong:text-primary dark:prose-strong:text-primary-dark prose-code:text-primary dark:prose-code:text-primary-dark prose-headings:text-primary dark:prose-headings:text-primary-dark text-primary dark:text-primary-dark prose-headings:font-headings dark:prose-invert prose-a:break-words">
       <header>
         <div className="mb-6">
           {/* Default layout */}
diff --git a/site/components/NavItem.tsx b/site/components/NavItem.tsx
index 88d4dd93..1fc597e2 100644
--- a/site/components/NavItem.tsx
+++ b/site/components/NavItem.tsx
@@ -29,12 +29,12 @@ export default function NavItem({ item }) {
         {Object.prototype.hasOwnProperty.call(item, "href") ? (
           <Link
             href={item.href}
-            className="text-slate-500 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
+            className="text-slate-600 dark:text-slate-400 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-500"
           >
             {item.name}
           </Link>
         ) : (
-          <div className="text-slate-500 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-600 fill-slate-500 hover:fill-slate-600">
+          <div className="text-slate-600 dark:text-slate-400 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-500 fill-slate-500 hover:fill-slate-600">
             {item.name}
           </div>
         )}
diff --git a/site/lib/markdown.mjs b/site/lib/markdown.mjs
index 4a571c24..97536a58 100644
--- a/site/lib/markdown.mjs
+++ b/site/lib/markdown.mjs
@@ -12,6 +12,7 @@ import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeKatex from "rehype-katex";
 import rehypeSlug from "rehype-slug";
 import rehypePrismPlus from "rehype-prism-plus";
+import * as tw from "../tailwind.config";
 
 import { serialize } from "next-mdx-remote/serialize";
 
@@ -65,7 +66,7 @@ const parse = async function (source, format, scope) {
                     "svg",
                     {
                       xmlns: "http:www.w3.org/2000/svg",
-                      fill: "#ab2b65",
+                      fill: tw.theme.extend.colors.secondary.DEFAULT,
                       viewBox: "0 0 20 20",
                       className: "w-5 h-5",
                     },
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index ba6dcb1c..3fc8cabd 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -32,12 +32,12 @@ module.exports = {
           dark: colors.slate[950],
         },
         primary: {
-          DEFAULT: colors.gray[700],
-          dark: colors.gray[300],
+          DEFAULT: colors.gray[800],
+          dark: colors.gray[100],
         },
         secondary: {
-          DEFAULT: "",
-          dark: "",
+          DEFAULT: "#60a5fa",
+          dark: "#60a5fa",
         },
       },
     },