diff --git a/src/components/ShowcaseProject.astro b/src/components/ShowcaseProject.astro
index 6e79387..7905453 100644
--- a/src/components/ShowcaseProject.astro
+++ b/src/components/ShowcaseProject.astro
@@ -27,12 +27,12 @@ const { collection } = Astro.props;
       href={`/${collection.collection}/${collection.slug}`}
       aria-label={collection.data.title}></a>
     <h3
-      class="text-primary dark:text-secondary z-10 w-fit text-xl font-semibold opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+      class="text-white z-10 w-fit text-xl font-semibold opacity-0 transition-opacity duration-300 group-hover:opacity-100"
     >
       {collection.data.title}
     </h3>
     <div
-      class="text-accent z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+      class="text-neutral-400 z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
     >
       {
         collection.data.collection ? (
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8e24da7..08a4fc9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -25,7 +25,7 @@ const projects = allProjects
 <Layout title={HOME.TITLE} description={HOME.DESCRIPTION}>
   <Hero />
   <section aria-labelledby="featured-projects">
-    <div class="group flex w-fit flex-row items-center justify-between gap-6">
+    <div class="group flex w-fit flex-row items-center">
       <a href="/projects">
         <h2
           class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500"
@@ -49,7 +49,7 @@ const projects = allProjects
     }
   </section>
   <section aria-labelledby="recent-posts">
-    <div class="group flex w-fit flex-row items-center justify-between gap-6">
+    <div class="group flex w-fit flex-row items-center">
       <a href="/posts">
         <h2
           class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s]"
diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
index 8e1f828..696d161 100644
--- a/src/pages/posts/index.astro
+++ b/src/pages/posts/index.astro
@@ -14,7 +14,7 @@ const posts = (await getCollection("posts"))
     {POSTS.TITLE}
   </h1>
   <ol
-    class="animate-reveal mt-16 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
+    class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
   >
     {posts.map((article: any) => <ShowcasePost collection={article} />)}
   </ol>
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
index 953f773..2d02ceb 100644
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -14,7 +14,7 @@ const projects = (await getCollection("projects"))
     {PROJECTS.TITLE}
   </h1>
   <ol
-    class="animate-reveal mt-16 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
+    class="animate-reveal grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
   >
     {projects.map((article: any) => <ShowcaseProject collection={article} />)}
   </ol>
diff --git a/src/styles/global.css b/src/styles/global.css
index 2dda23b..17aa229 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -21,6 +21,7 @@
   --animate-gradient-x: gradient-x 6s ease infinite;
   --animate-gradient-y: gradient-y 6s ease infinite;
   --animate-gradient-xy: gradient-xy 6s ease infinite;
+
   @keyframes reveal {
     0% {
       opacity: 0;
@@ -79,18 +80,18 @@
 }
 
 :root {
-  --primary: oklch(99% 0 0);
-  --secondary: oklch(15% 0 0);
-  --tertiary: oklch(40% 0 0);
-  --accent: oklch(25% 0 0);
+  --primary: var(--color-neutral-50);
+  --secondary: var(--color-neutral-950);
+  --tertiary: var(--color-neutral-500);
+  --accent: var(--color-neutral-700);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --primary: oklch(0% 0 0);
-    --secondary: oklch(95% 0 0);
-    --tertiary: oklch(60% 0 0);
-    --accent: oklch(75% 0 0);
+    --primary: var(--color-black);
+    --secondary: var(--color-neutral-50);
+    --tertiary: var(--color-neutral-500);
+    --accent: var(--color-neutral-300);
   }
 
   .astro-code,