diff --git a/src/components/OHSchedule.svelte b/src/components/OHSchedule.svelte
index 034d1a6..15e6962 100644
--- a/src/components/OHSchedule.svelte
+++ b/src/components/OHSchedule.svelte
@@ -1,45 +1,45 @@
 <script lang="ts">
-	import type { OfficeHour } from '$lib/schemas';
+  import type { OfficeHour } from '$lib/schemas';
 
-	function parseTime(timeStr: string): number {
-		let timeRegexMatch = timeStr.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/i);
-		if (!timeRegexMatch) return 0;
+  function parseTime(timeStr: string): number {
+    let timeRegexMatch = timeStr.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/i);
+    if (!timeRegexMatch) return 0;
 
-		let hours = parseInt(timeRegexMatch[1], 10);
-		let minutes = parseInt(timeRegexMatch[2] || '0', 10);
-		let period = timeRegexMatch[3];
+    let hours = parseInt(timeRegexMatch[1], 10);
+    let minutes = parseInt(timeRegexMatch[2] || '0', 10);
+    let period = timeRegexMatch[3];
 
-		if (period.toUpperCase() === 'PM' && hours !== 12) hours += 12;
-		if (period.toUpperCase() === 'AM' && hours === 12) hours = 0;
+    if (period.toUpperCase() === 'PM' && hours !== 12) hours += 12;
+    if (period.toUpperCase() === 'AM' && hours === 12) hours = 0;
 
-		return Number(hours * 60 + minutes); // total minutes since midnight
-	}
-	let { allOhs }: { allOhs: OfficeHour[] } = $props();
-	let sortedOHs = allOhs.sort((a, b) => {
-		return parseTime(a.startTime) - parseTime(b.startTime);
-	});
+    return Number(hours * 60 + minutes); // total minutes since midnight
+  }
+  let { allOhs }: { allOhs: OfficeHour[] } = $props();
+  let sortedOHs = allOhs.sort((a, b) => {
+    return parseTime(a.startTime) - parseTime(b.startTime);
+  });
 </script>
 
-<div class="grid min-w-2/3 grid-cols-5 gap-2 place-self-center">
-	{#each ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] as day}
-		
-		<div>
-			<p class="text-center text-xl">{day}</p>
-			{#each sortedOHs.filter((OH) => OH.day == day) as OH}
-				<div
-					class="
-					bg-ecsess-200 text-ecsess-black m-2 grid h-36 max-w-md min-w-50
-					 grid-rows-[2fr_4fr_3fr] place-content-center rounded-xl
-					p-3 text-center"
-				>
-					<p class="border-b-ecsess-600 border-b-2 text-lg">{OH.startTime} - {OH.endTime}</p>
+<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-2 place-self-center place-content-center">
+  {#each ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] as day}
+    <div>
+      <p class="text-center text-xl">{day}</p>
+      {#each sortedOHs.filter((OH) => OH.day == day) as OH}
+        <div
+          class="bg-ecsess-200 text-ecsess-black m-2 grid h-28 lg:h-36 max-w-md
+            min-w-50 grid-cols-1 grid-rows-[2fr_4fr_3fr]
+            place-content-center rounded-xl p-3 text-center"
+        >
+          <p class="border-b-ecsess-600 md:text-md border-b-2 text-base lg:text-lg">
+            {OH.startTime} - {OH.endTime}
+          </p>
 
-					<p class="text-ecsess-800 place-self-center text-2xl font-bold">
-						{OH.member.name.split(' ')[0]}
-					</p>
-					<p class="text-sm italic">{OH.member.position}</p>
-				</div>
-			{/each}
-		</div>
-	{/each}
-</div>
+          <p class="text-ecsess-800 place-self-center font-extrabold text-lg md:text-xl lg:text-2xl">
+            {OH.member.name.split(' ')[0]}
+          </p>
+          <p class="text-sm italic lg:text-base">{OH.member.position}</p>
+        </div>
+      {/each}
+    </div>
+  {/each}
+</div>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3659702..eb6e0ea 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -49,34 +49,31 @@
 <!-- Office Hours Calendar -->
 <Section black>
 	<div class="w-full">
-		<div class="">
-			<h1 id="office-hours">Office Hours</h1>
-			<OhSchedule allOhs={data.allOHs} />
-		</div>
+		<h1 id="office-hours">Office Hours</h1>
+		<OhSchedule allOhs={data.allOHs} />
 	</div>
 </Section>
 
 <Section>
-	<div class="grid grid-cols-2 w-full max-w-[80vw] gap-24">
-
-		<div class="col-span-1">
+	<div class="grid w-full max-w-[80vw] grid-cols-1 gap-12 lg:gap-24 lg:grid-cols-2">
+		<div>
 			<h1>FAQs</h1>
-			<hr class="hr py-4 border-dashed w-full">
+			<hr class="hr w-full border-dashed py-4" />
 			<FaqAccordion entries={data.faqs} />
 		</div>
-		<div id="sponsors" class="col-span-1">
+		<div id="sponsors" class="mb-24">
 			<h1>Sponsors</h1>
-			<hr class="hr py-4 border-dashed w-full">
-			
+			<hr class="hr w-full border-dashed py-4" />
+
 			<div class="flex gap-12">
 				{#each data.sponsors as sponsor}
-				<div class="max-h-20">
-					<Link href={sponsor.url}>
-						<img src={sponsor.logo} alt="{sponsor.name} Logo" class="max-h-24"/>
-					</Link>
-				</div>
+					<div class="max-h-20">
+						<Link href={sponsor.url}>
+							<img src={sponsor.logo} alt="{sponsor.name} Logo" class="max-h-24" />
+						</Link>
+					</div>
 				{/each}
 			</div>
 		</div>
 	</div>
-	</Section>
+</Section>