diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index a838498..aef989d 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -1,41 +1,43 @@
 "use client";
 import Image from "next/image";
-import { useCallback, useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react";
 
 import { ExtendedArtefact } from "@appTypes/ApiTypes";
 import { Currency } from "@appTypes/StoreModel";
 import BottomFooter from "@components/BottomFooter";
 import { useStoreState } from "@hooks/store";
 
+interface SuperExtendedArtefact extends ExtendedArtefact {
+	location: string;
+	dateReleased: string;
+	image: string;
+	price: number;
+}
+
 export default function Shop() {
-	const [artefacts, setArtefacts] = useState<ExtendedArtefact[]>([]);
+	const [artefacts, setArtefacts] = useState<SuperExtendedArtefact[]>([]);
 	const [hiddenArtefactIds, setHiddenArtefactIds] = useState<number[]>([]);
 	const [loading, setLoading] = useState(true);
-
-	const [cart, setCart] = useState<ExtendedArtefact[]>([]);
-	const [showCartModal, setShowCartModal] = useState(false);
-
 	const user = useStoreState((state) => state.user);
 
+	// 3. Fetch from your API route and map data to fit your existing fields
 	useEffect(() => {
 		async function fetchArtefacts() {
 			setLoading(true);
 			try {
 				const res = await fetch("/api/artefacts");
-				const data = await res.json();
-				const transformed = data.artefact.map((a: any) => ({
-					id: a.id,
-					name: a.name,
-					description: a.description,
-					location: a.warehouseArea,
-					earthquakeID: a.earthquakeId?.toString() ?? "",
-					observatory: a.type ?? "",
+				const data: { artefact: ExtendedArtefact[] } = await res.json();
+
+				const transformed = data.artefact.map((a) => ({
+					...a,
+					location: a.warehouseArea, // your database
 					dateReleased: a.createdAt ? new Date(a.createdAt).toLocaleDateString() : "",
 					image: "/artefactImages/" + (a.imageName || "NoImageFound.PNG"),
-					price: a.shopPrice ?? 100,
+					price: a.shopPrice ?? 100, // fallback price if not in DB
 				}));
 				setArtefacts(transformed);
 			} catch (e) {
+				// Optionally handle error
 				console.error("Failed to fetch artefacts", e);
 			} finally {
 				setLoading(false);
@@ -45,10 +47,9 @@ export default function Shop() {
 	}, []);
 
 	const [currentPage, setCurrentPage] = useState(1);
-	const [selectedArtefact, setSelectedArtefact] = useState<ExtendedArtefact | null>(null);
+	const [selectedArtefact, setSelectedArtefact] = useState<SuperExtendedArtefact | null>(null);
 	const [showPaymentModal, setShowPaymentModal] = useState(false);
-	const [artefactToBuy, setArtefactToBuy] = useState<ExtendedArtefact | null>(null);
-	const [cartCheckout, setCartCheckout] = useState(false); // true = checkout cart (not single artefact)
+	const [artefactToBuy, setArtefactToBuy] = useState<SuperExtendedArtefact | null>(null);
 	const [showThankYouModal, setShowThankYouModal] = useState(false);
 	const [orderNumber, setOrderNumber] = useState<string | null>(null);
 
@@ -73,7 +74,7 @@ export default function Shop() {
 		if (currentPage > 1) setCurrentPage((prev) => prev - 1);
 	};
 
-	function ArtefactCard({ artefact }: { artefact: ExtendedArtefact }) {
+	function ArtefactCard({ artefact }: { artefact: SuperExtendedArtefact }) {
 		return (
 			<div
 				className="flex flex-col bg-white shadow-md rounded-md overflow-hidden cursor-pointer hover:scale-105 transition-transform"
@@ -83,7 +84,7 @@ export default function Shop() {
 				<div className="p-4">
 					<h3 className="text-lg font-semibold">{artefact.name}</h3>
 					<p className="text-neutral-500 mb-2">{artefact.location}</p>
-					<p className="text-neutral-500 mb-2">{artefact.earthquakeID}</p>
+					<p className="text-neutral-500 mb-2">{artefact.earthquakeCode}</p>
 					<p className="text-black font-bold text-md mt-2">
 						{currencyTickers[selectedCurrency]}
 						{convertPrice(artefact.price, selectedCurrency)}
@@ -92,14 +93,11 @@ export default function Shop() {
 			</div>
 		);
 	}
-
-	function Modal({ artefact }: { artefact: ExtendedArtefact }) {
+	function Modal({ artefact }: { artefact: SuperExtendedArtefact }) {
 		if (!artefact) return null;
 		const handleOverlayClick = (e: React.MouseEvent) => {
 			if (e.target === e.currentTarget) setSelectedArtefact(null);
 		};
-		const inCart = cart.some((a) => a.id === artefact.id);
-
 		return (
 			<div
 				className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
@@ -120,35 +118,19 @@ export default function Shop() {
 					</p>
 					<p className="text-neutral-600 mt-2">{artefact.description}</p>
 					<p className="text-neutral-500 font-bold mt-1">Location: {artefact.location}</p>
-					<p className="text-neutral-500 mb-2">{artefact.earthquakeID}</p>
-					<p className="text-neutral-500 mb-2">{artefact.observatory}</p>
+					<p className="text-neutral-500 mb-2">{artefact.earthquakeCode}</p>
+					<p className="text-neutral-500 mb-2">{artefact.type}</p>
 					<p className="text-neutral-500 mb-2">{artefact.dateReleased}</p>
-					<div className="flex flex-col sm:flex-row justify-end gap-4 mt-4 mr-2">
+					<div className="flex justify-end gap-4 mt-4 mr-2">
 						<button
 							onClick={() => {
-								if (!inCart) setCart((cart) => [...cart, artefact]);
+								setArtefactToBuy(artefact); // Set artefact for payment modal
+								setShowPaymentModal(true); // Show payment modal
+								setSelectedArtefact(null); // Close this modal
 							}}
-							disabled={inCart}
-							className={`px-6 py-2 rounded-md font-bold border 
-                                ${
-																	inCart
-																		? "bg-gray-300 text-gray-400 cursor-not-allowed"
-																		: "bg-green-500 hover:bg-green-600 text-white"
-																}
-                            `}
+							className="px-10 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
 						>
-							{inCart ? "In Cart" : "Add to Cart"}
-						</button>
-						<button
-							onClick={() => {
-								setArtefactToBuy(artefact);
-								setShowPaymentModal(true);
-								setCartCheckout(false);
-								setSelectedArtefact(null);
-							}}
-							className="px-8 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
-						>
-							Buy Now
+							Buy
 						</button>
 					</div>
 				</div>
@@ -156,99 +138,15 @@ export default function Shop() {
 		);
 	}
 
-	function CartModal() {
-		const total = cart.reduce((sum, art) => sum + art.price, 0);
-
-		const handleOverlayClick = (e: React.MouseEvent) => {
-			if (e.target === e.currentTarget) setShowCartModal(false);
-		};
-
-		return (
-			<div
-				className="fixed inset-0 bg-neutral-900 bg-opacity-60 flex justify-center items-center z-[999]"
-				onClick={handleOverlayClick}
-			>
-				<div className="bg-white rounded-xl shadow-2xl max-w-2xl w-full p-8">
-					<div className="flex justify-between items-center mb-4">
-						<h2 className="text-2xl font-bold">Your Cart</h2>
-						<button onClick={() => setShowCartModal(false)} className="text-xl font-bold px-2 py-1 rounded">
-							✖
-						</button>
-					</div>
-					{cart.length === 0 ? (
-						<p className="text-neutral-500">Your cart is empty.</p>
-					) : (
-						<>
-							<ul className="mb-4">
-								{cart.map((art) => (
-									<li key={art.id} className="flex items-center border-b py-2">
-										<div className="flex-shrink-0 mr-3">
-											<Image src={art.image} alt={art.name} width={60} height={40} className="rounded" />
-										</div>
-										<div className="flex-grow">
-											<p className="font-bold">{art.name}</p>
-											<p className="text-neutral-500 text-sm">{art.location}</p>
-										</div>
-										<p className="font-bold mr-2">
-											{currencyTickers[selectedCurrency]}
-											{convertPrice(art.price, selectedCurrency)}
-										</p>
-										<button
-											className="px-3 py-1 bg-red-400 hover:bg-red-500 text-white rounded"
-											onClick={() => setCart((c) => c.filter((a) => a.id !== art.id))}
-										>
-											Remove
-										</button>
-									</li>
-								))}
-							</ul>
-							<div className="flex justify-between items-center mb-2">
-								<span className="font-bold">Total:</span>
-								<span className="text-lg font-bold">
-									{currencyTickers[selectedCurrency]}
-									{convertPrice(total, selectedCurrency)}
-								</span>
-							</div>
-							<div className="text-right">
-								<button
-									className="px-8 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
-									onClick={() => {
-										setShowCartModal(false);
-										setArtefactToBuy(null);
-										setShowPaymentModal(true);
-										setCartCheckout(true);
-									}}
-								>
-									Checkout
-								</button>
-							</div>
-						</>
-					)}
-				</div>
-			</div>
-		);
-	}
-
-	function PaymentModal({
-		artefact,
-		onClose,
-		cartItems,
-	}: {
-		artefact?: ExtendedArtefact;
-		onClose: () => void;
-		cartItems?: ExtendedArtefact[];
-	}) {
+	function PaymentModal({ artefact, onClose }: { artefact: SuperExtendedArtefact; onClose: () => void }) {
 		const [cardNumber, setCardNumber] = useState("");
 		const [expiry, setExpiry] = useState("");
 		const [cvc, setCvc] = useState("");
 		const [name, setName] = useState("");
-		const [email, setEmail] = useState(user?.email || "");
+		const [email, setEmail] = useState("");
 		const [remember, setRemember] = useState(false);
 		const [error, setError] = useState("");
 
-		const artefactsToBuy = artefact ? [artefact] : cartItems || [];
-		const total = artefactsToBuy.reduce((sum, art) => sum + art.price, 0);
-
 		function validateEmail(email: string) {
 			return (
 				email.includes("@") &&
@@ -264,13 +162,18 @@ export default function Shop() {
 		function validateExpiry(exp: string) {
 			return /^\d{2}\/\d{2}$/.test(exp);
 		}
+
 		function handlePay() {
 			setError("");
-			const paymentEmail = user?.email || email;
-			if (!validateEmail(paymentEmail)) {
-				setError("Please enter a valid email");
+			if (email || user?.email) {
+				if (!validateEmail(email)) {
+					setError("Please enter a valid email ending");
+					return;
+				}
+			} else {
 				return;
 			}
+
 			if (!validateCardNumber(cardNumber)) {
 				setError("Card number must be 12-19 digits.");
 				return;
@@ -283,51 +186,44 @@ export default function Shop() {
 				setError("CVC must be 3 or 4 digits.");
 				return;
 			}
-			// remove all artefacts that were bought (works for both cart and single)
-			setHiddenArtefactIds((ids) => [...ids, ...artefactsToBuy.map((a) => a.id)]);
-			// todo create receiving api route
-			// todo handle sending to api route
+
+			setHiddenArtefactIds((ids) => [...ids, artefact.id]);
+
+			// todo!! create receiving api route
+			// todo!! handle sending to api route
 			const genOrder = () => "#" + Math.random().toString(36).substring(2, 10).toUpperCase();
 			setOrderNumber(genOrder());
 			onClose();
 			setShowThankYouModal(true);
-			setCart((c) => c.filter((a) => !artefactsToBuy.map((x) => x.id).includes(a.id)));
 		}
 		const handleOverlayClick = (e: React.MouseEvent) => {
 			if (e.target === e.currentTarget) onClose();
 		};
 		return (
 			<div
-				className="fixed inset-0 bg-neutral-900 bg-opacity-60 flex justify-center items-center z-[12000]"
+				className="fixed inset-0 bg-neutral-900 bg-opacity-60 flex justify-center items-center z-10"
 				onClick={handleOverlayClick}
 			>
 				<div className="bg-white rounded-xl shadow-2xl max-w-md w-full p-6">
-					<h2 className="text-2xl font-bold mb-4">
-						Checkout {artefact ? artefact.name : artefactsToBuy.length + " item(s)"}
-						{!artefact && <span className="ml-1">({artefactsToBuy.map((x) => x.name).join(", ")})</span>}
-					</h2>
+					<h2 className="text-2xl font-bold mb-4">Buy {artefact.name}</h2>
+					{/* ...Image... */}
 					<form
 						onSubmit={(e) => {
 							e.preventDefault();
 							handlePay();
 						}}
 					>
-						{/* Email autofill */}
-						<input
-							className="w-full mb-2 px-3 py-2 border rounded"
-							placeholder="Email Address"
-							value={user?.email ? user.email : email}
-							onChange={(e) => setEmail(e.target.value)}
-							type="email"
-							required
-							autoFocus
-							disabled={!!user?.email}
-						/>
-						{user?.email && (
-							<p className="text-sm text-gray-500 mb-2">
-								Signed in as <span className="font-bold">{user.email}</span>
-							</p>
-						)}
+						{!user ? (
+							<input
+								className="w-full mb-2 px-3 py-2 border rounded"
+								placeholder="Email Address"
+								value={email}
+								onChange={(e) => setEmail(e.target.value)}
+								type="email"
+								required
+								autoFocus
+							/>
+						) : null}
 						<input
 							className="w-full mb-2 px-3 py-2 border rounded"
 							placeholder="Cardholder Name"
@@ -370,13 +266,6 @@ export default function Shop() {
 							Remember me
 						</label>
 						{error && <p className="text-red-600 mb-2">{error}</p>}
-						<div className="flex justify-between items-center mb-2">
-							<span className="font-bold">Total:</span>
-							<span className="text-lg font-bold">
-								{currencyTickers[selectedCurrency]}
-								{convertPrice(total, selectedCurrency)}
-							</span>
-						</div>
 						<div className="flex justify-end gap-2 mt-2">
 							<button type="button" onClick={onClose} className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md mr-2">
 								Cancel
@@ -421,28 +310,6 @@ export default function Shop() {
 			}}
 		>
 			<div className="absolute inset-0 bg-black bg-opacity-0 z-0"></div>
-			{/* --- Cart Button fixed at top right --- */}
-			<button
-				className="absolute top-6 right-6 z-[11000] bg-white border border-blue-500 shadow-lg rounded-full p-3 hover:bg-blue-100 flex flex-row items-center"
-				onClick={() => setShowCartModal(true)}
-				aria-label="Open your cart"
-			>
-				<span className="mr-2 font-bold">{cart.length || ""}</span>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					className="w-7 h-7 text-blue-600"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						strokeWidth={2}
-						d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13l-1.35 2.7a1 1 0 00.9 1.45h12.2M7 13l1.2-2.4M3 3l.01 0"
-					/>
-				</svg>
-			</button>
 			<div className="relative z-10 flex flex-col items-center w-full px-2 py-12">
 				<h1 className="text-4xl md:text-4xl font-bold text-center text-blue-300 mb-2 tracking-tight drop-shadow-lg">
 					Artefact Shop
@@ -453,7 +320,7 @@ export default function Shop() {
 				</p>
 				<div className="w-full max-w-7xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 p-2">
 					{currentArtefacts
-						.filter((x) => !hiddenArtefactIds.includes(x.id))
+						.filter((x) => !hiddenArtefactIds.includes(x.id) && x.isRequired === false)
 						.map((artefact) => (
 							<ArtefactCard key={artefact.id} artefact={artefact} />
 						))}
@@ -481,22 +348,19 @@ export default function Shop() {
 				</footer>
 			</div>
 			{selectedArtefact && <Modal artefact={selectedArtefact} />}
-			{showCartModal && <CartModal />}
-			{showPaymentModal && (cartCheckout || artefactToBuy) && (
+			{artefactToBuy && showPaymentModal && (
 				<PaymentModal
-					artefact={cartCheckout ? undefined : artefactToBuy!}
-					cartItems={cartCheckout ? cart : undefined}
+					artefact={artefactToBuy}
 					onClose={() => {
 						setShowPaymentModal(false);
 						setArtefactToBuy(null);
-						setCartCheckout(false);
 					}}
 				/>
 			)}
 			{showThankYouModal && orderNumber && (
 				<ThankYouModal orderNumber={orderNumber} onClose={() => setShowThankYouModal(false)} />
 			)}
-			{!selectedArtefact && !showPaymentModal && !showThankYouModal && !showCartModal && (
+			{!selectedArtefact && !showPaymentModal && !showThankYouModal && (
 				<div className="relative z-50">
 					<BottomFooter />
 				</div>