diff --git a/public/earthquakeRelief.jpg b/public/earthquakeRelief.jpg
new file mode 100644
index 0000000..b0b6d76
Binary files /dev/null and b/public/earthquakeRelief.jpg differ
diff --git a/src/app/learn/page.tsx b/src/app/learn/page.tsx
index 4e6e1ba..acb98f3 100644
--- a/src/app/learn/page.tsx
+++ b/src/app/learn/page.tsx
@@ -1,48 +1,53 @@
-// app/learn/page.tsx
 "use client";
 import BottomFooter from "@components/BottomFooter";
 
 export default function LearnPage() {
 	return (
-		<div className="min-h-screen bg-blue-50 flex flex-col">
-			{/* (Optional) Navbar */}
-			{/* <Navbar /> */}
+		<div
+			className="min-h-screen bg-fixed bg-cover bg-center flex flex-col relative"
+			style={{
+				backgroundImage: "url('/earthquakeRelief.jpg')", // adjust path as needed
+			}}
+		>
+			{/* Overlay for readability */}
+			<div className="absolute inset-0 bg-black bg-opacity-50 z-0"></div>
 
-			<main className="flex-1 flex flex-col items-center justify-start pt-12 px-4">
-				<h1 className="text-4xl font-bold mb-4 text-blue-800 text-center">Earthquakes</h1>
-				<p className="max-w-2xl text-lg text-gray-700 mb-6 text-center">
-					<span className="font-bold">In this page, you can learn all about what earthquakes are, and how to keep safe!</span>
+			<main className="flex-1 flex flex-col items-center justify-start pt-16 px-4 relative z-10">
+				{/* Title & subtitle OVER the background (not in the content box) */}
+				<h1 className="text-4xl font-bold mb-4 text-white text-center drop-shadow-lg">Earthquakes</h1>
+				<p className="max-w-2xl text-lg text-white mb-8 text-center font-bold drop-shadow">
+					In this page, you can learn all about what earthquakes are, and how best to keep safe!
 				</p>
-				<div className="max-w-3xl text-base text-gray-600 text-left space-y-8">
+
+				{/* Content box: all following info INSIDE */}
+				<div className="max-w-4xl w-full bg-white bg-opacity-90 rounded-xl shadow-2xl mx-auto mb-12 p-8 md:p-10">
 					{/* Section 1 */}
-					<section>
+					<section className="mb-8">
 						<p>
-							<span className="font-semibold text-blue-800">What are earthquakes?</span>
+							<span className="font-bold text-black md:text-xl">What are earthquakes?</span>
 							<br />
 							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>
 					</section>
-
 					{/* Section 2 */}
-					<section>
+					<section className="mb-8">
 						<p>
-							<span className="font-semibold text-blue-800">What are the types of earthquakes?</span>
+							<span className="font-bold text-black md:text-xl">What are the types of earthquakes?</span>
 							<br />
 							Regions near plate boundaries, such as around the Pacific Ocean ("The Ring of Fire"), experience the most activity.
 						</p>
 					</section>
-
 					{/* Section 3 */}
 					<section>
 						<p>
-							<span className="font-semibold text-blue-800">How can I be prepared?</span>
+							<span className="font-bold text-black md:text-xl">How can I be prepared?</span>
 						</p>
 						{/* MAIN BULLET POINTS */}
 						<ul className="list-disc list-inside pl-6 space-y-2">
 							<li>
-								<span className="font-bold text-gray-800">Assemble an emergency kit:</span>
+								<span className="font-bold text-gray-800 ">Assemble an emergency kit:</span>
 								This should be stored in your earthquake emergency zone. It may be useful, as in an earthquake, you may lose
 								electricity or water supplies.
 								{/* SUB BULLETS */}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 16203a6..4f69519 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
+
 import BottomFooter from "@components/BottomFooter";
 
 export default function Home() {
@@ -16,10 +17,7 @@ export default function Home() {
 			</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"
-				>
+				<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">
@@ -36,10 +34,7 @@ export default function Home() {
 						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"
-				>
+				<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">
@@ -59,11 +54,16 @@ export default function Home() {
 								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
+								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">info</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?
@@ -107,30 +107,21 @@ export default function Home() {
 			</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"
-				>
+				<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"
-				>
+				<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"
-				>
+				<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">
@@ -139,12 +130,12 @@ export default function Home() {
 				</Link>
 			</div>
 			<p className="mt-10"></p>
-			<section style={{ height: 500}} className="text-black">
+			<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 />
+					<BottomFooter />
 				</div>
 			</section>
 		</main>