diff --git a/web/src/components/ProjectsCard.astro b/web/src/components/ProjectsCard.astro
index ec1bb00..8b84ec4 100644
--- a/web/src/components/ProjectsCard.astro
+++ b/web/src/components/ProjectsCard.astro
@@ -20,7 +20,7 @@ function truncateDescription(desc: string) {
   </div>
   <div class="w-2/3 relative">
     <div class="mb-4 font-bold text-xl">
-      <h2>{title}</h2>
+      <h3>{title}</h3>
     </div>
     <div class="mb-4">
       <p>{truncateDescription(description)}</p>
@@ -34,12 +34,12 @@ function truncateDescription(desc: string) {
     <div class="absolute bottom-4 right-4 flex space-x-2">
       <a
         href={demoLink}
-        class="border border-[#087DF1] inline-block px-4 py-2 rounded-md bg-white text-[#087DF1] hover:bg-opacity-75"
+        class="border border-darkblue inline-block px-4 py-2 rounded-md bg-white text-darkblue hover:bg-opacity-75"
         >More Details</a
       >
       <a
         href={viewDemoLink}
-        class="inline-block px-4 py-2 rounded-md bg-[#087DF1] text-white hover:bg-gray-300"
+        class="inline-block px-4 py-2 rounded-md bg-darkblue text-white hover:bg-gray-300"
         >View Demo</a
       >
     </div>
diff --git a/web/src/global.css b/web/src/global.css
index c00d785..ce257af 100644
--- a/web/src/global.css
+++ b/web/src/global.css
@@ -26,6 +26,8 @@
     --radius: 0.5rem;
     --skyblue: 195, 100%, 90%;
     --skyblue-foreground: 195, 100%, 30%;
+    --darkblue: 217, 85%, 50%; /* HSL representation of #087DF1 */
+    --darkblue-foreground: 217, 85%, 40%; /* Adjusted for foreground, example */
   }
 
   .dark {
@@ -64,11 +66,11 @@
   }
 
   h2 {
-    @apply text-5xl font-extrabold leading-[3.75rem];
+    @apply text-center font-bold leading-[2.7625rem] md:leading-[4.2rem] lg:leading-[5.8rem] text-3xl md:text-4xl lg:text-5xl
   }
 
   h3 {
-    @apply text-center font-bold leading-[2.7625rem] md:leading-[4.2rem] lg:leading-[5.8rem] text-3xl md:text-4xl lg:text-5xl
+    @apply text-4xl font-bold leading-[2.5625rem];
   }
 
   h4 {
diff --git a/web/src/pages/projects/index.astro b/web/src/pages/projects/index.astro
index f25c83f..b11efa4 100644
--- a/web/src/pages/projects/index.astro
+++ b/web/src/pages/projects/index.astro
@@ -26,7 +26,7 @@ const defaultDescription =
   description="The Web Development & Consulting Club @ The University of Auckland"
 >
   <div class="container">
-    <h3>WDCC Projects</h3>
+    <h2>WDCC Projects</h2>
     <div class="mt-10">
       <MarkdownComponent
         content={projectDescription.attributes.Text[0].children[0].text ??
diff --git a/web/tailwind.config.mjs b/web/tailwind.config.mjs
index e0d268b..f6d4cd8 100644
--- a/web/tailwind.config.mjs
+++ b/web/tailwind.config.mjs
@@ -70,6 +70,10 @@ module.exports = {
           DEFAULT: "hsl(var(--skyblue))",
           foreground: "hsl(var(--skyblue-foreground))",
         },
+        darkblue: {
+          DEFAULT: "hsl(var(--darkblue))",
+          foreground: "hsl(var(--darkblue-foreground))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",