diff --git a/src/components/Card.astro b/src/components/Card.astro
index 70b8f6a..9486c72 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -1,6 +1,4 @@
 ---
-import { string } from 'astro:schema';
-
 interface Props {
 	title: string;
 	body: string;
@@ -10,9 +8,9 @@ interface Props {
 const { href, title, body } = Astro.props;
 ---
 
-<li class={"link-card shadow-lg bg-teal-200 text-black"}>
+<li class="link-card border border-neutral dark:shadow-primary">
 	<a href={href}>
-		<h2 class="text-red-500 font-bold">
+		<h2 class="text-primary font-bold">
 			{title}
 			<span>&rarr;</span>
 		</h2>
@@ -49,11 +47,11 @@ const { href, title, body } = Astro.props;
 		margin-top: 0.5rem;
 		margin-bottom: 0;
 	}
-	.link-card:is(:hover, :focus-within) {
+	/* .link-card:is(:hover, :focus-within) {
 		background-position: 0;
     @apply bg-gradient-to-r from-primary to-accent;
-	}
+	} */
 	.link-card:is(:hover, :focus-within) h2 {
-    color: var(--primary-content) !important;
+    @apply text-accent;
 	}
 </style>
diff --git a/src/components/CircleGraphNavigation.astro b/src/components/CircleGraphNavigation.astro
index 6d7451d..4c1ad4b 100644
--- a/src/components/CircleGraphNavigation.astro
+++ b/src/components/CircleGraphNavigation.astro
@@ -30,7 +30,7 @@ const calculatePositions = (cx: number, cy: number, r: number, angleDegrees: num
 };
 
 ---
-<div id="container" class="w-full h-auto p-4 max-h-[400px] flex bg-red-300">
+<div id="container" class="w-full h-auto p-4 max-h-[400px] flex">
   <!-- Set SVG dimensions and aspect ratio for responsiveness -->
   <svg viewBox="0 0 150 50" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="overflow-visible">
     <!-- Draw lines between circles -->
@@ -40,8 +40,8 @@ const calculatePositions = (cx: number, cy: number, r: number, angleDegrees: num
         y1={circles[index].cy} 
         x2={circle.cx} 
         y2={circle.cy} 
-        stroke="black" 
         stroke-width="4"
+        class="stroke-base-content"
       />
     ))}
   
