diff --git a/src/components/council/CouncilCard.svelte b/src/components/council/CouncilCard.svelte
index a694445..8ef32cd 100644
--- a/src/components/council/CouncilCard.svelte
+++ b/src/components/council/CouncilCard.svelte
@@ -11,7 +11,7 @@
   </div>
 	<div class="text-left">
 		<div class="text-xl md:text-2xl font-bold">{name}</div>
-		<div class="text-sm md:text-base text-ecsess-150 mb-2 italic">{position}</div>
+		<div class="text-sm md:text-base text-ecsess-200 mb-2 italic">{position}</div>
 		<Button onclick={onViewProfile}>View Profile</Button>
 	</div>
 </div>
diff --git a/src/components/event/EventTabControl.svelte b/src/components/event/EventTabControl.svelte
index 9e2f403..0a299da 100644
--- a/src/components/event/EventTabControl.svelte
+++ b/src/components/event/EventTabControl.svelte
@@ -5,8 +5,8 @@
 
 <Tabs.Control
 	{value}
-	classes="hover:border-b-ecsess-150 border-b-4 transition-all ease-in-out pb-2 text-lg  active:border-b-ecsess-500 px-2"
-	stateActive="border-b-ecsess-350"
+	classes="hover:border-b-ecsess-200 border-b-4 transition-all ease-in-out pb-2 text-lg  active:border-b-ecsess-500 px-2"
+	stateActive="border-b-ecsess-400"
 >
 	{@render children()}
 </Tabs.Control>
diff --git a/src/components/homepage/FAQAccordion.svelte b/src/components/homepage/FAQAccordion.svelte
index ba00bf1..6fc4d95 100644
--- a/src/components/homepage/FAQAccordion.svelte
+++ b/src/components/homepage/FAQAccordion.svelte
@@ -44,7 +44,7 @@
 			controlClasses="
             flex cursor-pointer justify-between
             py-4 ease-in-out"
