diff --git a/src/components/layout/NavBar.svelte b/src/components/layout/NavBar.svelte
index b998b7c..bbf049c 100644
--- a/src/components/layout/NavBar.svelte
+++ b/src/components/layout/NavBar.svelte
@@ -33,6 +33,7 @@
 			>
 				<NavButton href="/">Home</NavButton>
 				<NavButton href="/council">Meet the council</NavButton>
+				<NavButton href="/team">Team</NavButton>
 				<NavButton href="/events">Events</NavButton>
 				<NavButton href="/resources">Resources</NavButton>
 				{#if isElectionTime}
@@ -50,6 +51,7 @@
 			</a>
 			<NavButton href="/">Home</NavButton>
 			<NavButton href="/council">Meet the council</NavButton>
+			<NavButton href="/team">Team</NavButton>
 			<NavButton href="/events">Events</NavButton>
 			<NavButton href="/resources">Resources</NavButton>
 			{#if isElectionTime}
diff --git a/src/components/team/Avatar.svelte b/src/components/team/Avatar.svelte
new file mode 100644
index 0000000..69c2a34
--- /dev/null
+++ b/src/components/team/Avatar.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	let {
+		name,
+		src,
+		role = ''
+	}: {
+		name: string;
+		src: string;
+		role: string;
+	} = $props();
+
+	let array = $derived(role ? [...Array(3)].map((_) => [...role].concat('*')).flat() : []);
+</script>
+
+<div class="relative size-40 shrink-0 [--text-radius:108px] md:size-48">
+	<img
+		class="border-ecsess-200 size-full rounded-full border-4 object-cover p-2"
+		{src}
+		alt={name}
+	/>
+	{#if role}
+		{#each array as char, index}
+			<p
+				class="char absolute inset-24 z-10 size-3 text-xs"
+				style="transform: translate(-50%, -50%) rotate({(360 / array.length) *
+					index}deg) translateY(calc(-1 * var(--text-radius)));"
+			>
+				{char}
+			</p>
+		{/each}
+	{/if}
+</div>
diff --git a/src/components/team/PastCont.svelte b/src/components/team/PastCont.svelte
new file mode 100644
index 0000000..9a17404
--- /dev/null
+++ b/src/components/team/PastCont.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+	let { name, role, start, end } = $props<{
+		name: string;
+		role: string;
+		start: any;
+		end: any;
+	}>();
+
+	const dateRange = $derived(() => {
+		const startYear = start || 'Unknown';
+		const endYear = end || 'Unknown';
+		if (startYear === 'Unknown' && endYear === 'Unknown') {
+			return '';
+		}
+		return `${startYear} - ${endYear}`;
+	});
+</script>
+
+<div
+	class="fadeup group border-ecsess-700 from-ecsess-800 to-ecsess-900/50 shadow-ecsess-black/50 hover:border-ecsess-500 hover:shadow-ecsess-black/70 relative
+	flex flex-col rounded-xl border border-dotted bg-gradient-to-br
+	p-6 shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
+>
+	<!-- Role Badge -->
+	{#if role}
+		<span
+			class="bg-ecsess-500 mb-3 w-fit rounded-full px-3 py-1 text-xs font-bold tracking-wider text-gray-300 uppercase"
+		>
+			{role}
+		</span>
+	{/if}
+
+	<!-- Name -->
+	<h3 class="text-ecsess-50 text-lg font-bold md:text-xl">
+		{name}
+	</h3>
+
+	<!-- Date Range -->
+	{#if dateRange()}
+		<p class="text-ecsess-200 mt-1 text-sm">
+			{dateRange()}
+		</p>
+	{/if}
+</div>
+
+<style>
+	.fadeup {
+		animation: fadeUp both;
+		animation-timeline: view();
+		animation-range: entry 25% cover 40%;
+	}
+
+	@keyframes fadeUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px) scale(0.5);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+</style>
diff --git a/src/components/team/TeamBanner.svelte b/src/components/team/TeamBanner.svelte
new file mode 100644
index 0000000..761b60e
--- /dev/null
+++ b/src/components/team/TeamBanner.svelte
@@ -0,0 +1,130 @@
+<script lang="ts">
+	import { Github, Mail, FileCode } from '@lucide/svelte';
+	import Avatar from 'components/team/Avatar.svelte';
+
+	let { src, name, year, role, funFact, github, email } = $props<{
+		src: string;
+		name: string;
+		year: string;
+		role: string;
+		funFact: string;
+		github: string;
+		email: string;
+	}>();
+</script>
+
+<div
+	class="fadeup border-ecsess-500/30 bg-ecsess-950/90 hover:border-ecsess-500/60 relative flex w-full flex-col overflow-hidden rounded-xl border p-0 font-mono text-xs shadow-2xl backdrop-blur-md transition-all duration-300 hover:-translate-y-1"
+>
+	<!-- Top Meta Bar -->
+	<div
+		class="bg-ecsess-950/50 border-ecsess-500/10 text-ecsess-400 flex w-full flex-col gap-2 border-b px-6 py-3 lg:gap-1"
+	>
+		<!-- Row 1: Author & Email -->
+		<div class="grid grid-cols-1 sm:grid-cols-2">
+			<div class="flex items-center justify-center gap-2 sm:justify-start">
+				<span>Author:</span>
+				<span class="text-ecsess-100 font-bold">{name}</span>
+			</div>
+			<div class="text-right">
+				<span class="hidden break-words text-zinc-600 sm:inline">&lt;{email}&gt;</span>
+			</div>
+		</div>
+
+		<!-- Row 2: Date & Role -->
+		<div class="grid grid-cols-2">
+			<div class="flex items-center gap-2">
+				<span>Year:</span>
+				<span class="text-zinc-500">{year}</span>
+			</div>
+
+			<div class="text-ecsess-300 ml-auto text-right leading-tight font-bold">
+				{role}
+			</div>
+		</div>
+	</div>
+
+	<!-- Main Body -->
+	<div class="relative flex flex-col p-4 md:flex-row">
+		<!-- Visible centered on mobile -->
+		<div class="flex justify-center md:hidden">
+			<Avatar {src} {name} role="" />
+		</div>
+
+		<div class="min-w-0 flex-1">
+			<!-- Commit Message (Fun Fact) -->
+			<h2 class="text-ecsess-100 mb-2 text-xl font-bold tracking-tight break-words">
+				{funFact || `feat: added ${name} to the team`}
+			</h2>
+
+			<!-- Diff Box -->
+			<div class="bg-ecsess-950/50 border-ecsess-500/20 mb-6 overflow-x-auto rounded-lg border p-4">
+				<div class="flex flex-col gap-1 font-mono text-xs opacity-80">
+					<div class="flex gap-3">
+						<span class="text-zinc-700 select-none">1</span>
+						<div class="flex gap-2 break-all text-green-400/90">
+							<span class="text-green-600 select-none">+</span>
+							<span>name: "{name}";</span>
+						</div>
+					</div>
+					<div class="flex gap-3">
+						<span class="text-zinc-700 select-none">2</span>
+						<div class="flex gap-2 break-all text-green-400/90">
+							<span class="text-green-600 select-none">+</span>
+							<span>role: "{role}";</span>
+						</div>
+					</div>
+					<div class="flex gap-3">
+						<span class="text-zinc-700 select-none">3</span>
+						<div class="flex gap-2 break-all text-green-400/90">
+							<span class="text-green-600 select-none">+</span>
+							<span>contact: "{email}";</span>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Action Buttons -->
+			<div class="flex items-center justify-center gap-3">
+				{#if github}
+					<a
+						href={github}
+						target="_blank"
+						class="hover:bg-ecsess-500/10 hover:border-ecsess-500/50 hover:text-ecsess-200 border-ecsess-500/20 flex items-center gap-2 rounded border px-4 py-2 text-xs font-semibold text-zinc-400 transition-colors"
+					>
+						<Github class="size-3" />
+						View Profile
+					</a>
+				{/if}
+				{#if email}
+					<a
+						href="mailto:{email}"
+						class="hover:bg-ecsess-500/10 hover:border-ecsess-500/50 hover:text-ecsess-200 border-ecsess-500/20 flex items-center gap-2 rounded border px-4 py-2 text-xs font-semibold text-zinc-400 transition-colors"
+					>
+						<Mail class="size-3" />
+						Email
+					</a>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.fadeup {
+		animation: fadeUp both;
+		animation-timeline: view();
+		animation-range: entry 25% cover 40%;
+	}
+
+	@keyframes fadeUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px) scale(0.5);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+</style>
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
index eb9eba2..e7d3c15 100644
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -81,3 +81,16 @@ export type Redirect = {
 	shortname: string;
 	url: string;
 };
+
+export type DevTeam = {
+	name: string;
+	role: string;
+	yearProgram: string;
+	email: string;
+	active: boolean;
+	start: Date;
+	end: Date;
+	funFact: string;
+	github: string;
+	image: string; //URL
+};
diff --git a/src/routes/team/+page.server.ts b/src/routes/team/+page.server.ts
new file mode 100644
index 0000000..b435020
--- /dev/null
+++ b/src/routes/team/+page.server.ts
@@ -0,0 +1,24 @@
+//Wait for CMS to setup
+import type { DevTeam } from '$lib/schemas';
+import { getFromCMS } from '$lib/utils';
+
+const query = `*[_type == "devTeam"]{
+  name,
+  role,
+  yearProgram,
+  email,
+  active,
+  start,
+  end,
+  funFact,
+  github,
+  "image": image.asset->url+"?h=300&fm=webp",
+}`;
+
+export const load = async ({ url }) => {
+	let devTeam: DevTeam[] = await getFromCMS(query);
+	return {
+		devTeam: devTeam,
+		canonical: url.href
+	};
+};
diff --git a/src/routes/team/+page.svelte b/src/routes/team/+page.svelte
new file mode 100644
index 0000000..7840b32
--- /dev/null
+++ b/src/routes/team/+page.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
+	import Section from 'components/layout/Section.svelte';
+	import TeamBanner from 'components/team/TeamBanner.svelte';
+	import Avatar from 'components/team/Avatar.svelte';
+	import type { DevTeam } from '$lib/schemas.js';
+
+	let { data } = $props();
+
+	let devTeam = $derived(data.devTeam ?? []);
+
+	// Sort by Active (Current) first, then by start date (newest/latest first)
+	let sortedTeam = $derived(
+		[...devTeam].sort((a, b) => {
+			if (a.active && !b.active) return -1;
+			if (!a.active && b.active) return 1;
+
+			const dateA = new Date(a.start).getTime();
+			const dateB = new Date(b.start).getTime();
+			return dateB - dateA;
+		})
+	);
+
+	function getGroup(member: DevTeam) {
+		return member.active ? 'Current' : new Date(member.start).getFullYear().toString();
+	}
+
+	let groupedTeam = $derived(
+		sortedTeam.reduce<{ group: string; members: DevTeam[] }[]>((acc, member) => {
+			const group = getGroup(member);
+			const last = acc[acc.length - 1];
+			if (last && last.group === group) {
+				last.members.push(member);
+			} else {
+				acc.push({ group, members: [member] });
+			}
+			return acc;
+		}, [])
+	);
+</script>
+
+<SeoMetaTags />
+
+<Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
+	<div class="relative flex h-full w-full flex-col items-center">
+		<!-- Hero -->
+		<div class="mb-20 flex flex-col items-center text-center">
+			<div class="relative">
+				<h1
+					class="via-ecsess-200 to-ecsess-400 bg-gradient-to-r from-white bg-clip-text text-5xl font-black tracking-tighter text-transparent drop-shadow-[0_0_30px_rgba(90,139,90,0.3)] md:text-7xl lg:text-8xl"
+				>
+					Developer Team
+				</h1>
+				<div class="bg-ecsess-500/10 absolute -inset-1 animate-pulse rounded-lg blur-xl"></div>
+			</div>
+			<p class="text-ecsess-200/80 mt-6 text-lg">Meet the builder of ECSESS Website</p>
+		</div>
+
+		<!-- Git Flow Timeline -->
+		<div class="relative w-full max-w-7xl px-4 py-20">
+			<div class="flex w-full flex-col gap-12">
+				{#each groupedTeam as { group, members }}
+					<!-- GROUP SECTION -->
+					<div class="flex flex-col">
+						<!-- MARKER -->
+						<div class="relative z-10 flex w-full justify-center pb-12">
+							<div
+								class="bg-ecsess-950 border-ecsess-500 text-ecsess-200 relative z-20 rounded-full border-2 px-6 py-2 text-xl font-bold shadow-[0_0_20px_rgba(90,139,90,0.4)]"
+							>
+								{group}
+							</div>
+						</div>
+
+						<!-- GROUP ITEMS WITH LINE -->
+						<div class="relative flex flex-col gap-0 md:gap-12">
+							<!-- The Git Line (Segments) -->
+							<div
+								class="from-ecsess-500/0 via-ecsess-500/40 to-ecsess-500/0 absolute top-0 bottom-0 left-1/2 z-0 block w-[2px] -translate-x-1/2 bg-gradient-to-b"
+							></div>
+
+							{#each members as member, idx}
+								<div
+									class="group relative flex w-full items-stretch {idx % 2 === 0
+										? 'md:flex-row'
+										: 'md:flex-row-reverse'}"
+								>
+									<!-- CARD SIDE -->
+									<div class="w-full pb-12 md:w-[45%] md:pb-0">
+										<TeamBanner
+											name={member.name}
+											role={member.role}
+											year={member.yearProgram}
+											src={member.image}
+											funFact={member.funFact}
+											github={member.github}
+											email={member.email}
+										/>
+									</div>
+
+									<!-- CONNECTOR AREA -->
+									<div class="relative hidden w-[10%] justify-center md:flex">
+										<!-- The Node (Circle) -->
+										<div
+											class="bg-ecsess-950 border-ecsess-500 group-hover:bg-ecsess-100 absolute top-1/2 z-20 size-4 -translate-y-1/2 rounded-full border-2 transition-transform duration-300 group-hover:scale-150"
+											style=""
+										></div>
+									</div>
+
+									<!-- EMPTY SIDE -->
+									<div
+										class="hidden w-[45%] flex-col md:flex {idx % 2 == 0
+											? 'items-start'
+											: 'items-end'} justify-center"
+									>
+										<Avatar src={member.image} name={member.name} role={member.role} />
+									</div>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</Section>