@@ -51,19 +51,19 @@ const calculatePositions = (cx: number, cy: number, r: number, angleDegrees: num
       return (<a 
         href={circle.href}
         style={`transform-origin: ${circle.cx}px ${circle.cy}px;`}
-        class="transition-transform duration-300 ease-in-out transform hover:scale-150 hover:drop-shadow-lg cursor-pointer">
+        class="transition-transform duration-300 ease-in-out transform hover:scale-150 colored-drop-shadow cursor-pointer">
         <circle 
           cx={circle.cx} 
           cy={circle.cy} 
           r={circle.r} 
-          class="fill-white stroke-black stroke-1"
+          class="fill-primary stroke-base-content stroke-1"
         />
         <!-- Add a curved line (arc) connecting the circle to the text -->
         <path 
           d={`M ${startX} ${startY} A ${circle.r + 1} ${circle.r + 1} 0 0 1 ${endX} ${endY}`}
-          stroke="black" 
           stroke-width="0.2" 
           fill="none"
+          class="stroke-base-content"
         />
         <!-- Add text element relative to each circle -->
         <text 
@@ -71,7 +71,7 @@ const calculatePositions = (cx: number, cy: number, r: number, angleDegrees: num
           y={textY} 
           text-anchor="middle" 
           alignment-baseline="middle" 
-          class="fill-black cursor-pointer"
+          class="fill-base-content cursor-pointer"
           font-size="3"
         >
           {circle.text}
@@ -91,4 +91,9 @@ const calculatePositions = (cx: number, cy: number, r: number, angleDegrees: num
     max-width: 100%;
     /* border: 1px solid black; */
   }
+
+  .colored-drop-shadow:hover {
+    filter: drop-shadow(0 2px 2px oklch(var(--p) / 0.4))
+          drop-shadow(0 4px 3px oklch(var(--p) / 0.1));
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index f090f67..8785d1c 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,4 +1,4 @@
-<footer class="footer bg-neutral text-neutral-content p-10">
+<footer class="footer bg-neutral text-neutral-content p-10 dark:bg-black dark:border-t-primary dark:border-t-2">
   <nav>
     <h6 class="footer-title">Services</h6>
     <a class="link link-hover">Knowledgebase</a>
diff --git a/src/components/Home/CommunityCards.astro b/src/components/Home/CommunityCards.astro
index 60c61fc..ecd8403 100644
--- a/src/components/Home/CommunityCards.astro
+++ b/src/components/Home/CommunityCards.astro
@@ -3,14 +3,16 @@ import Card from '../Card.astro'
 ---
 
 <section class="w-full flex justify-center">
-  <div class="text-accent-content bg-teal-700 md:px-20 md:py-10 w-full max-sm:p-3">
+  <div class="p-3 md:px-20 md:py-10 w-full">
 
-    <div class="flex justify-center w-full p-5 uppercase tracking-wide">
-      <h2 class="text-3xl font-bold text-center text-black">
-        for the research community
-      </h2>
+    <div class="flex flex-col items-center w-full">
+      <div class="p-5">
+        <h2 class="text-3xl font-bold text-center tracking-wider p-5 uppercase">
+          for the research community
+        </h2>
+      </div>
     </div>
-
+    
     <ul role="list" class="link-card-grid">
       <Card
         href="https://docs.astro.build/"
@@ -31,11 +33,11 @@ import Card from '../Card.astro'
   </div>
 </section>
 
-
 <style>
   .link-card-grid {
 		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    justify-items: center;
 		gap: 2rem;
 		padding: 0;
 	}
diff --git a/src/components/Home/DeveloperCards.astro b/src/components/Home/DeveloperCards.astro
index bd16a55..b49fbf3 100644
--- a/src/components/Home/DeveloperCards.astro
+++ b/src/components/Home/DeveloperCards.astro
@@ -3,12 +3,14 @@ import Card from '../Card.astro'
 ---
 
 <section class="w-full flex justify-center">
-  <div class="text-accent-content bg-teal-700 md:px-20 md:py-10 w-full max-sm:p-3">
+  <div class="md:px-20 md:py-10 w-full max-sm:p-3">
 
-    <div class="flex justify-center w-full p-5 uppercase tracking-wide">
-      <h2 class="text-3xl font-bold text-center text-black">
-        for developers
-      </h2>
+    <div class="flex flex-col items-center w-full">
+      <div class="p-5">
+        <h2 class="text-3xl font-bold text-center tracking-wider p-5 uppercase">
+          for developers
+        </h2>
+      </div>
     </div>
 
     <ul role="list" class="link-card-grid">
diff --git a/src/components/Home/HeroText.astro b/src/components/Home/HeroText.astro
index e2bd81f..0bfd65e 100644
--- a/src/components/Home/HeroText.astro
+++ b/src/components/Home/HeroText.astro
@@ -2,11 +2,11 @@
 const mainHeroText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
 ---
 
-<div class="hero bg-teal-700 min-h-[50%]">
-  <div class="hero-content text-accent-content md:px-20 md:py-10 lg:max-w-4xl">
+<div class="hero min-h-[50%]">
+  <div class="hero-content md:px-20 md:py-10 lg:max-w-4xl">
     <div class="">
       <h1 class="text-5xl font-bold">
-        <span class="text-red-500">A</span>nnotated <span class="text-red-500">R</span>esearch <span class="text-red-500">C</span>ontext 
+        <span class="text-accent">A</span>nnotated <span class="text-accent">R</span>esearch <span class="text-accent">C</span>ontext 
       </h1>
       <p class="py-6 prose-lg">
         {mainHeroText}
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 52dbae8..9ec668a 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -10,7 +10,7 @@ const links = [
 ]
 ---
 
-<div class="navbar shadow-md">
+<div class="navbar shadow-md dark:shadow-primary text-primary">
   <div class="navbar-start">
     <div class="dropdown">
       <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index f019b46..d04329c 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -14,14 +14,14 @@ export default {
         light: {
           ...require("daisyui/src/theming/themes")["light"],
           primary: "#00a896",
-          secondary: "#c70039",
+          accent: "#c70039",
         },
       },
       {
         black: {
           ...require("daisyui/src/theming/themes")["black"],
           primary: "#00a896",
-          secondary: "#c70039",
+          accent: "#c70039",
         },
       }
     ],