diff --git a/public/earthquakesMap.jpg b/public/earthquakesMap.jpg
new file mode 100644
index 0000000..e17bfac
Binary files /dev/null and b/public/earthquakesMap.jpg differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
index ad6a04a..309f0d9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image';
-import Link from 'next/link';
+import Image from "next/image";
+import Link from "next/link";
 
 export default function Home() {
 	return (
@@ -13,49 +13,82 @@ export default function Home() {
 					<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="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 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="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 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="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 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">Artifacts</h3>
-                    <p className="text-md text-black text-center max-w-xs opacity-90">
-                        View or purchase recently discovered artifacts from seismic events
-                    </p>
-                </Link>
-            </div>
-            <p className="mt-18"></p>
-            <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-bold text-black drop-shadow-lg mb-4 tracking-tight">
-                    Welcome to Tremor Tracker
-                </h1>
-                <p className="text-lg md:text-xl text-black w-4/6 mx-auto drop-shadow-md">
-                    TremorTracker empowers communities with real-time earthquake monitoring, preparedness guidance, and the latest research. Our mission is to make seismic safety and scientific insight accessible to everyone—anywhere on the planet.
-                </p>
-            </section>
-            <p className="mt-19"></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>
+			<p className="mt-2"></p>
+			<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
+				<Link
+					href="/earthquakes"
+					className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 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="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 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="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 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">Artifacts</h3>
+					<p className="text-md text-black text-center max-w-xs opacity-90">
+						View or purchase recently discovered artifacts from seismic events
+					</p>
+				</Link>
+			</div>
+			<p className="mt-18"></p>
+			<section className="min-h-screen text-black">
+				<div className="w-full relative overflow-hidden 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-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
+								Welcome to Tremor Tracker
+							</h1>
+							<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
+								TremorTracker empowers communities with real-time earthquake monitoring, and the latest research. Our mission is
+								to make seismic safety and scientific insight accessible to everyone—anywhere on the planet.
+							</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">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">
+								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? What do they do?
+							</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}>
@@ -65,43 +98,49 @@ export default function Home() {
 				))}
 			</div>
 			<p className="mt-40"></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="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300">
-                    <Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-40 w-40 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="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300">
-                    <Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-40 w-40 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="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300">
-                    <Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-40 w-40 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>
+			<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="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300"
+				>
+					<Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-40 w-40 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="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300"
+				>
+					<Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-40 w-40 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="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300"
+				>
+					<Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-40 w-40 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>
 		</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)]">
 	//       <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">