diff --git a/src/lib/components/arrowitem.svelte b/src/lib/components/arrowitem.svelte
index 5ecd228..5496e65 100644
--- a/src/lib/components/arrowitem.svelte
+++ b/src/lib/components/arrowitem.svelte
@@ -10,7 +10,7 @@
 
 <a href={url} target="_blank">
 	<!-- <img class="projectimg" src={img} alt={imgalt} /> -->
-    <div class="imgbg" style="background-image: url({img});"></div>
+	<div class="imgbg" style="background-image: url({img});"></div>
 	<div class="projectinfo">
 		<h2>{title}</h2>
 		<p>{description}</p>
@@ -37,22 +37,22 @@
 		font-family: 'Nunito', sans-serif;
 	}
 
-    .imgbg {
-        width: calc(173px * (16/9));
-        height: 173px;
-        background-size: calc(173px * (16/9)) auto;
-        background-repeat: no-repeat;
-        background-position: center;
-    }
+	.imgbg {
+		width: calc(173px * (16 / 9));
+		height: 173px;
+		background-size: calc(173px * (16 / 9)) auto;
+		background-repeat: no-repeat;
+		background-position: center;
+	}
 
 	@media screen and (orientation: portrait) {
 		a {
 			flex-direction: column;
 		}
 
-        .imgbg {
-            max-width: 100%;
-        }
+		.imgbg {
+			max-width: 100%;
+		}
 	}
 
 	@media screen and (orientation: landscape) {
@@ -71,6 +71,8 @@
 		align-items: center;
 		flex-direction: column;
 		width: 50%;
+		text-align: center;
+		padding: 0.75em 2em;
 	}
 
 	.projectinfo > h2 {
@@ -91,6 +93,7 @@
 		font-size: 4vh;
 		color: #555;
 		text-decoration: none;
+		padding-bottom: 0.5em;
 	}
 
 	.button:hover {
diff --git a/src/lib/components/eventrow.svelte b/src/lib/components/eventrow.svelte
index c14c57e..0ceb81e 100644
--- a/src/lib/components/eventrow.svelte
+++ b/src/lib/components/eventrow.svelte
@@ -1,62 +1,76 @@
-
 <script lang="ts">
-    import Event from "$lib/components/event.svelte";
-    import { icalJSON } from "../../constants";
-
-
-
-
-    async function loadEvents() {
-        let res = await fetch(icalJSON);
-        const data = await res.json();
-
-        for (let i = 0; i < data.VCALENDAR[0].VEVENT.length; i++){
-            let date;
-            if (data.VCALENDAR[0].VEVENT[i]["DTSTART;TZID=America/Los_Angeles"]){
-                date = data.VCALENDAR[0].VEVENT[i]["DTSTART;TZID=America/Los_Angeles"];
-            } else {
-                date = data.VCALENDAR[0].VEVENT[i]["DTSTART"];
-            }
-            data.VCALENDAR[0].VEVENT[i].PROPERDT = new Date(date.slice(0,4) + "-" + date.slice(4,6) + "-" + date.slice(6,8) + "T" + date.slice(9,11) + ":" + date.slice(11,13) + ":" + date.slice(13,15) + "Z");
-        }
-        
-
-        // data.VCALENDAR[0].VEVENT.reverse();
-        // sort calendar by PROPERDT
-        data.VCALENDAR[0].VEVENT.sort((a, b) => {
-            return a.PROPERDT - b.PROPERDT;
-        });
-
-        return data.VCALENDAR[0].VEVENT.reverse();
-    }
-
+	import Event from '$lib/components/event.svelte';
+	import { icalJSON } from '../../constants';
+
+	async function loadEvents() {
+		let res = await fetch(icalJSON);
+		const data = await res.json();
+
+		for (let i = 0; i < data.VCALENDAR[0].VEVENT.length; i++) {
+			let date;
+			if (data.VCALENDAR[0].VEVENT[i]['DTSTART;TZID=America/Los_Angeles']) {
+				date = data.VCALENDAR[0].VEVENT[i]['DTSTART;TZID=America/Los_Angeles'];
+			} else {
+				date = data.VCALENDAR[0].VEVENT[i]['DTSTART'];
+			}
+			data.VCALENDAR[0].VEVENT[i].PROPERDT = new Date(
+				date.slice(0, 4) +
+					'-' +
+					date.slice(4, 6) +
+					'-' +
+					date.slice(6, 8) +
+					'T' +
+					date.slice(9, 11) +
+					':' +
+					date.slice(11, 13) +
+					':' +
+					date.slice(13, 15) +
+					'Z'
+			);
+		}
+
+		data.VCALENDAR[0].VEVENT.sort((a, b) => {
+			return a.PROPERDT - b.PROPERDT;
+		});
+		// new sorting logic sorted by distance from today (low-high), then in the past events
+		let upcoming = [];
+		let past_events = [];
+		data.VCALENDAR[0].VEVENT.forEach((x) => {
+			let d = new Date(x.PROPERDT).getTime();
+			if (Date.now() <= d) {
+				upcoming.push(x);
+			} else {
+				past_events.push(x);
+			}
+		});
+		return upcoming.concat(past_events.reverse());
+	}
 </script>
 
-
-
-
-
-
 <div class="eventrow">
-    {#await loadEvents()}
-	<p>waiting for the events to load...</p>
-    {:then value}
-        {#each value as event}
-            <Event title={event.SUMMARY} date={event.PROPERDT.toDateString()} location={event.LOCATION} description={event.DESCRIPTION}></Event>
-        {/each}
-    {:catch error}
-        <p>There was an error loading the events</p>
-    {/await}
+	{#await loadEvents()}
+		<p>waiting for the events to load...</p>
+	{:then value}
+		{#each value as event}
+			<Event
+				title={event.SUMMARY}
+				date={event.PROPERDT.toDateString()}
+				location={event.LOCATION}
+				description={event.DESCRIPTION}
+			></Event>
+		{/each}
+	{:catch error}
+		<p>There was an error loading the events</p>
+	{/await}
 </div>
 
-
 <style>
-    .eventrow {
-        width:100%;
-        overflow:scroll;
-        white-space: nowrap;
-        flex-direction: row;
-        scrollbar-width: none;
-        padding-bottom: 1vh;
-    }
-</style>
\ No newline at end of file
+	.eventrow {
+		width: 100%;
+		overflow: scroll;
+		white-space: nowrap;
+		flex-direction: row;
+		scrollbar-width: none;
+		padding-bottom: 1vh;
+	}
+</style>
diff --git a/src/routes/resources/+page.svelte b/src/routes/resources/+page.svelte
index 667957d..876bd70 100644
--- a/src/routes/resources/+page.svelte
+++ b/src/routes/resources/+page.svelte
@@ -1,53 +1,86 @@
 <script lang="ts">
-    import Arrowitem from "$lib/components/arrowitem.svelte";
-    import { discordURL, emailAddr } from "../../constants";
+	import Arrowitem from '$lib/components/arrowitem.svelte';
+	import { discordURL, emailAddr } from '../../constants';
 </script>
 
 <div class="page">
+	<Arrowitem
+		img="/img/discordbg169.png"
+		imgalt="Discord Logo"
+		title="Join the CSC Discord!"
+		description="Join our Discord to chat with other CS students and get help with your work!"
+		url={discordURL}
+	></Arrowitem>
+	<Arrowitem
+		img="/img/gmailscreenshot.png"
+		imgalt="Gmail Screenshot"
+		title="Loooking for advice/mentorship from an upperclassmen?"
+		description="Join our buddy system! We can pair you with a student eager to help out."
+		url={emailAddr}
+	></Arrowitem>
+	<Arrowitem
+		img="/img/SCR-20250126-rme.png"
+		imgalt="Q&A PDF"
+		title="Have a burning question about Computer Science at Oxy?"
+		description="We've answered as many as we could in this Computer Science Q&A"
+		url="/pdf/qa.pdf"
+	></Arrowitem>
+	<Arrowitem
+		img="/img/SCR-20250126-rnl.png"
+		imgalt="Opportunities Mailing List Screenshot"
+		title="Stay up to date on internship and research opportunities"
+		description="Join the CS Department's opportunities mailing list!"
+		url="https://groups.google.com/a/oxy.edu/g/compsci-opportunities-g"
+	></Arrowitem>
+	<Arrowitem
+		img="/img/serverroom-optim.jpg"
+		imgalt="Server Room"
+		title="Need a place to host your CS project?"
+		description="We'll host it for you on the Computer Science Club's server! Email us to learn more."
+		url={emailAddr}
+	></Arrowitem>
 
-    <Arrowitem img="/img/discordbg169.png" imgalt="Discord Logo" title="Join the CSC Discord!" description="Join our Discord to chat with other CS students and get help with your work!" url={discordURL}></Arrowitem>
-    <Arrowitem img="/img/gmailscreenshot.png" imgalt="Gmail Screenshot" title="Loooking for advice/mentorship from an upperclassmen?" description="Join our buddy system! We can pair you with a student eager to help out." url={emailAddr}></Arrowitem>
-    <Arrowitem img="/img/SCR-20250126-rme.png" imgalt="Q&A PDF" title="Have a burning question about Computer Science at Oxy?" description="We've answered as many as we could in this Computer Science Q&A" url="/pdf/qa.pdf"></Arrowitem>
-    <Arrowitem img="/img/SCR-20250126-rnl.png" imgalt="Opportunities Mailing List Screenshot" title="Stay up to date on internship and research opportunities" description="Join the CS Department's opportunities mailing list!" url="https://groups.google.com/a/oxy.edu/g/compsci-opportunities-g"></Arrowitem>
-    <Arrowitem img="/img/serverroom-optim.jpg" imgalt="Server Room" title="Need a place to host your CS project?" description="We'll host it for you on the Computer Science Club's server! Email us to learn more." url={emailAddr}></Arrowitem>
-
-    
-    <p class="heading">Past Presentations and Workshops</p>
-    <p class="heading">Academic Support</p>
-    <p class="content">Workspace is a place where students come together to work on CS projects and coursework. It is a great opportunity to make connections with other CS students and get help from them. Additionally, tutors who work for Oxy's Scientific Scholars Achievement Program (SSAP), a student-led academic support organization, as well as class TAs are available for further help.</p>
-    <p class="content">Workspace & SSAP Hours</p>
-    <p class="content">Sun, 6-8 pm PST</p>
-    <p class="content">Tues, 6-8 pm PST</p>
-    <p class="heading">Career Support</p>
+	<p class="heading">Past Presentations and Workshops</p>
+	<p class="heading">Academic Support</p>
+	<p class="content">
+		Workspace is a place where students come together to work on CS projects and coursework. It is a
+		great opportunity to make connections with other CS students and get help from them.
+		Additionally, tutors who work for Oxy's Scientific Scholars Achievement Program (SSAP), a
+		student-led academic support organization, as well as class TAs are available for further help.
+	</p>
+	<p class="content">Workspace & SSAP Hours</p>
+	<p class="content">Sun, 6-8 pm PST</p>
+	<p class="content">Tues, 6-8 pm PST</p>
+	<p class="heading">Career Support</p>
 </div>
 
 <style>
+	.content {
+		font-size: 1em;
+		max-width: 90%;
+		margin: 0 auto;
+		text-align: center;
+	}
 
-    .content {
-        font-size: 1.5vh;
-        margin:0;
-    }
-
-    .heading {
-        font-size: 2vh;
-        margin-bottom:0.8vh;
-    }
-
-    .page {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        font-family: "Nunito", sans-serif;
-        margin:0px;
-    }
+	.heading {
+		font-size: 1.33em;
+		margin-bottom: 0.8vh;
+	}
 
-    .orangetext {
-        color: rgb(253, 115, 70);
-        text-decoration: none;
-    }
+	.page {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		font-family: 'Nunito', sans-serif;
+		margin: 0px;
+	}
 
-    p {
-    }
+	.orangetext {
+		color: rgb(253, 115, 70);
+		text-decoration: none;
+	}
 
-</style>
\ No newline at end of file
+	p {
+	}
+</style>