diff --git a/src/app/learn/page.tsx b/src/app/learn/page.tsx
index acb98f3..ad0542f 100644
--- a/src/app/learn/page.tsx
+++ b/src/app/learn/page.tsx
@@ -10,9 +10,9 @@ export default function LearnPage() {
 			}}
 		>
 			{/* Overlay for readability */}
-			<div className="absolute inset-0 bg-black bg-opacity-50 z-0"></div>
+			<div className="absolute inset-0 bg-black bg-opacity-50"></div>
 
-			<main className="flex-1 flex flex-col items-center justify-start pt-16 px-4 relative z-10">
+			<main className="flex-1 flex flex-col items-center justify-start pt-16 px-4 relative z-20">
 				{/* 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">
diff --git a/src/components/BottomFooter.tsx b/src/components/BottomFooter.tsx
index 04988fe..80f133c 100644
--- a/src/components/BottomFooter.tsx
+++ b/src/components/BottomFooter.tsx
@@ -1,88 +1,74 @@
 // components/Footer.tsx
 import Link from "next/link";
-import { FaTwitter, FaFacebook, FaYoutube, FaLinkedin } from "react-icons/fa";
+import { FaFacebook, FaLinkedin, FaTwitter, FaYoutube } from "react-icons/fa";
 
 export default function Footer() {
-  return (
-    <footer className="bg-[#16424b] text-white pt-12 pb-4 px-6 mt-12">
-      <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between gap-8">
-        {/* Useful Links */}
-        <div className="min-w-[200px] mb-8 md:mb-0 flex-1">
-          <h3 className="font-bold underline text-lg mb-3">Useful links</h3>
-          <ul className="space-y-2">
-            <li>
-              <Link
-                href="https://www.gov.uk/guidance/extreme-weather-and-natural-hazards"
-                className="hover:underline"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Gov.UK guidance
-              </Link>
-            </li>
-            <li>
-              <Link href="https://www.dysoninstitute.ac.uk/about-us/governance/privacy-notices/" 
-              className="hover:underline">
-                Privacy policy
-              </Link>
-            </li>
-            <li>
-              <Link href="https://privacy.dyson.com/en/globalcookiepolicy.aspx" 
-              className="hover:underline">
-                Cookies policy
-              </Link>
-            </li>
-          </ul>
-        </div>
-        {/* Donate Section */}
-        <div className="min-w-[220px] mb-8 md:mb-0 flex-1">
-          <h3 className="font-bold underline text-lg mb-3">Donate</h3>
-          <p className="mb-4">
-            We are a nonprofit entirely funded by your donations, every penny helps provide life saving information.
-          </p>
-          <Link
-            href="#"
-            className="bg-gray-200 hover:bg-blue-600 hover:text-white text-black font-bold rounded-full px-8 py-2 shadow transition-colors duration-200 inline-block text-center"
-          >
-            Donate Now
-          </Link>
-        </div>
-      </div>
-      {/* Bottom bar */}
-      <div className="max-w-6xl mx-auto mt-8 pt-6 flex flex-col md:flex-row items-center justify-between border-t border-gray-200/30">
-        {/* Bottom left: Copyright */}
-        <span className="text-sm flex items-center">
-          <span className="mr-2">&#169;</span> TremorTracker 2025
-        </span>
-        {/* Bottom right: Social icons */}
-        <div className="flex flex-col items-end">
-          <span className="text-sm mb-2">Follow us on</span>
-          <div className="flex space-x-3">
-            {/* Replace src with your icon URLs, or use next/image if preferred */}
-            <a href="#" target="_blank" rel="noopener noreferrer">
-              <img
-                src="instagram.png"
-                alt="instagram"
-                className="h-7 w-7 rounded-full shadow"
-              />
-            </a>
-            <a href="#" target="_blank" rel="noopener noreferrer">
-              <img
-                src="linkedin.png"
-                alt="linkedin"
-                className="h-7 w-7 rounded-full shadow"
-              />
-            </a>
-            <a href="#" target="_blank" rel="noopener noreferrer">
-              <img
-                src="x_logo.jpg"
-                alt="X"
-                className="h-7 w-7 rounded-full shadow"
-              />
-            </a>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-}
\ No newline at end of file
+	return (
+		<footer className="bg-[#16424b] text-white pt-12 pb-4 px-6 mt-12 z-0">
+			<div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between gap-8">
+				{/* Useful Links */}
+				<div className="min-w-[200px] mb-8 md:mb-0 flex-1">
+					<h3 className="font-bold underline text-lg mb-3">Useful links</h3>
+					<ul className="space-y-2">
+						<li>
+							<Link
+								href="https://www.gov.uk/guidance/extreme-weather-and-natural-hazards"
+								className="hover:underline"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Gov.UK guidance
+							</Link>
+						</li>
+						<li>
+							<Link href="https://www.dysoninstitute.ac.uk/about-us/governance/privacy-notices/" className="hover:underline">
+								Privacy policy
+							</Link>
+						</li>
+						<li>
+							<Link href="https://privacy.dyson.com/en/globalcookiepolicy.aspx" className="hover:underline">
+								Cookies policy
+							</Link>
+						</li>
+					</ul>
+				</div>
+				{/* Donate Section */}
+				<div className="min-w-[220px] mb-8 md:mb-0 flex-1">
+					<h3 className="font-bold underline text-lg mb-3">Donate</h3>
+					<p className="mb-4">
+						We are a nonprofit entirely funded by your donations, every penny helps provide life saving information.
+					</p>
+					<Link
+						href="#"
+						className="bg-gray-200 hover:bg-blue-600 hover:text-white text-black font-bold rounded-full px-8 py-2 shadow transition-colors duration-200 inline-block text-center"
+					>
+						Donate Now
+					</Link>
+				</div>
+			</div>
+			{/* Bottom bar */}
+			<div className="max-w-6xl mx-auto mt-8 pt-6 flex flex-col md:flex-row items-center justify-between border-t border-gray-200/30">
+				{/* Bottom left: Copyright */}
+				<span className="text-sm flex items-center">
+					<span className="mr-2">&#169;</span> TremorTracker 2025
+				</span>
+				{/* Bottom right: Social icons */}
+				<div className="flex flex-col items-end">
+					<span className="text-sm mb-2">Follow us on</span>
+					<div className="flex space-x-3">
+						{/* Replace src with your icon URLs, or use next/image if preferred */}
+						<a href="#" target="_blank" rel="noopener noreferrer">
+							<img src="instagram.png" alt="instagram" className="h-7 w-7 rounded-full shadow" />
+						</a>
+						<a href="#" target="_blank" rel="noopener noreferrer">
+							<img src="linkedin.png" alt="linkedin" className="h-7 w-7 rounded-full shadow" />
+						</a>
+						<a href="#" target="_blank" rel="noopener noreferrer">
+							<img src="x_logo.jpg" alt="X" className="h-7 w-7 rounded-full shadow" />
+						</a>
+					</div>
+				</div>
+			</div>
+		</footer>
+	);
+}