diff --git a/.gitignore b/.gitignore
index ad46469..6f77611 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,6 @@ yarn-error.log*
 
 # Storybook
 storybook-static
+
+# Instructions folder
+instructions/
diff --git a/apps/snfoundry/scripts-ts/helpers/error-handler.ts b/apps/snfoundry/scripts-ts/helpers/error-handler.ts
index e4b20cb..1beb0b1 100644
--- a/apps/snfoundry/scripts-ts/helpers/error-handler.ts
+++ b/apps/snfoundry/scripts-ts/helpers/error-handler.ts
@@ -1,108 +1,113 @@
-import { Provider } from "starknet";
-import { DeploymentError, DeploymentErrorType, RetryConfig, Networks } from "../types";
+import type { Provider } from "starknet";
+import {
+	DeploymentError,
+	DeploymentErrorType,
+	Networks,
+	type RetryConfig,
+} from "../types";
 
 class Logger {
-    private formatMessage(level: string, message: any): string {
-        const timestamp = new Date().toISOString();
-        return `[${timestamp}] ${level}: ${typeof message === 'string' ? message : JSON.stringify(message)}`;
-    }
-
-    info(message: any): void {
-        console.log(this.formatMessage('INFO', message));
-    }
-
-    warn(message: any): void {
-        console.warn(this.formatMessage('WARN', message));
-    }
-
-    error(message: any): void {
-        console.error(this.formatMessage('ERROR', message));
-    }
+	private formatMessage(level: string, message: unknown): string {
+		const timestamp = new Date().toISOString();
+		return `[${timestamp}] ${level}: ${typeof message === "string" ? message : JSON.stringify(message)}`;
+	}
+
+	info(message: unknown): void {
+		console.log(this.formatMessage("INFO", message));
+	}
+
+	warn(message: unknown): void {
+		console.warn(this.formatMessage("WARN", message));
+	}
+
+	error(message: unknown): void {
+		console.error(this.formatMessage("ERROR", message));
+	}
 }
 
 export const logger = new Logger();
 
 const defaultRetryConfig: RetryConfig = {
-    maxAttempts: 3,
-    initialDelay: 1000,
-    maxDelay: 10000,
-    factor: 2
+	maxAttempts: 3,
+	initialDelay: 1000,
+	maxDelay: 10000,
+	factor: 2,
 };
 
 export async function withRetry<T>(
-    operation: () => Promise<T>,
-    config: RetryConfig = defaultRetryConfig,
-    context: string
+	operation: () => Promise<T>,
+	context: string,
+	config: RetryConfig = defaultRetryConfig,
 ): Promise<T> {
-    let delay = config.initialDelay;
-    let attempt = 0;
-
-    while (attempt < config.maxAttempts) {
-        try {
-            return await operation();
-        } catch (error: any) {
-            attempt++;
-
-            const errorType = classifyStarknetError(error);
-            logger.warn({
-                message: `Retry attempt ${attempt}/${config.maxAttempts} for ${context}`,
-                error: error.message,
-                type: errorType
-            });
-
-            if (attempt === config.maxAttempts || !isRetryableError(errorType)) {
-                throw new DeploymentError(errorType, error.message);
-            }
-
-            await sleep(delay);
-            delay = Math.min(delay * config.factor, config.maxDelay);
-        }
-    }
-
-    throw new DeploymentError(
-        DeploymentErrorType.UNKNOWN_ERROR,
-        `Max retry attempts (${config.maxAttempts}) reached for ${context}`
-    );
+	let delay = config.initialDelay;
+	let attempt = 1;
+
+	while (attempt <= config.maxAttempts) {
+		try {
+			return await operation();
+		} catch (error: unknown) {
+			attempt++;
+
+			const errorType = classifyStarknetError(error as Error);
+			logger.warn({
+				message: `Retry attempt ${attempt}/${config.maxAttempts} for ${context}`,
+				error: (error as Error).message,
+				type: errorType,
+			});
+
+			if (attempt === config.maxAttempts || !isRetryableError(errorType)) {
+				throw new DeploymentError(errorType, (error as Error).message);
+			}
+
+			await sleep(delay);
+			delay = Math.min(delay * config.factor, config.maxDelay);
+		}
+	}
+
+	throw new DeploymentError(
+		DeploymentErrorType.UNKNOWN_ERROR,
+		`Max retry attempts (${config.maxAttempts}) reached for ${context}`,
+	);
 }
 
