diff --git a/src/app.css b/src/app.css
index f201664..503437e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,290 +1,332 @@
 @import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols:wght@100..900&display=swap');
 @import 'tailwindcss';
-/* @import '@skeletonlabs/skeleton-svelte';  */
 
 @theme {
-	/*
-	Old green ECSESS palette (kept for quick revert):
-	--color-ecsess-50: #e8ffd9;
-	--color-ecsess-100: #cce7ba;
-	--color-ecsess-150: #bae9a5;
-	--color-ecsess-200: #a9d0a0;
-	--color-ecsess-250: #9cc295;
-	--color-ecsess-300: #8fb98a;
-	--color-ecsess-350: #7daa7a;
-	--color-ecsess-400: #6a9a6a;
-	--color-ecsess-450: #62925a;
-	--color-ecsess-500: #5a8b5a;
-	--color-ecsess-550: #4c7a4f;
-	--color-ecsess-600: #3f6a3f;
-	--color-ecsess-650: #306032;
-	--color-ecsess-700: #2f4d29;
-	--color-ecsess-750: #1c4a1e;
-	--color-ecsess-800: #0a3d2a;
-	--color-ecsess-850: #083525;
-	--color-ecsess-900: #062c20;
-	--color-ecsess-950: #031c15;
-	*/
-
-	/* Light bright blues - for backgrounds and cards */
-	--color-ecsess-50: #eff6ff;
-	--color-ecsess-100: #dbeafe;
-	--color-ecsess-150: #bfdbfe;
-	--color-ecsess-200: #93c5fd;
-
-	/* Mid-light bright blues - for borders and hover states */
-	--color-ecsess-250: #7ab8ff;
-	--color-ecsess-300: #60a5fa;
-	--color-ecsess-350: #4f9bff;
-	--color-ecsess-400: #3b82f6;
-
-	/* Mid bright blues - for accents and interactive elements */
-	--color-ecsess-450: #2f74ef;
-	--color-ecsess-500: #2563eb;
-	--color-ecsess-550: #2259d1;
-	--color-ecsess-600: #1d4ed8;
-	--color-ecsess-650: #1b46c2;
-
-	/* Mid-dark bright blues - for text on light backgrounds */
-	--color-ecsess-700: #1e40af;
-	--color-ecsess-750: #1b3a99;
-	--color-ecsess-800: #1e3a8a;
-
-	/* Dark bright blues - for text and backgrounds */
-	--color-ecsess-850: #1b3277;
-	--color-ecsess-900: #1e2f66;
-	--color-ecsess-950: #172554;
-
-	/* Black variants for UI elements */
-	--color-ecsess-black: #1f1f1f;
-	--color-ecsess-black-hover: #161917;
+	/* ─── Windows 2000 Silver / Navy palette ─── */
+
+	/* Silver / gray system colors */
+	--color-ecsess-50:  #ffffff;   /* white */
+	--color-ecsess-100: #f5f4f0;   /* near-white / button face highlight */
+	--color-ecsess-150: #ece9d8;   /* classic Win2k dialog bg */
+	--color-ecsess-200: #d4d0c8;   /* classic Win2k silver */
+	--color-ecsess-250: #c0bdb5;   /* mid-silver */
+	--color-ecsess-300: #aca899;   /* medium silver-gray */
+	--color-ecsess-350: #969289;   /* darker silver */
+	--color-ecsess-400: #808080;   /* gray */
+	--color-ecsess-450: #6e6e6e;
+	--color-ecsess-500: #5c5c5c;
+	--color-ecsess-550: #4a4a4a;
+	--color-ecsess-600: #404040;
+	--color-ecsess-650: #333333;
+	--color-ecsess-700: #3a3a3a;
+	--color-ecsess-750: #2e2e2e;
+	--color-ecsess-800: #242424;
+	--color-ecsess-850: #1a1a1a;
+	--color-ecsess-900: #0a0a0a;
+	--color-ecsess-950: #000000;
+
+	/* Win2k title-bar navy */
+	--color-win-titlebar:      #0a246a;
+	--color-win-titlebar-end:  #a6caf0;
+	--color-win-titlebar-text: #ffffff;
+
+	/* Win2k classic accent blue (hyperlinks / selection) */
+	--color-win-blue:  #0000ff;
+	--color-win-blue2: #000080;
+
+	/* system border helpers */
+	--color-win-light:    #ffffff;
+	--color-win-highlight:#dfdfdf;
+	--color-win-shadow:   #808080;
+	--color-win-dark:     #404040;
+
+	/* Black variants */
+	--color-ecsess-black:       #000000;
+	--color-ecsess-black-hover: #0a246a;
 
 	--animate-wiggle: wiggle 0.5s ease-in-out 1;
 	@keyframes wiggle {
-		0%,
-		100% {
-			transform: rotateY(-2.4deg);
-		}
-		50% {
-			transform: rotateY(2.4deg);
-		}
+		0%, 100% { transform: rotateY(-2.4deg); }
+		50%       { transform: rotateY(2.4deg); }
 	}
 
 	--animate-pulse-ring: pulse-ring 1.5s ease-in-out infinite;
 	@keyframes pulse-ring {
-		0%,
-		100% {
-			opacity: 0.5;
-		}
-		50% {
-			opacity: 1;
-		}
+		0%, 100% { opacity: 0.5; }
+		50%       { opacity: 1; }
+	}
+
+	--animate-blink: blink 1s step-start infinite;
+	@keyframes blink {
+		0%, 100% { opacity: 1; }
+		50%       { opacity: 0; }
+	}
+
+	--animate-marquee: marquee 18s linear infinite;
+	@keyframes marquee {
+		0%   { transform: translateX(100%); }
+		100% { transform: translateX(-100%); }
 	}
 }
 
+/* ─── Global reset to Win2k system font feel ─── */
 * {
-	font-family: 'Saira', 'Noto Sans Symbols', sans-serif;
-	font-optical-sizing: auto;
-	font-weight: 500;
+	font-family: 'Tahoma', 'Verdana', 'MS Sans Serif', Arial, sans-serif;
+	font-size: 13px;
+	font-weight: normal;
 	font-style: normal;
 	scroll-behavior: smooth;
 }
 