-			panelClasses=" border-t-ecsess-300 border-t-2 bg-transparent p-4 bg-ecsess-350/50"
+			panelClasses=" border-t-ecsess-300 border-t-2 bg-transparent p-4 bg-ecsess-400/50"
 		>
 			<!-- Control -->
 			{#snippet lead()}
diff --git a/src/components/layout/Footer.svelte b/src/components/layout/Footer.svelte
index a75c5bd..29f04bd 100644
--- a/src/components/layout/Footer.svelte
+++ b/src/components/layout/Footer.svelte
@@ -77,7 +77,7 @@
 
 			<!-- Center: Connect With Us -->
 			<div class="border-ecsess-800 border-b-1 pb-8 text-center md:border-0">
-				<h3 class="text-ecsess-150 mb-3 text-lg font-semibold">Connect With Us</h3>
+				<h3 class="text-ecsess-200 mb-3 text-lg font-semibold">Connect With Us</h3>
 				<div class="flex flex-wrap items-center justify-center gap-3">
 					{#each socialLinks as link}
 						<a
@@ -185,7 +185,7 @@
 
 		<!-- Copyright -->
 		<div>
-			<p class="text-ecsess-150 text-center text-sm">
+			<p class="text-ecsess-200 text-center text-sm">
 				🄯 ECSESS {year} under GNU General Public License v3.0. <br />
 				Designed with love {'<3'}.
 			</p>
diff --git a/src/components/layout/NavBar.svelte b/src/components/layout/NavBar.svelte
index 93bd64a..b998b7c 100644
--- a/src/components/layout/NavBar.svelte
+++ b/src/components/layout/NavBar.svelte
@@ -8,6 +8,7 @@
 </script>
 
 <nav class="bg-ecsess-black text-ecsess-100 sticky w-full py-1">
+	<!-- Small screens -->
 	<div class="block md:hidden">
 		<div class="mx-4 flex items-center-safe justify-between">
 			<a href="/">
@@ -41,6 +42,7 @@
 		{/if}
 	</div>
 
+	<!-- Medium and larger screens -->
 	<div class="hidden md:block">
 		<div class="flex place-content-center items-end">
 			<a href="/">
diff --git a/src/components/layout/NavButton.svelte b/src/components/layout/NavButton.svelte
index a1d2709..0b5beb7 100644
--- a/src/components/layout/NavButton.svelte
+++ b/src/components/layout/NavButton.svelte
@@ -1,21 +1,18 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 
 	let { href, children } = $props();
 
 	// Check if this button's href matches the current page
-	const isActive = $derived($page.url.pathname === href);
+	const isActive = $derived(page.url.pathname === href);
 </script>
 
-<!-- border-ecsess-black hover:border-ecsess-150 active:border-ecsess-300 border-b-4 px-6 py-2
-font-semibold transition-all hover:text-ecsess-100 -->
-
-<a {href} class="w-full md:w-auto">
+<a {href} class="w-auto mx-1">
 	<button
-		class="hover:text-ecsess-100 w-full rounded-md px-6 py-2 font-semibold transition-all md:mx-0.5 md:w-auto md:rounded-none
-		{isActive
-			? 'border-ecsess-300 bg-ecsess-800 md:border-b-4 md:bg-transparent'
-			: 'border-ecsess-black hover:border-ecsess-150 active:border-ecsess-300 hover:bg-ecsess-800 active:bg-ecsess-700 md:border-b-4 md:hover:bg-transparent md:active:bg-transparent'}"
+		class="hover:text-ecsess-100 hover:border-ecsess-100 text-ecsess-200 text-shadow-xl active:border-ecsess-500
+            active:text-ecsess-500 mx-0.5 w-full rounded-none border-b-4 px-6 py-2
+             font-semibold transition-all hover:cursor-pointer active:scale-99
+            {isActive ? 'border-ecsess-300' : 'border-transparent'}"
 	>
 		{@render children()}
 	</button>
diff --git a/src/components/resource/ResourceCard.svelte b/src/components/resource/ResourceCard.svelte
index 8446333..ddf90da 100644
--- a/src/components/resource/ResourceCard.svelte
+++ b/src/components/resource/ResourceCard.svelte
@@ -4,7 +4,7 @@
 	let { title = '_Resource Title_', description = "Lorem ipsum", link = 'https://example.com' } = $props();
 </script>
 
-<div class="bg-ecsess-50 relative h-fit max-w-xl min-w-12 rounded-md px-4 py-2 md:py-0 hover:shadow-md transition-shadow border border-ecsess-150">
+<div class="bg-ecsess-50 relative h-fit max-w-xl min-w-12 rounded-md px-4 py-2 md:py-0 hover:shadow-md transition-shadow border border-ecsess-100">
 	<div class="grid grid-cols-1 md:grid-cols-[7fr_1fr]">
 		<div class="flex flex-col items-start p-4">
 			<p class="text-ecsess-900 my-1 pb-1 text-left text-xl font-extrabold">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 53dad71..9cb7860 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -36,7 +36,7 @@
 			<img
 				src={data.councilPhoto}
 				alt="ECSESS Council"
-				class="ring-ecsess-500 shadow-ecsess-350 hover:ring-ecsess-400 rounded-md shadow-md ring-4 transition-all"
+				class="ring-ecsess-500 shadow-ecsess-400 hover:ring-ecsess-400 rounded-md shadow-md ring-4 transition-all"
 			/>
 		</div>
 	</div>
diff --git a/src/routes/council/+page.svelte b/src/routes/council/+page.svelte
index c036416..6b40c85 100644
--- a/src/routes/council/+page.svelte
+++ b/src/routes/council/+page.svelte
@@ -52,7 +52,7 @@
 		<img
 			src={data.councilGoofyPic.url}
 			alt="ECSESS Council, but we are goofy"
-			class="ring-ecsess-350 shadow-ecsess-black hover:ring-ecsess-300 mb-8 rounded-md shadow-2xl ring-4 transition-all lg:w-[90%]"
+			class="ring-ecsess-400 shadow-ecsess-black hover:ring-ecsess-300 mb-8 rounded-md shadow-2xl ring-4 transition-all lg:w-[90%]"
 			transition:fly
 		/>
 	</div>