diff --git a/src/app.html b/src/app.html
index 26d57ce..2b74fae 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en">
     <head>
         <meta charset="utf-8" />
         <link rel="icon" href="%sveltekit.assets%/favicon.png" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="color-scheme" content="dark" />
+        <meta name="color-scheme" />
         %sveltekit.head%
     </head>
     <body data-sveltekit-preload-data="hover">
diff --git a/src/components/event/EventTabPanel.svelte b/src/components/event/EventTabPanel.svelte
index e6012b3..58c178b 100644
--- a/src/components/event/EventTabPanel.svelte
+++ b/src/components/event/EventTabPanel.svelte
@@ -78,8 +78,8 @@
 		{#if upcomingEvents.length > 0}
 			<section>
 				<div class="mb-6 flex items-center gap-3">
-					<div class="bg-ecsess-500 h-1 w-12 rounded-full"></div>
-					<h2 class="text-ecsess-600 text-3xl font-bold">Upcoming Events</h2>
+					<div class="bg-ecsess-200 h-1 w-16 rounded-full"></div>
+					<h2 class="text-ecsess-200 text-3xl font-bold">Upcoming Events</h2>
 				</div>
 				<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
 					{#each upcomingEvents as e (e._id ?? e.name)}
@@ -103,8 +103,8 @@
 		{#if finishedEvents.length > 0}
 			<section>
 				<div class="mb-6 flex items-center gap-3">
-					<div class="h-1 w-12 rounded-full bg-gray-400"></div>
-					<h2 class="text-3xl font-bold text-gray-700">Past Events</h2>
+					<div class="bg-ecsess-400 h-1 w-16 rounded-full"></div>
+					<h2 class="text-ecsess-400 text-3xl font-bold">Past Events</h2>
 				</div>
 				<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
 					{#each finishedEvents as e (e._id ?? e.name)}
diff --git a/src/components/layout/Section.svelte b/src/components/layout/Section.svelte
index 72c8d4e..33e95e6 100644
--- a/src/components/layout/Section.svelte
+++ b/src/components/layout/Section.svelte
@@ -9,6 +9,7 @@
 		children = () => 'Section placeholder',
 		from = '',
 		to = '',
+		via = '',
 		direction = 'to-b', // to bottom
 		black = false
 	} = $props();
@@ -21,7 +22,7 @@
 
 	$effect(() => {
 		if (from && to) {
-			tailwindClasses = `${base} bg-gradient-${direction} ${from} ${to}`;
+			tailwindClasses = `${base} bg-gradient-${direction} ${from} ${to} ${via}`;
 		} else {
 			tailwindClasses = base + (black ? ' bg-ecsess-black' : ' bg-ecsess-800');
 		}
diff --git a/src/routes/council/+page.svelte b/src/routes/council/+page.svelte
index f7af897..c036416 100644
--- a/src/routes/council/+page.svelte
+++ b/src/routes/council/+page.svelte
@@ -45,14 +45,14 @@
 	canonical={data.canonical}
 />
 
-<Section>
+<Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
 	<div class="flex flex-col place-items-center">
 		<p class="page-title">Meet the council!</p>
 
 		<img
 			src={data.councilGoofyPic.url}
 			alt="ECSESS Council, but we are goofy"
-			class="ring-ecsess-350 shadow-ecsess-black mb-8 rounded-md shadow-2xl ring-4 lg:w-[90%] hover:ring-ecsess-300 transition-all"
+			class="ring-ecsess-350 shadow-ecsess-black hover:ring-ecsess-300 mb-8 rounded-md shadow-2xl ring-4 transition-all lg:w-[90%]"
 			transition:fly
 		/>
 	</div>
diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte
index 683b157..1f41ef5 100644
--- a/src/routes/events/+page.svelte
+++ b/src/routes/events/+page.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
+	import type { EventPost } from '$lib/schemas';
+	import { Tabs } from '@skeletonlabs/skeleton-svelte';
 	import Section from 'components/layout/Section.svelte';
 	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
-	let { data } = $props();
-
 	import EventTabControl from 'components/event/EventTabControl.svelte';
-	import { Tabs } from '@skeletonlabs/skeleton-svelte';
 	import EventTabPanel from 'components/event/EventTabPanel.svelte';
-	import type { EventPost } from '$lib/schemas';
+
+	let { data } = $props();
 
 	let events: EventPost[] = data.events ?? [];
 	let group = $state('allEvents');
@@ -18,7 +18,7 @@
 	canonical={data.canonical}
 />
 
-<Section>
+<Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-600" direction="to-b">
 	<p class="page-title">Events</p>
 	<Tabs
 		value={group}
diff --git a/src/routes/join/+page.svelte b/src/routes/join/+page.svelte
index 857c042..42d40cd 100644
--- a/src/routes/join/+page.svelte
+++ b/src/routes/join/+page.svelte
@@ -12,7 +12,7 @@
 	canonical={data.canonical}
 />
 
-<Section>
+<Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
 	<p class="page-title">Want to join ECSESS Council?</p>
 	<p>Come back around March for application period!</p>
 
diff --git a/src/routes/r/[shortname]/+page.svelte b/src/routes/r/[shortname]/+page.svelte
index 223fc1d..bf900c5 100644
--- a/src/routes/r/[shortname]/+page.svelte
+++ b/src/routes/r/[shortname]/+page.svelte
@@ -6,7 +6,7 @@
 
 <title> Hmm... you're not supposed to be here :/ </title>
 
-<Section>
+<Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
 	<p class="page-title">Can't redirect you to <code>"r/{data.shortname}"</code>!</p>
 	<hr class="border-2 w-1/2">
 	<div>
diff --git a/src/routes/resources/+page.svelte b/src/routes/resources/+page.svelte
index c7ba87a..7d71550 100644
--- a/src/routes/resources/+page.svelte
+++ b/src/routes/resources/+page.svelte
@@ -11,16 +11,12 @@
 	canonical={data.canonical}
 />
 
-<Section>
+<Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
 	<p class="page-title">Resources</p>
 
 	<div class="grid gap-4">
 		{#each data.resources as re}
-			<ResourceCard
-				title={re.title}
-				link={re.url}
-				description={re.description}
-			/>
+			<ResourceCard title={re.title} link={re.url} description={re.description} />
 		{/each}
 	</div>
 </Section>