-h1 {
-	@apply py-4 text-2xl font-bold md:text-3xl;
+body {
+	background-color: #008080; /* classic teal desktop */
+	color: #000000;
 }
 
-h2 {
-	@apply py-1.5 text-xl font-bold md:text-2xl;
+/* ─── Win2k beveled border utilities ─── */
+.win-raised {
+	border-top:    2px solid #ffffff;
+	border-left:   2px solid #ffffff;
+	border-right:  2px solid #404040;
+	border-bottom: 2px solid #404040;
+	box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
 }
 
-.page-title {
-	@apply my-6 text-3xl font-bold md:text-4xl lg:text-6xl;
+.win-sunken {
+	border-top:    2px solid #404040;
+	border-left:   2px solid #404040;
+	border-right:  2px solid #ffffff;
+	border-bottom: 2px solid #ffffff;
+	box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
 }
 
-.typography {
-	@apply text-sm md:text-base lg:text-lg;
-
-	p {
-		@apply my-2 leading-relaxed;
-	}
-
-	strong,
-	b {
-		@apply font-bold;
-	}
-
-	i {
-		@apply italic;
-	}
-
-	blockquote {
-		@apply bg-ecsess-100 text-ecsess-700 border-l-ecsess-600 my-4 rounded-md border-l-4 py-[0.01rem] ps-4 italic;
-	}
-
-	h1 {
-		@apply my-4 text-4xl leading-10 font-extrabold;
-	}
-
-	h2 {
-		@apply mt-4 mb-3 text-2xl leading-8 font-black;
-	}
-
-	h3 {
-		@apply mt-4 mb-1 text-xl leading-relaxed font-bold;
-	}
-
-	h4 {
-		@apply mt-6 mb-2 leading-6;
-	}
-
-	img,
-	picture,
-	video {
-		@apply my-8;
-	}
-
-	picture > img {
-		@apply mt-0 mb-0;
-	}
-
-	code,
-	kbd {
-		@apply rounded-md font-mono text-sm;
-	}
-
-	h2 code {
-		@apply text-[1.3125rem]; /* 21px */
-	}
-
-	h3 code {
-		@apply text-[1.125rem]; /* 18px */
-	}
-
-	pre {
-		@apply my-3 rounded-md px-4 pt-3 pb-3 font-mono text-sm leading-6;
-	}
-
-	ol,
-	ul {
-		@apply my-2 list-outside list-disc ps-6.5;
-	}
-
-	li {
-		@apply my-1 leading-relaxed;
-	}
-
-	ol > li,
-	ul > li {
-		@apply ps-1;
-	}
-
-	> ul > li p {
-		@apply my-2 leading-relaxed;
-	}
-
-	ul ul,
-	ul ol,
-	ol ul,
-	ol ol {
-		@apply my-1;
-	}
+.win-flat {
+	border: 1px solid #808080;
+}
 
-	dl {
-		@apply my-5;
-	}
+.win-groupbox {
+	border: 2px groove #808080;
+	padding: 16px;
+}
 
-	dt {
-		@apply mt-5;
-	}
+/* ─── Win2k window chrome ─── */
+.win-window {
+	background: #d4d0c8;
+	border-top:    2px solid #ffffff;
+	border-left:   2px solid #ffffff;
+	border-right:  2px solid #404040;
+	border-bottom: 2px solid #404040;
+	box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080, 2px 2px 8px rgba(0,0,0,0.5);
+}
 
-	dd {
-		@apply mt-2 ps-6.5;
-	}
+.win-titlebar {
+	background: linear-gradient(to right, #0a246a, #a6caf0);
+	color: #ffffff;
+	font-weight: bold;
+	font-size: 12px;
+	padding: 3px 6px;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	user-select: none;
+}
 
-	hr {
-		@apply my-12;
-	}
+.win-titlebar-btn {
+	background: #d4d0c8;
+	border-top:    1px solid #ffffff;
+	border-left:   1px solid #ffffff;
+	border-right:  1px solid #404040;
+	border-bottom: 1px solid #404040;
+	width: 16px;
+	height: 14px;
+	font-size: 9px;
+	line-height: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	flex-shrink: 0;
+}
 
-	hr + *,
-	h2 + *,
-	h3 + *,
-	h4 + * {
-		@apply mt-0;
-	}
+.win-titlebar-btn:active {
+	border-top:    1px solid #404040;
+	border-left:   1px solid #404040;
+	border-right:  1px solid #ffffff;
+	border-bottom: 1px solid #ffffff;
+}
 
-	table {
-		@apply w-full;
-	}
+.win-btn {
+	background: #d4d0c8;
+	color: #000000;
+	border-top:    2px solid #ffffff;
+	border-left:   2px solid #ffffff;
+	border-right:  2px solid #404040;
+	border-bottom: 2px solid #404040;
+	box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
+	padding: 4px 12px;
+	cursor: pointer;
+	font-family: 'Tahoma', 'Verdana', sans-serif;
+	font-size: 12px;
+	min-width: 75px;
+	text-align: center;
+}
 
-	thead {
-		@apply border-ecsess-500 border-b-2;
-	}
+.win-btn:active, .win-btn:focus {
+	border-top:    2px solid #404040;
+	border-left:   2px solid #404040;
+	border-right:  2px solid #ffffff;
+	border-bottom: 2px solid #ffffff;
+	box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #dfdfdf;
+}
 
-	thead th {
-		@apply text-ecsess-500 p-2 text-left text-base font-bold;
-	}
+.win-btn:hover {
+	background: #ece9d8;
+}
 
-	tbody td,
-	tfoot td {
-		@apply p-2.5;
-	}
+.win-btn:disabled {
+	color: #808080;
+	text-shadow: 1px 1px 0 #ffffff;
+	cursor: default;
+}
 
-	td > a {
-		@apply underline transition-colors;
-	}
+.win-menu-bar {
+	background: #d4d0c8;
+	border-bottom: 1px solid #808080;
+	display: flex;
+	gap: 0;
+}
 
-	tbody tr:nth-child(odd) {
-		@apply bg-ecsess-200/24;
-	}
+.win-menu-item {
+	padding: 3px 8px;
+	font-size: 12px;
+	cursor: pointer;
+}
 
-	td + td {
-		@apply border-l;
-	}
+.win-menu-item:hover {
+	background: #0a246a;
+	color: #ffffff;
+}
 
-	tfoot {
-		@apply border-t;
-	}
+.win-statusbar {
+	background: #d4d0c8;
+	border-top: 1px solid #808080;
+	padding: 2px 6px;
+	font-size: 11px;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
 
-	figure {
-		@apply my-8;
-	}
+.win-input {
+	background: #ffffff;
+	border-top:    2px solid #808080;
+	border-left:   2px solid #808080;
+	border-right:  1px solid #ffffff;
+	border-bottom: 1px solid #ffffff;
+	padding: 2px 4px;
+	font-family: 'Tahoma', 'Verdana', sans-serif;
+	font-size: 12px;
+}
 
-	figure > * {
-		@apply my-0;
-	}
+.win-link {
+	color: #0000ff;
+	text-decoration: underline;
+	cursor: pointer;
+}
 
-	figcaption {
-		@apply mt-3 text-sm leading-5;
-	}
+.win-link:visited {
+	color: #800080;
 }
 
-/* Scrollbar Styles */
-*::-webkit-scrollbar {
-	@apply h-1 w-1;
+.win-link:hover {
+	color: #000080;
 }
 
-*::-webkit-scrollbar-track {
-	@apply bg-ecsess-700 rounded;
+/* ─── page-title kept for animation ─── */
+.page-title {
+	font-size: 18px;
+	font-weight: bold;
+	color: #000000;
 }
 
-*::-webkit-scrollbar-track:hover {
-	@apply bg-ecsess-900;
+/* ─── Headings ─── */
+h1 {
+	font-size: 18px;
+	font-weight: bold;
+	padding: 4px 0;
 }
 
-*::-webkit-scrollbar-track:active {
-	@apply bg-ecsess-900;
+h2 {
+	font-size: 15px;
+	font-weight: bold;
+	padding: 4px 0;
 }
 
-*::-webkit-scrollbar-thumb {
-	@apply bg-ecsess-100 rounded-md;
+h3 {
+	font-size: 13px;
+	font-weight: bold;
 }
 
-*::-webkit-scrollbar-thumb:hover {
-	@apply bg-ecsess-300;
+/* ─── Typography block (rich text) ─── */
+.typography {
+	font-size: 13px;
+
+	p { margin: 6px 0; line-height: 1.5; }
+	strong, b { font-weight: bold; }
+	i { font-style: italic; }
+	blockquote {
+		background: #ece9d8;
+		border-left: 3px solid #0a246a;
+		margin: 8px 0;
+		padding: 4px 8px;
+		font-style: italic;
+	}
+	h1 { font-size: 18px; font-weight: bold; }
+	h2 { font-size: 15px; font-weight: bold; }
+	h3 { font-size: 13px; font-weight: bold; }
+	code, kbd {
+		font-family: 'Courier New', monospace;
+		font-size: 12px;
+		background: #ece9d8;
+		padding: 1px 3px;
+	}
+	pre {
+		font-family: 'Courier New', monospace;
+		font-size: 12px;
+		background: #ece9d8;
+		padding: 8px;
+		margin: 6px 0;
+		border: 1px solid #808080;
+	}
+	ol, ul { margin: 4px 0; padding-left: 20px; list-style: disc; }
+	li { margin: 2px 0; }
+	table { width: 100%; border-collapse: collapse; }
+	thead { border-bottom: 2px solid #0a246a; }
+	thead th { color: #0a246a; padding: 4px; text-align: left; font-weight: bold; }
+	tbody td, tfoot td { padding: 4px; }
+	tbody tr:nth-child(odd) { background: #f5f4f0; }
+	td + td { border-left: 1px solid #d4d0c8; }
 }
 
-*::-webkit-scrollbar-thumb:active {
-	@apply bg-ecsess-300;
+/* ─── Scrollbars ─── */
+*::-webkit-scrollbar       { width: 16px; height: 16px; }
+*::-webkit-scrollbar-track { background: #d4d0c8; }
+*::-webkit-scrollbar-thumb {
+	background: #d4d0c8;
+	border-top:    2px solid #ffffff;
+	border-left:   2px solid #ffffff;
+	border-right:  2px solid #404040;
+	border-bottom: 2px solid #404040;
+}
+*::-webkit-scrollbar-button {
+	background: #d4d0c8;
+	border-top:    2px solid #ffffff;
+	border-left:   2px solid #ffffff;
+	border-right:  2px solid #404040;
+	border-bottom: 2px solid #404040;
+	display: block;
+	height: 16px;
+	width: 16px;
 }
+*::-webkit-scrollbar-corner { background: #d4d0c8; }
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 9982870..825e3d2 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -5,9 +5,7 @@
 <button
 	{disabled}
 	{onclick}
-	class="bg-ecsess-600 text-ecsess-50
-		hover:bg-ecsess-700 w-fit rounded-md
-		px-6 py-3 text-sm font-semibold transition-colors hover:cursor-pointer {className}"
+	class="win-btn {className}"
 >
 	{@render children()}
 </button>
diff --git a/src/components/QuickLinks.svelte b/src/components/QuickLinks.svelte
index c4b9427..9ada40b 100644
--- a/src/components/QuickLinks.svelte
+++ b/src/components/QuickLinks.svelte
@@ -1,35 +1,31 @@
 <script lang="ts">
 	import Link from 'components/Link.svelte';
-	import Button from 'components/Button.svelte';
 </script>
 
-<div>
-	<p
-		class="text-ecsess-50 decoration-ecsess-200 mt-2 mb-6 text-base font-bold tracking-wide underline decoration-2 underline-offset-8"
-	>
-		Popular resources
-	</p>
+<fieldset class="win-groupbox">
+	<legend style="font-weight: bold; font-size: 11px; padding: 0 4px; color: #0a246a;">📌 Popular Resources</legend>
 
-	<div class="mt-3 grid grid-cols-1 items-stretch gap-3 sm:grid-cols-2 lg:mt-0">
+	<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px;">
 		<Link href="/events">
-			<Button class="flex h-full w-full items-center justify-center">ECSESS Events</Button>
+			<button class="win-btn w-full" style="font-size:11px; width: 100%;">
+				📅 ECSESS Events
+			</button>
 		</Link>
 
 		<Link href="/r/trot5th" external>
-			<Button class="flex h-full w-full items-center justify-center">
-				Trottier 5th Room Booking
-			</Button>
+			<button class="win-btn w-full" style="font-size:11px; width: 100%;">
+				🏫 Trottier 5th Booking
+			</button>
 		</Link>
 
 		<Link href="/r/ctrlz" external>
-			<Button class="flex h-full w-full items-center justify-center">Ctrl+Z feedback form</Button>
+			<button class="win-btn w-full" style="font-size:11px; width: 100%;">
+				📝 Ctrl+Z Feedback
+			</button>
 		</Link>
 
-		<!-- Sponsorship disabled -->
-		<Link href="/sponsorship">
-			<Button disabled class="flex h-full w-full items-center justify-center">
-				Sponsor ECSESS
-			</Button>
-		</Link>
+		<button class="win-btn w-full" disabled style="font-size:11px; width: 100%; cursor: not-allowed;">
+			💼 Sponsor ECSESS
+		</button>
 	</div>
-</div>
+</fieldset>
diff --git a/src/components/homepage/AffiliatedGroups.svelte b/src/components/homepage/AffiliatedGroups.svelte
index 06e9d5d..733fa95 100644
--- a/src/components/homepage/AffiliatedGroups.svelte
+++ b/src/components/homepage/AffiliatedGroups.svelte
@@ -1,15 +1,10 @@
 <script lang="ts">
-	import { Globe, Instagram, Wrench, Users, CodeXml, Cpu } from '@lucide/svelte';
-
-	// All icons from @lucide/svelte share the same component type; reuse one for typing
-	type IconComponent = typeof Wrench;
-
 	type Group = {
 		name: string;
 		description: string;
 		website: string;
 		instagram?: string;
-		icon: IconComponent;
+		icon: string;
 		features: string[];
 	};
 
@@ -20,7 +15,7 @@
 				"McGill Engineering's largest annual hackathon, a 36-hour programming competition where students create innovative projects!",
 			website: 'https://codejam.mcgilleus.ca/',
 			instagram: 'https://www.instagram.com/mcgillcodejam/',
-			icon: CodeXml,
+			icon: '💻',
 			features: ['Biggest Hackathon in Engineering', 'Great prizes', 'Networking opportunities']
 		},
 		{
@@ -29,7 +24,7 @@
 				'A student-run lab space for developing personal projects, gaining experience with cutting-edge hardware, and fostering innovation.',
 			website: 'https://factory.mcgilleus.ca/',
 			instagram: 'https://www.instagram.com/thefactory_mcgill/',
-			icon: Wrench,
+			icon: '🔧',
 			features: ['Student-run Lab Space', '3D Printing', 'Hardware Workshops']
 		},
 		{
@@ -38,7 +33,7 @@
 				'First Year Council of the McGill Electrical, Computer, Software Engineering Student Society.',
 			website: '',
 			instagram: 'https://www.instagram.com/ecsessbits/',
-			icon: Users,
+			icon: '🎓',
 			features: ['First Year Council', 'Fun Events', 'Study Sessions']
 		},
 		{
@@ -47,78 +42,63 @@
 				'One of the largest IEEE student branches in Eastern Canada, offering professional development, networking, and industry connections.',
 			website: 'https://ieee.mcgilleus.ca/',
 			instagram: 'https://www.instagram.com/ieeemcgill/',
-			icon: Cpu,
+			icon: '⚡',
 			features: ['Technical Talks', 'Arduino Workshops', 'Networking Events']
 		}
 	];
 </script>
 
-<div class="container mx-auto px-4">
-	<!-- Section Header -->
-	<div class="my-12 text-center">
-		<h2 id="affiliated-clubs-title" class="text-ecsess-100 mb-2 text-4xl font-bold md:text-5xl">
-			Subcommittees & Affiliated Groups
+<div>
+	<!-- Section header -->
+	<div style="margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #808080;">
+		<h2 id="affiliated-clubs-title" style="font-size: 15px; font-weight: bold; color: #000080; margin: 0 0 4px 0;">
+			Subcommittees &amp; Affiliated Groups
 		</h2>
-		<p class="text-ecsess-200 mx-auto max-w-2xl text-base">
-			Explore opportunities to enhance your skills, build innovative projects, and connect with the
-			engineering community through our subcommittees and affiliated groups.
+		<p style="font-size: 11px; color: #444; margin: 0;">
+			Explore opportunities to enhance your skills and connect with the engineering community.
 		</p>
 	</div>
 
-	<!-- Clubs Grid: 2x2 on large screens -->
-	<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
+	<!-- Win2k icon-view style grid (like My Computer / Windows Explorer) -->
+	<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
 		{#each groups as group, i (group.name)}
-			{@const Icon = group.icon}
-			<article
-				class="bg-ecsess-950 border-ecsess-800 flex flex-col overflow-hidden rounded-lg border text-left"
-				aria-labelledby={`group-${i}-title`}
-			>
-				<div class="flex flex-1 flex-col p-7 md:p-8">
-					<!-- Header: icon + name -->
-					<header class="mb-5 flex items-center justify-start gap-4">
-						<div
-							class="bg-ecsess-800 flex h-14 w-14 shrink-0 items-center justify-center rounded-xl"
-						>
-							<Icon
-								class="text-ecsess-300 size-7"
-								strokeWidth={2.5}
-								aria-hidden="true"
-								focusable="false"
-							/>
-						</div>
-						<h3 id={`group-${i}-title`} class="text-ecsess-50 text-2xl font-bold">
-							{group.name}
-						</h3>
-					</header>
+			<!-- Each group is a Win2k window with its own title bar -->
+			<div class="win-window" style="margin: 0;" aria-labelledby={`group-${i}-title`}>
+				<!-- Mini title bar -->
+				<div
+					class="win-titlebar"
+					style="font-size: 11px; padding: 2px 5px;"
+				>
+					<span style="font-size: 13px;">{group.icon}</span>
+					<span id={`group-${i}-title`} class="flex-1">{group.name}</span>
+					<button class="win-titlebar-btn" style="font-size:8px;">✕</button>
+				</div>
 
-					<!-- Description -->
-					<p class="text-ecsess-200 mb-5 text-base leading-relaxed md:text-lg">
-						{group.description}
-					</p>
+				<!-- Content -->
+				<div style="padding: 10px; background: #ffffff; font-size: 12px;">
+					<p style="color: #333; line-height: 1.5; margin-bottom: 8px;">{group.description}</p>
 
-					<!-- Features -->
-					<ul class="mb-5 list-none space-y-2 ps-0 text-base md:text-lg" role="list">
-						{#each group.features as feature (feature)}
-							<li class="flex items-center gap-2">
-								<span class="bg-ecsess-500 h-1.5 w-1.5 shrink-0 rounded-full" aria-hidden="true"
-								></span>
-								<span class="text-ecsess-100 font-medium">{feature}</span>
+					<!-- Feature list as Win2k checkboxes -->
+					<ul style="list-style: none; padding: 0; margin: 0 0 8px 0;">
+						{#each group.features as feature}
+							<li style="display: flex; align-items: center; gap: 4px; margin-bottom: 2px; font-size: 11px;">
+								<span style="color: #0a246a; font-size: 12px;">✔</span>
+								<span>{feature}</span>
 							</li>
 						{/each}
 					</ul>
 
-					<!-- Links -->
-					<div class="border-ecsess-800 mt-auto flex flex-wrap items-center gap-3 border-t pt-5">
+					<!-- Link buttons -->
+					<div style="display: flex; gap: 4px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid #d4d0c8;">
 						{#if group.instagram}
 							<a
 								href={group.instagram}
 								target="_blank"
 								rel="noopener noreferrer external"
-								aria-label={`Follow ${group.name} on Instagram`}
-								class="text-ecsess-300 hover:text-ecsess-100 border-ecsess-700 bg-ecsess-900/50 hover:bg-ecsess-800/80 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-base"
+								class="win-btn"
+								style="font-size: 10px; min-width: auto; padding: 2px 6px; text-decoration: none; color: #000;"
 							>
-								<Instagram class="size-5" strokeWidth={2.5} aria-hidden="true" focusable="false" />
-								<span>Instagram</span>
+								📸 Instagram
 							</a>
 						{/if}
 						{#if group.website}
@@ -126,16 +106,15 @@
 								href={group.website}
 								target="_blank"
 								rel="noopener noreferrer external"
-								aria-label={`Visit ${group.name} website`}
-								class="text-ecsess-300 hover:text-ecsess-100 border-ecsess-700 bg-ecsess-900/50 hover:bg-ecsess-800/80 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-base"
+								class="win-btn"
+								style="font-size: 10px; min-width: auto; padding: 2px 6px; text-decoration: none; color: #000;"
 							>
-								<Globe class="size-5" strokeWidth={2.5} aria-hidden="true" focusable="false" />
-								<span>Website</span>
+								🌐 Website
 							</a>
 						{/if}
 					</div>
 				</div>
-			</article>
+			</div>
 		{/each}
 	</div>
 </div>
diff --git a/src/components/homepage/Sponsors.svelte b/src/components/homepage/Sponsors.svelte
index 82c5542..9dafdab 100644
--- a/src/components/homepage/Sponsors.svelte
+++ b/src/components/homepage/Sponsors.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { Sponsors } from '$lib/schemas';
 	import Link from 'components/Link.svelte';
-	import Button from 'components/Button.svelte';
 
 	let { sponsors, lastUpdated } = $props<{
 		sponsors: Sponsors[];
@@ -9,52 +8,60 @@
 	}>();
 </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">
+<div>
+	<!-- Section header -->
+	<div style="margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #808080;">
+		<h2 id="sponsors-title" style="font-size: 15px; font-weight: bold; color: #000080; margin: 0 0 4px 0;">
 			Our Sponsors
 		</h2>
-		<p class="text-ecsess-200/90 mx-auto max-w-2xl text-base leading-relaxed md:text-lg">
-			We're grateful to our sponsors for their continued support of ECSESS, our events, activities,
-			and our community.
+		<p style="font-size: 11px; color: #444; margin: 0 0 8px 0; line-height: 1.5;">
+			We&apos;re grateful to our sponsors for their continued support of ECSESS, our events, and our community.
 		</p>
-		<div
-			class="via-ecsess-150/40 mx-auto mt-2 h-px w-32 bg-linear-to-r from-transparent to-transparent"
-			aria-hidden="true"
-		></div>
-		<div class="mt-6">
-			<Link href="/sponsor">
-				<Button>Become a Sponsor</Button>
-			</Link>
-		</div>
+		<Link href="/sponsor">
+			<button class="win-btn" style="font-size: 11px;">
+				💼 Become a Sponsor
+			</button>
+		</Link>
 	</div>
 
-	<!-- Sponsors -->
+	<!-- Sponsors as Win2k "shortcut icons" -->
 	{#if sponsors && sponsors.length > 0}
-		<div class="mx-auto max-w-6xl">
-			<div class="flex flex-wrap justify-center gap-4 sm:gap-6" aria-labelledby="sponsors-title">
-				{#each sponsors as sponsor}
-					<Link
-						href={sponsor.url}
-						external
-						class="group flex w-full max-w-[342px] justify-center rounded-xl focus-visible:outline-none"
+		<div
+			style="display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start;"
+			aria-labelledby="sponsors-title"
+		>
+			{#each sponsors as sponsor}
+				<Link
+					href={sponsor.url}
+					external
+					class="group"
+					style="text-decoration: none;"
+				>
+					<!-- Win2k desktop icon style -->
+					<div
+						class="win-raised"
+						style="width: 140px; height: 80px; display: flex; align-items: center; justify-content: center; padding: 8px; background: #ffffff; cursor: pointer;"
+						onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = '#ece9d8'; }}
+						onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = '#ffffff'; }}
 					>
-						<div
-							class="border-ecsess-150/15 bg-ecsess-950 group-hover:border-ecsess-150/30 group-hover:bg-ecsess-900 flex h-28 w-full items-center justify-center overflow-hidden rounded-xl border p-6 shadow-md transition-colors duration-150"
-						>
-							<img
-								src={sponsor.logo}
-								alt={sponsor.name}
-								class="max-h-16 w-full object-contain opacity-90 transition-opacity duration-150 group-hover:opacity-100"
-							/>
-						</div>
-					</Link>
-				{/each}
-			</div>
+						<img
+							src={sponsor.logo}
+							alt={sponsor.name}
+							style="max-height: 56px; max-width: 120px; object-fit: contain;"
+						/>
+					</div>
+					<div style="font-size: 10px; text-align: center; margin-top: 2px; color: #000080; text-decoration: underline; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+						{sponsor.name}
+					</div>
+				</Link>
+			{/each}
 		</div>
 	{:else}
-		<div class="text-ecsess-300 py-12 text-center">
+		<div
+			class="win-sunken"
+			style="padding: 16px; text-align: center; background: #ffffff; font-size: 12px; color: #808080;"
+		>
+			<p style="margin-bottom: 8px;">📁 No sponsors found.</p>
 			<p>You can be our next sponsor!</p>
 		</div>
 	{/if}
diff --git a/src/components/layout/Footer.svelte b/src/components/layout/Footer.svelte
index d67ad79..c1bd943 100644
--- a/src/components/layout/Footer.svelte
+++ b/src/components/layout/Footer.svelte
@@ -1,152 +1,98 @@
 <script lang="ts">
 	import ECSESS from 'assets/ECSESS.png';
-	import { FacebookIcon, Github, InstagramIcon, LinkedinIcon, Mail } from '@lucide/svelte';
 	const year = new Date().getFullYear();
 
-	// Social links data
 	const socialLinks = [
-		{
-			name: 'Instagram',
-			url: 'https://www.instagram.com/mcgill_ecsess/',
-			icon: 'instagram',
-			ariaLabel: 'Follow us on Instagram'
-		},
-		{
-			name: 'Facebook',
-			url: 'https://www.facebook.com/ECSESS',
-			icon: 'facebook',
-			ariaLabel: 'Follow us on Facebook'
-		},
-		{
-			name: 'LinkedIn',
-			url: 'https://www.linkedin.com/company/ecsess/',
-			icon: 'linkedin',
-			ariaLabel: 'Connect with us on LinkedIn'
-		},
-		{
-			name: 'Linktree',
-			url: 'https://linktr.ee/ecsess',
-			icon: 'linktree',
-			ariaLabel: 'Visit our Linktree'
-		},
-		{
-			name: 'Contact Us',
-			url: 'mailto:ecsess.president@mcgilleus.ca',
-			icon: 'email',
-			ariaLabel: 'Send us an email'
-		},
-		{
-			name: 'GitHub',
-			url: 'https://github.com/mcgill-ecsess/',
-			icon: 'github',
-			ariaLabel: 'Visit our open source website'
-		}
+		{ name: 'Instagram', url: 'https://www.instagram.com/mcgill_ecsess/', label: 'Instagram' },
+		{ name: 'Facebook', url: 'https://www.facebook.com/ECSESS', label: 'Facebook' },
+		{ name: 'LinkedIn', url: 'https://www.linkedin.com/company/ecsess/', label: 'LinkedIn' },
+		{ name: 'Linktree', url: 'https://linktr.ee/ecsess', label: 'Linktree' },
+		{ name: 'Email', url: 'mailto:ecsess.president@mcgilleus.ca', label: 'Contact Us' },
+		{ name: 'GitHub', url: 'https://github.com/mcgill-ecsess/', label: 'GitHub' },
 	];
 </script>
 
-<footer class="bg-ecsess-black text-ecsess-100 mx-auto min-w-fit px-4 py-8">
-	<div class="mx-auto max-w-7xl">
-		<!-- Business Card Layout -->
-		<div class="mb-6 grid grid-cols-1 gap-6 md:grid-cols-3">
-			<!-- Left: ECSESS Lounge -->
-			<div class="border-ecsess-800 border-b-1 pb-4 text-center md:border-0 md:text-left">
-				<p class="text-ecsess-300 mb-3 text-lg">Visit the ECSESS lounge!</p>
-				<a
-					href="https://maps.app.goo.gl/m9ZqjTrPM7pcBzhbA"
-					target="_blank"
-					rel="noopener noreferrer"
-					class="text-ecsess-300 hover:text-ecsess-100 hover:border-b-ecsess-100 inline-flex items-center justify-baseline gap-2 border-b-1 border-b-transparent pb-0.5 transition-all"
-				>
-					<svg
-						class="h-4 w-4 flex-shrink-0"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-						aria-hidden="true"
+<!-- Win2k Taskbar / Status-strip footer -->
+<div>
+	<!-- Win2k style window panel footer -->
+	<div
+		class="win-window"
+		style="margin: 4px 8px 8px; background: #d4d0c8;"
+	>
+		<div class="win-titlebar" style="font-size: 11px;">
+			<img src={ECSESS} alt="ECSESS Logo" style="height: 14px;" />
+			<span class="flex-1">ECSESS Footer — Properties</span>
+		</div>
+
+		<div style="padding: 12px; background: #d4d0c8;">
+			<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;">
+
+				<!-- Left: Location -->
+				<fieldset class="win-groupbox">
+					<legend style="font-weight: bold; font-size: 11px; padding: 0 4px;">📍 Location</legend>
+					<p style="font-size: 11px; margin-bottom: 4px; color: #000;">Visit the ECSESS lounge!</p>
+					<a
+						href="https://maps.app.goo.gl/m9ZqjTrPM7pcBzhbA"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="win-link"
+						style="font-size: 11px;"
 					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-						/>
-					</svg>
-					<span class="text-base">ENGTR 1060</span>
-				</a>
-			</div>
+						🗺 ENGTR 1060
+					</a>
+				</fieldset>
 
-			<!-- Center: Connect With Us -->
-			<div class="border-ecsess-800 border-b-1 pb-8 text-center md:border-0">
-				<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
-							href={link.url}
-							target={link.icon === 'email' ? '_self' : '_blank'}
-							rel={link.icon === 'email' ? '' : 'noopener noreferrer'}
-							aria-label={link.ariaLabel}
-							class="bg-ecsess-800 hover:bg-ecsess-600 flex h-10 w-10 items-center justify-center rounded-full transition-all hover:scale-110"
-						>
-							{#if link.icon === 'instagram'}
-								<InstagramIcon class="text-white" />
-							{:else if link.icon === 'facebook'}
-								<FacebookIcon class="text-white" fill="white" color="transparent" />
-							{:else if link.icon === 'linkedin'}
-								<LinkedinIcon class="text-white" fill="white" color="transparent" />
-							{:else if link.icon === 'linktree'}
-								<svg
-									class="h-5 w-5 text-white"
-									fill="currentColor"
-									viewBox="0 0 24 24"
-									aria-hidden="true"
-								>
-									<path
-										d="M13.5108 5.85343L17.5158 1.73642L19.8404 4.11701L15.6393 8.12199H21.5488V11.4268H15.6113L19.8404 15.5345L17.5158 17.8684L11.7744 12.099L6.03299 17.8684L3.70842 15.5438L7.93745 11.4361H2V8.12199H7.90944L3.70842 4.11701L6.03299 1.73642L10.038 5.85343V0H13.5108V5.85343ZM10.038 16.16H13.5108V24H10.038V16.16Z"
-									/>
-								</svg>
-							{:else if link.icon === 'email'}
-								<Mail class="text-white" />
-							{:else if link.icon == 'github'}
-								<Github class="text-white" />
-							{/if}
-						</a>
-					{/each}
-				</div>
-			</div>
+				<!-- Center: Social links -->
+				<fieldset class="win-groupbox">
+					<legend style="font-weight: bold; font-size: 11px; padding: 0 4px;">🌐 Connect With Us</legend>
+					<div style="display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;">
+						{#each socialLinks as link}
+							<a
+								href={link.url}
+								target={link.name === 'Email' ? '_self' : '_blank'}
+								rel={link.name === 'Email' ? '' : 'noopener noreferrer'}
+								class="win-btn"
+								style="font-size: 10px; min-width: auto; padding: 2px 6px; text-decoration: none; color: #000;"
+								aria-label={link.label}
+							>
+								{link.label}
+							</a>
+						{/each}
+					</div>
+				</fieldset>
 
-			<!-- Right: Contribute -->
-			<div class="text-center md:text-right">
-				<p class="text-ecsess-200 mb-3 text-base">
-					Catch a bug or have an idea? <br />
-					Let us know!
-				</p>
-				<a
-					href="https://forms.gle/hTA9hZdy3UPNs12R6"
-					target="_blank"
-					rel="noopener noreferrer"
-					class="bg-ecsess-800 hover:bg-ecsess-600 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-semibold text-white transition-colors"
-				>
-					<img src={ECSESS} alt="ECSESS Logo" class="w-8" />
-					<span>Bug Report Form</span>
-				</a>
+				<!-- Right: Contribute -->
+				<fieldset class="win-groupbox">
+					<legend style="font-weight: bold; font-size: 11px; padding: 0 4px;">🐛 Bug Report</legend>
+					<p style="font-size: 11px; margin-bottom: 8px;">Catch a bug or have an idea? Let us know!</p>
+					<a
+						href="https://forms.gle/hTA9hZdy3UPNs12R6"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="win-btn"
+						style="font-size: 11px; text-decoration: none; color: #000; display: inline-flex; align-items: center; gap: 4px;"
+					>
+						<img src={ECSESS} alt="" style="height: 14px;" aria-hidden="true" />
+						Bug Report Form
+					</a>
+				</fieldset>
 			</div>
 		</div>
 
-		<!-- Divider -->
-		<div class="border-ecsess-800 my-6 border-t"></div>
-
-		<!-- Copyright -->
-		<div>
-			<p class="text-ecsess-200 text-center text-sm">
-				&copy; ECSESS {year} under GNU General Public License v3.0. <br />
-				Designed with love {'<3'}.
-			</p>
+		<!-- Win2k status bar at very bottom -->
+		<div
+			class="win-statusbar"
+			style="border-top: 2px solid #808080; justify-content: space-between;"
+		>
+			<div class="win-sunken" style="flex: 1; padding: 1px 6px; font-size: 10px;">
+				© ECSESS {year} under GNU General Public License v3.0 · Designed with &lt;3
+			</div>
+			<div class="win-sunken" style="padding: 1px 8px; font-size: 10px;">
+				800×600
+			</div>
+			<div class="win-sunken" style="padding: 1px 8px; font-size: 10px;">
+				IE 6.0
+			</div>
 		</div>
 	</div>
-</footer>
+</div>
diff --git a/src/components/layout/NavBar.svelte b/src/components/layout/NavBar.svelte
index 7714375..59c10a1 100644
--- a/src/components/layout/NavBar.svelte
+++ b/src/components/layout/NavBar.svelte
@@ -1,74 +1,113 @@
 <script>
-	import NavButton from './NavButton.svelte';
 	import ECSESS from 'assets/ECSESS.png';
-	import { Menu } from '@lucide/svelte';
 	import { slide } from 'svelte/transition';
 	let menuHidden = $state(true);
 
 	const announcementIntro = 'ECSESS Election results are out! Check them out here: ';
 	const announcementLinkUrl = 'https://ssmu.simplyvoting.com/voting/guest/elections/286648/results';
 	const announcementLinkText = 'ssmu.simplyvoting.com';
+
+	const navItems = [
+		{ href: '/', label: 'Home' },
+		{ href: '/council', label: 'Meet the council' },
+		{ href: '/events', label: 'Events' },
+		{ href: '/resources', label: 'Resources' },
+		{ href: '/devteam', label: 'Dev Team' },
+		{ href: '/join', label: 'Join ECSESS' },
+	];
 </script>
 
+<!-- Windows 2000 Taskbar / Window chrome nav -->
 <div class="sticky top-0 z-40 w-full">
-	<nav class="bg-ecsess-black text-ecsess-100 w-full py-1">
-		<!-- Small screens -->
-		<div class="block md:hidden">
-			<div class="mx-4 flex items-center-safe justify-between">
-				<a href="/">
-					<img src={ECSESS} alt="ECSESS Logo" class="w-20 p-2" />
-				</a>
+	<!-- Taskbar (Start bar style) -->
+	<div
+		class="w-full flex items-stretch"
+		style="background: linear-gradient(to bottom, #1c5fbd 0%, #0a246a 40%, #0a246a 60%, #1f5bbc 100%); min-height: 30px;"
+	>
+		<!-- Start button -->
+		<a
+			href="/"
+			class="flex items-center gap-1 px-3 py-1 shrink-0"
+			style="background: linear-gradient(to bottom, #5f9ed6, #2a6cb5); border-top: 1px solid #9ac3e8; border-right: 1px solid #08245a; font-weight: bold; font-size: 13px; color: #ffffff; text-shadow: 1px 1px 1px #000; min-width: 100px;"
+		>
+			<img src={ECSESS} alt="ECSESS Logo" style="height: 20px;" />
+			<span style="font-size: 13px; font-weight: bold; color: #fff;">ECSESS</span>
+		</a>
 
-				<button
-					type="button"
-					class="bg-ecsess-black-hover hover:bg-ecsess-800 active:bg-ecsess-900 grid size-10 place-items-center rounded-md transition-colors ease-in-out"
-					onclick={() => {
-						menuHidden = !menuHidden;
-					}}
-				>
-					<Menu class="size-6 transition-transform duration-300 ease-in-out" />
-				</button>
-			</div>
+		<!-- Separator -->
+		<div style="width: 1px; background: #08245a; margin: 2px 0;"></div>
+		<div style="width: 1px; background: #3976c5; margin: 2px 0;"></div>
 
-			{#if !menuHidden}
-				<div
-					class="bg-ecsess-900 border-ecsess-700 mx-2 mb-2 flex w-auto flex-col gap-1 rounded-lg border-2 px-2 py-2 shadow-lg"
-					transition:slide
+		<!-- Nav buttons (desktop) -->
+		<div class="hidden md:flex items-center">
+			{#each navItems as item}
+				<a
+					href={item.href}
+					class="px-4 py-1 text-white text-sm hover:underline"
+					style="font-size: 12px; color: #ffffff; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); white-space: nowrap;"
 				>
-					<NavButton href="/">Home</NavButton>
-					<NavButton href="/council">Meet the council</NavButton>
-					<NavButton href="/events">Events</NavButton>
-					<NavButton href="/resources">Resources</NavButton>
-					<NavButton href="/devteam">Dev Team</NavButton>
-					<NavButton href="/join">Join ECSESS</NavButton>
-				</div>
-			{/if}
+					{item.label}
+				</a>
+			{/each}
 		</div>
 
-		<!-- Medium and larger screens -->
-		<div class="hidden md:block">
-			<div class="flex place-content-center items-end">
-				<a href="/">
-					<img src={ECSESS} alt="ECSESS Logo" class="h-12 p-2" />
-				</a>
-				<NavButton href="/">Home</NavButton>
-				<NavButton href="/council">Meet the council</NavButton>
-				<NavButton href="/events">Events</NavButton>
-				<NavButton href="/resources">Resources</NavButton>
-				<NavButton href="/devteam">Dev Team</NavButton>
-				<NavButton href="/join">Join ECSESS</NavButton>
+		<!-- Mobile hamburger -->
+		<div class="flex md:hidden items-center ml-2">
+			<button
+				type="button"
+				onclick={() => { menuHidden = !menuHidden; }}
+				class="win-btn text-xs px-2 py-0.5"
+				style="min-width: auto; font-size: 11px;"
+				aria-label="Toggle navigation"
+			>
+				☰ Menu
+			</button>
+		</div>
+
+		<!-- Spacer -->
+		<div class="flex-1"></div>
+
+		<!-- System tray clock area -->
+		<div
+			class="hidden md:flex items-center px-3"
+			style="background: linear-gradient(to bottom, #1454b3, #0a246a); border-left: 1px solid #08245a; font-size: 11px; color: #ffffff;"
+		>
+			{new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
+		</div>
+	</div>
+
+	<!-- Mobile dropdown -->
+	{#if !menuHidden}
+		<div
+			class="win-window md:hidden"
+			style="margin: 2px 4px;"
+			transition:slide
+		>
+			<div class="win-titlebar text-xs justify-between">
+				<span>Navigation</span>
+				<button onclick={() => { menuHidden = true; }} class="win-titlebar-btn">✕</button>
+			</div>
+			<div class="p-1 flex flex-col gap-0.5">
+				{#each navItems as item}
+					<a href={item.href} class="win-menu-item block" onclick={() => { menuHidden = true; }}>
+						{item.label}
+					</a>
+				{/each}
 			</div>
 		</div>
-	</nav>
-	<!-- Small announcement underneath navbar -->
-	<div class="border-ecsess-black bg-ecsess-800 border-b px-4 py-2 shadow-sm" role="alert">
-		<p class="text-ecsess-100 text-center text-sm font-medium md:text-base">
-			{announcementIntro}<a
-				href={announcementLinkUrl}
-				class="text-ecsess-50 decoration-ecsess-400 hover:decoration-ecsess-300 underline underline-offset-2"
-			>
-				{announcementLinkText}
-			</a>
-		</p>
+	{/if}
+
+	<!-- Announcement bar (IE-style info bar) -->
+	<div
+		class="w-full flex items-center gap-2 px-3 py-1"
+		style="background: #fffacd; border-top: 1px solid #d4d0c8; border-bottom: 2px solid #808080; font-size: 11px; color: #000;"
+		role="alert"
+	>
+		<!-- IE info icon -->
+		<span style="color:#0a246a; font-size:13px;" aria-hidden="true">ℹ</span>
+		<span>{announcementIntro}</span>
+		<a href={announcementLinkUrl} class="win-link" target="_blank" rel="noopener noreferrer">
+			{announcementLinkText}
+		</a>
 	</div>
 </div>
diff --git a/src/components/layout/NavButton.svelte b/src/components/layout/NavButton.svelte
index 158db2b..7e29a1c 100644
--- a/src/components/layout/NavButton.svelte
+++ b/src/components/layout/NavButton.svelte
@@ -2,17 +2,13 @@
 	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);
 </script>
 
-<a {href} class="mx-1 w-auto">
+<a {href} class="mx-0.5">
 	<button
-		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'}"
+		class="win-btn text-sm"
+		style={isActive ? 'border-top: 2px solid #404040; border-left: 2px solid #404040; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; background: #ece9d8;' : ''}
 	>
 		{@render children()}
 	</button>
diff --git a/src/components/layout/Section.svelte b/src/components/layout/Section.svelte
index 89b37f2..688ec29 100644
--- a/src/components/layout/Section.svelte
+++ b/src/components/layout/Section.svelte
@@ -1,36 +1,22 @@
 <script>
 	/**
-	 * Props:
-	 * - from/to: pass full Tailwind gradient color classes (e.g., 'from-ecsess-950', 'to-ecsess-800')
-	 * - direction: Tailwind gradient direction suffix (e.g., 'to-b', 'to-r'), defaults to vertical
-	 * - black: legacy toggle for solid background (kept for backward compatibility)
+	 * Win2k style: renders as a classic Windows 2000 window/dialog panel.
 	 */
 	let {
 		children = () => 'Section placeholder',
 		from = '',
 		to = '',
 		via = '',
-		direction = 'to-b', // to bottom
+		direction = 'to-b',
 		black = false,
 		contentStart = false
 	} = $props();
-
-	const base =
-		'mx-auto flex min-h-[90vh] flex-col items-center gap-4 p-4 text-center text-ecsess-100';
-
-	let tailwindClasses = $state(base);
-
-	$effect(() => {
-		const justifyClass = contentStart ? 'justify-start' : 'justify-center';
-		const withJustify = `${base} ${justifyClass}`;
-		if (from && to) {
-			tailwindClasses = `${withJustify} bg-gradient-${direction} ${from} ${to} ${via}`;
-		} else {
-			tailwindClasses = withJustify + (black ? ' bg-ecsess-black' : ' bg-ecsess-800');
-		}
-	});
 </script>
 
-<div class={tailwindClasses}>
+<!-- Each section is a Win2k-style "window" floating on the teal desktop -->
+<div
+	class="win-window mx-auto my-4"
+	style="max-width: 1200px; width: calc(100% - 24px);"
+>
 	{@render children()}
 </div>
diff --git a/src/components/officehour/OHBlock.svelte b/src/components/officehour/OHBlock.svelte
index 5676bec..dcc8211 100644
--- a/src/components/officehour/OHBlock.svelte
+++ b/src/components/officehour/OHBlock.svelte
@@ -9,14 +9,17 @@
 </script>
 
 <div
-	class="bg-ecsess-100 text-ecsess-900 hover:bg-ecsess-200 grid h-full place-content-center rounded-md text-center shadow-md transition-all hover:shadow-lg"
+	class="win-raised h-full grid place-content-center text-center"
+	style="background: #ece9d8; cursor: default;"
+	onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = '#d4d0c8'; }}
+	onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = '#ece9d8'; }}
 >
-	<p class="text-base leading-tight font-semibold">
+	<p style="font-size: 11px; font-weight: bold; color: #000080; line-height: 1.2;">
 		{officeHour.member.name.split(' ')[0]}
 	</p>
 
 	{#if !isShortBlock}
-		<p class="text-ecsess-700 mt-0.5 text-[11px] leading-tight opacity-90">
+		<p style="font-size: 9px; color: #444; margin-top: 1px; line-height: 1.2;">
 			{shortenPosition(officeHour.member.position)}
 		</p>
 	{/if}
diff --git a/src/components/officehour/OHSchedule.svelte b/src/components/officehour/OHSchedule.svelte
index 040711a..fcc193f 100644
--- a/src/components/officehour/OHSchedule.svelte
+++ b/src/components/officehour/OHSchedule.svelte
@@ -113,17 +113,15 @@
 	};
 </script>
 
-<div class="overflow-x-auto">
-	<div class="border-ecsess-500 bg-ecsess-900 mx-auto max-w-7xl min-w-[800px] border-t pt-2">
+<div style="overflow-x: auto;">
+	<div style="max-width: 100%; min-width: 600px; border-top: 2px solid #808080; background: #ffffff;">
 		<!-- Header row -->
-		<div class="mb-2 grid gap-0" style:grid-template-columns="80px repeat(5, 1fr)">
-			<div
-				class="text-ecsess-50 bg-ecsess-900 sticky left-0 z-20 px-2 text-center text-base font-semibold"
-			>
+		<div class="grid gap-0" style:grid-template-columns="80px repeat(5, 1fr)" style="margin-bottom: 2px; background: #0a246a;">
+			<div style="color: #fff; background: #0a246a; padding: 4px; text-align: center; font-size: 11px; font-weight: bold; position: sticky; left: 0; z-index: 20;">
 				Time
 			</div>
 			{#each DAYS as day}
-				<div class="text-ecsess-50 px-2 text-center text-base font-semibold md:text-lg">
+				<div style="color: #fff; background: #0a246a; padding: 4px; text-align: center; font-size: 11px; font-weight: bold;">
 					{day}
 				</div>
 			{/each}
@@ -131,23 +129,28 @@
 
 		<!-- Calendar grid -->
 		<div
-			class="border-ecsess-500 grid gap-0 border-t-2"
+			class="grid gap-0"
 			style:grid-template-columns="80px repeat(5, 1fr)"
+			style="border-top: 2px solid #808080;"
 		>
 			{#each DAYS as day, dayIndex}
 				{@const segments = getSegmentsForDay(day)}
 
 				<!-- Time column (only for first day) -->
 				{#if dayIndex === 0}
-					<div class="border-ecsess-500 bg-ecsess-900 sticky left-0 z-20 border-b-2">
+					<div style="background: #ece9d8; position: sticky; left: 0; z-index: 20; border-bottom: 1px solid #808080;">
 						{#each timeSlots as timeSlot}
 							{@const isHourMark = timeSlot % 60 === 0}
 							<div
-								class="text-ecsess-50 border-ecsess-400 flex items-start justify-end border-t pt-1 pr-2 text-sm"
-								class:border-t-4={isHourMark}
-								class:border-ecsess-500={isHourMark}
-								class:font-semibold={isHourMark}
-								style:height="{SLOT_HEIGHT}px"
+								style="
+									display: flex; align-items: flex-start; justify-content: flex-end;
+									padding: 2px 4px 0 0;
+									border-top: {isHourMark ? '2px solid #808080' : '1px dotted #d4d0c8'};
+									height: {SLOT_HEIGHT}px;
+									font-size: {isHourMark ? '10px' : '9px'};
+									font-weight: {isHourMark ? 'bold' : 'normal'};
+									color: {isHourMark ? '#000080' : '#808080'};
+								"
 							>
 								{#if isHourMark}{formatTime(timeSlot)}{/if}
 							</div>
@@ -157,18 +160,25 @@
 
 				<!-- Day column with segments -->
 				<div
-					class="border-ecsess-500 border-b-ecsess-500 relative border-b-2 border-l"
-					style:min-height="{timeSlots.length * SLOT_HEIGHT}px"
+					style="
+						position: relative;
+						border-left: 1px solid #d4d0c8;
+						border-bottom: 1px solid #808080;
+						min-height: {timeSlots.length * SLOT_HEIGHT}px;
+						background: #ffffff;
+					"
 				>
 					<!-- Background grid lines -->
 					{#each timeSlots as timeSlot, idx}
 						{@const isHourMark = timeSlot % 60 === 0}
 						<div
-							class="border-ecsess-400 absolute inset-x-0 border-t"
-							class:border-t-4={isHourMark}
-							class:border-ecsess-500={isHourMark}
-							style:top="{idx * SLOT_HEIGHT}px"
-							style:height="{SLOT_HEIGHT}px"
+							style="
+								position: absolute;
+								left: 0; right: 0;
+								border-top: {isHourMark ? '2px solid #808080' : '1px dotted #ece9d8'};
+								top: {idx * SLOT_HEIGHT}px;
+								height: {SLOT_HEIGHT}px;
+							"
 						></div>
 					{/each}
 
@@ -180,12 +190,17 @@
 						{@const isShortBlock = duration <= 30}
 
 						<div
-							class="absolute z-10 grid gap-0.5"
-							style:top="{startIndex * SLOT_HEIGHT + BLOCK_MARGIN + 3}px"
-							style:height="{heightPx - BLOCK_VERTICAL_PADDING - 3}px"
-							style:left="{BLOCK_MARGIN}px"
-							style:right="{BLOCK_MARGIN}px"
-							style:grid-template-columns="repeat({segment.ohs.length}, 1fr)"
+							style="
+								position: absolute;
+								z-index: 10;
+								display: grid;
+								gap: 2px;
+								top: {startIndex * SLOT_HEIGHT + BLOCK_MARGIN + 3}px;
+								height: {heightPx - BLOCK_VERTICAL_PADDING - 3}px;
+								left: {BLOCK_MARGIN}px;
+								right: {BLOCK_MARGIN}px;
+								grid-template-columns: repeat({segment.ohs.length}, 1fr);
+							"
 						>
 							{#each segment.ohs as oh}
 								<OHBlock officeHour={oh} {isShortBlock} />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 95a46b8..7443d03 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,98 +1,293 @@
 <script>
-	import Section from 'components/layout/Section.svelte';
 	import OhSchedule from 'components/officehour/OHSchedule.svelte';
 	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
 	import AffiliatedGroups from 'components/homepage/AffiliatedGroups.svelte';
 	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();
+
+	// Win2k window state
+	let introMinimized = $state(false);
+	let ohMinimized = $state(false);
+	let sponsorsMinimized = $state(false);
+	let clubsMinimized = $state(false);
+
+	const year = new Date().getFullYear();
 </script>
 
-<!-- SEO Meta header tags. Root page can use default values -->
+<!-- SEO Meta header tags -->
 <SeoMetaTags canonical={data.canonical} />
 
-<!-- ECSESS Introduction -->
-<Section from="from-ecsess-black" to="to-ecsess-900" via="via-ecsess-950">
-	<div
-		class="mx-auto grid w-full max-w-[84dvw] grid-cols-1 place-items-center gap-16 py-6 lg:min-h-[75vh] lg:grid-cols-[1fr_2fr]"
-	>
-		<!-- Left: Description and Quick Links -->
-		<div class="ml-4 flex flex-col items-center gap-2 text-center lg:items-start lg:text-left">
-			<h1 class="mb-2">
-				{#each 'We are probably ECSESS!'.split('') as char, i}
-					<span class="page-title" in:fade|global={{ delay: 150 + i * 60, duration: 800 }}>
-						{char}
-					</span>
-				{/each}
-			</h1>
-			<p
-				class="text-ecsess-200/90 max-w-xl text-base leading-relaxed md:text-lg lg:max-w-lg lg:leading-8"
-			>
-				<span class="text-ecsess-50 font-bold"
-					>Electrical, Computer & Software Engineering Students' Society at McGill (ECSESS)</span
-				>
-				is the student council which helps McGill ECSE students in their
-				<span class="text-ecsess-50 font-bold">academic</span>,
-				<span class="text-ecsess-50 font-bold">technical</span>,
-				<span class="text-ecsess-50 font-bold">social</span> and
-				<span class="text-ecsess-50 font-bold">professional</span> progression.
-			</p>
-
-			<div class="mt-8 w-full max-w-xl lg:max-w-none">
-				<QuickLinks />
+<!-- Win2k Desktop background with windows -->
+<div style="background: #008080; min-height: 100vh; padding: 8px 8px 80px 8px;">
+
+	<!-- ══════════════════════════════════════ -->
+	<!--  Window 1: ECSESS Introduction        -->
+	<!-- ══════════════════════════════════════ -->
+	<div class="win-window" style="margin-bottom: 8px;">
+		<!-- Title bar -->
+		<div class="win-titlebar">
+			<!-- Win2k IE globe icon -->
+			<svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="flex-shrink:0;" aria-hidden="true">
+				<circle cx="12" cy="12" r="10" stroke="#a6caf0" stroke-width="2" fill="#0a246a"/>
+				<path d="M2 12h20M12 2c-3 4-3 16 0 20M12 2c3 4 3 16 0 20" stroke="#a6caf0" stroke-width="1.5"/>
+			</svg>
+			<span class="flex-1">Welcome to ECSESS - Microsoft Internet Explorer</span>
+			<div class="flex gap-0.5">
+				<button
+					class="win-titlebar-btn"
+					onclick={() => { introMinimized = !introMinimized; }}
+					aria-label={introMinimized ? 'Restore' : 'Minimize'}
+					title={introMinimized ? 'Restore' : 'Minimize'}
+				>_</button>
+				<button class="win-titlebar-btn" aria-label="Maximize" title="Maximize">□</button>
+				<button class="win-titlebar-btn" style="background:#c0392b; color:#fff; font-weight:bold;" aria-label="Close" title="Close">✕</button>
+			</div>
+		</div>
+
+		<!-- Win2k menu bar -->
+		<div class="win-menu-bar hidden md:flex text-xs">
+			<span class="win-menu-item"><u>F</u>ile</span>
+			<span class="win-menu-item"><u>E</u>dit</span>
+			<span class="win-menu-item"><u>V</u>iew</span>
+			<span class="win-menu-item">F<u>a</u>vorites</span>
+			<span class="win-menu-item"><u>T</u>ools</span>
+			<span class="win-menu-item"><u>H</u>elp</span>
+		</div>
+
+		<!-- Win2k toolbar (address bar) -->
+		<div
+			class="hidden md:flex items-center gap-2 px-2 py-1"
+			style="background: #d4d0c8; border-bottom: 1px solid #808080;"
+		>
+			<span style="font-size:11px; color:#000;">Address</span>
+			<div class="win-input flex-1 flex items-center gap-1" style="padding: 1px 4px;">
+				<svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+					<circle cx="12" cy="12" r="10" stroke="#0a246a" stroke-width="2" fill="#dbeafe"/>
+					<path d="M2 12h20M12 2c-3 4-3 16 0 20" stroke="#0a246a" stroke-width="1.5"/>
+				</svg>
+				<span style="font-size:12px; color:#0000ff;">https://ecsess.mcgilleus.ca/</span>
+			</div>
+			<button class="win-btn" style="font-size:11px; min-width:auto; padding: 2px 8px;">Go</button>
+		</div>
+
+		{#if !introMinimized}
+			<!-- Window content -->
+			<div style="background: #ffffff; padding: 16px;">
+				<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;">
+					<!-- Left: About -->
+					<div>
+						<!-- Win2k group box -->
+						<fieldset class="win-groupbox" style="margin-bottom: 12px;">
+							<legend style="font-weight: bold; font-size: 12px; padding: 0 4px;">About ECSESS</legend>
+
+							<h1 style="font-size: 18px; font-weight: bold; color: #000080; margin-bottom: 8px;">
+								We are probably ECSESS!
+							</h1>
+
+							<p style="font-size: 12px; line-height: 1.6; color: #000; margin-bottom: 12px;">
+								<strong>Electrical, Computer &amp; Software Engineering Students&apos; Society at McGill (ECSESS)</strong>
+								is the student council which helps McGill ECSE students in their
+								<strong>academic</strong>,
+								<strong>technical</strong>,
+								<strong>social</strong> and
+								<strong>professional</strong> progression.
+							</p>
+
+							<!-- Win2k progress/status bar decoration -->
+							<div style="display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px;">
+								{#each ['Academic', 'Technical', 'Social', 'Professional'] as tag}
+									<span
+										style="background: #0a246a; color: #fff; font-size: 10px; padding: 1px 6px; border-top: 1px solid #a6caf0; border-left: 1px solid #a6caf0; border-right: 1px solid #000; border-bottom: 1px solid #000;"
+									>{tag}</span>
+								{/each}
+							</div>
+						</fieldset>
+
+						<!-- Quick Links -->
+						<QuickLinks />
+					</div>
+
+					<!-- Right: Featured video in a nested window -->
+					<div class="win-window" style="margin: 0;">
+						<div class="win-titlebar" style="font-size: 11px;">
+							<svg width="12" height="12" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+								<rect x="2" y="5" width="20" height="14" rx="2" fill="#a6caf0" stroke="#fff" stroke-width="1"/>
+								<polygon points="10,9 10,15 16,12" fill="#0a246a"/>
+							</svg>
+							<span class="flex-1">Windows Media Player - Featured Content</span>
+							<div class="flex gap-0.5">
+								<button class="win-titlebar-btn">_</button>
+								<button class="win-titlebar-btn">□</button>
+								<button class="win-titlebar-btn" style="background:#c0392b; color:#fff;">✕</button>
+							</div>
+						</div>
+						<div style="background: #000; aspect-ratio: 16/9;">
+							<iframe
+								class="block w-full h-full"
+								style="width: 100%; aspect-ratio: 16/9; display: block;"
+								src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&controls=0&playsinline=1&rel=0"
+								title="Rick Astley - Never Gonna Give You Up"
+								allow="autoplay; encrypted-media; picture-in-picture"
+								allowfullscreen
+							></iframe>
+						</div>
+						<!-- Media player controls bar -->
+						<div
+							class="win-menu-bar flex items-center gap-2 px-2 py-1"
+							style="font-size: 11px;"
+						>
+							<button class="win-btn" style="min-width:auto; padding: 1px 6px; font-size:10px;">⏮</button>
+							<button class="win-btn" style="min-width:auto; padding: 1px 6px; font-size:10px;">⏪</button>
+							<button class="win-btn" style="min-width:auto; padding: 1px 10px; font-size:10px;">▶</button>
+							<button class="win-btn" style="min-width:auto; padding: 1px 6px; font-size:10px;">⏩</button>
+							<button class="win-btn" style="min-width:auto; padding: 1px 6px; font-size:10px;">⏭</button>
+							<div class="win-sunken flex-1 h-3 mx-1" style="background: #fff;">
+								<div style="width: 30%; height: 100%; background: #0a246a;"></div>
+							</div>
+							<span style="font-size:10px; color:#000;">0:00 / ∞</span>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Status bar -->
+			<div class="win-statusbar flex gap-4 text-xs">
+				<div class="win-sunken px-2" style="flex: 1; font-size: 11px;">Done</div>
+				<div class="win-sunken px-2" style="font-size: 11px;">Internet</div>
+			</div>
+		{/if}
+	</div>
+
+	<!-- ══════════════════════════════════════ -->
+	<!--  Window 2: Office Hours               -->
+	<!-- ══════════════════════════════════════ -->
+	<div class="win-window" style="margin-bottom: 8px;">
+		<div class="win-titlebar">
+			<svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="flex-shrink:0;" aria-hidden="true">
+				<rect x="3" y="4" width="18" height="17" rx="1" fill="#0a246a" stroke="#a6caf0" stroke-width="1.5"/>
+				<rect x="3" y="4" width="18" height="5" rx="1" fill="#c0392b"/>
+				<line x1="8" y1="2" x2="8" y2="6" stroke="#fff" stroke-width="2"/>
+				<line x1="16" y1="2" x2="16" y2="6" stroke="#fff" stroke-width="2"/>
+				<line x1="7" y1="12" x2="17" y2="12" stroke="#a6caf0" stroke-width="1"/>
+				<line x1="7" y1="16" x2="14" y2="16" stroke="#a6caf0" stroke-width="1"/>
+			</svg>
+			<span class="flex-1">Lounge Office Hours - Calendar</span>
+			<div class="flex gap-0.5">
+				<button
+					class="win-titlebar-btn"
+					onclick={() => { ohMinimized = !ohMinimized; }}
+					aria-label={ohMinimized ? 'Restore' : 'Minimize'}
+				>_</button>
+				<button class="win-titlebar-btn">□</button>
+				<button class="win-titlebar-btn" style="background:#c0392b; color:#fff;">✕</button>
 			</div>
 		</div>
 
-		<!-- Right: Featured Video for April Fool's Day -->
-		<div class="relative flex w-full items-center justify-center lg:max-w-none">
-			<div
-				class="ring-ecsess-400/20 ring-offset-ecsess-900/50 relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-2xl shadow-2xl ring-1 ring-offset-2"
-			>
-				<!-- <img
-					src={data.councilPhoto}
-					alt="ECSESS Council"
-					class="relative h-full w-full object-contain object-center"
-				/> -->
-				
-				<iframe
-					class="block h-full w-full"
-					src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&controls=0&playsinline=1&rel=0"
-					title="Rick Astley - Never Gonna Give You Up"
-					allow="autoplay; encrypted-media; picture-in-picture"
-					allowfullscreen
-				></iframe>
+		{#if !ohMinimized}
+			<div style="background: #ffffff; padding: 16px;">
+				<div style="display:flex; align-items:baseline; gap: 12px; margin-bottom: 8px;">
+					<h2 id="office-hours" style="font-size: 15px; font-weight: bold; color: #000080;">
+						Lounge Office Hours
+					</h2>
+					{#if data.ohLastUpdated}
+						<span style="font-size: 11px; color: #808080; font-style: italic;">Semester: {data.ohLastUpdated}</span>
+					{/if}
+				</div>
+
+				<fieldset class="win-groupbox" style="margin-bottom: 12px;">
+					<legend style="font-weight: bold; font-size: 11px; padding: 0 4px; color: #0a246a;">Location Info</legend>
+					<p style="font-size: 12px; color: #000; line-height: 1.5;">
+						Come visit us in our student lounge at <strong>ENGTR 1060</strong> to grab a coffee (free!), play Mario Kart, or just chat about anything!
+					</p>
+				</fieldset>
+
+				<OhSchedule allOhs={data.allOHs} />
+			</div>
+			<div class="win-statusbar text-xs">
+				<div class="win-sunken px-2" style="flex: 1; font-size: 11px;">ENGTR 1060 · Open {data.allOHs?.length ?? 0} slots</div>
+			</div>
+		{/if}
+	</div>
+
+	<!-- ══════════════════════════════════════ -->
+	<!--  Window 3: Sponsors                   -->
+	<!-- ══════════════════════════════════════ -->
+	<div class="win-window" style="margin-bottom: 8px;">
+		<div class="win-titlebar">
+			<svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="flex-shrink:0;" aria-hidden="true">
+				<rect x="2" y="6" width="20" height="12" rx="2" fill="#0a246a" stroke="#a6caf0" stroke-width="1.5"/>
+				<circle cx="12" cy="12" r="3" fill="#ffd700" stroke="#a6caf0" stroke-width="1"/>
+				<line x1="5" y1="12" x2="9" y2="12" stroke="#a6caf0" stroke-width="1.5"/>
+				<line x1="15" y1="12" x2="19" y2="12" stroke="#a6caf0" stroke-width="1.5"/>
+			</svg>
+			<span class="flex-1">ECSESS Sponsors - Partnerships</span>
+			<div class="flex gap-0.5">
+				<button
+					class="win-titlebar-btn"
+					onclick={() => { sponsorsMinimized = !sponsorsMinimized; }}
+					aria-label={sponsorsMinimized ? 'Restore' : 'Minimize'}
+				>_</button>
+				<button class="win-titlebar-btn">□</button>
+				<button class="win-titlebar-btn" style="background:#c0392b; color:#fff;">✕</button>
 			</div>
 		</div>
+
+		{#if !sponsorsMinimized}
+			<div style="background: #ffffff; padding: 16px;">
+				<Sponsors sponsors={data.sponsors} lastUpdated={data.sponsorsLastUpdated} />
+			</div>
+		{/if}
 	</div>
-</Section>
-
-<!-- Office Hours Calendar -->
-<Section from="from-ecsess-900" to="to-ecsess-700" via="via-ecsess-650">
-	<div class="w-full">
-		<h2 class="text-2xl font-bold" id="office-hours">Lounge Office Hours</h2>
-		<p class="text-ecsess-200">
-			Come visit us in our student lounge at ENGTR 1060 to grab a coffee (free), play Mario Kart, or
-			just chat about anything!
-			{#if data.ohLastUpdated}
-				<br />
-				<span class="text-ecsess-200/70 mb-4 inline-block italic">
-					Semester: {data.ohLastUpdated}
-				</span>
-			{/if}
-		</p>
-		<OhSchedule allOhs={data.allOHs} />
+
+	<!-- ══════════════════════════════════════ -->
+	<!--  Window 4: Affiliated Groups          -->
+	<!-- ══════════════════════════════════════ -->
+	<div class="win-window" style="margin-bottom: 8px;">
+		<div class="win-titlebar">
+			<svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="flex-shrink:0;" aria-hidden="true">
+				<circle cx="9" cy="7" r="3" fill="#a6caf0" stroke="#fff" stroke-width="1"/>
+				<circle cx="17" cy="7" r="3" fill="#a6caf0" stroke="#fff" stroke-width="1"/>
+				<path d="M3 20c0-4 3-6 6-6h6c3 0 6 2 6 6" fill="#0a246a" stroke="#a6caf0" stroke-width="1"/>
+			</svg>
+			<span class="flex-1">Subcommittees &amp; Affiliated Groups - My Computer</span>
+			<div class="flex gap-0.5">
+				<button
+					class="win-titlebar-btn"
+					onclick={() => { clubsMinimized = !clubsMinimized; }}
+					aria-label={clubsMinimized ? 'Restore' : 'Minimize'}
+				>_</button>
+				<button class="win-titlebar-btn">□</button>
+				<button class="win-titlebar-btn" style="background:#c0392b; color:#fff;">✕</button>
+			</div>
+		</div>
+
+		{#if !clubsMinimized}
+			<div style="background: #ffffff; padding: 16px;">
+				<AffiliatedGroups />
+			</div>
+		{/if}
 	</div>
-</Section>
 
-<!-- Sponsors -->
-<Section from="from-ecsess-700" to="to-ecsess-800" via="via-ecsess-750">
-	<Sponsors sponsors={data.sponsors} lastUpdated={data.sponsorsLastUpdated} />
-</Section>
+	<!-- ══════════════════════════════════════════════════ -->
+	<!--  Win2k Marquee ticker (classic IE/Geocities feel)  -->
+	<!-- ══════════════════════════════════════════════════ -->
+	<div
+		class="win-window"
+		style="margin-bottom: 8px; overflow: hidden;"
+	>
+		<div
+			style="background: #000080; color: #ffff00; padding: 3px 8px; font-size: 11px; font-weight: bold; overflow: hidden; white-space: nowrap;"
+		>
+			<span style="display: inline-block; animation: marquee 18s linear infinite;">
+				★ ECSESS Website v2.0 — Best viewed in Internet Explorer 6.0 at 800×600 resolution ★ &nbsp;&nbsp;&nbsp;
+				Free coffee at ENGTR 1060! ★ &nbsp;&nbsp;&nbsp;
+				Election results are out — visit ssmu.simplyvoting.com ★ &nbsp;&nbsp;&nbsp;
+				© ECSESS {year} — Designed with &lt;3 &nbsp;&nbsp;&nbsp;
+			</span>
+		</div>
+	</div>
 
-<!-- Affiliated Clubs -->
-<Section from="from-ecsess-800" to="to-ecsess-black" via="via-ecsess-850">
-	<AffiliatedGroups />
-</Section>
+</div>