diff --git a/src/components/homepage/Sponsors.svelte b/src/components/homepage/Sponsors.svelte
new file mode 100644
index 0000000..3bbe29b
--- /dev/null
+++ b/src/components/homepage/Sponsors.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Sponsors } from '$lib/schemas';
+	import Link from 'components/Link.svelte';
+	import Button from 'components/Button.svelte';
+
+	let { sponsors } = $props<{ sponsors: Sponsors[] }>();
+</script>
+
+<div class="container mx-auto px-4">
+	<!-- Section Header -->
+	<div class="my-12 text-center">
+		<h2 id="sponsors-title" class="text-ecsess-100 mb-2 text-4xl font-bold md:text-5xl">
+			Our Sponsors
+		</h2>
+		<p class="text-ecsess-200 mx-auto max-w-2xl text-base">
+			We're grateful to our sponsors for their continued support of ECSESS and our community.
+		</p>
+		<div class="mt-6">
+			<Link href="/sponsor">
+				<Button>Become a Sponsor</Button>
+			</Link>
+		</div>
+	</div>
+
+	<!-- Sponsors Flex -->
+	{#if sponsors && sponsors.length > 0}
+		<div class="flex flex-wrap justify-center gap-6 lg:gap-8">
+			{#each sponsors as sponsor}
+				<Link href={sponsor.url} external>
+					<div
+						class="bg-ecsess-950 border-ecsess-800 hover:border-ecsess-600 group flex h-32 w-sm items-center justify-center rounded-lg border p-4 transition-all hover:shadow-lg"
+					>
+						<img
+							src={sponsor.logo}
+							alt="{sponsor.name} Logo"
+							class="max-h-20 w-40 object-contain opacity-90 transition-opacity group-hover:opacity-100"
+						/>
+					</div>
+				</Link>
+			{/each}
+		</div>
+	{:else}
+		<div class="text-ecsess-300 py-12 text-center">
+			<p>No sponsors at this time.</p>
+		</div>
+	{/if}
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ff35abf..814ad96 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,13 +1,11 @@
 <script>
-	import FaqAccordion from 'components/homepage/FAQAccordion.svelte';
 	import Section from 'components/layout/Section.svelte';
-	import RichText from 'components/RichText.svelte';
 	import OhSchedule from 'components/officehour/OHSchedule.svelte';
-	import Link from 'components/Link.svelte';
 	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
 	import AffiliatedGroups from 'components/homepage/AffiliatedGroups.svelte';
-	import { fade } from 'svelte/transition';
+	import Sponsors from 'components/homepage/Sponsors.svelte';
 	import QuickLinks from 'components/QuickLinks.svelte';
+	import { fade } from 'svelte/transition';
 
 	/** loading things from the server side */
 	let { data } = $props();
@@ -79,32 +77,13 @@
 	</div>
 </Section>
 
-<!-- Affiliated Clubs -->
-<Section from="from-ecsess-900" to="to-ecsess-black">
-	<AffiliatedGroups />
+
+<!-- Sponsors -->
+<Section from="from-ecsess-900" to="to-ecsess-700" via="via-ecsess-800" direction="to-b">
+	<Sponsors sponsors={data.sponsors} />
 </Section>
 
-<!-- FAQs and Sponsors -->
-<!-- <Section from="from-ecsess-950" to="to-ecsess-black">
-	<div class="grid w-full max-w-[80vw] grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
-		<div>
-			<h1>FAQs</h1>
-			<hr class="hr w-full border-dashed py-4" />
-			<FaqAccordion entries={data.faqs} />
-		</div>
-		<div id="sponsors" class="mb-24">
-			<h1>Sponsors</h1>
-			<hr class="hr w-full border-dashed py-4" />
-
-			<div class="flex gap-12">
-				{#each data.sponsors as sponsor}
-					<div class="max-h-20">
-						<Link href={sponsor.url}>
-							<img src={sponsor.logo} alt="{sponsor.name} Logo" class="max-h-24" />
-						</Link>
-					</div>
-				{/each}
-			</div>
-		</div>
-	</div>
-</Section> -->
+<!-- Affiliated Clubs -->
+<Section from="from-ecsess-700" to="to-ecsess-black">
+	<AffiliatedGroups />
+</Section>