diff --git a/README.md b/README.md
index 477894d..3a4a884 100644
--- a/README.md
+++ b/README.md
@@ -8,14 +8,15 @@
 # Tech stack
 ## Frontend
 - SvelteKit (Svelte v5, Kit v2)
-- Frontend options:
   - JavaScript with JSDoc
-  - TailwindCSS (v4.0)
   - [Svelte Auto Adapter](https://svelte.dev/docs/kit/adapters)
+- TailwindCSS (v4.0)
+- Bits-UI (v1.22): Headless Component Library https://bits-ui.com
+
 - [`bun`](https://bun.sh) as Node.js package manager (similar to `npm`, `yarn`, `pnpm`, and `deno` v2)
 
 ## Content Management System (CMS)
-- Strapi CMS (v5)
+- Sanity CMS
 
 # Development guide
 - Clone the repo, install dependencies, and start dev environment:
diff --git a/src/app.css b/src/app.css
index d14ab7e..4980f7f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,10 +1,26 @@
+@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
 @import 'tailwindcss';
 @plugin '@tailwindcss/typography';
 
+
 @theme {
     --color-ecsess-200: #A9B7A0;
     --color-ecsess-400: #5C8A5C;
     --color-ecsess-600: #3B6A3A;
     --color-ecsess-800: #0A3D2A;
     --color-ecsess-black: #1F1F1F;
-}
\ No newline at end of file
+}
+
+* {
+    font-family: "Saira", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 500;
+}
+
+h1 {
+    @apply text-3xl font-bold py-4;
+}
+
+.page-title {
+    @apply text-7xl font-bold py-4;
+}
diff --git a/static/ECSESS.png b/src/assets/ECSESS.png
similarity index 100%
rename from static/ECSESS.png
rename to src/assets/ECSESS.png
diff --git a/static/ECSESSBits.png b/src/assets/ECSESSBits.png
similarity index 100%
rename from static/ECSESSBits.png
rename to src/assets/ECSESSBits.png
diff --git a/static/TheFactory.png b/src/assets/TheFactory.png
similarity index 100%
rename from static/TheFactory.png
rename to src/assets/TheFactory.png
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/CouncilCard.svelte b/src/components/CouncilCard.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/EventBlock.svelte b/src/components/EventBlock.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/FAQAccordion.svelte b/src/components/FAQAccordion.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 6a8c451..fa01568 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -2,9 +2,11 @@
 	const year = new Date().getFullYear();
 </script>
 
-<footer class="border-ecsess-black m-12 flex h-fit flex-col items-center justify-between border-t-2">
+<footer
+	class="bg-ecsess-black text-ecsess-200 mx-auto flex min-w-fit flex-wrap items-center justify-center px-4 py-4"
+>
 	<div>
-		<p class="text-content py-3 text-center">
+		<p class="text-ecsess-200 py-3 text-center">
 			Created by ECSESS with love {'<3'}. <br />
 			&copy; {year} under GNU General Public License v3.0.
 		</p>
diff --git a/src/components/Gallery.svelte b/src/components/Gallery.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/NavBar.svelte b/src/components/NavBar.svelte
index 67a51e5..e63eb74 100644
--- a/src/components/NavBar.svelte
+++ b/src/components/NavBar.svelte
@@ -1,15 +1,18 @@
 <script>
 	import NavButton from './NavButton.svelte';
-    
+	import ECSESS from 'assets/ECSESS.png';
 </script>
 
-<nav class="bg-ecsess-black text-ecsess-200 mx-auto flex min-w-fit flex-wrap items-center justify-center px-4 pt-4">
+<nav
+	class="bg-ecsess-black text-ecsess-200 mx-auto flex min-w-fit flex-wrap items-center justify-center px-4 pt-2"
+>
+	<img src={ECSESS} alt="ECSESS Logo" class="w-20 p-2" />
 	<NavButton href="/">Home</NavButton>
 	<NavButton href="/council">Meet the council</NavButton>
 	<NavButton href="/events">Events</NavButton>
 	<NavButton href="/resources">Resources</NavButton>
 	<NavButton href="/join">Join ECSESS</NavButton>
-    {#if import.meta.env.DEV} 
-    <NavButton href="/components">Componenets</NavButton>
-    {/if}
+	{#if import.meta.env.DEV}
+		<NavButton href="/showroom">Componenets</NavButton>
+	{/if}
 </nav>
diff --git a/src/components/OHBlock.svelte b/src/components/OHBlock.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/OHSchedule.svelte b/src/components/OHSchedule.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/PositionCard.svelte b/src/components/PositionCard.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/ResourceCard.svelte b/src/components/ResourceCard.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Section.svelte b/src/components/Section.svelte
index c7f7d6f..a79417d 100644
--- a/src/components/Section.svelte
+++ b/src/components/Section.svelte
@@ -1,7 +1,17 @@
 <script>
-    let { children = () => "Section placeholder" } = $props();
+	let { children = () => 'Section placeholder', black = false } = $props();
 </script>
 
-<div class="container mx-auto px-4 py-6 flex flex-col items-center justify-center gap-4 text-center">
-    {@render children()}
-</div>
+{#if black}
+	<div
+		class="bg-ecsess-black mx-auto flex min-h-[75vh] flex-col items-center justify-center gap-4 p-4 text-center text-ecsess-200"
+	>
+		{@render children()}
+	</div>
+{:else}
+	<div
+		class="bg-ecsess-800 mx-auto flex min-h-[75vh] flex-col items-center justify-center gap-4 p-4 text-center text-ecsess-200"
+	>
+		{@render children()}
+	</div>
+{/if}
diff --git a/src/components/Tabs.svelte b/src/components/Tabs.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5fc8107..9836151 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,11 +7,5 @@
 </script>
 
 <Navbar />
-<div class="h-screen bg-ecsess-800">
-	{@render children()}
-	<Footer />
-</div>
-
-<style>
-    @reference tailwindcss;
-</style>
\ No newline at end of file
+{@render children()}
+<Footer />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f246583..fcfd48f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,10 +1,37 @@
+<script>
+	import Section from 'components/Section.svelte';
+
+	// Getting info from ECSESS CMS
+	let description =
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+</script>
+
 <title> McGill ECSESS </title>
 
-<div class='flex flex-col items-center justify-center h-1/2 text-center'>
-    <h1>
-        Welcome to the ECSESS website!
-    </h1>
-    <p>
-        This is a work in progress. Check back soon for updates!
-    </p>
-</div>
\ No newline at end of file
+<!-- ECSESS Introduction -->
+<Section>
+	<div class="flex h-1/2 flex-col items-center justify-center text-center">
+		<p class="page-title">What is ECSESS?</p>
+
+		<p>{description}</p>
+	</div>
+</Section>
+
+<!-- Picture, FAQ -->
+<Section black>
+	<div class="flex justify-around gap-12">
+		<div>
+			<p>PICTURES</p>
+		</div>
+		<div>
+			<p>FAQ</p>
+		</div>
+	</div>
+</Section>
+
+<!-- Office Hours Calendar -->
+<Section>
+	<div>
+		<p class="text-2xl">Office Hours</p>
+	</div>
+</Section>
diff --git a/src/routes/council/+page.svelte b/src/routes/council/+page.svelte
index 810488f..2889f38 100644
--- a/src/routes/council/+page.svelte
+++ b/src/routes/council/+page.svelte
@@ -5,8 +5,8 @@
 <title> ECSESS council </title>
 
 <Section>
-	<h1>Meet the ECSESS council!</h1>
-	<hr />
+	<p class="page-title">Meet the ECSESS council!</p>
+
 	<p>Group picture!</p>
 
 	<p>Here are the members of the ECSESS council!</p>
diff --git a/src/routes/components/+page.svelte b/src/routes/showroom/+page.svelte
similarity index 100%
rename from src/routes/components/+page.svelte
rename to src/routes/showroom/+page.svelte
diff --git a/static/favicon.png b/static/favicon.png
index 7db7fc5..7886a42 100644
Binary files a/static/favicon.png and b/static/favicon.png differ
diff --git a/svelte.config.js b/svelte.config.js
index 0a436a9..d1738e4 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -8,6 +8,7 @@ const config = {
 		alias: {
             // So you can import with `from 'components/...'`
             'components': 'src/components/',
+			'assets': 'src/assets'
         }
 	},