diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 3f768e8..4365800 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -1,48 +1,50 @@
 "use client";
 import Image from "next/image";
-import { Dispatch, SetStateAction, useCallback, useState, useEffect } from "react";
-import BottomFooter from "@components/BottomFooter";
+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";
 
 // todo hide from shop after purchase
 
 export default function Shop() {
-    const [artefacts, setArtefacts] = useState<ExtendedArtefact[]>([]);
-    const [loading, setLoading] = useState(true);
+	const [artefacts, setArtefacts] = useState<ExtendedArtefact[]>([]);
+	const [hiddenArtefactIds, setHiddenArtefactIds] = useState<number[]>([]);
+	const [loading, setLoading] = useState(true);
+	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 {
-                // todo only show only non-required artefacts
-                const res = await fetch("/api/artefacts");
-                const data = await res.json();
+	// 3. Fetch from your API route and map data to fit your existing fields
+	useEffect(() => {
+		async function fetchArtefacts() {
+			setLoading(true);
+			try {
+				// todo only show only non-required artefacts
+				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, // your database
-                    earthquakeID: a.earthquakeId?.toString() ?? "",
-                    observatory: a.type ?? "", // if you want to display type
-                    dateReleased: a.createdAt ? new Date(a.createdAt).toLocaleDateString() : "",
-                    image: "/artefactImages/" + (a.imageName || "NoImageFound.PNG"),
-                    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);
-            }
-        }
-        fetchArtefacts();
-    }, []);
+				const transformed = data.artefact.map((a: any) => ({
+					id: a.id,
+					name: a.name,
+					description: a.description,
+					location: a.warehouseArea, // your database
+					earthquakeID: a.earthquakeId?.toString() ?? "",
+					observatory: a.type ?? "", // if you want to display type
+					dateReleased: a.createdAt ? new Date(a.createdAt).toLocaleDateString() : "",
+					image: "/artefactImages/" + (a.imageName || "NoImageFound.PNG"),
+					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);
+			}
+		}
+		fetchArtefacts();
+	}, []);
 
 	const [currentPage, setCurrentPage] = useState(1);
 	const [selectedArtefact, setSelectedArtefact] = useState<Artefact | null>(null);
@@ -163,10 +165,15 @@ export default function Shop() {
 
 		function handlePay() {
 			setError("");
-			if (!validateEmail(email)) {
-				setError("Please enter a valid email ending");
+			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;
@@ -179,10 +186,13 @@ export default function Shop() {
 				setError("CVC must be 3 or 4 digits.");
 				return;
 			}
+
+			setHiddenArtefactIds((ids) => [...ids, artefact.id]);
+
 			// todo create receiving api route
 			// todo handle sending to api route
-            // todo only ask for email if the user is not signed in
-            // todo (optional) add create account button to auto-fill email in sign-up modal
+			// todo only ask for email if the user is not signed in
+			// todo (optional) add create account button to auto-fill email in sign-up modal
 			const genOrder = () => "#" + Math.random().toString(36).substring(2, 10).toUpperCase();
 			setOrderNumber(genOrder());
 			onClose();
@@ -205,15 +215,17 @@ export default function Shop() {
 							handlePay();
 						}}
 					>
-						<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
-						/>
+						{!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"
@@ -305,13 +317,15 @@ export default function Shop() {
 					Artefact Shop
 				</h1>
 				<p className="text-lg md:text-xl text-center text-white mb-10 drop-shadow-md max-w-2xl">
-					Discover extraordinary artefacts and collectibles from major seismic events from around the world - Previously studied by our scientists, now
-					available for purchase.
+					Discover extraordinary artefacts and collectibles from major seismic events from around the world - Previously studied
+					by our scientists, now available for purchase.
 				</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.map((artefact) => (
-						<ArtefactCard key={artefact.id} artefact={artefact} />
-					))}
+					{currentArtefacts
+						.filter((x) => !hiddenArtefactIds.includes(x.id))
+						.map((artefact) => (
+							<ArtefactCard key={artefact.id} artefact={artefact} />
+						))}
 				</div>
 				<footer className="mt-10 bg-white bg-opacity-90 border-neutral-300 py-3 text-center flex justify-center items-center w-100 max-w-7xl rounded-lg">
 					<button
@@ -348,10 +362,11 @@ export default function Shop() {
 			{showThankYouModal && orderNumber && (
 				<ThankYouModal orderNumber={orderNumber} onClose={() => setShowThankYouModal(false)} />
 			)}
-            {!selectedArtefact && !showPaymentModal && !showThankYouModal && (
-            <div className="relative z-50">
-                <BottomFooter />
-            </div>
-    )}
-  </div>
-);
\ No newline at end of file
+			{!selectedArtefact && !showPaymentModal && !showThankYouModal && (
+				<div className="relative z-50">
+					<BottomFooter />
+				</div>
+			)}
+		</div>
+	);
+}