diff --git a/kente-krafters/src/components/ProductCard.jsx b/kente-krafters/src/components/ProductCard.jsx
index 70f4375..69f609e 100644
--- a/kente-krafters/src/components/ProductCard.jsx
+++ b/kente-krafters/src/components/ProductCard.jsx
@@ -5,7 +5,7 @@
  * content of the product card.
  */
 export function ProductCard({
-	id,
+	product_id,
 	product_name,
 	description,
 	price,
@@ -14,7 +14,10 @@ export function ProductCard({
 	seller_email,
 }) {
 	return (
-		<div className="rounded-lg  bg-card text-card-foreground  w-[334px]">
+		<div
+			id={product_id}
+			className="rounded-lg  bg-card text-card-foreground  w-[334px]"
+		>
 			<div className="flex flex-col space-y-1.5">
 				<img
 					src={image_link}
@@ -49,9 +52,7 @@ export function ProductCard({
 				<div className="text-lg font-bold">
 					{product_name} by&nbsp;{seller_email}
 				</div>
-				<div className="text-sm text-gray-500">
-					{description}
-				</div>
+				<div className="text-sm text-gray-500">{description}</div>
 				<div className="text-lg font-bold">${price}</div>
 			</div>
 		</div>
diff --git a/kente-krafters/src/pages/cart.jsx b/kente-krafters/src/pages/cart.jsx
new file mode 100644
index 0000000..ead0444
--- /dev/null
+++ b/kente-krafters/src/pages/cart.jsx
@@ -0,0 +1,148 @@
+import { useState } from "react";
+
+const Cart = () => {
+	const [quantity, setQuantity] = useState(1);
+	const [selectedSize, setSelectedSize] = useState("2-Yards"); // Default size
+	const [cart, setCart] = useState([]);
+
+	const handleSizeChange = (size) => {
+		setSelectedSize(size);
+	};
+
+	const handleQuantityChange = (amount) => {
+		setQuantity((prevQuantity) => Math.max(1, prevQuantity + amount));
+	};
+
+	const handleDeleteFromCart = (productId) => {
+		console.log("Deleting product with ID:", productId);
+
+		const updatedCart = cart.filter((product) => product.id !== productId);
+		console.log("Updated Cart:", updatedCart);
+
+		setCart(updatedCart);
+	};
+
+	const handleAddToCart = (product) => {
+		const updatedCart = [
+			...cart,
+			{
+				id: product.id,
+				name: product.name,
+				price: product.price,
+				quantity,
+				size: selectedSize,
+			},
+		];
+		setCart(updatedCart);
+		// Clear quantity for the next product
+		setQuantity(1);
+	};
+
+	const calculateTotal = () => {
+		return cart.reduce(
+			(total, product) => total + product.price * product.quantity,
+			0
+		);
+	};
+
+	const products = [
+		{
+			id: 1,
+			name: "Woven Kente Graduation Stole",
+			price: 300,
+			imageSrc: "heroImage1", // Replace with your actual image source
+		},
+		{
+			id: 2,
+			name: "Product 2",
+			price: 150,
+			imageSrc: "heroImage2", // Replace with your actual image source
+		},
+		{
+			id: 3,
+			name: "Product 3",
+			price: 200,
+			imageSrc: "heroImage3", // Replace with your actual image source
+		},
+	];
+
+	return (
+		<div className="max-w-screen-md mx-auto p-8">
+			{products.map((product) => (
+				<div
+					key={product.id}
+					className="flex items-center justify-between mb-8"
+				>
+					<div className="image">
+						<img
+							className="object-cover w-32 h-32"
+							src={product.imageSrc}
+							alt={product.name}
+						/>
+					</div>
+					<div className="product-details ml-8">
+						<div>
+							<h1 className="text-xl font-bold">
+								{product.name}
+							</h1>
+							<p className="text-gray-600">
+								Size: {selectedSize}
+							</p>
+						</div>
+						<div className="flex items-center mt-4">
+							<div className="text-gray-600">Quantity</div>
+							<div className="quantity-button ml-2">
+								<button
+									className="btn"
+									onClick={() => handleQuantityChange(-1)}
+								>
+									-
+								</button>
+								<input
+									type="text"
+									id="quantity"
+									className="quantity-input"
+									value={quantity}
+									readOnly
+								/>
+								<button
+									className="btn"
+									onClick={() => handleQuantityChange(1)}
+								>
+									+
+								</button>
+							</div>
+						</div>
+					</div>
+					<div className="price-and-button ml-8">
+						<div className="text-xl font-semibold">
+							${product.price}
+						</div>
+						<button
+							className="btn bg-red-500 text-white text-xs p-1 rounded-full focus:outline-none"
+							onClick={() => handleDeleteFromCart(product.id)}
+						>
+							Delete
+						</button>
+					</div>
+				</div>
+			))}
+			{/* Total Display */}
+			<div className="flex items-center justify-between mt-8">
+				<div className="text-xl font-bold">Total:</div>
+				<div className="text-xl font-semibold">${calculateTotal()}</div>
+			</div>
+			{/* Single "Pay Now" Button */}
+			<div className="mt-8">
+				<button
+					className="btn bg-black text-white"
+					onClick={() => alert("Payment logic for all products here")}
+				>
+					Pay Now
+				</button>
+			</div>
+		</div>
+	);
+};
+
+export default Cart;
diff --git a/kente-krafters/src/pages/checkout.jsx b/kente-krafters/src/pages/checkout.jsx
index 53360a2..0cf1af0 100644
--- a/kente-krafters/src/pages/checkout.jsx
+++ b/kente-krafters/src/pages/checkout.jsx
@@ -9,13 +9,33 @@ import { baseEndPoint } from "../../expressAPI/data";
 
 const CheckOut = () => {
 	// get the product id from the header parameters from the url
-	const productId = window.location.pathname.split("/")[-1];
+	const productId = window.location.pathname.split("/")[2];
+
 	// get the product data from the backend
 	const [product, setProduct] = useState({});
+	// useEffect(() => {
+	// 	// fetch the product data from the backend
+	// 	const fetchProduct = async () => {
+	// 		try {
+	// 			const response = await axios.get(
+	// 				`${baseEndPoint}product/${productId}`
+	// 			);
+	// 			const responseData =
+	// 				typeof response.data === "string"
+	// 					? JSON.parse(response.data)
+	// 					: response.data;
+	// 			setProduct(responseData);
+	// 		} catch (error) {
+	// 			console.error("Error fetching product:", error);
+	// 		}
+	// 	};
+
+	// 	fetchProduct();
+	// },
 	useEffect(() => {
-		// fetch the product data from the backend
 		const fetchProduct = async () => {
 			try {
+				console.log("Fetching product with ID:", productId);
 				const response = await axios.get(
 					`${baseEndPoint}product/${productId}`
 				);
@@ -28,13 +48,14 @@ const CheckOut = () => {
 				console.error("Error fetching product:", error);
 			}
 		};
+
 		fetchProduct();
-	}, [productId]);
+	}, [productId]); // Only include productId in the dependency array, not product
 
 	return (
 		<div className="max-w-screen-md mx-auto p-8 row">
 			<div className="col-md-4 image">
-				{product && (
+				{product && product[0] && (
 					<img
 						className="object-cover w-full h-48"
 						src={product[0].image_link}
@@ -45,7 +66,7 @@ const CheckOut = () => {
 			<main className="col-md-8">
 				<header>
 					<h1 className="text-2xl font-bold">
-						{product && product[0].product_name}
+						{product && product[0] && product[0].product_name}
 					</h1>
 					<p className="text-gray-600">
 						Graduation Stoles, Gifts, and Decoration
@@ -53,10 +74,10 @@ const CheckOut = () => {
 				</header>
 				<section className="product">
 					<h2 className="text-2xl font-semibold mt-4">
-						$ {product && product[0].price}
+						$ {product && product[0] && product[0].price}
 					</h2>
 					<p className="text-gray-600">
-						{product && product[0].description}
+						{product && product[0] && product[0].description}
 					</p>
 					<div className="pt-4 sizes">
 						<div className="text-gray-600">size</div>
diff --git a/kente-krafters/src/pages/kente.jsx b/kente-krafters/src/pages/kente.jsx
index daa7e4d..ec9734b 100644
--- a/kente-krafters/src/pages/kente.jsx
+++ b/kente-krafters/src/pages/kente.jsx
@@ -28,8 +28,11 @@ export default function KenteShopping() {
 		<>
 			<div className="fluid-grid">
 				{products.map((product) => (
-					<NavLink key={product.id} to={`/checkout/${product.id}`}>
-						<ProductCard key={product.id} {...product} />
+					<NavLink
+						key={product.product_id}
+						to={`/checkout/${product.product_id}`}
+					>
+						<ProductCard key={product.product_id} {...product} />
 					</NavLink>
 				))}
 			</div>