diff --git a/src/app/earthquakes/page.tsx b/src/app/earthquakes/page.tsx
index 7a0ea80..5fbd35a 100644
--- a/src/app/earthquakes/page.tsx
+++ b/src/app/earthquakes/page.tsx
@@ -94,7 +94,7 @@ export default function Earthquakes() {
 	const [searchModalOpen, setSearchModalOpen] = useState(false);
 
 	// Fetch recent earthquakes as before
-	const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 5 }));
+	const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 10 }));
 
 	// Prepare events for maps/sidebar
 	const earthquakeEvents = useMemo(
@@ -144,7 +144,7 @@ export default function Earthquakes() {
 				setHoveredEventId={setHoveredEventId}
 				button1Name="Log an Earthquake"
 				button2Name="Search Earthquakes"
-				onButton2Click={() => setSearchModalOpen(true)} // <-- important!
+				onButton2Click={() => setSearchModalOpen(true)} 
 			/>
 			<EarthquakeSearchModal
 				open={searchModalOpen}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4f69519..d1fad16 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,145 +1,211 @@
+"use client";
+import useSWR from "swr";
 import Image from "next/image";
 import Link from "next/link";
-
 import BottomFooter from "@components/BottomFooter";
+import { createPoster } from "@utils/axiosHelpers";
+
+// formats the date
+function getRelativeDate(dateString: string): string {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+  if (diffDays === 0) return "today";
+  if (diffDays === 1) return "yesterday";
+  return date.toLocaleDateString();
+}
 
 export default function Home() {
-	return (
-		<main className="min-h-screen text-black">
-			<div className="w-full relative">
-				<div className="">
-					<Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg"></Image>
-				</div>
-				<div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40"></div>
-				<div className="absolute inset-0 top-[30%]">
-					<Image className="mx-auto" height={300} width={1000} alt="Title Image" src="/tremortrackertext.png"></Image>
-				</div>
-			</div>
-			<p className="mt-2"></p>
-			<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
-				<Link href="/earthquakes" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-					<Image height={100} width={100} src="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" />
-					<h3 className="text-xl font-bold text-black mb-4">Earthquakes</h3>
-					<p className="text-md text-black text-center max-w-xs opacity-90">
-						Log new earthquakes with their required details or search past seismic events
-					</p>
-				</Link>
-				<Link
-					href="/observatories"
-					className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
-				>
-					<Image height={100} width={100} src="/observatory.jpg" alt="Research Icon" className="h-40 w-40 mb-4" />
-					<h3 className="text-xl font-bold text-black mb-4">Observatories</h3>
-					<p className="text-md text-black text-center max-w-xs opacity-90">
-						Find recently active observatories, and newly opened/closed sites
-					</p>
-				</Link>
-				<Link href="/shop" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-					<Image height={100} width={100} src="/artifactIcon.jpg" alt="Technology Icon" className="h-40 w-40 mb-4" />
-					<h3 className="text-xl font-bold text-black mb-4">Artefacts</h3>
-					<p className="text-md text-black text-center max-w-xs opacity-90">
-						View or purchase recently discovered artefacts from seismic events
-					</p>
-				</Link>
-			</div>
-			<p className="mt-18"></p>
-			<section className="min-h-screen text-black">
-				<div className="w-full relative z-40">
-					<div className="">
-						<Image height={2500} width={2000} alt="Background Image" src="/earthquakesMap.jpg"></Image>
-					</div>
-					<div className="border absolute top-0 inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40">
-						<section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6">
-							<h1 className="text-4xl md:text-5xl font-sans font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
-								Welcome to Tremor Tracker
-							</h1>
-							<p className="text-lg md:text-xl font-sans text-white w-4/6 mx-auto drop-shadow-md z-10">
-								TremorTracker is a non-profit website and research company, that aims to provide true, reliable data. Our mission
-								is seismic education and preparation for all
-							</p>
-							<p className="mt-20"></p>
-							<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is an earthquake?</p>
-							<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
-								Earthquakes are a shaking of the earth's surface caused by a sudden release of energy underground. They can range
-								in size, from tiny trembles to large quakes, which can cause destruction and even tsunamis. Hundreds of
-								earthquakes happen every day—but most are too small to feel.
-							</p>
-							<p className="mt-20"></p>
-							<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
-								How do we log earthquakes?
-							</p>
-							<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
-								What information are we interested in?
-							</p>
-							<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
-							<p className="mt-20"></p>
-							<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
-								What are observatories?
-							</p>
-							<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is their role?</p>
-							<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
-						</section>
-					</div>
-				</div>
-			</section>
-			<p className="mt-20"></p>
-			<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
-				<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Recent Earthquake Events</h1>
-				<p className="text-lg md:text-xl text-black drop-shadow-md">
-					Learn about the most recent earthquake events from around the world:
-				</p>
-			</section>
-			<p className="mt-6"></p>
-			<div className="mx-auto w-5/6 px-2 border border-black divide-y bg-white bg-opacity-90 rounded-xl shadow-md">
-				{["Earthquake 1", "Earthquake 2", "Earthquake 3", "Earthquake 4", "Earthquake 5"].map((name) => (
-					<div className="px-5 py-5" key={name}>
-						<p className="ml-3">{name}</p>
-						<p></p>
-					</div>
-				))}
-			</div>
-			<p className="mt-20"></p>
-			<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
-				<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Contact Information</h1>
-				<p className="text-lg md:text-xl text-black drop-shadow-md">
-					Learn about Tremor Tracker's mission, our team or contact us directly:
-				</p>
-			</section>
-			<p className="mt-2"></p>
-			<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
-				<Link href="/contact-us" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-					<Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-20 w-20 mb-4" />
-					<h3 className="text-xl font-bold text-black mb-4">Contact us directly</h3>
-					<p className="text-md text-black text-center max-w-xs opacity-90">
-						Visit our socials or leave us a message via phone or email.
-					</p>
-				</Link>
-				<Link href="/our-mission" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-					<Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
-					<h3 className="text-xl font-bold text-black mb-4">Our Mission</h3>
-					<p className="text-md text-black text-center max-w-xs opacity-90">
-						Find out more about our purpose and the features we offer.
-					</p>
-				</Link>
-				<Link href="/the-team" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-					<Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
-					<h3 className="text-xl font-bold text-black mb-4">Meet the Team</h3>
-					<p className="text-md text-black text-center max-w-xs opacity-90">
-						Learn about our team leads and their responsibilities.
-					</p>
-				</Link>
-			</div>
-			<p className="mt-10"></p>
-			<section style={{ height: 500 }} className="text-black">
-				<div className="w-full relative overflow-hidden z=10">
-					<div className="">
-						<Image height={1000} width={2000} alt="Background Image" src="/scientists.png"></Image>
-					</div>
-					<BottomFooter />
-				</div>
-			</section>
-		</main>
-	);
+  const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 6 }));
+
+  // Take 5 most recent
+  const recents = (data?.earthquakes ?? [])
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+    .slice(0, 5);
+
+  return (
+    <main className="min-h-screen text-black">
+      <div className="w-full relative">
+        <div>
+          <Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg" />
+        </div>
+        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40"></div>
+        <div className="absolute inset-0 top-[30%]">
+          <Image className="mx-auto" height={300} width={1000} alt="Title Image" src="/tremortrackertext.png" />
+        </div>
+      </div>
+      <p className="mt-2"></p>
+      <div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
+        <Link href="/earthquakes" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
+          <Image height={100} width={100} src="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" />
+          <h3 className="text-xl font-bold text-black mb-4">Earthquakes</h3>
+          <p className="text-md text-black text-center max-w-xs opacity-90">
+            Log new earthquakes with their required details or search past seismic events
+          </p>
+        </Link>
+        <Link
+          href="/observatories"
+          className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
+        >
+          <Image height={100} width={100} src="/observatory.jpg" alt="Research Icon" className="h-40 w-40 mb-4" />
+          <h3 className="text-xl font-bold text-black mb-4">Observatories</h3>
+          <p className="text-md text-black text-center max-w-xs opacity-90">
+            Find recently active observatories, and newly opened/closed sites
+          </p>
+        </Link>
+        <Link href="/shop" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
+          <Image height={100} width={100} src="/artifactIcon.jpg" alt="Technology Icon" className="h-40 w-40 mb-4" />
+          <h3 className="text-xl font-bold text-black mb-4">Artefacts</h3>
+          <p className="text-md text-black text-center max-w-xs opacity-90">
+            View or purchase recently discovered artefacts from seismic events
+          </p>
+        </Link>
+      </div>
+      <p className="mt-18"></p>
+      <section className="min-h-screen text-black">
+        <div className="w-full relative z-40">
+          <div>
+            <Image height={2500} width={2000} alt="Background Image" src="/earthquakesMap.jpg" />
+          </div>
+          <div className="border absolute top-0 inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40">
+            <section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6">
+              <h1 className="text-4xl md:text-5xl font-sans font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
+                Welcome to Tremor Tracker
+              </h1>
+              <p className="text-lg md:text-xl font-sans text-white w-4/6 mx-auto drop-shadow-md z-10">
+                TremorTracker is a non-profit website and research company, that aims to provide true, reliable data. Our mission
+                is seismic education and preparation for all
+              </p>
+              <p className="mt-20"></p>
+              <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is an earthquake?</p>
+              <p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
+                Earthquakes are a shaking of the earth's surface caused by a sudden release of energy underground. They can range
+                in size, from tiny trembles to large quakes, which can cause destruction and even tsunamis. Hundreds of
+                earthquakes happen every day—but most are too small to feel.
+              </p>
+              <p className="mt-20"></p>
+              <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
+                How do we log earthquakes?
+              </p>
+              <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
+                What information are we interested in?
+              </p>
+              <p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
+              <p className="mt-20"></p>
+              <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
+                What are observatories?
+              </p>
+              <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is their role?</p>
+              <p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
+            </section>
+          </div>
+        </div>
+      </section>
+      <p className="mt-20"></p>
+      <section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
+        <h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
+          Recent Earthquake Events
+        </h1>
+        <p className="text-lg md:text-xl text-black drop-shadow-md">
+          Learn about the most recent earthquake events from around the world:
+        </p>
+      </section>
+      <p className="mt-6"></p>
+      <div className="mx-auto w-5/6 px-2">
+        {error && (
+          <div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
+            <p>Failed to load earthquakes.</p>
+          </div>
+        )}
+        {isLoading && (
+          <div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
+            <p>Loading...</p>
+          </div>
+        )}
+        {!isLoading && recents.length === 0 && (
+          <div className="border rounded-xl bg-white bg-opacity-90 shadow-md p-4 mb-2">
+            <p>No earthquakes found.</p>
+          </div>
+        )}
+        <div className="flex flex-col gap-4">
+          {recents.map((eq) => (
+            <div
+              key={eq.code}
+              className="flex items-center justify-between p-4 bg-white rounded-xl shadow border"
+            >
+              <div>
+                <div className="font-semibold">
+                    Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])}
+                </div>
+                <div className="text-sm text-gray-500">
+                  {getRelativeDate(eq.date)}
+                </div>
+              </div>
+              <span
+                className={`flex items-center justify-center font-bold text-md ml-2 rounded-full border-2 border-current
+                  ${
+                    eq.magnitude >= 7
+                      ? "text-red-600 border-red-600"
+                      : eq.magnitude >= 6
+                        ? "text-orange-500 border-orange-500"
+                        : "text-yellow-500 border-yellow-500"
+                  }
+                  min-w-[2.8rem] min-h-[2.8rem] max-h-12 max-w-12`}
+                style={{ aspectRatio: "1 / 1" }}
+                title={`Magnitude ${eq.magnitude}`}
+              >
+                {eq.magnitude}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+      <p className="mt-20"></p>
+      <section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
+        <h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
+          Contact Information
+        </h1>
+        <p className="text-lg md:text-xl text-black drop-shadow-md">
+          Learn about Tremor Tracker's mission, our team or contact us directly:
+        </p>
+      </section>
+      <p className="mt-2"></p>
+      <div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
+        <Link href="/contact-us" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
+          <Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-20 w-20 mb-4" />
+          <h3 className="text-xl font-bold text-black mb-4">Contact us directly</h3>
+          <p className="text-md text-black text-center max-w-xs opacity-90">
+            Visit our socials or leave us a message via phone or email.
+          </p>
+        </Link>
+        <Link href="/our-mission" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
+          <Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
+          <h3 className="text-xl font-bold text-black mb-4">Our Mission</h3>
+          <p className="text-md text-black text-center max-w-xs opacity-90">
+            Find out more about our purpose and the features we offer.
+          </p>
+        </Link>
+        <Link href="/the-team" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
+          <Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
+          <h3 className="text-xl font-bold text-black mb-4">Meet the Team</h3>
+          <p className="text-md text-black text-center max-w-xs opacity-90">
+            Learn about our team leads and their responsibilities.
+          </p>
+        </Link>
+      </div>
+      <p className="mt-10"></p>
+      <section style={{ height: 500 }} className="text-black">
+        <div className="w-full relative overflow-hidden z=10">
+          <div>
+            <Image height={1000} width={2000} alt="Background Image" src="/scientists.png" />
+          </div>
+          <BottomFooter />
+        </div>
+      </section>
+    </main>
+  );
+
 
 	//   return (
 	//     <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
diff --git a/src/databases/Users.csv b/src/databases/Users.csv
new file mode 100644
index 0000000..2671d2d
--- /dev/null
+++ b/src/databases/Users.csv
@@ -0,0 +1,21 @@
+name,email,password,level
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
+undefined,undefined,undefined,undefined
\ No newline at end of file