diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 16b81c2..259a775 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -2,6 +2,6 @@
     import { Button } from "bits-ui";
 </script>
 
-<Button.Root class="bg-ecsess-600 text-ecsess-200 px-4 py-2 m-1 rounded-lg border-none">
+<Button.Root class="bg-ecsess-600 text-ecsess-200 px-4 py-2 m-1 rounded-lg border-none hover:shadow-lg hover:shadow-ecsess-800 active:bg-ecsess-800 transition-all">
     <slot />
 </Button.Root>
\ No newline at end of file
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index fa01568..5eb950e 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -8,7 +8,7 @@
 	<div>
 		<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.
+			&copy; ECSESS {year}, under GNU General Public License v3.0.
 		</p>
 	</div>
 </footer>
diff --git a/src/components/ResourceCard.svelte b/src/components/ResourceCard.svelte
index e69de29..c2b6739 100644
--- a/src/components/ResourceCard.svelte
+++ b/src/components/ResourceCard.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Button from './Button.svelte';
+    import Link from './Link.svelte';
+	let { title = '_Resource Title_', children = () => {}, link = "https://example.com"} = $props();
+</script>
+
+<div class="bg-ecsess-200 w-96 rounded-lg px-8 py-4">
+	<p class="text-ecsess-black text-xl font-semibold pb-2">
+		{title}
+	</p>
+
+	<p class="text-ecsess-black text-base font-normal py-2">{@render children()}</p>
+
+    <Link href={link}>
+        <Button>Access</Button>
+    </Link>
+</div>
diff --git a/src/routes/council/+page.svelte b/src/routes/council/+page.svelte
index 2889f38..f97b941 100644
--- a/src/routes/council/+page.svelte
+++ b/src/routes/council/+page.svelte
@@ -5,7 +5,7 @@
 <title> ECSESS council </title>
 
 <Section>
-	<p class="page-title">Meet the ECSESS council!</p>
+	<p class="page-title">Meet the council!</p>
 
 	<p>Group picture!</p>
 
diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte
index 963561c..99a748b 100644
--- a/src/routes/events/+page.svelte
+++ b/src/routes/events/+page.svelte
@@ -5,4 +5,5 @@
 <title> ECSESS Events </title>
 
 <Section>
+    <p class='page-title'>Events</p>
 </Section>
diff --git a/src/routes/join/+page.svelte b/src/routes/join/+page.svelte
index e69de29..055e86d 100644
--- a/src/routes/join/+page.svelte
+++ b/src/routes/join/+page.svelte
@@ -0,0 +1,19 @@
+<script>
+	import ResourceCard from 'components/ResourceCard.svelte';
+	import Section from 'components/Section.svelte';
+	let isElectionTime = $state(true);
+</script>
+
+<title> Join ECSESS !!! </title>
+
+<Section>
+	<p class="page-title">Want to join ECSESS Council?</p>
+
+	{#if isElectionTime}
+    <ResourceCard title="Involvement Booklet">
+        A guide to involvement with ECSESS and its subcommittees (The Factory, IEEE McGill, CodeJam).
+    </ResourceCard>
+    {:else}
+		<p>Come back around March for application period!</p>
+	{/if}
+</Section>
diff --git a/src/routes/resources/+page.svelte b/src/routes/resources/+page.svelte
index c5ccbf3..ec7d09f 100644
--- a/src/routes/resources/+page.svelte
+++ b/src/routes/resources/+page.svelte
@@ -1,17 +1,15 @@
 <script>
-    import Section from "components/Section.svelte";
+	import Section from 'components/Section.svelte';
 </script>
 
 <title> Resources </title>
 
-<div class="">
-    <Section>
-        <h1>
-            Resources for ECSE students at McGill University, presented by ECSESS!
-        </h1>
-    
-        <h2>Technical</h2>
-    
-        <h2>Academic</h2>
-    </Section>
-</div>
+<Section>
+    <p class='page-title'> Resources </p>
+	
+    <h1>Resources for ECSE students at McGill University, presented by ECSESS!</h1>
+
+	<h2>Technical</h2>
+
+	<h2>Academic</h2>
+</Section>
diff --git a/src/routes/showroom/+page.svelte b/src/routes/showroom/+page.svelte
index 41dccf5..1d61941 100644
--- a/src/routes/showroom/+page.svelte
+++ b/src/routes/showroom/+page.svelte
@@ -1,7 +1,22 @@
 <script>
-    import Button from "components/Button.svelte";
+	import Button from 'components/Button.svelte';
+	import ResourceCard from 'components/ResourceCard.svelte';
+	import Section from 'components/Section.svelte';
 </script>
 
-<Button>
-    Button
-</Button>
\ No newline at end of file
+<title> Component showroom for developers </title>
+
+<Section>
+    <Button>Button</Button>
+    <ResourceCard></ResourceCard>
+</Section>
+<Section black>
+    <Button>Button</Button>
+    <ResourceCard title="Workshop feedback">
+        Description of the workshop
+    </ResourceCard>
+
+</Section>
+<Section>
+    <Button>Button</Button>
+</Section>