-function classifyStarknetError(error: any): DeploymentErrorType {
-    const errorMsg = error.message.toLowerCase();
-
-    if (errorMsg.includes("insufficient max fee")) {
-        return DeploymentErrorType.GAS_ERROR;
-    }
-    if (errorMsg.includes("invalid transaction nonce")) {
-        return DeploymentErrorType.NONCE_ERROR;
-    }
-    if (errorMsg.includes("network") || errorMsg.includes("timeout")) {
-        return DeploymentErrorType.NETWORK_ERROR;
-    }
-    if (errorMsg.includes("contract") || errorMsg.includes("class hash")) {
-        return DeploymentErrorType.CONTRACT_ERROR;
-    }
-    if (errorMsg.includes("invalid") || errorMsg.includes("validation")) {
-        return DeploymentErrorType.VALIDATION_ERROR;
-    }
-    return DeploymentErrorType.UNKNOWN_ERROR;
+function classifyStarknetError(error: Error): DeploymentErrorType {
+	const errorMsg = error.message.toLowerCase();
+
+	if (errorMsg.includes("insufficient max fee")) {
+		return DeploymentErrorType.GAS_ERROR;
+	}
+	if (errorMsg.includes("invalid transaction nonce")) {
+		return DeploymentErrorType.NONCE_ERROR;
+	}
+	if (errorMsg.includes("network") || errorMsg.includes("timeout")) {
+		return DeploymentErrorType.NETWORK_ERROR;
+	}
+	if (errorMsg.includes("contract") || errorMsg.includes("class hash")) {
+		return DeploymentErrorType.CONTRACT_ERROR;
+	}
+	if (errorMsg.includes("invalid") || errorMsg.includes("validation")) {
+		return DeploymentErrorType.VALIDATION_ERROR;
+	}
+	return DeploymentErrorType.UNKNOWN_ERROR;
 }
 
 function isRetryableError(errorType: DeploymentErrorType): boolean {
-    return [
-        DeploymentErrorType.NETWORK_ERROR,
-        DeploymentErrorType.GAS_ERROR,
-        DeploymentErrorType.NONCE_ERROR
-    ].includes(errorType);
+	return [
+		DeploymentErrorType.NETWORK_ERROR,
+		DeploymentErrorType.GAS_ERROR,
+		DeploymentErrorType.NONCE_ERROR,
+	].includes(errorType);
 }
 
 export async function validateNetwork(provider: Provider): Promise<void> {
-    try {
-        await provider.getChainId();
-    } catch (error) {
-        throw new DeploymentError(
-            DeploymentErrorType.NETWORK_ERROR,
-            "Failed to validate network connection"
-        );
-    }
+	try {
+		await provider.getChainId();
+	} catch (error) {
+		throw new DeploymentError(
+			DeploymentErrorType.NETWORK_ERROR,
+			"Failed to validate network connection",
+		);
+	}
 }
 
-const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
\ No newline at end of file
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
diff --git a/apps/snfoundry/scripts-ts/types.ts b/apps/snfoundry/scripts-ts/types.ts
index f77e080..3f94827 100644
--- a/apps/snfoundry/scripts-ts/types.ts
+++ b/apps/snfoundry/scripts-ts/types.ts
@@ -29,7 +29,7 @@ export class DeploymentError extends Error {
 		public type: DeploymentErrorType,
 		message: string,
 		public txHash?: string,
-		public contractAddress?: string
+		public contractAddress?: string,
 	) {
 		super(message);
 		this.name = "DeploymentError";
@@ -45,7 +45,7 @@ export interface RetryConfig {
 
 export interface TransactionQueueItem {
 	id: string;
-	execute: () => Promise<any>;
+	execute: () => Promise<unknown>;
 	priority: number;
 	network: keyof Networks;
 	dependencies?: string[];
diff --git a/apps/web/package.json b/apps/web/package.json
index 74ccc86..4941ada 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -22,7 +22,7 @@
 	},
 	"dependencies": {
 		"@auth/prisma-adapter": "^1.6.0",
-		"@prisma/client": "^6.2.1",
+		"@prisma/client": "5.22.0",
 		"@repo/ui": "*",
 		"@starknet-react/chains": "^0.1.7",
 		"@starknet-react/core": "^2.9.0",
diff --git a/apps/web/src/app/_components/features/OrderListItem.tsx b/apps/web/src/app/_components/features/OrderListItem.tsx
index 2232305..8ff21ac 100644
--- a/apps/web/src/app/_components/features/OrderListItem.tsx
+++ b/apps/web/src/app/_components/features/OrderListItem.tsx
@@ -21,16 +21,15 @@ export default function OrderListItem({
 	const { t } = useTranslation();
 
 	return (
-		<Link href="#" onClick={onClick} className="block">
-			<div
-				className="flex items-center justify-between py-4"
-				onKeyDown={(e) => {
-					if (e.key === "Enter" || e.key === " ") {
+		<Link href="#" className="block">
+			<button
+				type="button"
+				onClick={() => {
+					if (onClick) {
 						onClick();
 					}
 				}}
-				role="button"
-				tabIndex={0}
+				className="flex w-full cursor-pointer items-center justify-between p-4 hover:bg-gray-50"
 			>
 				<div className="flex items-center space-x-4">
 					<Image
@@ -57,7 +56,7 @@ export default function OrderListItem({
 					</span>
 					<ChevronRightIcon className="text-content-body-default w-5 h-5" />
 				</div>
-			</div>
+			</button>
 		</Link>
 	);
 }
diff --git a/apps/web/src/app/_components/features/ProductCatalog.tsx b/apps/web/src/app/_components/features/ProductCatalog.tsx
index a423ea8..c882cc1 100755
--- a/apps/web/src/app/_components/features/ProductCatalog.tsx
+++ b/apps/web/src/app/_components/features/ProductCatalog.tsx
@@ -86,7 +86,7 @@ export default function ProductCatalog() {
 				farmName={metadata?.farmName ?? ""}
 				variety={t(product.name)}
 				price={product.price}
-				badgeText={t(`strength.${metadata?.strength.toLowerCase()}`)}
+				badgeText={t(`strength.${metadata?.strength?.toLowerCase()}`)}
 				onClick={() => accessProductDetails(product.id)}
 			/>
 		);
diff --git a/apps/web/src/app/_components/features/ProductDetails.tsx b/apps/web/src/app/_components/features/ProductDetails.tsx
index 41a0ab0..329ea5b 100644
--- a/apps/web/src/app/_components/features/ProductDetails.tsx
+++ b/apps/web/src/app/_components/features/ProductDetails.tsx
@@ -9,6 +9,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { addItemAtom, cartItemsAtom } from "~/store/cartAtom";
+import { api } from "~/trpc/react";
 import { ProducerInfo } from "./ProducerInfo";
 import { SelectionTypeCard } from "./SelectionTypeCard";
 
@@ -45,27 +46,35 @@ export default function ProductDetails({ product }: ProductDetailsProps) {
 	const [isLiked, setIsLiked] = useState(false);
 	const router = useRouter();
 	const [isAddingToCart, setIsAddingToCart] = useState(false);
-	const [, addItem] = useAtom(addItemAtom);
-	const items = useAtomValue(cartItemsAtom);
-	const cartItemsCount = items.reduce(
-		(total, item) => total + item.quantity,
-		0,
-	);
+	const { data: cart, refetch: refetchCart } = api.cart.getUserCart.useQuery();
+	const { mutate: addToCart } = api.cart.addToCart.useMutation({
+		onSuccess: () => {
+			void refetchCart();
+		},
+	});
+	const cartItemsCount =
+		cart?.items?.reduce((total, item) => total + item.quantity, 0) ?? 0;
 
 	const isSoldOut = type === "SoldOut";
 	const isFarmer = type === "Farmer";
 
 	const handleAddToCart = () => {
 		setIsAddingToCart(true);
-		addItem({
-			id: String(product.id),
-			tokenId: product.tokenId,
-			name: product.name,
-			quantity: quantity,
-			price: product.price,
-			imageUrl: product.image,
-		});
-		setIsAddingToCart(false);
+		addToCart(
+			{
+				productId: product.id,
+				quantity: quantity,
+			},
+			{
+				onSuccess: () => {
+					setIsAddingToCart(false);
+				},
+				onError: () => {
+					setIsAddingToCart(false);
+					// TODO: Show error toast
+				},
+			},
+		);
 	};
 
 	return (
diff --git a/apps/web/src/app/_components/features/ProfileCard.tsx b/apps/web/src/app/_components/features/ProfileCard.tsx
index 52e6337..8e27c42 100644
--- a/apps/web/src/app/_components/features/ProfileCard.tsx
+++ b/apps/web/src/app/_components/features/ProfileCard.tsx
@@ -1,13 +1,19 @@
+import dynamic from "next/dynamic";
 import Image from "next/image";
 import { useTranslation } from "react-i18next";
 
+const BlockiesSvg = dynamic<{ address: string; size: number; scale: number }>(
+	() => import("blockies-react-svg"),
+	{ ssr: false },
+);
+
 type Badge = "lover" | "contributor" | "producer";
 
 type UserProfile = {
 	name: string;
 	country: string;
 	memberSince: number;
-	thumbnailUrl: string;
+	walletAddress: string;
 	badges: Badge[];
 };
 
@@ -21,41 +27,47 @@ function ProfileCard({ user }: ProfileCardProps) {
 	// Define all badges and their translation keys
 	const allBadges: Badge[] = ["lover", "contributor", "producer"];
 
+	// Format country name for display
+	const formattedCountry = user.country.replace("_", " ");
+
 	return (
 		<div className="overflow-hidden mb-6 bg-[url('/images/user-profile/bg-coffee-beans.svg')] pt-9 bg-repeat-y bg-top">
-			<div className="h-30 relative rounded-t-lg">
+			<div className="relative rounded-t-lg">
 				<div className="absolute inset-0 bg-surface-primary-default/90 rounded-t-lg" />
-				<div className="relative z-10 h-full p-6 flex items-center justify-center text-surface-inverse">
-					<Image
-						src={user.thumbnailUrl}
-						alt={user.name}
-						width={80}
-						height={80}
-						className="rounded-full mr-8"
-					/>
-					<div className="flex flex-col space-y-2">
-						<h2 className="text-2xl font-semibold h-[1.875rem]">{user.name}</h2>
-						<p className="h-5">{user.country}</p>
-						<p className="h-5">
-							{t("since")} {user.memberSince}
-						</p>
+				<div className="relative z-10 p-4 sm:p-6 flex items-center justify-center text-surface-inverse">
+					<div className="flex flex-col items-center space-y-4">
+						{/* Blockie Avatar */}
+						<div className="rounded-full overflow-hidden relative w-20 h-20 mb-2">
+							<BlockiesSvg address={user.walletAddress} size={20} scale={4} />
+						</div>
+						<div className="flex flex-col items-center space-y-2">
+							<h2 className="text-xl sm:text-2xl font-semibold h-[1.875rem]">
+								{user.name}
+							</h2>
+							<p className="text-sm sm:text-base h-5 capitalize">
+								{formattedCountry}
+							</p>
+							<p className="text-sm sm:text-base h-5">
+								{t("since")} {user.memberSince}
+							</p>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div className="bg-surface-primary-soft py-6 px-6 flex justify-around rounded-b-lg">
+			<div className="bg-surface-primary-soft py-4 sm:py-6 px-4 sm:px-6 flex justify-around rounded-b-lg">
 				{allBadges.map((badge) => (
 					<div key={badge} className="flex flex-col items-center">
 						<Image
 							src={`/images/user-profile/badges/${badge}.svg`}
 							alt={badge}
-							width={40}
-							height={40}
+							width={32}
+							height={32}
 							className={`${
 								user.badges.includes(badge) ? "" : "grayscale"
-							} mb-1`}
+							} mb-1 sm:w-[40px] sm:h-[40px]`}
 						/>
 						{/* Translate the badge name */}
-						<p className="text-sm">{t(badge)}</p>
+						<p className="text-xs sm:text-sm">{t(badge)}</p>
 					</div>
 				))}
 			</div>
diff --git a/apps/web/src/app/_components/features/ShoppingCart.tsx b/apps/web/src/app/_components/features/ShoppingCart.tsx
index 5094da5..9055de9 100644
--- a/apps/web/src/app/_components/features/ShoppingCart.tsx
+++ b/apps/web/src/app/_components/features/ShoppingCart.tsx
@@ -1,10 +1,9 @@
 "use client";
 
 import { XMarkIcon } from "@heroicons/react/24/solid";
-import { useAtom, useAtomValue } from "jotai";
 import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
-import { cartItemsAtom, removeItemAtom } from "~/store/cartAtom";
+import { api } from "~/trpc/react";
 
 interface ShoppingCartProps {
 	closeCart: () => void;
@@ -13,11 +12,17 @@ interface ShoppingCartProps {
 export default function ShoppingCart({ closeCart }: ShoppingCartProps) {
 	const { t } = useTranslation();
 	const router = useRouter();
-	const items = useAtomValue(cartItemsAtom);
-	const [, removeItem] = useAtom(removeItemAtom);
 
-	const handleRemoveItem = (itemId: string) => {
-		removeItem(itemId);
+	// Get cart data from server
+	const { data: cart, refetch: refetchCart } = api.cart.getUserCart.useQuery();
+	const { mutate: removeFromCart } = api.cart.removeFromCart.useMutation({
+		onSuccess: () => {
+			void refetchCart();
+		},
+	});
+
+	const handleRemoveItem = (cartItemId: string) => {
+		removeFromCart({ cartItemId });
 	};
 
 	const handleCheckout = () => {
@@ -25,10 +30,11 @@ export default function ShoppingCart({ closeCart }: ShoppingCartProps) {
 		router.push("/shopping-cart");
 	};
 
-	const totalPrice = items.reduce(
-		(total, item) => total + item.price * item.quantity,
-		0,
-	);
+	const totalPrice =
+		cart?.items.reduce(
+			(total, item) => total + item.product.price * item.quantity,
+			0,
+		) ?? 0;
 
 	return (
 		<div className="absolute right-0 top-14 w-96 bg-white p-4 shadow-xl">
@@ -39,10 +45,10 @@ export default function ShoppingCart({ closeCart }: ShoppingCartProps) {
 				</button>
 			</div>
 			<div className="mt-4 flex flex-col gap-4">
-				{items.map((item) => (
+				{cart?.items.map((item) => (
 					<div key={item.id} className="flex items-center justify-between">
-						<p>{item.name}</p>
-						<p>${item.price}</p>
+						<p>{item.product.name}</p>
+						<p>${item.product.price}</p>
 						<button onClick={() => handleRemoveItem(item.id)} type="button">
 							{t("remove")}
 						</button>
diff --git a/apps/web/src/app/_components/layout/Main.tsx b/apps/web/src/app/_components/layout/Main.tsx
index c50e705..76e6671 100644
--- a/apps/web/src/app/_components/layout/Main.tsx
+++ b/apps/web/src/app/_components/layout/Main.tsx
@@ -6,8 +6,11 @@ export default function Main({ children }: MainProps) {
 	return (
 		<>
 			{/* <SiteHead /> */}
-			<div className="font-manrope min-h-screen mx-auto w-full max-w-md bg-white flex items-center justify-center">
-				<div className="w-full mb-auto">{children}</div>
+			<div className="font-manrope min-h-screen mx-auto w-full bg-white">
+				{/* Responsive container with proper breakpoints */}
+				<div className="w-full max-w-[100vw] sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl mx-auto">
+					<div className="w-full mb-auto">{children}</div>
+				</div>
 			</div>
 		</>
 	);
diff --git a/apps/web/src/app/_components/ui/Spinner.tsx b/apps/web/src/app/_components/ui/Spinner.tsx
index f6fbbdf..f9f9d56 100644
--- a/apps/web/src/app/_components/ui/Spinner.tsx
+++ b/apps/web/src/app/_components/ui/Spinner.tsx
@@ -4,10 +4,10 @@ interface SpinnerProps {
 
 export default function Spinner({ className = "" }: SpinnerProps) {
 	return (
-		<div role="status">
+		<output role="status" aria-live="polite" className={className}>
 			<svg
 				aria-hidden="true"
-				className={`dark:text-secondaryfill-primary h-4 w-4 animate-spin text-secondary ${className}`}
+				className="h-8 w-8 animate-spin text-gray-200 dark:text-gray-600"
 				viewBox="0 0 100 101"
 				fill="none"
 				xmlns="http://www.w3.org/2000/svg"
@@ -22,6 +22,6 @@ export default function Spinner({ className = "" }: SpinnerProps) {
 				/>
 			</svg>
 			<span className="sr-only">Loading...</span>
-		</div>
+		</output>
 	);
 }
diff --git a/apps/web/src/app/marketplace/page.tsx b/apps/web/src/app/marketplace/page.tsx
index bd9b663..f7cd1a1 100755
--- a/apps/web/src/app/marketplace/page.tsx
+++ b/apps/web/src/app/marketplace/page.tsx
@@ -42,11 +42,7 @@ export default function Home() {
 			<Header address={address} disconnect={disconnect} showCart={true} />
 			<SearchBar />
 
-			{query.length <= 0 && (
-				<>
-					<Carousel cards={carouselData} />
-				</>
-			)}
+			{query.length <= 0 && <Carousel cards={carouselData} />}
 			<ProductCatalog />
 		</Main>
 	);
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index e04f9d2..4d6ef6f 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import "../i18n";
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
 import Button from "@repo/ui/button";
 import { H1, Text } from "@repo/ui/typography";
 import {
@@ -13,6 +14,7 @@ import {
 import { motion, useAnimation } from "framer-motion";
 import { signIn, signOut } from "next-auth/react";
 import { useSession } from "next-auth/react";
+import Image from "next/image";
 import { redirect } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -181,19 +183,20 @@ export default function LoginPage() {
 												<Button
 													key={connector.id}
 													onClick={() => handleConnectWallet(connector)}
-													variant="primary"
-													size="lg"
-													className="w-full max-w-[15rem] px-4 py-3 text-content-title text-base font-medium font-inter rounded-lg border border-surface-secondary-default transition-all duration-300 hover:bg-surface-secondary-hover"
+													className="w-full"
 												>
-													<div className="flex items-center space-x-2">
-														<span>
-															{t("connect_wallet", {
-																walletName:
-																	connector.id === "argentX"
-																		? t("argent_x")
-																		: connector.name,
-															})}
-														</span>
+													<div className="flex items-center justify-between">
+														<div className="flex items-center">
+															<Image
+																src={`/images/wallets/${connector.id}.svg`}
+																alt={connector.id}
+																width={24}
+																height={24}
+																className="mr-2"
+															/>
+															<span>{t(`wallets.${connector.id}`)}</span>
+														</div>
+														<ChevronRightIcon className="h-5 w-5" />
 													</div>
 												</Button>
 											))}
diff --git a/apps/web/src/app/shopping-cart/page.tsx b/apps/web/src/app/shopping-cart/page.tsx
index 5b167cd..f08d27d 100644
--- a/apps/web/src/app/shopping-cart/page.tsx
+++ b/apps/web/src/app/shopping-cart/page.tsx
@@ -3,13 +3,11 @@
 import { ArrowLeftIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { useAccount } from "@starknet-react/core";
 import { useProvider } from "@starknet-react/core";
-import { useAtom, useAtomValue } from "jotai";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { cartItemsAtom, removeItemAtom } from "~/store/cartAtom";
-import type { CartItem } from "~/store/cartAtom";
+import { api } from "~/trpc/react";
 import {
 	ContractsError,
 	ContractsInterface,
@@ -17,7 +15,6 @@ import {
 	useMarketplaceContract,
 	useStarkContract,
 } from "../../services/contractsInterface";
-//import { api } from "~/trpc/server";
 
 interface DeleteModalProps {
 	isOpen: boolean;
@@ -64,11 +61,19 @@ function DeleteConfirmationModal({
 	);
 }
 
+interface NftMetadata {
+	description: string;
+	imageUrl: string;
+	imageAlt: string;
+	region?: string;
+	farmName?: string;
+	strength?: string;
+}
+
 export default function ShoppingCart() {
 	const router = useRouter();
-	const items = useAtomValue(cartItemsAtom);
-	const [, removeItem] = useAtom(removeItemAtom);
-	const [itemToDelete, setItemToDelete] = useState<CartItem | null>(null);
+	const { t } = useTranslation();
+	const [itemToDelete, setItemToDelete] = useState<string | null>(null);
 	const { provider } = useProvider();
 	const contract = new ContractsInterface(
 		useAccount(),
@@ -77,14 +82,23 @@ export default function ShoppingCart() {
 		useStarkContract(),
 		provider,
 	);
-	const { t } = useTranslation();
-	const handleRemove = (item: CartItem) => {
-		setItemToDelete(item);
+
+	// Get cart data from server
+	const { data: cart, refetch: refetchCart } = api.cart.getUserCart.useQuery();
+	const { mutate: removeFromCart } = api.cart.removeFromCart.useMutation({
+		onSuccess: () => {
+			void refetchCart();
+		},
+	});
+	const { mutate: clearCart } = api.cart.clearCart.useMutation();
+
+	const handleRemove = (cartItemId: string) => {
+		setItemToDelete(cartItemId);
 	};
 
 	const confirmDelete = () => {
 		if (itemToDelete) {
-			removeItem(itemToDelete.id);
+			removeFromCart({ cartItemId: itemToDelete });
 			setItemToDelete(null);
 		}
 	};
@@ -94,8 +108,15 @@ export default function ShoppingCart() {
 	};
 
 	const handleBuy = async () => {
-		const token_ids = items.map((item) => item.tokenId);
-		const token_amounts = items.map((item) => item.quantity);
+		if (!cart) return;
+
+		const token_ids = cart.items.map((item) => item.product.tokenId);
+		const token_amounts = cart.items.map((item) => item.quantity);
+		const totalPrice = cart.items.reduce(
+			(total, item) => total + item.product.price * item.quantity,
+			0,
+		);
+
 		console.log("buying items", token_ids, token_amounts, totalPrice);
 		try {
 			const tx_hash = await contract.buy_product(
@@ -104,9 +125,9 @@ export default function ShoppingCart() {
 				totalPrice,
 			);
 			alert(`Items bought successfully tx hash: ${tx_hash}`);
-			for (const item of items) {
-				removeItem(item.id);
-			}
+			// Clear cart after successful purchase
+			clearCart();
+			void refetchCart();
 		} catch (error) {
 			if (error instanceof ContractsError) {
 				alert(error.message);
@@ -115,10 +136,23 @@ export default function ShoppingCart() {
 		}
 	};
 
-	const totalPrice = items.reduce(
-		(total, item) => total + item.price * item.quantity,
-		0,
-	);
+	const totalPrice =
+		cart?.items.reduce(
+			(total, item) => total + item.product.price * item.quantity,
+			0,
+		) ?? 0;
+
+	const getImageUrl = (nftMetadata: unknown): string => {
+		if (typeof nftMetadata !== "string") return "/images/default.webp";
+		try {
+			const metadata = JSON.parse(nftMetadata) as NftMetadata;
+			return metadata.imageUrl;
+		} catch {
+			return "/images/default.webp";
+		}
+	};
+
+	const hasItems = Boolean(cart?.items && cart.items.length > 0);
 
 	return (
 		<div className="max-w-md mx-auto bg-white min-h-screen">
@@ -135,26 +169,28 @@ export default function ShoppingCart() {
 			</div>
 
 			<div className="px-4">
-				{items.length === 0 ? (
+				{!hasItems ? (
 					<div className="py-8 text-center text-gray-500">
 						{t("cart_empty_message")}
 					</div>
 				) : (
-					items.map((item) => (
+					cart?.items.map((item) => (
 						<div
 							key={item.id}
 							className="py-4 flex items-center justify-between border-b"
 						>
 							<div className="flex items-center gap-3">
 								<Image
-									src={item.imageUrl}
-									alt={item.name}
+									src={getImageUrl(item.product.nftMetadata)}
+									alt={item.product.name}
 									width={48}
 									height={48}
 									className="rounded-lg object-cover bg-gray-100"
 								/>
 								<div>
-									<h3 className="font-medium text-gray-900">{t(item.name)}</h3>
+									<h3 className="font-medium text-gray-900">
+										{t(item.product.name)}
+									</h3>
 									<p className="text-gray-400 text-sm">
 										{t("quantity_label")}: {item.quantity}
 									</p>
@@ -162,13 +198,13 @@ export default function ShoppingCart() {
 							</div>
 							<div className="flex items-center gap-4">
 								<span className="text-gray-900">
-									{item.price * item.quantity} USD
+									{item.product.price * item.quantity} USD
 								</span>
 								<button
 									type="button"
-									onClick={() => handleRemove(item)}
+									onClick={() => handleRemove(item.id)}
 									className="text-red-500 hover:text-red-600"
-									aria-label={`Remove ${item.name} from cart`}
+									aria-label={`Remove ${item.product.name} from cart`}
 								>
 									<TrashIcon className="h-5 w-5" />
 								</button>
@@ -178,7 +214,7 @@ export default function ShoppingCart() {
 				)}
 			</div>
 
-			{items.length > 0 && (
+			{hasItems && (
 				<>
 					<div className="px-4 py-4">
 						<div className="flex items-center justify-between">
diff --git a/apps/web/src/app/user-profile/page.tsx b/apps/web/src/app/user-profile/page.tsx
index 9edc9a8..3c7ab7f 100644
--- a/apps/web/src/app/user-profile/page.tsx
+++ b/apps/web/src/app/user-profile/page.tsx
@@ -1,47 +1,82 @@
 "use client";
 
-import PageHeader from "@repo/ui/pageHeader";
 import { useAccount, useDisconnect } from "@starknet-react/core";
+import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect } from "react";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { ProfileCard } from "~/app/_components/features/ProfileCard";
 import { ProfileOptions } from "~/app/_components/features/ProfileOptions";
+import Header from "~/app/_components/layout/Header";
 import Main from "~/app/_components/layout/Main";
-import type { UserProfileType } from "~/types";
+import { api } from "~/trpc/react";
+
+type Badge = "lover" | "contributor" | "producer";
 
 export default function UserProfile() {
 	const { t } = useTranslation();
 	const { address } = useAccount();
 	const { disconnect } = useDisconnect();
+	const router = useRouter();
+	const { data: session, status } = useSession();
+	const userId = session?.user?.id;
 
-	const [user] = useState<UserProfileType>({
-		name: "John Doe",
-		country: "united_states",
-		memberSince: 2020,
-		thumbnailUrl: "/images/user-profile/avatar.svg",
-		badges: ["lover", "contributor"],
-	});
+	const { data: user, isLoading } = api.user.getUser.useQuery(
+		{ userId: userId ?? "" },
+		{
+			enabled: !!userId,
+			retry: false,
+		},
+	);
 
-	const router = useRouter();
+	// Handle errors with useEffect
+	useEffect(() => {
+		if (!user && !isLoading && status === "authenticated") {
+			toast.error(t("error_fetching_profile"));
+			router.push("/");
+		}
+	}, [user, isLoading, router, t, status]);
+
+	// Handle session status
+	useEffect(() => {
+		if (status === "unauthenticated") {
+			router.push("/");
+		}
+	}, [status, router]);
+
+	// Show loading state
+	if (status === "loading" || isLoading) {
+		return (
+			<Main>
+				<div className="container mx-auto px-4 py-8">
+					<Header address={address} disconnect={disconnect} />
+					<div className="animate-pulse">
+						<div className="h-48 bg-gray-200 rounded-lg mb-6" />
+					</div>
+				</div>
+			</Main>
+		);
+	}
+
+	// Return null if no user data
+	if (!user || status === "unauthenticated") {
+		return null;
+	}
+
+	const userProfile = {
+		name: user.name ?? t("unnamed_user"),
+		country: "costa_rica",
+		memberSince: new Date(user.createdAt).getFullYear(),
+		walletAddress: user.walletAddress,
+		badges: ["lover", "contributor"] as Badge[],
+	};
 
 	return (
 		<Main>
 			<div className="container mx-auto px-4 py-8">
-				<PageHeader
-					title={t("user_profile")}
-					userAddress={address}
-					onLogout={disconnect}
-					showBackButton
-					onBackClick={() => router.back()}
-					showBlockie={false}
-				/>
-				<ProfileCard
-					user={{
-						...user,
-						country: t(user.country),
-					}}
-				/>
+				<Header address={address} disconnect={disconnect} />
+				<ProfileCard user={userProfile} />
 				<ProfileOptions />
 			</div>
 		</Main>
diff --git a/apps/web/src/app/user/edit-profile/my-profile/page.tsx b/apps/web/src/app/user/edit-profile/my-profile/page.tsx
index fc855ab..9ae1e60 100644
--- a/apps/web/src/app/user/edit-profile/my-profile/page.tsx
+++ b/apps/web/src/app/user/edit-profile/my-profile/page.tsx
@@ -3,8 +3,11 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import Button from "@repo/ui/button";
 import InputField from "@repo/ui/form/inputField";
-import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { ProfileOptionLayout } from "~/app/_components/features/ProfileOptionLayout";
@@ -21,10 +24,8 @@ type FormData = z.infer<typeof schema>;
 function EditMyProfile() {
 	const utils = api.useUtils();
 	const { t } = useTranslation();
-
-	const userId = "cm2wbxug00000kkm7tvhlujf2";
-
-	const { data: user, isLoading } = api.user.getUser.useQuery({ userId });
+	const { data: session } = useSession();
+	const router = useRouter();
 
 	const { register, handleSubmit, control, reset } = useForm<FormData>({
 		resolver: zodResolver(schema),
@@ -35,6 +36,33 @@ function EditMyProfile() {
 		},
 	});
 
+	const userId = session?.user?.id;
+
+	const {
+		data: user,
+		isLoading: isLoadingUser,
+		error: userError,
+	} = api.user.getUser.useQuery(
+		{ userId: userId ?? "" },
+		{
+			enabled: !!userId,
+			retry: false,
+		},
+	);
+
+	// If there's an error fetching the user, redirect to home
+	useEffect(() => {
+		if (!userId) {
+			router.push("/");
+			return;
+		}
+
+		if (userError) {
+			toast.error(t("error_fetching_profile"));
+			router.push("/");
+		}
+	}, [userError, router, t, userId]);
+
 	useEffect(() => {
 		if (user) {
 			reset({
@@ -45,19 +73,35 @@ function EditMyProfile() {
 		}
 	}, [user, reset]);
 
-	const { mutate: updateProfile } = api.user.updateUserProfile.useMutation({
-		onSuccess: async () => {
-			try {
-				await utils.user.getUser.invalidate({ userId });
-				alert(t("profile_updated"));
-			} catch (error) {
-				console.error(t("invalidate_user_data_failed"), error);
-			}
-		},
-	});
+	const { mutate: updateProfile, isPending } =
+		api.user.updateUserProfile.useMutation({
+			onSuccess: async () => {
+				try {
+					await utils.user.getUser.invalidate({ userId });
+					toast.success(t("profile_updated"));
+				} catch (error) {
+					console.error(t("invalidate_user_data_failed"), error);
+				}
+			},
+			onError: (error) => {
+				console.error("Error updating profile:", error);
+				if (error.message?.includes("Record to update not found")) {
+					toast.error(t("user_not_found"));
+					router.push("/");
+				} else {
+					toast.error(t("error_updating_profile"));
+				}
+			},
+		});
 
 	const onSubmit = (data: FormData) => {
-		void updateProfile({
+		if (!userId) {
+			toast.error(t("session_expired"));
+			router.push("/");
+			return;
+		}
+
+		updateProfile({
 			userId,
 			name: data.fullName,
 			email: data.email,
@@ -70,36 +114,43 @@ function EditMyProfile() {
 			title={t("edit_my_profile")}
 			backLink="/user/edit-profile"
 		>
-			{isLoading ? (
-				<div>{t("loading")}</div>
-			) : (
-				<>
-					<form onSubmit={handleSubmit(onSubmit)}>
-						<InputField
-							label={t("full_name")}
-							name="fullName"
-							control={control}
-							className="mb-4"
-						/>
-						<InputField
-							label={t("email")}
-							name="email"
-							control={control}
-							className="mb-4"
-							inputClassName="cursor-not-allowed"
-						/>
-						<InputField
-							label={t("physical_address")}
-							name="physicalAddress"
-							control={control}
-							className="mb-4"
-						/>
-						<Button type="submit" className="w-full mt-4">
-							{t("save_changes")}
-						</Button>
-					</form>
-				</>
-			)}
+			<div className="p-4 bg-white rounded-lg">
+				<form onSubmit={handleSubmit(onSubmit)}>
+					<InputField
+						label={t("full_name")}
+						name="fullName"
+						control={control}
+						className="mb-4"
+						disabled={isLoadingUser}
+					/>
+					<InputField
+						label={t("email")}
+						name="email"
+						control={control}
+						className="mb-4"
+						inputClassName="cursor-not-allowed"
+						disabled={isLoadingUser}
+					/>
+					<InputField
+						label={t("physical_address")}
+						name="physicalAddress"
+						control={control}
+						className="mb-4"
+						disabled={isLoadingUser}
+					/>
+					<Button
+						type="submit"
+						className="w-full mt-4"
+						disabled={isPending || isLoadingUser}
+					>
+						{isPending
+							? t("saving_changes")
+							: isLoadingUser
+								? t("loading")
+								: t("save_changes")}
+					</Button>
+				</form>
+			</div>
 		</ProfileOptionLayout>
 	);
 }
diff --git a/apps/web/src/app/user/register-coffee/page.tsx b/apps/web/src/app/user/register-coffee/page.tsx
index 425104e..e48ec71 100644
--- a/apps/web/src/app/user/register-coffee/page.tsx
+++ b/apps/web/src/app/user/register-coffee/page.tsx
@@ -127,10 +127,14 @@ export default function RegisterCoffee() {
 						</Button>
 					</div>
 					<div className="my-4">
-						<label className="text-content-body-default block mb-1">
+						<label
+							htmlFor="variety"
+							className="text-content-body-default block mb-1"
+						>
 							{t("coffee_variety")}
 						</label>
 						<input
+							id="variety"
 							{...register("variety")}
 							type="text"
 							className="w-full border border-surface-border rounded p-2"
@@ -138,23 +142,31 @@ export default function RegisterCoffee() {
 						/>
 					</div>
 					<div className="my-2">
-						<label className="text-content-body-default block mb-1">
+						<label
+							htmlFor="description"
+							className="text-content-body-default block mb-1"
+						>
 							{t("coffee_description")}
 						</label>
 						<textarea
+							id="description"
 							{...register("description")}
 							className="w-full border border-surface-border rounded p-2"
 							placeholder={t("type_here")}
 						/>
 					</div>
 					<div className="mb-2">
-						<label className="text-content-body-default block mb-1">
+						<label
+							htmlFor="coffeeScore"
+							className="text-content-body-default block mb-1"
+						>
 							{t("coffee_score")}{" "}
 							<span className="text-content-body-soft">
 								({t("not_mandatory")})
 							</span>
 						</label>
 						<input
+							id="coffeeScore"
 							{...register("coffeeScore", {
 								valueAsNumber: true,
 								min: { value: 0, message: "Score must be at least 0" },
@@ -194,7 +206,10 @@ export default function RegisterCoffee() {
 						/>
 					</div>
 					<div className="my-6">
-						<label className="text-content-body-default block mb-2">
+						<label
+							htmlFor="roastLevel"
+							className="text-content-body-default block mb-2"
+						>
 							{t("roast_level")}
 						</label>
 						<div className="flex flex-col space-y-2">
@@ -236,17 +251,21 @@ export default function RegisterCoffee() {
 					<div className="my-8 flex justify-between items-center">
 						<div className="flex items-center font-medium">
 							<ArrowPathRoundedSquareIcon className="w-6 h-6 mr-2" />
-							<label className="text-content-body-default">
+							<span className="text-content-body-default">
 								{t("operating_fee")}
-							</label>
+							</span>
 						</div>
 						<p className="text-content-body-default">$20.00</p>
 					</div>
 					<div className="my-4">
-						<label className="text-content-body-default block mb-1">
+						<label
+							htmlFor="price"
+							className="text-content-body-default block mb-1"
+						>
 							{t("price_per_bag")} (USD)
 						</label>
 						<input
+							id="price"
 							{...register("price")}
 							type="text"
 							className="w-full border border-surface-border rounded p-2"
@@ -288,7 +307,10 @@ export default function RegisterCoffee() {
 						<p className="font-medium text-[0.875rem]">25 USD</p>
 					</div>
 					<div className="my-6">
-						<label className="text-content-body-default block mb-1">
+						<label
+							htmlFor="bagsAvailable"
+							className="text-content-body-default block mb-1"
+						>
 							{t("bags_available")} (340g)
 						</label>
 						<div className="flex items-center justify-between rounded-lg p-2 border border-surface-border">
@@ -307,6 +329,7 @@ export default function RegisterCoffee() {
 								-
 							</Button>
 							<input
+								id="bagsAvailable"
 								type="text"
 								className="w-16 text-center bg-transparent text-content-body-default text-lg"
 								{...register("bagsAvailable", {
diff --git a/apps/web/src/app/user/settings/page.tsx b/apps/web/src/app/user/settings/page.tsx
index 7bef189..258f675 100644
--- a/apps/web/src/app/user/settings/page.tsx
+++ b/apps/web/src/app/user/settings/page.tsx
@@ -11,10 +11,6 @@ import { z } from "zod";
 import { ProfileOptionLayout } from "~/app/_components/features/ProfileOptionLayout";
 import BottomModal from "~/app/_components/ui/BottomModal";
 
-interface SettingsProps {
-	initialLanguage?: string;
-}
-
 const languageSchema = z.object({
 	language: z.string(),
 });
@@ -23,11 +19,11 @@ type FormValues = z.infer<typeof languageSchema>;
 
 const LANGUAGE_KEY = "app_language";
 
-export default function Settings({ initialLanguage = "en" }: SettingsProps) {
+export default function Settings() {
 	const { i18n, t } = useTranslation();
 
-	// Set a default language that matches on both server and client
-	const [language, setLanguage] = useState<string>(initialLanguage);
+	// Set a default language
+	const [language, setLanguage] = useState<string>("en");
 	const [isLanguageModalOpen, setLanguageModalOpen] = useState<boolean>(false);
 
 	const languages = ["en", "es", "pt"];
@@ -94,13 +90,18 @@ export default function Settings({ initialLanguage = "en" }: SettingsProps) {
 						<div className="flex flex-col gap-2">
 							{languages.map((lang, index) => (
 								<div key={lang}>
-									<label className="flex items-center gap-2">
-										<RadioButton
+									<label
+										htmlFor={`lang-${lang}`}
+										className="flex items-center gap-2"
+									>
+										<RadioButton<FormValues>
+											id={`lang-${lang}`}
 											name="language"
-											label={t(`language_name.${lang}`)}
 											value={lang}
 											control={control}
+											label={t(`languages.${lang}`)}
 										/>
+										<span>{t(`languages.${lang}`)}</span>
 									</label>
 									{index < languages.length - 1 && (
 										<hr className="my-2 border-surface-border" />
diff --git a/apps/web/src/providers/starknet.tsx b/apps/web/src/providers/starknet.tsx
index bb9fa6c..310e426 100644
--- a/apps/web/src/providers/starknet.tsx
+++ b/apps/web/src/providers/starknet.tsx
@@ -1,20 +1,22 @@
-import { sepolia } from "@starknet-react/chains";
+import { mainnet, sepolia } from "@starknet-react/chains";
 import {
 	StarknetConfig,
 	publicProvider,
 	useInjectedConnectors,
 } from "@starknet-react/core";
 import type { Connector } from "@starknet-react/core";
-import { argent, braavos } from "@starknet-react/core";
+import { argent, braavos, injected } from "@starknet-react/core";
 
 export default function StarknetProvider({
 	children,
 }: {
 	children: React.ReactNode;
 }) {
+	const connector = injected({ id: "my-wallet" });
+
 	const { connectors } = useInjectedConnectors({
 		// Show these connectors if the user has no connector installed.
-		recommended: [argent(), braavos()],
+		recommended: [argent(), braavos(), connector],
 		// Hide recommended connectors if the user has any connector installed.
 		includeRecommended: "onlyIfNoConnectors",
 		// Randomize the order of the connectors.
@@ -24,8 +26,7 @@ export default function StarknetProvider({
 	return (
 		<StarknetConfig
 			autoConnect
-			// TODO: change to mainnet
-			chains={[sepolia]}
+			chains={[mainnet, sepolia]}
 			provider={publicProvider()}
 			connectors={connectors as unknown as Connector[]}
 		>
diff --git a/apps/web/src/server/api/root.ts b/apps/web/src/server/api/root.ts
index d0144f7..fc4054e 100644
--- a/apps/web/src/server/api/root.ts
+++ b/apps/web/src/server/api/root.ts
@@ -1,3 +1,4 @@
+import { cartRouter } from "~/server/api/routers/cart";
 import { productRouter } from "~/server/api/routers/product";
 import { userRouter } from "~/server/api/routers/user";
 import { createCallerFactory, createTRPCRouter } from "~/server/api/trpc";
@@ -10,6 +11,7 @@ import { createCallerFactory, createTRPCRouter } from "~/server/api/trpc";
 export const appRouter = createTRPCRouter({
 	product: productRouter,
 	user: userRouter,
+	cart: cartRouter,
 });
 
 // export type definition of API
diff --git a/apps/web/src/server/api/routers/cart.ts b/apps/web/src/server/api/routers/cart.ts
new file mode 100644
index 0000000..41119be
--- /dev/null
+++ b/apps/web/src/server/api/routers/cart.ts
@@ -0,0 +1,108 @@
+import { z } from "zod";
+import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
+
+export const cartRouter = createTRPCRouter({
+	// Get user's cart with items
+	getUserCart: protectedProcedure.query(async ({ ctx }) => {
+		const cart = await ctx.db.shoppingCart.findFirst({
+			where: { userId: ctx.session.user.id },
+			include: {
+				items: {
+					include: {
+						product: true,
+					},
+				},
+			},
+		});
+
+		return cart;
+	}),
+
+	// Add item to cart
+	addToCart: protectedProcedure
+		.input(
+			z.object({
+				productId: z.number(),
+				quantity: z.number().min(1),
+			}),
+		)
+		.mutation(async ({ ctx, input }) => {
+			// Find or create user's cart
+			let cart = await ctx.db.shoppingCart.findFirst({
+				where: { userId: ctx.session.user.id },
+			});
+
+			if (!cart) {
+				cart = await ctx.db.shoppingCart.create({
+					data: { userId: ctx.session.user.id },
+				});
+			}
+
+			// Check if item already exists in cart
+			const existingItem = await ctx.db.shoppingCartItem.findFirst({
+				where: {
+					shoppingCartId: cart.id,
+					productId: input.productId,
+				},
+			});
+
+			if (existingItem) {
+				// Update quantity if item exists
+				return ctx.db.shoppingCartItem.update({
+					where: { id: existingItem.id },
+					data: { quantity: existingItem.quantity + input.quantity },
+					include: { product: true },
+				});
+			}
+
+			// Create new cart item if it doesn't exist
+			return ctx.db.shoppingCartItem.create({
+				data: {
+					shoppingCartId: cart.id,
+					productId: input.productId,
+					quantity: input.quantity,
+				},
+				include: { product: true },
+			});
+		}),
+
+	// Remove item from cart
+	removeFromCart: protectedProcedure
+		.input(z.object({ cartItemId: z.string() }))
+		.mutation(async ({ ctx, input }) => {
+			return ctx.db.shoppingCartItem.delete({
+				where: { id: input.cartItemId },
+			});
+		}),
+
+	// Update item quantity
+	updateCartItemQuantity: protectedProcedure
+		.input(
+			z.object({
+				cartItemId: z.string(),
+				quantity: z.number().min(1),
+			}),
+		)
+		.mutation(async ({ ctx, input }) => {
+			return ctx.db.shoppingCartItem.update({
+				where: { id: input.cartItemId },
+				data: { quantity: input.quantity },
+				include: { product: true },
+			});
+		}),
+
+	// Clear cart
+	clearCart: protectedProcedure.mutation(async ({ ctx }) => {
+		const cart = await ctx.db.shoppingCart.findFirst({
+			where: { userId: ctx.session.user.id },
+		});
+
+		if (cart) {
+			await ctx.db.shoppingCartItem.deleteMany({
+				where: { shoppingCartId: cart.id },
+			});
+		}
+
+		return { success: true };
+	}),
+});
diff --git a/apps/web/src/server/auth.ts b/apps/web/src/server/auth.ts
index 1fcf20c..100d38a 100644
--- a/apps/web/src/server/auth.ts
+++ b/apps/web/src/server/auth.ts
@@ -6,7 +6,6 @@ import {
 	getServerSession,
 } from "next-auth";
 import type { Session } from "next-auth";
-import type { Adapter } from "next-auth/adapters";
 import {
 	type JWTDecodeParams,
 	type JWTEncodeParams,
@@ -73,14 +72,14 @@ const authorize = async (credentials: Record<string, string> | undefined) => {
 
 		const user = await findOrCreateUser(address);
 
-		return { id: user.walletAddress, nonce };
+		return { id: user.id, nonce };
 	} catch (error) {
 		console.error({ error });
 		return null;
 	}
 };
 
-export const authOptions: NextAuthOptions = {
+export const authOptions = {
 	callbacks: {
 		session: ({ session, token }) =>
 			({
@@ -91,7 +90,7 @@ export const authOptions: NextAuthOptions = {
 				},
 			}) as Session & { user: { id: string } },
 	},
-	adapter: PrismaAdapter(db) as Adapter,
+	adapter: PrismaAdapter(db),
 	providers: [
 		CredentialsProvider({
 			name: "Starknet",
@@ -134,6 +133,6 @@ export const authOptions: NextAuthOptions = {
 		updateAge: 86400,
 		generateSessionToken: () => crypto.randomBytes(32).toString("hex"),
 	},
-};
+} satisfies NextAuthOptions;
 
 export const getServerAuthSession = () => getServerSession(authOptions);
diff --git a/apps/web/src/stories/page.css b/apps/web/src/stories/page.css
index 87f7ecb..2d3ec7a 100644
--- a/apps/web/src/stories/page.css
+++ b/apps/web/src/stories/page.css
@@ -1,69 +1,69 @@
 .storybook-page {
-  margin: 0 auto;
-  padding: 48px 20px;
-  max-width: 600px;
-  color: #333;
-  font-size: 14px;
-  line-height: 24px;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	margin: 0 auto;
+	padding: 48px 20px;
+	max-width: 600px;
+	color: #333;
+	font-size: 14px;
+	line-height: 24px;
+	font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .storybook-page h2 {
-  display: inline-block;
-  vertical-align: top;
-  margin: 0 0 4px;
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 1;
+	display: inline-block;
+	vertical-align: top;
+	margin: 0 0 4px;
+	font-weight: 700;
+	font-size: 32px;
+	line-height: 1;
 }
 
 .storybook-page p {
-  margin: 1em 0;
+	margin: 1em 0;
 }
 
 .storybook-page a {
-  color: #1ea7fd;
-  text-decoration: none;
+	color: #1ea7fd;
+	text-decoration: none;
 }
 
 .storybook-page ul {
-  margin: 1em 0;
-  padding-left: 30px;
+	margin: 1em 0;
+	padding-left: 30px;
 }
 
 .storybook-page li {
-  margin-bottom: 8px;
+	margin-bottom: 8px;
 }
 
 .storybook-page .tip {
-  display: inline-block;
-  vertical-align: top;
-  margin-right: 10px;
-  border-radius: 1em;
-  background: #e7fdd8;
-  padding: 4px 12px;
-  color: #66bf3c;
-  font-weight: 700;
-  font-size: 11px;
-  line-height: 12px;
+	display: inline-block;
+	vertical-align: top;
+	margin-right: 10px;
+	border-radius: 1em;
+	background: #e7fdd8;
+	padding: 4px 12px;
+	color: #66bf3c;
+	font-weight: 700;
+	font-size: 11px;
+	line-height: 12px;
 }
 
 .storybook-page .tip-wrapper {
-  margin-top: 40px;
-  margin-bottom: 40px;
-  font-size: 13px;
-  line-height: 20px;
+	margin-top: 40px;
+	margin-bottom: 40px;
+	font-size: 13px;
+	line-height: 20px;
 }
 
 .storybook-page .tip-wrapper svg {
-  display: inline-block;
-  vertical-align: top;
-  margin-top: 3px;
-  margin-right: 4px;
-  width: 12px;
-  height: 12px;
+	display: inline-block;
+	vertical-align: top;
+	margin-top: 3px;
+	margin-right: 4px;
+	width: 12px;
+	height: 12px;
 }
 
 .storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
+	fill: #1ea7fd;
 }
diff --git a/bun.lockb b/bun.lockb
index e68faec..359a889 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index a5c3a23..22858ad 100644
--- a/package.json
+++ b/package.json
@@ -40,8 +40,10 @@
 	"workspaces": ["apps/*", "packages/*"],
 	"dependencies": {
 		"@argent/starknet-react-webwallet-connector": "^6.6.0",
+		"@auth/prisma-adapter": "^2.7.4",
 		"@heroicons/react": "^2.1.5",
 		"@hookform/resolvers": "^3.9.0",
+		"@prisma/client": "6.2.1",
 		"@starknet-react/chains": "^3.0.0",
 		"@starknet-react/core": "^3.0.0",
 		"@storybook/react": "^8.3.0",
@@ -54,6 +56,7 @@
 		"install": "^0.13.0",
 		"jotai": "^2.10.0",
 		"lefthook": "^1.7.15",
+		"prisma": "6.2.1",
 		"react-hook-form": "^7.53.0",
 		"starknetkit": "^2.3.0",
 		"usehooks-ts": "^3.1.0",
diff --git a/packages/ui/src/form/checkBox.tsx b/packages/ui/src/form/checkBox.tsx
index b1c3e45..e368990 100644
--- a/packages/ui/src/form/checkBox.tsx
+++ b/packages/ui/src/form/checkBox.tsx
@@ -1,4 +1,5 @@
 import cs from "classnames";
+import cn from "classnames";
 import { useController } from "react-hook-form";
 import type { Control, FieldPath, FieldValues } from "react-hook-form";
 
@@ -41,12 +42,17 @@ function Checkbox<T extends FieldValues>({
 		<div className={cs("flex items-center gap-2", className)}>
 			<div className="relative">
 				<input
-					id={name}
 					type="checkbox"
-					disabled={disabled}
-					{...field}
+					id={`${name}-${field.value}`}
+					name={name}
 					checked={!!field.value}
-					className="hidden" // Hide the default checkbox input
+					onChange={handleChange}
+					onKeyPress={handleKeyPress}
+					aria-checked={!!field.value}
+					className={cn(
+						"h-5 w-5 cursor-pointer rounded border border-surface-border bg-white",
+						field.value && "bg-surface-primary-default",
+					)}
 				/>
 				<div
 					className={cs(
diff --git a/packages/ui/src/form/radioButton.tsx b/packages/ui/src/form/radioButton.tsx
index 7c1b140..043a4fe 100644
--- a/packages/ui/src/form/radioButton.tsx
+++ b/packages/ui/src/form/radioButton.tsx
@@ -1,4 +1,5 @@
 import cs from "classnames";
+import cn from "classnames";
 import { useController } from "react-hook-form";
 import type { Control, FieldPath, FieldValues } from "react-hook-form";
 
@@ -10,6 +11,7 @@ type RadioButtonProps<T extends FieldValues> = {
 	className?: string;
 	inputClassName?: string;
 	disabled?: boolean;
+	id?: string;
 };
 
 function RadioButton<T extends FieldValues>({
@@ -20,6 +22,7 @@ function RadioButton<T extends FieldValues>({
 	className,
 	inputClassName,
 	disabled,
+	id,
 }: RadioButtonProps<T>) {
 	const {
 		field,
@@ -29,6 +32,8 @@ function RadioButton<T extends FieldValues>({
 		control,
 	});
 
+	const inputId = id ?? `${name}-${value}`;
+
 	const handleChange = () => {
 		field.onChange(value);
 	};
@@ -43,12 +48,17 @@ function RadioButton<T extends FieldValues>({
 		<div className={cs("flex items-center gap-2", className)}>
 			<div className="relative">
 				<input
-					id={name}
 					type="radio"
-					disabled={disabled}
-					{...field}
+					id={inputId}
+					name={name}
 					checked={field.value === value}
-					className="hidden"
+					onChange={handleChange}
+					onKeyPress={handleKeyPress}
+					aria-checked={field.value === value}
+					className={cn(
+						"h-5 w-5 cursor-pointer rounded-full border border-surface-border bg-white",
+						field.value === value && "bg-surface-primary-default",
+					)}
 				/>
 				<div
 					className={cs(
@@ -71,7 +81,7 @@ function RadioButton<T extends FieldValues>({
 				</div>
 			</div>
 			<label
-				htmlFor={name}
+				htmlFor={inputId}
 				className="text-base font-normal font-['Inter'] text-content-body-default cursor-pointer"
 				onClick={handleChange}
 				onKeyPress={handleKeyPress}
diff --git a/packages/ui/src/pageHeader.tsx b/packages/ui/src/pageHeader.tsx
index a105d5f..b1fb85b 100644
--- a/packages/ui/src/pageHeader.tsx
+++ b/packages/ui/src/pageHeader.tsx
@@ -99,7 +99,7 @@ function PageHeader({
 										className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
 										role="menuitem"
 									>
-										{t("profile")}
+										{t("Profile")}
 									</a>
 									<button
 										className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
diff --git a/src/app/_components/features/ProductDetails.tsx b/src/app/_components/features/ProductDetails.tsx
new file mode 100644
index 0000000..abd920c
--- /dev/null
+++ b/src/app/_components/features/ProductDetails.tsx
@@ -0,0 +1,2 @@
+import type { Product } from "@prisma/client";
+import { api } from "~/trpc/react";