diff --git a/apps/web-ui/.output/server/_ssr/cart-CHg5Ccyz.mjs b/apps/web-ui/.output/server/_ssr/cart-CHg5Ccyz.mjs
index 19640df..2a0b12e 100644
--- a/apps/web-ui/.output/server/_ssr/cart-CHg5Ccyz.mjs
+++ b/apps/web-ui/.output/server/_ssr/cart-CHg5Ccyz.mjs
@@ -1,6 +1,6 @@
 import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { a as Trash2 } from "../_libs/lucide-react.mjs";
-import { a as MyText, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { a as useUpdateCartItem, i as useRemoveFromCart, r as useGetCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
 import { t as useAllProducts } from "./prominent-api-hooks-CNVDntUD.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
@@ -23,13 +23,13 @@ function CartPage() {
 		const product = productsById[item.productId];
 		if (product) total += product.price * item.quantity;
 	});
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 		weight: "bold",
 		className: "mb-4 text-xl",
 		children: "Your Cart"
 	}), cartItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col items-center gap-4 py-20",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			className: "text-gray-500",
 			children: "Your cart is empty"
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
@@ -52,13 +52,13 @@ function CartPage() {
 					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 						className: "flex-1",
 						children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 								weight: "semibold",
 								className: "text-sm",
 								numberOfLines: 1,
 								children: product.name
 							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 								className: "text-brand-600 text-sm font-bold",
 								children: ["₹", price]
 							}),
@@ -82,10 +82,10 @@ function CartPage() {
 		className: "fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4 shadow-lg",
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-3 flex items-center justify-between",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "bold",
 				children: "Total"
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				weight: "bold",
 				className: "text-lg text-brand-600",
 				children: ["₹", total]
diff --git a/apps/web-ui/.output/server/_ssr/checkout-CaijlEpv.mjs b/apps/web-ui/.output/server/_ssr/checkout-CaijlEpv.mjs
index 8bfea40..bc975e6 100644
--- a/apps/web-ui/.output/server/_ssr/checkout-CaijlEpv.mjs
+++ b/apps/web-ui/.output/server/_ssr/checkout-CaijlEpv.mjs
@@ -1,6 +1,6 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime, p as useQueryClient } from "../_libs/react+tanstack__react-query.mjs";
-import { a as MyText, i as MyButton, r as LoadingDialog, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, r as LoadingDialog, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { r as useGetCart, t as clearLocalCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
 import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
 import { t as useAllProducts } from "./prominent-api-hooks-CNVDntUD.mjs";
@@ -59,14 +59,14 @@ function CheckoutPage() {
 		});
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			weight: "bold",
 			className: "mb-4 text-xl",
 			children: "Checkout"
 		}),
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-6",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "semibold",
 				className: "mb-2",
 				children: "Delivery Address"
@@ -74,11 +74,11 @@ function CheckoutPage() {
 				onClick: () => setSelectedAddressId(addr.id),
 				className: `mb-2 rounded-xl border p-3 ${selectedAddressId === addr.id ? "border-brand-500 bg-brand-50" : "border-gray-200"}`,
 				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						weight: "semibold",
 						children: addr.name
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 						className: "text-sm text-gray-600",
 						children: [
 							addr.addressLine1,
@@ -86,7 +86,7 @@ function CheckoutPage() {
 							addr.city
 						]
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						className: "text-sm text-gray-500",
 						children: addr.phone
 					})
@@ -96,7 +96,7 @@ function CheckoutPage() {
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-6",
 			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					weight: "semibold",
 					className: "mb-2",
 					children: "Order Summary"
@@ -106,7 +106,7 @@ function CheckoutPage() {
 					if (!product) return null;
 					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 						className: "flex items-center justify-between py-2",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 							className: "text-sm",
 							numberOfLines: 1,
 							children: [
@@ -114,7 +114,7 @@ function CheckoutPage() {
 								" x",
 								item.quantity
 							]
-						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 							className: "text-sm font-bold",
 							children: ["₹", product.price * item.quantity]
 						})]
@@ -124,10 +124,10 @@ function CheckoutPage() {
 					className: "mt-2 border-t border-gray-200 pt-2",
 					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 							weight: "bold",
 							children: "Total"
-						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 							weight: "bold",
 							className: "text-brand-600",
 							children: ["₹", total]
diff --git a/apps/web-ui/.output/server/_ssr/flash-CkaCI73Q.mjs b/apps/web-ui/.output/server/_ssr/flash-CkaCI73Q.mjs
index 4b42baa..f16d45a 100644
--- a/apps/web-ui/.output/server/_ssr/flash-CkaCI73Q.mjs
+++ b/apps/web-ui/.output/server/_ssr/flash-CkaCI73Q.mjs
@@ -1,7 +1,7 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { l as ShoppingCart, t as Zap } from "../_libs/lucide-react.mjs";
-import { a as MyText, i as MyButton, l as Quantifier, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, l as Quantifier, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { n as useAddToCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 import { t as create } from "../_libs/zustand.mjs";
@@ -35,7 +35,7 @@ function FlashDeliveryPage() {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-4 flex items-center gap-2",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-6 w-6 text-yellow-500" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-6 w-6 text-yellow-500" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "bold",
 				className: "text-xl",
 				children: "1 Hr Delivery"
@@ -43,7 +43,7 @@ function FlashDeliveryPage() {
 		}),
 		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			className: "mb-4 rounded-xl bg-yellow-50 p-3",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				className: "text-sm text-yellow-800",
 				children: "Get these products delivered within 1 hour! Only available for select items."
 			})
@@ -64,13 +64,13 @@ function FlashDeliveryPage() {
 								className: "h-full w-full object-cover"
 							})
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 							weight: "semibold",
 							className: "text-sm",
 							numberOfLines: 2,
 							children: product.name
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 							weight: "bold",
 							className: "text-brand-600",
 							children: ["₹", price]
@@ -98,7 +98,7 @@ function FlashDeliveryPage() {
 		}),
 		flashProducts.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 			className: "py-20 text-center",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				className: "text-gray-500",
 				children: "No flash delivery products available"
 			})
diff --git a/apps/web-ui/.output/server/_ssr/flash.cart-BCcvG5Yb.mjs b/apps/web-ui/.output/server/_ssr/flash.cart-BCcvG5Yb.mjs
index a92cd54..f137a38 100644
--- a/apps/web-ui/.output/server/_ssr/flash.cart-BCcvG5Yb.mjs
+++ b/apps/web-ui/.output/server/_ssr/flash.cart-BCcvG5Yb.mjs
@@ -1,6 +1,6 @@
 import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { a as Trash2, t as Zap } from "../_libs/lucide-react.mjs";
-import { a as MyText, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { a as useUpdateCartItem, i as useRemoveFromCart, r as useGetCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 import { t as useCentralProductStore } from "./central-product-store-TS-vQ8-V.mjs";
@@ -20,14 +20,14 @@ function FlashCartPage() {
 	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "mb-4 flex items-center gap-2",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-5 w-5 text-yellow-500" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-5 w-5 text-yellow-500" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			weight: "bold",
 			className: "text-xl",
 			children: "Flash Cart"
 		})]
 	}), cartItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col items-center gap-4 py-20",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			className: "text-gray-500",
 			children: "Your flash cart is empty"
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
@@ -50,13 +50,13 @@ function FlashCartPage() {
 					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 						className: "flex-1",
 						children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 								weight: "semibold",
 								className: "text-sm",
 								numberOfLines: 1,
 								children: product.name
 							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 								className: "text-brand-600 text-sm font-bold",
 								children: ["₹", price]
 							}),
@@ -80,10 +80,10 @@ function FlashCartPage() {
 		className: "fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4 shadow-lg",
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-3 flex items-center justify-between",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "bold",
 				children: "Total"
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				weight: "bold",
 				className: "text-lg text-brand-600",
 				children: ["₹", total]
diff --git a/apps/web-ui/.output/server/_ssr/flash.checkout-D2UaQnns.mjs b/apps/web-ui/.output/server/_ssr/flash.checkout-D2UaQnns.mjs
index 101186b..ee24926 100644
--- a/apps/web-ui/.output/server/_ssr/flash.checkout-D2UaQnns.mjs
+++ b/apps/web-ui/.output/server/_ssr/flash.checkout-D2UaQnns.mjs
@@ -1,6 +1,6 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime, p as useQueryClient } from "../_libs/react+tanstack__react-query.mjs";
-import { a as MyText, i as MyButton, r as LoadingDialog, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, r as LoadingDialog, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { r as useGetCart, t as clearLocalCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
 import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
@@ -54,14 +54,14 @@ function FlashCheckoutPage() {
 		});
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			weight: "bold",
 			className: "mb-4 text-xl",
 			children: "Flash Checkout"
 		}),
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-6",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "semibold",
 				className: "mb-2",
 				children: "Delivery Address"
@@ -69,11 +69,11 @@ function FlashCheckoutPage() {
 				onClick: () => setSelectedAddressId(addr.id),
 				className: `mb-2 w-full rounded-xl border p-3 text-left ${selectedAddressId === addr.id ? "border-brand-500 bg-brand-50" : "border-gray-200"}`,
 				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						weight: "semibold",
 						children: addr.name
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 						className: "text-sm text-gray-600",
 						children: [
 							addr.addressLine1,
@@ -81,7 +81,7 @@ function FlashCheckoutPage() {
 							addr.city
 						]
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						className: "text-sm text-gray-500",
 						children: addr.phone
 					})
@@ -91,7 +91,7 @@ function FlashCheckoutPage() {
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-6",
 			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					weight: "semibold",
 					className: "mb-2",
 					children: "Order Summary"
@@ -101,7 +101,7 @@ function FlashCheckoutPage() {
 					if (!product) return null;
 					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 						className: "flex items-center justify-between py-2",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 							className: "text-sm",
 							numberOfLines: 1,
 							children: [
@@ -109,7 +109,7 @@ function FlashCheckoutPage() {
 								" x",
 								item.quantity
 							]
-						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 							className: "text-sm font-bold",
 							children: ["₹", (product.discountedPrice ?? product.price) * item.quantity]
 						})]
@@ -119,10 +119,10 @@ function FlashCheckoutPage() {
 					className: "mt-2 border-t border-gray-200 pt-2",
 					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 							weight: "bold",
 							children: "Total"
-						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 							weight: "bold",
 							className: "text-brand-600",
 							children: ["₹", total]
diff --git a/apps/web-ui/.output/server/_ssr/flash.order-success-C9tkVfq7.mjs b/apps/web-ui/.output/server/_ssr/flash.order-success-C9tkVfq7.mjs
index d9848b8..d452a2e 100644
--- a/apps/web-ui/.output/server/_ssr/flash.order-success-C9tkVfq7.mjs
+++ b/apps/web-ui/.output/server/_ssr/flash.order-success-C9tkVfq7.mjs
@@ -1,6 +1,6 @@
 import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { t as Zap } from "../_libs/lucide-react.mjs";
-import { a as MyText, i as MyButton } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton } from "./src-u_N1opJl.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 import { t as Route } from "./flash.order-success-Bs-Lyb2u.mjs";
 //#region node_modules/.nitro/vite/services/ssr/assets/flash.order-success-C9tkVfq7.js
@@ -15,16 +15,16 @@ function FlashOrderSuccessPage() {
 				className: "mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-yellow-100",
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-10 w-10 text-yellow-600" })
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "bold",
 				className: "mb-2 text-2xl text-gray-900",
 				children: "1 Hr Order Placed!"
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				className: "mb-1 text-gray-600",
 				children: ["Order ID: #", orderId]
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				className: "mb-8 text-gray-600",
 				children: ["Total: ₹", totalAmount]
 			}),
diff --git a/apps/web-ui/.output/server/_ssr/flash.product._id-SS95dT27.mjs b/apps/web-ui/.output/server/_ssr/flash.product._id-SS95dT27.mjs
index 1558479..d018ef1 100644
--- a/apps/web-ui/.output/server/_ssr/flash.product._id-SS95dT27.mjs
+++ b/apps/web-ui/.output/server/_ssr/flash.product._id-SS95dT27.mjs
@@ -1,7 +1,7 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { l as ShoppingCart, t as Zap } from "../_libs/lucide-react.mjs";
-import { a as MyText, i as MyButton, l as Quantifier, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, l as Quantifier, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { n as useAddToCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 import { t as useCentralProductStore } from "./central-product-store-TS-vQ8-V.mjs";
@@ -24,13 +24,13 @@ function FlashProductDetailPage() {
 			storeId: product.storeId
 		}, { onSuccess: () => navigate({ to: "/flash/cart" }) });
 	};
-	if (!product) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, { children: "Product not found" }) });
+	if (!product) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, { children: "Product not found" }) });
 	const price = product.discountedPrice ?? product.price;
 	const imageUrl = product.images?.[0];
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-4 flex items-center gap-2",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-5 w-5 text-yellow-500" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-5 w-5 text-yellow-500" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				className: "text-sm font-semibold text-yellow-600",
 				children: "1 Hr Delivery"
 			})]
@@ -43,22 +43,22 @@ function FlashProductDetailPage() {
 				className: "h-full w-full object-cover"
 			})
 		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			weight: "bold",
 			className: "mb-1 text-xl",
 			children: product.name
 		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 			className: "mb-4 text-sm text-gray-500",
 			children: [product.unitValue, product.unit]
 		}),
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-4 flex items-baseline gap-2",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				weight: "bold",
 				className: "text-2xl text-brand-600",
 				children: ["₹", price]
-			}), product.discountedPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			}), product.discountedPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				className: "text-sm text-gray-400 line-through",
 				children: ["₹", product.price]
 			})]
diff --git a/apps/web-ui/.output/server/_ssr/home-BxXKVXbQ.mjs b/apps/web-ui/.output/server/_ssr/home-BxXKVXbQ.mjs
index d4db702..19a92a4 100644
--- a/apps/web-ui/.output/server/_ssr/home-BxXKVXbQ.mjs
+++ b/apps/web-ui/.output/server/_ssr/home-BxXKVXbQ.mjs
@@ -1,7 +1,7 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { i as Truck, l as ShoppingCart, n as X, t as Zap } from "../_libs/lucide-react.mjs";
-import { a as MyText, l as Quantifier, n as BottomDialog, s as MyTouchableOpacity, u as SearchBar } from "./src-u_N1opJl.mjs";
+import { a as p, l as Quantifier, n as BottomDialog, s as MyTouchableOpacity, u as SearchBar } from "./src-u_N1opJl.mjs";
 import { a as useUpdateCartItem, i as useRemoveFromCart, n as useAddToCart, r as useGetCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
 import { a as useStores, n as useBanners, r as useSlots, t as useAllProducts } from "./prominent-api-hooks-CNVDntUD.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
@@ -113,11 +113,11 @@ function AddToCartDialog() {
 						}),
 						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 							className: "flex-1",
-							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 								weight: "bold",
 								className: "text-lg",
 								children: "Select Delivery Slot"
-							}), product?.name && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+							}), product?.name && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 								className: "text-sm text-gray-500",
 								children: [
 									product.name,
@@ -145,7 +145,7 @@ function AddToCartDialog() {
 						className: `flex items-start gap-3 rounded-xl border bg-gray-50 p-4 ${selectedSlotId === slot.id ? "border-brand-500" : "border-gray-100"}`,
 						children: [
 							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Truck, { className: "mt-0.5 h-5 w-5 shrink-0 text-blue-500" }),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 								weight: "bold",
 								className: "flex-1 text-sm",
 								children: [(0, import_dayjs_min.default)(slot.deliveryTime).format("ddd, DD MMM • "), formatTimeRange(slot.deliveryTime)]
@@ -172,7 +172,7 @@ function AddToCartDialog() {
 					className: `flex items-center gap-3 rounded-xl border p-4 mb-4 ${selectedFlashDelivery ? "border-pink-500 bg-pink-50" : "border-pink-200 bg-pink-50"}`,
 					children: [
 						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Zap, { className: "h-5 w-5 shrink-0 text-pink-500" }),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 							weight: "bold",
 							className: "flex-1 text-sm",
 							children: "1 hr Delivery"
@@ -192,7 +192,7 @@ function AddToCartDialog() {
 				}),
 				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 					className: "mb-4",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						weight: "bold",
 						className: "mb-2 text-sm",
 						children: "Quantity"
@@ -277,7 +277,7 @@ function HomePage() {
 						className: "mb-8",
 						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 							className: "flex items-center justify-between mb-4",
-							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 								weight: "bold",
 								className: "text-lg md:text-xl",
 								children: "Our Stores"
@@ -297,7 +297,7 @@ function HomePage() {
 						className: "mb-24",
 						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 							className: "flex items-center justify-between mb-4",
-							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 								weight: "bold",
 								className: "text-lg md:text-xl",
 								children: "All Products"
@@ -408,12 +408,12 @@ function StoreCard({ store, onClick }) {
 					})
 				})
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "semibold",
 				className: "text-sm truncate",
 				children: store.name
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				className: "text-xs text-gray-500",
 				children: [store.productCount || 0, " products"]
 			})
@@ -450,29 +450,29 @@ function ProductCard({ product, onClick, onAddToCart }) {
 						})
 					})
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					weight: "semibold",
 					className: "text-sm leading-tight line-clamp-2 mb-1",
 					children: product.name
 				}),
 				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 					className: "flex items-baseline gap-1.5",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 						weight: "bold",
 						className: "text-brand-600 text-sm md:text-base",
 						children: ["₹", product.price]
-					}), hasDiscount && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+					}), hasDiscount && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 						className: "text-xs text-gray-400 line-through",
 						children: ["₹", product.marketPrice]
 					})]
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 					className: "text-[11px] text-gray-400 mb-2",
 					children: ["/", product.unit]
 				}),
 				product.nextDeliveryDate && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 					className: "mb-3 flex items-center gap-1 self-start rounded-lg bg-brand-50 px-2 py-1 border border-brand-100",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Truck, { className: "h-3 w-3 text-brand-600" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Truck, { className: "h-3 w-3 text-brand-600" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						className: "text-[10px] font-bold text-brand-700",
 						children: (0, import_dayjs_min.default)(product.nextDeliveryDate).format("ddd, DD MMM • h:mm A")
 					})]
@@ -511,15 +511,15 @@ function FloatingCartBar({ onClick }) {
 				className: "flex-1",
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 						weight: "bold",
 						className: "text-sm text-white",
 						children: ["₹", totalCartValue]
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						className: "text-xs text-white/80",
 						children: itemCount === 0 ? "No items in cart" : `• ${itemCount} ${itemCount === 1 ? "item" : "items"}`
 					})]
-				}), remainingForFreeDelivery > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+				}), remainingForFreeDelivery > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 					className: "text-[10px] font-bold text-white/70",
 					children: [
 						"₹",
@@ -533,11 +533,11 @@ function FloatingCartBar({ onClick }) {
 						fill: "currentColor",
 						viewBox: "0 0 24 24",
 						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						className: "text-[10px] font-bold text-emerald-300",
 						children: "Free Delivery Unlocked"
 					})]
-				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 					className: "text-[10px] text-white/50",
 					children: [
 						"Shop for ₹",
diff --git a/apps/web-ui/.output/server/_ssr/home.cart-Bl_3HSf0.mjs b/apps/web-ui/.output/server/_ssr/home.cart-Bl_3HSf0.mjs
index 2fa021e..d1eb6b8 100644
--- a/apps/web-ui/.output/server/_ssr/home.cart-Bl_3HSf0.mjs
+++ b/apps/web-ui/.output/server/_ssr/home.cart-Bl_3HSf0.mjs
@@ -1,6 +1,6 @@
 import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { a as Trash2 } from "../_libs/lucide-react.mjs";
-import { a as MyText, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { a as useUpdateCartItem, i as useRemoveFromCart, r as useGetCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
 import { t as useAllProducts } from "./prominent-api-hooks-CNVDntUD.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
@@ -23,13 +23,13 @@ function CartPage() {
 		const product = productsById[item.productId];
 		if (product) total += product.price * item.quantity;
 	});
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 		weight: "bold",
 		className: "mb-4 text-xl",
 		children: "Your Cart"
 	}), cartItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col items-center gap-4 py-20",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			className: "text-gray-500",
 			children: "Your cart is empty"
 		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
@@ -52,13 +52,13 @@ function CartPage() {
 					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 						className: "flex-1",
 						children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 								weight: "semibold",
 								className: "text-sm",
 								numberOfLines: 1,
 								children: product.name
 							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 								className: "text-brand-600 text-sm font-bold",
 								children: ["₹", price]
 							}),
@@ -82,10 +82,10 @@ function CartPage() {
 		className: "fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4 shadow-lg",
 		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-3 flex items-center justify-between",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "bold",
 				children: "Total"
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				weight: "bold",
 				className: "text-lg text-brand-600",
 				children: ["₹", total]
diff --git a/apps/web-ui/.output/server/_ssr/home.checkout-o3MfvOFR.mjs b/apps/web-ui/.output/server/_ssr/home.checkout-o3MfvOFR.mjs
index 1d11fb6..b2e82e1 100644
--- a/apps/web-ui/.output/server/_ssr/home.checkout-o3MfvOFR.mjs
+++ b/apps/web-ui/.output/server/_ssr/home.checkout-o3MfvOFR.mjs
@@ -1,6 +1,6 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime, p as useQueryClient } from "../_libs/react+tanstack__react-query.mjs";
-import { a as MyText, i as MyButton, r as LoadingDialog, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, r as LoadingDialog, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { r as useGetCart, t as clearLocalCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
 import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
@@ -54,14 +54,14 @@ function CheckoutPage() {
 		});
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			weight: "bold",
 			className: "mb-4 text-xl",
 			children: "Checkout"
 		}),
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-6",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "semibold",
 				className: "mb-2",
 				children: "Delivery Address"
@@ -69,11 +69,11 @@ function CheckoutPage() {
 				onClick: () => setSelectedAddressId(addr.id),
 				className: `mb-2 rounded-xl border p-3 ${selectedAddressId === addr.id ? "border-brand-500 bg-brand-50" : "border-gray-200"}`,
 				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						weight: "semibold",
 						children: addr.name
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 						className: "text-sm text-gray-600",
 						children: [
 							addr.addressLine1,
@@ -81,7 +81,7 @@ function CheckoutPage() {
 							addr.city
 						]
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						className: "text-sm text-gray-500",
 						children: addr.phone
 					})
@@ -91,7 +91,7 @@ function CheckoutPage() {
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-6",
 			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					weight: "semibold",
 					className: "mb-2",
 					children: "Order Summary"
@@ -101,7 +101,7 @@ function CheckoutPage() {
 					if (!product) return null;
 					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 						className: "flex items-center justify-between py-2",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 							className: "text-sm",
 							numberOfLines: 1,
 							children: [
@@ -109,7 +109,7 @@ function CheckoutPage() {
 								" x",
 								item.quantity
 							]
-						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 							className: "text-sm font-bold",
 							children: ["₹", (product.discountedPrice ?? product.price) * item.quantity]
 						})]
@@ -119,10 +119,10 @@ function CheckoutPage() {
 					className: "mt-2 border-t border-gray-200 pt-2",
 					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 							weight: "bold",
 							children: "Total"
-						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 							weight: "bold",
 							className: "text-brand-600",
 							children: ["₹", total]
diff --git a/apps/web-ui/.output/server/_ssr/home.order-success-COjzwSkc.mjs b/apps/web-ui/.output/server/_ssr/home.order-success-COjzwSkc.mjs
index d0e12f0..dc3313f 100644
--- a/apps/web-ui/.output/server/_ssr/home.order-success-COjzwSkc.mjs
+++ b/apps/web-ui/.output/server/_ssr/home.order-success-COjzwSkc.mjs
@@ -1,6 +1,6 @@
 import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { p as Package } from "../_libs/lucide-react.mjs";
-import { a as MyText, i as MyButton } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton } from "./src-u_N1opJl.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 import { t as Route } from "./home.order-success-ng0baB-e.mjs";
 //#region node_modules/.nitro/vite/services/ssr/assets/home.order-success-COjzwSkc.js
@@ -15,16 +15,16 @@ function OrderSuccessPage() {
 				className: "mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-green-100",
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Package, { className: "h-10 w-10 text-green-600" })
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "bold",
 				className: "mb-2 text-2xl text-gray-900",
 				children: "Order Placed!"
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				className: "mb-1 text-gray-600",
 				children: ["Order ID: #", orderId]
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				className: "mb-8 text-gray-600",
 				children: ["Total: ₹", totalAmount]
 			}),
diff --git a/apps/web-ui/.output/server/_ssr/home.product._id-C2EPG814.mjs b/apps/web-ui/.output/server/_ssr/home.product._id-C2EPG814.mjs
index bc70694..d4dd6ef 100644
--- a/apps/web-ui/.output/server/_ssr/home.product._id-C2EPG814.mjs
+++ b/apps/web-ui/.output/server/_ssr/home.product._id-C2EPG814.mjs
@@ -1,7 +1,7 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { c as Star, l as ShoppingCart } from "../_libs/lucide-react.mjs";
-import { a as MyText, i as MyButton, l as Quantifier, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, l as Quantifier, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { n as useAddToCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
 import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
@@ -26,7 +26,7 @@ function ProductDetailPage() {
 			storeId: product.storeId
 		}, { onSuccess: () => navigate({ to: "/cart" }) });
 	};
-	if (!product) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, { children: "Product not found" }) });
+	if (!product) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, { children: "Product not found" }) });
 	const price = product.discountedPrice ?? product.price;
 	const imageUrl = product.images?.[0];
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
@@ -38,27 +38,27 @@ function ProductDetailPage() {
 				className: "h-full w-full object-cover"
 			})
 		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			weight: "bold",
 			className: "mb-1 text-xl",
 			children: product.name
 		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 			className: "mb-2 text-sm text-gray-500",
 			children: [product.unitValue, product.unit]
 		}),
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-4 flex items-baseline gap-2",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				weight: "bold",
 				className: "text-2xl text-brand-600",
 				children: ["₹", price]
-			}), product.discountedPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			}), product.discountedPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				className: "text-sm text-gray-400 line-through",
 				children: ["₹", product.price]
 			})]
 		}),
-		product.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		product.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			className: "mb-4 text-gray-600",
 			children: product.description
 		}),
@@ -79,7 +79,7 @@ function ProductDetailPage() {
 		}),
 		reviews?.data && reviews.data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mt-8",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "bold",
 				className: "mb-3 text-lg",
 				children: "Reviews"
@@ -88,7 +88,7 @@ function ProductDetailPage() {
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 					className: "mb-1 flex items-center gap-1",
 					children: Array.from({ length: review.rating || 5 }).map((_, j) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Star, { className: "h-3 w-3 fill-yellow-400 text-yellow-400" }, j))
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					className: "text-sm text-gray-600",
 					children: review.comment
 				})]
diff --git a/apps/web-ui/.output/server/_ssr/home.search-pQXmTQuR.mjs b/apps/web-ui/.output/server/_ssr/home.search-pQXmTQuR.mjs
index baeef5c..d65b977 100644
--- a/apps/web-ui/.output/server/_ssr/home.search-pQXmTQuR.mjs
+++ b/apps/web-ui/.output/server/_ssr/home.search-pQXmTQuR.mjs
@@ -1,6 +1,6 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
-import { a as MyText, s as MyTouchableOpacity, t as AppContainer, u as SearchBar } from "./src-u_N1opJl.mjs";
+import { a as p, s as MyTouchableOpacity, t as AppContainer, u as SearchBar } from "./src-u_N1opJl.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 import { t as useCentralProductStore } from "./central-product-store-TS-vQ8-V.mjs";
 import { t as Route } from "./home.search-C7gKn8CW.mjs";
@@ -56,13 +56,13 @@ function SearchPage() {
 						className: "h-full w-full object-cover"
 					})
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					weight: "semibold",
 					className: "text-sm",
 					numberOfLines: 2,
 					children: product.name
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 					weight: "bold",
 					className: "mt-1 text-brand-600",
 					children: ["₹", product.discountedPrice ?? product.price]
diff --git a/apps/web-ui/.output/server/_ssr/login-QH2hpwxi.mjs b/apps/web-ui/.output/server/_ssr/login-QH2hpwxi.mjs
index 15a5b6c..a7c22dd 100644
--- a/apps/web-ui/.output/server/_ssr/login-QH2hpwxi.mjs
+++ b/apps/web-ui/.output/server/_ssr/login-QH2hpwxi.mjs
@@ -1,6 +1,6 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
-import { a as MyText, i as MyButton, o as MyTextInput, s as MyTouchableOpacity } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, o as pInput, s as MyTouchableOpacity } from "./src-u_N1opJl.mjs";
 import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 import { n as useAuth } from "./auth-context-DzjwonUC.mjs";
@@ -124,12 +124,12 @@ function LoginPage() {
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "w-full max-w-md",
 			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					weight: "bold",
 					className: "mb-2 text-center text-4xl text-white",
 					children: "Welcome"
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					className: "mb-8 text-center text-lg text-blue-100",
 					children: "Sign in to continue your journey"
 				}),
@@ -141,7 +141,7 @@ function LoginPage() {
 							step === "mobile" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Controller, {
 								control,
 								name: "mobile",
-								render: ({ field: { onChange, value } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
+								render: ({ field: { onChange, value } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
 									placeholder: "Enter your mobile number",
 									value,
 									onChange: (e) => {
@@ -154,7 +154,7 @@ function LoginPage() {
 							step === "otp" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 								className: "mb-6",
 								children: [
-									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 										weight: "semibold",
 										className: "mb-3 text-center text-base text-gray-800",
 										children: "Enter 4-digit OTP"
@@ -194,7 +194,7 @@ function LoginPage() {
 													""
 												]);
 											},
-											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 												weight: "medium",
 												className: "text-gray-500",
 												children: "Back"
@@ -202,7 +202,7 @@ function LoginPage() {
 										}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTouchableOpacity, {
 											onClick: () => sendOtpMutation.mutate({ mobile: selectedMobile }),
 											disabled: !canResend,
-											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+											children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 												weight: "semibold",
 												className: canResend ? "text-brand-600" : "text-gray-400",
 												children: canResend ? "Resend OTP" : `Resend in ${resendCountdown}s`
@@ -214,7 +214,7 @@ function LoginPage() {
 							step === "password" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Controller, {
 								control,
 								name: "password",
-								render: ({ field: { onChange, value } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
+								render: ({ field: { onChange, value } }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
 									placeholder: "Enter your password",
 									value,
 									onChange: (e) => onChange(e.target.value),
@@ -244,7 +244,7 @@ function LoginPage() {
 							]);
 						},
 						className: "mt-4 block text-center",
-						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 							weight: "semibold",
 							className: "text-brand-600",
 							children: "Or login with Password"
diff --git a/apps/web-ui/.output/server/_ssr/me-Dn8Tk_dJ.mjs b/apps/web-ui/.output/server/_ssr/me-Dn8Tk_dJ.mjs
index a949465..d802caa 100644
--- a/apps/web-ui/.output/server/_ssr/me-Dn8Tk_dJ.mjs
+++ b/apps/web-ui/.output/server/_ssr/me-Dn8Tk_dJ.mjs
@@ -1,6 +1,6 @@
 import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { b as FileText, g as MapPin, h as MessageSquare, l as ShoppingCart, o as Ticket, p as Package, r as User, v as Info } from "../_libs/lucide-react.mjs";
-import { a as MyText, c as ProfileImage, i as MyButton, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, c as ProfileImage, i as MyButton, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 import { n as useAuth } from "./auth-context-DzjwonUC.mjs";
 //#region node_modules/.nitro/vite/services/ssr/assets/me-Dn8Tk_dJ.js
@@ -10,7 +10,7 @@ function MePage() {
 	const { user, logout } = useAuth();
 	if (!user) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col items-center gap-4 py-20",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, { children: "Please sign in" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, { children: "Please sign in" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyButton, {
 			textContent: "Sign In",
 			onClick: () => navigate({ to: "/login" })
 		})]
@@ -75,18 +75,18 @@ function MePage() {
 			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProfileImage, {
 				uri: user.profileImage,
 				size: 64
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "bold",
 				className: "text-lg",
 				children: user.name || "User"
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				className: "text-sm text-gray-500",
 				children: user.mobile
 			})] })]
 		}),
 		menuItems.map((section) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-6",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "semibold",
 				className: "mb-2 text-sm text-gray-500 uppercase tracking-wide",
 				children: section.section
@@ -95,7 +95,7 @@ function MePage() {
 				children: section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyTouchableOpacity, {
 					onClick: () => navigate({ to: item.to }),
 					className: "flex w-full items-center gap-3 border-b border-gray-50 px-4 py-3.5 last:border-b-0",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(item.icon, { className: "h-5 w-5 text-gray-400" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(item.icon, { className: "h-5 w-5 text-gray-400" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						className: "flex-1 text-left text-sm",
 						children: item.label
 					})]
@@ -109,7 +109,7 @@ function MePage() {
 			className: "mb-8",
 			textContent: "Logout"
 		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			className: "mb-8 text-center text-xs text-gray-400",
 			children: "Version 1.0.0"
 		})
diff --git a/apps/web-ui/.output/server/_ssr/me.about-ig0mha9d.mjs b/apps/web-ui/.output/server/_ssr/me.about-ig0mha9d.mjs
index b37b1ce..d760353 100644
--- a/apps/web-ui/.output/server/_ssr/me.about-ig0mha9d.mjs
+++ b/apps/web-ui/.output/server/_ssr/me.about-ig0mha9d.mjs
@@ -1,11 +1,11 @@
 import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { _ as Leaf, i as Truck, u as Shield, y as Heart } from "../_libs/lucide-react.mjs";
-import { a as MyText, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, t as AppContainer } from "./src-u_N1opJl.mjs";
 //#region node_modules/.nitro/vite/services/ssr/assets/me.about-ig0mha9d.js
 var import_jsx_runtime = require_jsx_runtime();
 function AboutPage() {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			weight: "bold",
 			className: "mb-6 text-2xl",
 			children: "About Freshyo"
@@ -37,12 +37,12 @@ function AboutPage() {
 				className: "rounded-xl border border-gray-100 bg-white p-4 shadow-sm",
 				children: [
 					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(mission.icon, { className: "mb-2 h-8 w-8 text-brand-500" }),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						weight: "semibold",
 						className: "mb-1",
 						children: mission.title
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						className: "text-sm text-gray-600",
 						children: mission.desc
 					})
@@ -51,11 +51,11 @@ function AboutPage() {
 		}),
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mt-8",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "bold",
 				className: "mb-3 text-lg",
 				children: "Sourcing & Quality"
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				className: "mb-6 text-sm leading-relaxed text-gray-600",
 				children: "We partner with trusted local farmers who follow ethical and sustainable farming practices. Every product undergoes rigorous quality checks to ensure you receive only the freshest meat."
 			})]
diff --git a/apps/web-ui/.output/server/_ssr/me.addresses-DS1Qf9Hh.mjs b/apps/web-ui/.output/server/_ssr/me.addresses-DS1Qf9Hh.mjs
index 6348820..b53f5c7 100644
--- a/apps/web-ui/.output/server/_ssr/me.addresses-DS1Qf9Hh.mjs
+++ b/apps/web-ui/.output/server/_ssr/me.addresses-DS1Qf9Hh.mjs
@@ -1,7 +1,7 @@
 import "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { g as MapPin } from "../_libs/lucide-react.mjs";
-import { a as MyText, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
 require_react();
 var import_jsx_runtime = require_jsx_runtime();
@@ -10,13 +10,13 @@ function AddressesPage() {
 	const { data } = trpc.user.address.getUserAddresses.useQuery();
 	const deleteMutation = trpc.user.address.deleteAddress.useMutation({ onSuccess: () => utils.user.address.getUserAddresses.invalidate() });
 	const addresses = data?.data || [];
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 		weight: "bold",
 		className: "mb-4 text-xl",
 		children: "My Addresses"
 	}), addresses.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col items-center gap-4 py-20",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapPin, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapPin, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			className: "text-gray-500",
 			children: "No addresses saved"
 		})]
@@ -29,15 +29,15 @@ function AddressesPage() {
 				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 					className: "flex-1",
 					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 							weight: "semibold",
 							children: addr.name
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 							className: "text-sm text-gray-600",
 							children: [addr.addressLine1, addr.addressLine2 ? `, ${addr.addressLine2}` : ""]
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 							className: "text-sm text-gray-600",
 							children: [
 								addr.city,
@@ -47,7 +47,7 @@ function AddressesPage() {
 								addr.pincode
 							]
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 							className: "text-sm text-gray-500",
 							children: addr.phone
 						}),
diff --git a/apps/web-ui/.output/server/_ssr/me.complaints-CUIcnKsp.mjs b/apps/web-ui/.output/server/_ssr/me.complaints-CUIcnKsp.mjs
index f248fcd..78d4bcd 100644
--- a/apps/web-ui/.output/server/_ssr/me.complaints-CUIcnKsp.mjs
+++ b/apps/web-ui/.output/server/_ssr/me.complaints-CUIcnKsp.mjs
@@ -1,7 +1,7 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { f as Plus, h as MessageSquare } from "../_libs/lucide-react.mjs";
-import { a as MyText, i as MyButton, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
 //#region node_modules/.nitro/vite/services/ssr/assets/me.complaints-CUIcnKsp.js
 var import_react = /* @__PURE__ */ __toESM(require_react());
@@ -24,14 +24,14 @@ function ComplaintsPage() {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-4 flex items-center justify-between",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "bold",
 				className: "text-xl",
 				children: "Help & Complaints"
 			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyTouchableOpacity, {
 				onClick: () => setShowForm(!showForm),
 				className: "flex items-center gap-1 text-brand-600",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { className: "h-4 w-4" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { className: "h-4 w-4" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					className: "text-sm",
 					children: "New"
 				})]
@@ -40,7 +40,7 @@ function ComplaintsPage() {
 		showForm && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-6 rounded-xl border border-gray-100 bg-white p-4 shadow-sm",
 			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					weight: "semibold",
 					className: "mb-3",
 					children: "Raise a Complaint"
@@ -61,7 +61,7 @@ function ComplaintsPage() {
 		}),
 		complaints.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col items-center gap-4 py-20",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageSquare, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageSquare, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				className: "text-gray-500",
 				children: "No complaints yet"
 			})]
@@ -75,18 +75,18 @@ function ComplaintsPage() {
 						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 							className: `rounded-full px-2 py-0.5 text-xs font-medium ${complaint.status === "resolved" ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}`,
 							children: complaint.status || "pending"
-						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 							className: "text-xs text-gray-400",
 							children: complaint.createdAt ? new Date(complaint.createdAt).toLocaleDateString() : ""
 						})]
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						className: "text-sm text-gray-700",
 						children: complaint.body
 					}),
 					complaint.adminResponse && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 						className: "mt-2 rounded-lg bg-blue-50 p-2",
-						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 							className: "text-xs text-blue-600",
 							children: ["Response: ", complaint.adminResponse]
 						})
diff --git a/apps/web-ui/.output/server/_ssr/me.coupons-CK-hvcuK.mjs b/apps/web-ui/.output/server/_ssr/me.coupons-CK-hvcuK.mjs
index eca7108..1985a5d 100644
--- a/apps/web-ui/.output/server/_ssr/me.coupons-CK-hvcuK.mjs
+++ b/apps/web-ui/.output/server/_ssr/me.coupons-CK-hvcuK.mjs
@@ -1,7 +1,7 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { o as Ticket } from "../_libs/lucide-react.mjs";
-import { a as MyText, i as MyButton, o as MyTextInput, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, o as pInput, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
 //#region node_modules/.nitro/vite/services/ssr/assets/me.coupons-CK-hvcuK.js
 var import_react = /* @__PURE__ */ __toESM(require_react());
@@ -20,14 +20,14 @@ function CouponsPage() {
 		} });
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			weight: "bold",
 			className: "mb-4 text-xl",
 			children: "My Coupons"
 		}),
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-6 flex gap-2",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
 				placeholder: "Enter coupon code",
 				value: code,
 				onChange: (e) => setCode(e.target.value),
@@ -40,7 +40,7 @@ function CouponsPage() {
 		}),
 		coupons.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "flex flex-col items-center gap-4 py-20",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ticket, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Ticket, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				className: "text-gray-500",
 				children: "No coupons yet"
 			})]
@@ -49,16 +49,16 @@ function CouponsPage() {
 			children: coupons.map((coupon) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 				className: "rounded-xl border border-dashed border-brand-200 bg-brand-50 p-4",
 				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						weight: "bold",
 						className: "text-brand-700",
 						children: coupon.code
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						className: "text-sm text-gray-600",
 						children: coupon.description || `${coupon.discountPercent || 0}% off`
 					}),
-					coupon.expiresAt && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+					coupon.expiresAt && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 						className: "mt-1 text-xs text-gray-400",
 						children: ["Expires: ", new Date(coupon.expiresAt).toLocaleDateString()]
 					})
diff --git a/apps/web-ui/.output/server/_ssr/me.edit-profile-jHHMfrY4.mjs b/apps/web-ui/.output/server/_ssr/me.edit-profile-jHHMfrY4.mjs
index 61d2ea3..cc959ee 100644
--- a/apps/web-ui/.output/server/_ssr/me.edit-profile-jHHMfrY4.mjs
+++ b/apps/web-ui/.output/server/_ssr/me.edit-profile-jHHMfrY4.mjs
@@ -1,6 +1,6 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
-import { a as MyText, i as MyButton, o as MyTextInput, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, o as pInput, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 import { n as useAuth } from "./auth-context-DzjwonUC.mjs";
@@ -24,7 +24,7 @@ function EditProfilePage() {
 		});
 	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			weight: "bold",
 			className: "mb-4 text-xl",
 			children: "Edit Profile"
@@ -33,18 +33,18 @@ function EditProfilePage() {
 			onSubmit: handleSubmit,
 			className: "flex flex-col gap-4",
 			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
 					placeholder: "Name",
 					value: name,
 					onChange: (e) => setName(e.target.value)
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
 					placeholder: "Email",
 					type: "email",
 					value: email,
 					onChange: (e) => setEmail(e.target.value)
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
 					placeholder: "Mobile",
 					value: user?.mobile || "",
 					disabled: true,
diff --git a/apps/web-ui/.output/server/_ssr/me.orders-CSqnUtwy.mjs b/apps/web-ui/.output/server/_ssr/me.orders-CSqnUtwy.mjs
index 7458c43..aa49f01 100644
--- a/apps/web-ui/.output/server/_ssr/me.orders-CSqnUtwy.mjs
+++ b/apps/web-ui/.output/server/_ssr/me.orders-CSqnUtwy.mjs
@@ -1,6 +1,6 @@
 import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { p as Package, x as ChevronRight } from "../_libs/lucide-react.mjs";
-import { a as MyText, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 //#region node_modules/.nitro/vite/services/ssr/assets/me.orders-CSqnUtwy.js
@@ -12,13 +12,13 @@ function OrdersPage() {
 		limit: 20
 	});
 	const orders = data?.data || [];
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 		weight: "bold",
 		className: "mb-4 text-xl",
 		children: "My Orders"
 	}), orders.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "flex flex-col items-center gap-4 py-20",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Package, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Package, { className: "h-12 w-12 text-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			className: "text-gray-500",
 			children: "No orders yet"
 		})]
@@ -32,11 +32,11 @@ function OrdersPage() {
 			className: "rounded-xl border border-gray-100 bg-white p-4 shadow-sm",
 			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 					weight: "semibold",
 					className: "text-sm",
 					children: ["Order #", order.id]
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					className: "text-xs text-gray-500",
 					children: order.createdAt ? new Date(order.createdAt).toLocaleDateString() : ""
 				})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -46,7 +46,7 @@ function OrdersPage() {
 						children: order.status
 					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { className: "h-4 w-4 text-gray-400" })]
 				})]
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				className: "mt-1 text-xs text-gray-400",
 				children: ["Total: ₹", order.totalAmount || 0]
 			})]
diff --git a/apps/web-ui/.output/server/_ssr/me.orders._id-Cq7m-7ba.mjs b/apps/web-ui/.output/server/_ssr/me.orders._id-Cq7m-7ba.mjs
index 751746f..797562c 100644
--- a/apps/web-ui/.output/server/_ssr/me.orders._id-Cq7m-7ba.mjs
+++ b/apps/web-ui/.output/server/_ssr/me.orders._id-Cq7m-7ba.mjs
@@ -1,7 +1,7 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { S as ArrowLeft } from "../_libs/lucide-react.mjs";
-import { a as MyText, i as MyButton, r as LoadingDialog, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, r as LoadingDialog, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 import { t as Route } from "./me.orders._id-9KyXzQNP.mjs";
@@ -19,16 +19,16 @@ function OrderDetailPage() {
 	const handleCancel = () => {
 		cancelMutation.mutate({ orderId }, { onSuccess: () => setShowCancelDialog(false) });
 	};
-	if (!order) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, { children: "Loading..." }) });
+	if (!order) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, { children: "Loading..." }) });
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyTouchableOpacity, {
 			onClick: () => navigate({ to: "/me/orders" }),
 			className: "mb-4 flex items-center gap-2",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowLeft, { className: "h-5 w-5" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, { children: "Back to Orders" })]
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowLeft, { className: "h-5 w-5" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, { children: "Back to Orders" })]
 		}),
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-4",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				weight: "bold",
 				className: "text-xl",
 				children: ["Order #", order.id]
@@ -40,31 +40,31 @@ function OrderDetailPage() {
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-6",
 			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					weight: "semibold",
 					className: "mb-2",
 					children: "Items"
 				}),
 				(order.items || []).map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 					className: "flex items-center justify-between border-b border-gray-100 py-2",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 						className: "text-sm",
 						children: [
 							item.product?.name || `Product #${item.productId}`,
 							" x",
 							item.quantity
 						]
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 						className: "text-sm font-bold",
 						children: ["₹", item.price || 0]
 					})]
 				}, i)),
 				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 					className: "flex items-center justify-between pt-2",
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						weight: "bold",
 						children: "Total"
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 						weight: "bold",
 						className: "text-brand-600",
 						children: ["₹", order.totalAmount || 0]
@@ -74,18 +74,18 @@ function OrderDetailPage() {
 		}),
 		order.address && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-6",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "semibold",
 				className: "mb-2",
 				children: "Delivery Address"
 			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 				className: "rounded-xl border border-gray-100 bg-gray-50 p-3",
 				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						weight: "semibold",
 						children: order.address.name
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 						className: "text-sm text-gray-600",
 						children: [
 							order.address.addressLine1,
@@ -93,7 +93,7 @@ function OrderDetailPage() {
 							order.address.city
 						]
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						className: "text-sm text-gray-500",
 						children: order.address.phone
 					})
@@ -112,12 +112,12 @@ function OrderDetailPage() {
 			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 				className: "mx-4 w-full max-w-sm rounded-xl bg-white p-6",
 				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						weight: "bold",
 						className: "mb-2 text-lg",
 						children: "Cancel Order?"
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						className: "mb-6 text-sm text-gray-600",
 						children: "Are you sure you want to cancel this order?"
 					}),
diff --git a/apps/web-ui/.output/server/_ssr/me.terms-BY5QWW0t.mjs b/apps/web-ui/.output/server/_ssr/me.terms-BY5QWW0t.mjs
index f0eee5a..0bc1832 100644
--- a/apps/web-ui/.output/server/_ssr/me.terms-BY5QWW0t.mjs
+++ b/apps/web-ui/.output/server/_ssr/me.terms-BY5QWW0t.mjs
@@ -1,57 +1,57 @@
 import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
-import { a as MyText, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, t as AppContainer } from "./src-u_N1opJl.mjs";
 //#region node_modules/.nitro/vite/services/ssr/assets/me.terms-BY5QWW0t.js
 var import_jsx_runtime = require_jsx_runtime();
 function TermsPage() {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 		weight: "bold",
 		className: "mb-6 text-2xl",
 		children: "Terms & Conditions"
 	}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 		className: "prose prose-sm max-w-none text-gray-600",
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "semibold",
 				className: "mb-2 mt-4 text-gray-900",
 				children: "1. Acceptance of Terms"
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				className: "mb-4",
 				children: "By using Freshyo, you agree to these terms. If you do not agree, please do not use our service."
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "semibold",
 				className: "mb-2 mt-4 text-gray-900",
 				children: "2. Orders and Payments"
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				className: "mb-4",
 				children: "All orders are subject to availability. We reserve the right to cancel any order. Payments are collected at the time of delivery (COD)."
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "semibold",
 				className: "mb-2 mt-4 text-gray-900",
 				children: "3. Delivery Policy"
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				className: "mb-4",
 				children: "Delivery times are estimates. We strive to deliver within the promised time window but delays may occur due to unforeseen circumstances."
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "semibold",
 				className: "mb-2 mt-4 text-gray-900",
 				children: "4. Returns and Refunds"
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				className: "mb-4",
 				children: "If you are not satisfied with the quality of your order, please contact us within 24 hours of delivery. Refunds will be processed after quality assessment."
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "semibold",
 				className: "mb-2 mt-4 text-gray-900",
 				children: "5. Privacy"
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				className: "mb-4",
 				children: "We respect your privacy. Your personal information is used only for order processing and delivery purposes."
 			})
diff --git a/apps/web-ui/.output/server/_ssr/register-dcmJe--5.mjs b/apps/web-ui/.output/server/_ssr/register-dcmJe--5.mjs
index 19cbcc4..459db82 100644
--- a/apps/web-ui/.output/server/_ssr/register-dcmJe--5.mjs
+++ b/apps/web-ui/.output/server/_ssr/register-dcmJe--5.mjs
@@ -1,6 +1,6 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
-import { a as MyText, i as MyButton, o as MyTextInput } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, o as pInput } from "./src-u_N1opJl.mjs";
 import { n as trpc } from "./trpc-client-CQOIB5UU.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 import { n as useAuth } from "./auth-context-DzjwonUC.mjs";
@@ -34,12 +34,12 @@ function RegisterPage() {
 		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "w-full max-w-md",
 			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					weight: "bold",
 					className: "mb-2 text-center text-4xl text-white",
 					children: "Create Account"
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					className: "mb-8 text-center text-lg text-blue-100",
 					children: "Join Freshyo today"
 				}),
@@ -49,19 +49,19 @@ function RegisterPage() {
 						onSubmit: handleSubmit,
 						className: "flex flex-col gap-4",
 						children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
 								placeholder: "Full Name",
 								value: name,
 								onChange: (e) => setName(e.target.value),
 								required: true
 							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
 								placeholder: "Email",
 								type: "email",
 								value: email,
 								onChange: (e) => setEmail(e.target.value)
 							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
 								placeholder: "Mobile Number",
 								value: mobile,
 								onChange: (e) => {
@@ -70,7 +70,7 @@ function RegisterPage() {
 								},
 								required: true
 							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTextInput, {
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(pInput, {
 								placeholder: "Password",
 								type: "password",
 								value: password,
diff --git a/apps/web-ui/.output/server/_ssr/src-u_N1opJl.mjs b/apps/web-ui/.output/server/_ssr/src-u_N1opJl.mjs
index 734fd91..63ac0b7 100644
--- a/apps/web-ui/.output/server/_ssr/src-u_N1opJl.mjs
+++ b/apps/web-ui/.output/server/_ssr/src-u_N1opJl.mjs
@@ -15,7 +15,7 @@ var weightClasses = {
 	semibold: "font-semibold",
 	bold: "font-bold"
 };
-function MyText({ children, weight = "normal", numberOfLines, className, style, ...props }) {
+function p({ children, weight = "normal", numberOfLines, className, style, ...props }) {
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 		className: cn(weightClasses[weight], className),
 		style: {
@@ -45,7 +45,7 @@ function MyButton({ variant = "blue", fullWidth, textContent, children, classNam
 		children: textContent || children
 	});
 }
-function MyTextInput({ topLabel, fullWidth = true, shrunkPadding = false, error, multiline, className, style, ...props }) {
+function pInput({ topLabel, fullWidth = true, shrunkPadding = false, error, multiline, className, style, ...props }) {
 	const inputClasses = cn("flex w-full rounded-md border border-input bg-background px-3 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", shrunkPadding ? "py-1.5" : "py-2", error && "border-destructive", className);
 	multilime;
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
@@ -53,7 +53,7 @@ function MyTextInput({ topLabel, fullWidth = true, shrunkPadding = false, error,
 			...fullWidth ? { width: "100%" } : {},
 			...style
 		},
-		children: [topLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		children: [topLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			weight: "medium",
 			className: "mb-1 text-sm text-gray-500",
 			children: topLabel
@@ -178,7 +178,7 @@ function Quantifier({ value, setValue, step = 1, min = 0, max = 99 }) {
 				className: "flex h-8 w-8 items-center justify-center text-gray-500 hover:text-gray-700 disabled:opacity-30",
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Minus, { className: "h-3.5 w-3.5" })
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "semibold",
 				className: "min-w-[32px] text-center text-sm",
 				children: value
@@ -221,4 +221,4 @@ function AppContainer({ children, className }) {
 	});
 }
 //#endregion
-export { MyText as a, ProfileImage as c, MyButton as i, Quantifier as l, BottomDialog as n, MyTextInput as o, LoadingDialog as r, MyTouchableOpacity as s, AppContainer as t, SearchBar as u };
+export { p as a, ProfileImage as c, MyButton as i, Quantifier as l, BottomDialog as n, pInput as o, LoadingDialog as r, MyTouchableOpacity as s, AppContainer as t, SearchBar as u };
diff --git a/apps/web-ui/.output/server/_ssr/stores-CcccRdgP.mjs b/apps/web-ui/.output/server/_ssr/stores-CcccRdgP.mjs
index 81c7ae8..54a6539 100644
--- a/apps/web-ui/.output/server/_ssr/stores-CcccRdgP.mjs
+++ b/apps/web-ui/.output/server/_ssr/stores-CcccRdgP.mjs
@@ -1,6 +1,6 @@
 import { m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { s as Store } from "../_libs/lucide-react.mjs";
-import { a as MyText, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { a as useStores } from "./prominent-api-hooks-CNVDntUD.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 //#region node_modules/.nitro/vite/services/ssr/assets/stores-CcccRdgP.js
@@ -9,7 +9,7 @@ function StoresPage() {
 	const navigate = useNavigate();
 	const { data } = useStores();
 	const stores = data?.data || [];
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 		weight: "bold",
 		className: "mb-4 text-xl",
 		children: "Our Stores"
@@ -30,12 +30,12 @@ function StoresPage() {
 						className: "h-full w-full object-cover"
 					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Store, { className: "h-10 w-10 text-gray-400" })
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 					weight: "semibold",
 					className: "text-sm",
 					children: store.name
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 					className: "text-xs text-gray-500",
 					children: [store.productCount || 0, " products"]
 				})
diff --git a/apps/web-ui/.output/server/_ssr/stores._storeId-CWdFRADX.mjs b/apps/web-ui/.output/server/_ssr/stores._storeId-CWdFRADX.mjs
index 67bdc93..fabd520 100644
--- a/apps/web-ui/.output/server/_ssr/stores._storeId-CWdFRADX.mjs
+++ b/apps/web-ui/.output/server/_ssr/stores._storeId-CWdFRADX.mjs
@@ -1,7 +1,7 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { S as ArrowLeft } from "../_libs/lucide-react.mjs";
-import { a as MyText, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { i as useStoreWithProducts } from "./prominent-api-hooks-CNVDntUD.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 import { t as Route } from "./stores._storeId-Dh-du4bI.mjs";
@@ -33,7 +33,7 @@ function StoreDetailPage() {
 			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyTouchableOpacity, {
 				onClick: () => navigate({ to: "/stores" }),
 				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowLeft, { className: "h-5 w-5" })
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 				weight: "bold",
 				className: "text-xl",
 				children: store?.name || "Store"
@@ -67,13 +67,13 @@ function StoreDetailPage() {
 							className: "h-full w-full object-cover"
 						})
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 						weight: "semibold",
 						className: "text-sm",
 						numberOfLines: 2,
 						children: product.name
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 						weight: "bold",
 						className: "mt-1 text-brand-600",
 						children: ["₹", product.discountedPrice ?? product.price]
diff --git a/apps/web-ui/.output/server/_ssr/stores._storeId.product._productId-C9GtcXdb.mjs b/apps/web-ui/.output/server/_ssr/stores._storeId.product._productId-C9GtcXdb.mjs
index d3df43e..d3d87aa 100644
--- a/apps/web-ui/.output/server/_ssr/stores._storeId.product._productId-C9GtcXdb.mjs
+++ b/apps/web-ui/.output/server/_ssr/stores._storeId.product._productId-C9GtcXdb.mjs
@@ -1,7 +1,7 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
 import { S as ArrowLeft, l as ShoppingCart } from "../_libs/lucide-react.mjs";
-import { a as MyText, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
+import { a as p, i as MyButton, l as Quantifier, s as MyTouchableOpacity, t as AppContainer } from "./src-u_N1opJl.mjs";
 import { n as useAddToCart } from "./cart-query-hooks-Bz8ID9jY.mjs";
 import { l as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
 import { t as useCentralProductStore } from "./central-product-store-TS-vQ8-V.mjs";
@@ -24,7 +24,7 @@ function StoreProductDetailPage() {
 			storeId: product.storeId
 		}, { onSuccess: () => navigate({ to: "/cart" }) });
 	};
-	if (!product) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, { children: "Product not found" }) });
+	if (!product) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, { children: "Product not found" }) });
 	const price = product.discountedPrice ?? product.price;
 	const imageUrl = product.images?.[0];
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AppContainer, { children: [
@@ -44,27 +44,27 @@ function StoreProductDetailPage() {
 				className: "h-full w-full object-cover"
 			})
 		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			weight: "bold",
 			className: "mb-1 text-xl",
 			children: product.name
 		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 			className: "mb-2 text-sm text-gray-500",
 			children: [product.unitValue, product.unit]
 		}),
 		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
 			className: "mb-4 flex items-baseline gap-2",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				weight: "bold",
 				className: "text-2xl text-brand-600",
 				children: ["₹", price]
-			}), product.discountedPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MyText, {
+			}), product.discountedPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(p, {
 				className: "text-sm text-gray-400 line-through",
 				children: ["₹", product.price]
 			})]
 		}),
-		product.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
+		product.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(p, {
 			className: "mb-4 text-gray-600",
 			children: product.description
 		}),
diff --git a/apps/web-ui/src/components/AddToCartDialog.tsx b/apps/web-ui/src/components/AddToCartDialog.tsx
index 88422b0..6477f83 100644
--- a/apps/web-ui/src/components/AddToCartDialog.tsx
+++ b/apps/web-ui/src/components/AddToCartDialog.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useEffect } from 'react'
 import { useNavigate } from '@tanstack/react-router'
-import { BottomDialog, MyText, MyTouchableOpacity, Quantifier } from 'web-components'
+import { BottomDialog, p, div, Quantifier } from 'web-components'
 import { useSlots } from '../hooks/prominent-api-hooks'
 import { useAddToCart, useUpdateCartItem, useRemoveFromCart, useGetCart } from '../hooks/cart-query-hooks'
 import { useCartStore } from '../lib/stores/cart-store'
@@ -123,13 +123,13 @@ export default function AddToCartDialog() {
             <Truck className="h-5 w-5 text-blue-500" />
           </div>
           <div className="flex-1">
-            <MyText weight="bold" className="text-lg">
+            <p className="font-bold text-lg">
               Select Delivery Slot
-            </MyText>
+            </p>
             {product?.name && (
-              <MyText className="text-sm text-gray-500">
+              <p className="text-sm text-gray-500">
                 {product.name} ({product.productQuantity}{product.unitNotation ? ` ${product.unitNotation}` : ''})
-              </MyText>
+              </p>
             )}
           </div>
           <button onClick={clearAddedToCartProduct} className="text-gray-400 hover:text-gray-600">
@@ -139,7 +139,7 @@ export default function AddToCartDialog() {
 
         <div className="max-h-[40vh] space-y-3 overflow-y-auto mb-4">
           {availableSlots.map((slot: any) => (
-            <MyTouchableOpacity
+            <div
               key={slot.id}
               onClick={() => {
                 setSelectedSlotId(slot.id)
@@ -150,9 +150,9 @@ export default function AddToCartDialog() {
               }`}
             >
               <Truck className="mt-0.5 h-5 w-5 shrink-0 text-blue-500" />
-              <MyText weight="bold" className="flex-1 text-sm">
+              <p className="font-bold flex-1 text-sm">
                 {dayjs(slot.deliveryTime).format('ddd, DD MMM • ')}{formatTimeRange(slot.deliveryTime)}
-              </MyText>
+              </p>
               {selectedSlotId === slot.id ? (
                 <svg className="h-6 w-6 shrink-0 text-brand-500" fill="currentColor" viewBox="0 0 24 24">
                   <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
@@ -162,12 +162,12 @@ export default function AddToCartDialog() {
                   <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
                 </svg>
               )}
-            </MyTouchableOpacity>
+            </div>
           ))}
         </div>
 
         {showFlashOption && (
-          <MyTouchableOpacity
+          <div
             onClick={() => {
               setSelectedFlashDelivery(true)
               setSelectedSlotId(null)
@@ -177,9 +177,9 @@ export default function AddToCartDialog() {
             }`}
           >
             <Zap className="h-5 w-5 shrink-0 text-pink-500" />
-            <MyText weight="bold" className="flex-1 text-sm">
+            <p className="font-bold flex-1 text-sm">
               1 hr Delivery
-            </MyText>
+            </p>
             {selectedFlashDelivery ? (
               <svg className="h-6 w-6 shrink-0 text-pink-500" fill="currentColor" viewBox="0 0 24 24">
                 <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
@@ -189,24 +189,24 @@ export default function AddToCartDialog() {
                 <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
               </svg>
             )}
-          </MyTouchableOpacity>
+          </div>
         )}
 
         <div className="mb-4">
-          <MyText weight="bold" className="mb-2 text-sm">
+          <p className="font-bold mb-2 text-sm">
             Quantity
-          </MyText>
+          </p>
           <div className="flex items-center gap-3">
             <Quantifier value={quantity} setValue={setQuantity} step={1} unit={product?.unitNotation} />
             {isUpdate && (
-              <MyTouchableOpacity
+              <div
                 onClick={handleRemove}
                 className="rounded-lg border border-red-200 bg-red-50 p-2"
               >
                 <svg className="h-5 w-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                 </svg>
-              </MyTouchableOpacity>
+              </div>
             )}
           </div>
         </div>
diff --git a/apps/web-ui/src/components/AddressForm.tsx b/apps/web-ui/src/components/AddressForm.tsx
index 646bb1e..cd98465 100644
--- a/apps/web-ui/src/components/AddressForm.tsx
+++ b/apps/web-ui/src/components/AddressForm.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { trpc } from '../lib/trpc-client'
-import { MyText, MyTextInput, MyButton, MyTouchableOpacity } from 'web-components'
+import { p, pInput, MyButton, div } from 'web-components'
 import { MapPin, X, Plus } from 'lucide-react'
 import * as Yup from 'yup'
 
@@ -117,62 +117,62 @@ export function AddressForm({ onSuccess, initialValues, isEdit = false }: Addres
   return (
     <div className="max-h-[80vh] overflow-y-auto p-6">
       <div className="mb-6 flex items-center justify-between">
-        <MyText weight="bold" className="text-xl">
+        <p className="font-bold text-xl">
           {isEdit ? 'Edit Address' : 'Add Address'}
-        </MyText>
+        </p>
       </div>
 
       {/* Service Area Notice */}
       <div className="mb-4 rounded-lg border border-amber-200 bg-amber-50 p-3">
         <div className="flex items-center gap-2">
           <span className="text-amber-600">ℹ️</span>
-          <MyText className="flex-1 text-sm text-amber-800">
+          <p className="flex-1 text-sm text-amber-800">
             We currently serve only in Mahabubnagar town
-          </MyText>
+          </p>
         </div>
       </div>
 
       {/* Submit Error Message */}
       {submitError && (
         <div className="mb-4 rounded-lg border border-red-200 bg-red-50 p-3">
-          <MyText className="text-sm text-red-600">{submitError}</MyText>
+          <p className="text-sm text-red-600">{submitError}</p>
         </div>
       )}
 
       <div className="space-y-4">
         <div>
-          <MyTextInput
+          <pInput
             placeholder="Name"
             value={values.name}
             onChange={(e) => handleChange('name', e.target.value)}
             className={errors.name ? 'border-red-500' : ''}
           />
-          {errors.name && <MyText className="mt-1 text-sm text-red-500">{errors.name}</MyText>}
+          {errors.name && <p className="mt-1 text-sm text-red-500">{errors.name}</p>}
         </div>
 
         <div>
-          <MyTextInput
+          <pInput
             placeholder="Phone"
             type="tel"
             value={values.phone}
             onChange={(e) => handleChange('phone', e.target.value)}
             className={errors.phone ? 'border-red-500' : ''}
           />
-          {errors.phone && <MyText className="mt-1 text-sm text-red-500">{errors.phone}</MyText>}
+          {errors.phone && <p className="mt-1 text-sm text-red-500">{errors.phone}</p>}
         </div>
 
         <div>
-          <MyTextInput
+          <pInput
             placeholder="Address Line 1"
             value={values.addressLine1}
             onChange={(e) => handleChange('addressLine1', e.target.value)}
             className={errors.addressLine1 ? 'border-red-500' : ''}
           />
-          {errors.addressLine1 && <MyText className="mt-1 text-sm text-red-500">{errors.addressLine1}</MyText>}
+          {errors.addressLine1 && <p className="mt-1 text-sm text-red-500">{errors.addressLine1}</p>}
         </div>
 
         <div>
-          <MyTextInput
+          <pInput
             placeholder="Address Line 2 (Optional)"
             value={values.addressLine2}
             onChange={(e) => handleChange('addressLine2', e.target.value)}
@@ -181,7 +181,7 @@ export function AddressForm({ onSuccess, initialValues, isEdit = false }: Addres
 
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <MyTextInput
+            <pInput
               placeholder="City"
               value={values.city}
               disabled
@@ -189,7 +189,7 @@ export function AddressForm({ onSuccess, initialValues, isEdit = false }: Addres
             />
           </div>
           <div>
-            <MyTextInput
+            <pInput
               placeholder="State"
               value={values.state}
               disabled
@@ -199,7 +199,7 @@ export function AddressForm({ onSuccess, initialValues, isEdit = false }: Addres
         </div>
 
         <div>
-          <MyTextInput
+          <pInput
             placeholder="Pincode"
             value={values.pincode}
             disabled
@@ -208,25 +208,25 @@ export function AddressForm({ onSuccess, initialValues, isEdit = false }: Addres
         </div>
 
         {!showGoogleMapsField && (
-          <MyTouchableOpacity
+          <div
             onClick={() => setShowGoogleMapsField(true)}
             className="text-blue-500"
           >
-            <MyText weight="medium" className="text-sm">
+            <p className="font-medium text-sm">
               Attach with Google Maps
-            </MyText>
-          </MyTouchableOpacity>
+            </p>
+          </div>
         )}
 
         {showGoogleMapsField && (
           <div className="space-y-2">
-            <MyText className="text-xs text-gray-500">
+            <p className="text-xs text-gray-500">
               1. Open Google Maps and Find location<br />
               2. Long press the desired location<br />
               3. Click on Share and Click on Copy<br />
               4. Paste the copied url here in the field.
-            </MyText>
-            <MyTextInput
+            </p>
+            <pInput
               placeholder="Google Maps Shared URL"
               value={values.googleMapsUrl}
               onChange={(e) => handleChange('googleMapsUrl', e.target.value)}
@@ -241,7 +241,7 @@ export function AddressForm({ onSuccess, initialValues, isEdit = false }: Addres
             onChange={(e) => handleChange('isDefault', e.target.checked)}
             className="h-4 w-4 rounded border-gray-300 text-brand-500 focus:ring-brand-500"
           />
-          <MyText>Set as default address</MyText>
+          <p>Set as default address</p>
         </label>
 
         <MyButton
diff --git a/apps/web-ui/src/components/AppLayout.tsx b/apps/web-ui/src/components/AppLayout.tsx
new file mode 100644
index 0000000..02f6e2b
--- /dev/null
+++ b/apps/web-ui/src/components/AppLayout.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { BottomNavigation } from './BottomNavigation'
+import { FloatingCartBar } from './FloatingCartBar'
+import { useLocation } from '@tanstack/react-router'
+
+interface AppLayoutProps {
+  children: React.ReactNode
+  showCartBar?: boolean
+  isFlashDelivery?: boolean
+}
+
+// Routes where bottom nav should be hidden
+const hideBottomNavRoutes = ['/login', '/register', '/checkout', '/cart']
+
+export function AppLayout({ children, showCartBar = true, isFlashDelivery = false }: AppLayoutProps) {
+  const location = useLocation()
+  const currentPath = location.pathname
+
+  const shouldShowBottomNav = !hideBottomNavRoutes.some((route) =>
+    currentPath === route || currentPath.startsWith(`${route}/`)
+  )
+
+  const shouldShowCartBar = showCartBar && shouldShowBottomNav
+
+  return (
+    <div className="relative min-h-screen pb-20">
+      {/* Main Content */}
+      <main>{children}</main>
+
+      {/* Floating Cart Bar - positioned above bottom nav */}
+      {shouldShowCartBar && (
+        <FloatingCartBar isFlashDelivery={isFlashDelivery} />
+      )}
+
+      {/* Bottom Navigation */}
+      {shouldShowBottomNav && <BottomNavigation />}
+    </div>
+  )
+}
diff --git a/apps/web-ui/src/components/BottomNavigation.tsx b/apps/web-ui/src/components/BottomNavigation.tsx
new file mode 100644
index 0000000..c567259
--- /dev/null
+++ b/apps/web-ui/src/components/BottomNavigation.tsx
@@ -0,0 +1,120 @@
+import React from 'react'
+import { useLocation, useNavigate } from '@tanstack/react-router'
+import { p, div } from 'web-components'
+import { Home, Store, Zap, RotateCcw, User } from 'lucide-react'
+
+interface TabItem {
+  name: string
+  path: string
+  label: string
+  icon: React.ReactNode
+  iconActive: React.ReactNode
+  isCenter?: boolean
+}
+
+export function BottomNavigation() {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const currentPath = location.pathname
+
+  const tabs: TabItem[] = [
+    {
+      name: 'home',
+      path: '/home',
+      label: 'Home',
+      icon: <Home className="h-5 w-5" />,
+      iconActive: <Home className="h-5 w-5 fill-current" />,
+    },
+    {
+      name: 'stores',
+      path: '/stores',
+      label: 'Stores',
+      icon: <Store className="h-5 w-5" />,
+      iconActive: <Store className="h-5 w-5 fill-current" />,
+    },
+    {
+      name: 'flash',
+      path: '/flash',
+      label: '1 Hr Delivery',
+      icon: <Zap className="h-6 w-6" />,
+      iconActive: <Zap className="h-6 w-6 fill-current" />,
+      isCenter: true,
+    },
+    {
+      name: 'order-again',
+      path: '/me/orders',
+      label: 'Order Again',
+      icon: <RotateCcw className="h-5 w-5" />,
+      iconActive: <RotateCcw className="h-5 w-5 fill-current" />,
+    },
+    {
+      name: 'me',
+      path: '/me',
+      label: 'Me',
+      icon: <User className="h-5 w-5" />,
+      iconActive: <User className="h-5 w-5 fill-current" />,
+    },
+  ]
+
+  const isActive = (path: string) => {
+    if (path === '/home') return currentPath === '/home' || currentPath.startsWith('/home/')
+    if (path === '/stores') return currentPath === '/stores' || currentPath.startsWith('/stores/')
+    if (path === '/flash') return currentPath === '/flash' || currentPath.startsWith('/flash/')
+    if (path === '/me/orders') return currentPath === '/me/orders' || currentPath.startsWith('/me/orders/')
+    if (path === '/me') return currentPath === '/me' || (currentPath.startsWith('/me/') && !currentPath.startsWith('/me/orders/'))
+    return currentPath === path || currentPath.startsWith(`${path}/`)
+  }
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 z-50 border-t border-gray-200 bg-white pb-safe">
+      <div className="flex h-16 items-center justify-around px-2">
+        {tabs.map((tab) => {
+          const active = isActive(tab.path)
+
+          if (tab.isCenter) {
+            // Center elevated button for Flash Delivery
+            return (
+              <div
+                key={tab.name}
+                onClick={() => navigate({ to: tab.path })}
+                className="relative -top-3 flex flex-col items-center"
+              >
+                <div
+                  className={`flex h-14 w-14 items-center justify-center rounded-full border-4 border-white shadow-lg transition-all ${
+                    active
+                      ? 'bg-gradient-to-br from-brand-400 to-brand-600'
+                      : 'bg-gradient-to-br from-gray-400 to-gray-600'
+                  }`}
+                >
+                  <span className={active ? 'text-white' : 'text-white/80'}>{tab.icon}</span>
+                </div>
+                <p
+                  className={`mt-0.5 text-[10px] font-bold ${active ? 'text-brand-600' : 'text-gray-500'}`}
+                >
+                  {tab.label}
+                </p>
+              </div>
+            )
+          }
+
+          return (
+            <div
+              key={tab.name}
+              onClick={() => navigate({ to: tab.path })}
+              className="flex flex-1 flex-col items-center justify-center py-2"
+            >
+              <span className={active ? 'text-brand-600' : 'text-gray-500'}>
+                {active ? tab.iconActive : tab.icon}
+              </span>
+              <p
+                className={`mt-1 text-xs font-medium ${active ? 'text-brand-600' : 'text-gray-500'}`}
+              >
+                {tab.label}
+              </p>
+            </div>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}
diff --git a/apps/web-ui/src/components/CheckoutAddressSelector.tsx b/apps/web-ui/src/components/CheckoutAddressSelector.tsx
index 5d36b83..271b5b5 100644
--- a/apps/web-ui/src/components/CheckoutAddressSelector.tsx
+++ b/apps/web-ui/src/components/CheckoutAddressSelector.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useCheckoutAddress } from '../hooks/checkout-hooks'
 import { trpc } from '../lib/trpc-client'
 import { useQueryClient } from '@tanstack/react-query'
-import { MyText, MyTouchableOpacity } from 'web-components'
+import { p, div } from 'web-components'
 import { MapPin, Home, Briefcase, Check, Plus, Edit2, Trash2 } from 'lucide-react'
 
 interface AddressSelectorProps {
@@ -39,33 +39,33 @@ export function CheckoutAddressSelector({ onAddressSelect, onAddAddress, onEditA
           <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-50">
             <MapPin className="h-4 w-4 text-blue-500" />
           </div>
-          <MyText weight="bold" className="text-lg text-gray-900">
+          <p className="font-bold text-lg text-gray-900">
             Delivery Address
-          </MyText>
+          </p>
         </div>
-        <MyTouchableOpacity
+        <div
           onClick={onAddAddress}
           className="flex items-center gap-1 text-brand-500"
         >
           <Plus className="h-4 w-4" />
-          <MyText weight="bold" className="text-sm">
+          <p className="font-bold text-sm">
             Add New
-          </MyText>
-        </MyTouchableOpacity>
+          </p>
+        </div>
       </div>
 
       {sortedAddresses.length === 0 ? (
         <div className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-gray-200 bg-gray-50 p-8">
           <MapPin className="mb-2 h-10 w-10 text-gray-400" />
-          <MyText className="mb-1 text-gray-500">No addresses found</MyText>
-          <MyTouchableOpacity
+          <p className="mb-1 text-gray-500">No addresses found</p>
+          <div
             onClick={onAddAddress}
             className="mt-3 rounded-lg bg-brand-500 px-4 py-2"
           >
-            <MyText weight="bold" className="text-sm text-white">
+            <p className="font-bold text-sm text-white">
               Add Address
-            </MyText>
-          </MyTouchableOpacity>
+            </p>
+          </div>
         </div>
       ) : (
         <div className="space-y-3">
@@ -90,25 +90,25 @@ export function CheckoutAddressSelector({ onAddressSelect, onAddAddress, onEditA
                   </div>
                   <div className="min-w-0 flex-1">
                     <div className="mb-1 flex items-center gap-2">
-                      <MyText weight="bold" className={selectedAddressId === address.id ? 'text-brand-600' : 'text-gray-900'}>
+                      <p className={`font-bold ${selectedAddressId === address.id ? 'text-brand-600' : 'text-gray-900'}`}>
                         {address.name}
-                      </MyText>
+                      </p>
                       {address.isDefault && (
                         <span className="rounded bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">
                           Default
                         </span>
                       )}
                     </div>
-                    <MyText className="text-sm leading-relaxed text-gray-600">
+                    <p className="text-sm leading-relaxed text-gray-600">
                       {address.addressLine1}
                       {address.addressLine2 ? `, ${address.addressLine2}` : ''}
-                    </MyText>
-                    <MyText className="text-sm text-gray-600">
+                    </p>
+                    <p className="text-sm text-gray-600">
                       {address.city}, {address.state} - {address.pincode}
-                    </MyText>
-                    <MyText className="mt-1 text-xs text-gray-500">
+                    </p>
+                    <p className="mt-1 text-xs text-gray-500">
                       Phone: {address.phone}
-                    </MyText>
+                    </p>
                   </div>
                 </div>
                 <div className="flex flex-col items-end gap-2">
@@ -118,7 +118,7 @@ export function CheckoutAddressSelector({ onAddressSelect, onAddAddress, onEditA
                     </div>
                   )}
                   <div className="flex gap-1">
-                    <MyTouchableOpacity
+                    <div
                       onClick={(e) => {
                         e.stopPropagation()
                         onEditAddress?.(address)
@@ -126,8 +126,8 @@ export function CheckoutAddressSelector({ onAddressSelect, onAddAddress, onEditA
                       className="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-gray-100 hover:text-gray-600"
                     >
                       <Edit2 className="h-4 w-4" />
-                    </MyTouchableOpacity>
-                    <MyTouchableOpacity
+                    </div>
+                    <div
                       onClick={(e) => {
                         e.stopPropagation()
                         if (confirm('Are you sure you want to delete this address?')) {
@@ -137,7 +137,7 @@ export function CheckoutAddressSelector({ onAddressSelect, onAddAddress, onEditA
                       className="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 hover:bg-red-50 hover:text-red-500"
                     >
                       <Trash2 className="h-4 w-4" />
-                    </MyTouchableOpacity>
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/apps/web-ui/src/components/FloatingCartBar.tsx b/apps/web-ui/src/components/FloatingCartBar.tsx
new file mode 100644
index 0000000..562637f
--- /dev/null
+++ b/apps/web-ui/src/components/FloatingCartBar.tsx
@@ -0,0 +1,295 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import { useNavigate, useLocation } from '@tanstack/react-router'
+import { useGetCart, useUpdateCartItem, useRemoveFromCart, useAddToCart } from '../hooks/cart-query-hooks'
+import { useAllProducts } from '../hooks/prominent-api-hooks'
+import { useGetEssentialConsts } from '../hooks/prominent-api-hooks'
+import { p, div, MiniQuantifier } from 'web-components'
+import { Dialog } from './Dialog'
+import { ShoppingCart, ChevronRight, Package, X, Clock, MapPin, Home, Store, Zap, RotateCcw, User } from 'lucide-react'
+import dayjs from 'dayjs'
+
+interface FloatingCartBarProps {
+  isFlashDelivery?: boolean
+}
+
+// Smart time window formatting function
+const formatTimeRange = (deliveryTime: string | Date) => {
+  const time = dayjs(deliveryTime)
+  const endTime = time.add(1, 'hour')
+  const startPeriod = time.format('A')
+  const endPeriod = endTime.format('A')
+
+  let timeRange
+  if (startPeriod === endPeriod) {
+    timeRange = `${time.format('h')}-${endTime.format('h')} ${startPeriod}`
+  } else {
+    timeRange = `${time.format('h:mm')} ${startPeriod} - ${endTime.format('h:mm')} ${endPeriod}`
+  }
+
+  return `${time.format('ddd, DD MMM ')}${timeRange}`
+}
+
+export function FloatingCartBar({ isFlashDelivery = false }: FloatingCartBarProps) {
+  const navigate = useNavigate()
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [quantities, setQuantities] = useState<Record<number, number>>({})
+  const cartType = isFlashDelivery ? 'flash' : 'regular'
+
+  const { data: cartData, refetch: refetchCart } = useGetCart(cartType)
+  const { data: constsData } = useGetEssentialConsts()
+  const { data: productsData } = useAllProducts()
+  const updateCartItem = useUpdateCartItem(cartType)
+  const removeFromCart = useRemoveFromCart(cartType)
+  const addToCartHook = useAddToCart(cartType)
+
+  const products = productsData?.products || []
+  const productsById: Record<number, any> = {}
+  products.forEach((p: any) => { productsById[p.id] = p })
+
+  const cartItems = cartData?.items || []
+  const itemCount = cartItems.length
+
+  useEffect(() => {
+    const initial: Record<number, number> = {}
+    cartItems.forEach((item) => {
+      initial[item.id] = item.quantity
+    })
+    setQuantities(initial)
+  }, [cartData])
+
+  // Calculate total cart value
+  const totalCartValue = cartItems.reduce(
+    (sum, item) => {
+      const product = productsById[item.productId]
+      const basePrice = product?.price ?? 0
+      const price = isFlashDelivery ? (product?.flashPrice ?? basePrice) : basePrice
+      return sum + price * item.quantity
+    },
+    0
+  )
+
+  const freeDeliveryThreshold = isFlashDelivery
+    ? constsData?.flashFreeDeliveryThreshold
+    : constsData?.freeDeliveryThreshold
+  const remainingForFreeDelivery = Math.max(0, freeDeliveryThreshold - totalCartValue)
+
+  const cartBarColor = isFlashDelivery ? '#f81260' : 'var(--brand-600, #2563eb)'
+  const cartBarBorderColor = isFlashDelivery ? '#e11d48' : 'var(--brand-500, #3b82f6)'
+
+  return (
+    <>
+      {/* Collapsed Bar */}
+      <div
+        className="fixed bottom-20 left-4 right-4 z-40 rounded-lg border shadow-2xl"
+        style={{
+          backgroundColor: cartBarColor,
+          borderColor: cartBarBorderColor,
+          borderWidth: 1,
+        }}
+      >
+        <div
+          className="flex flex-row items-center justify-between py-3"
+          onClick={() => itemCount > 0 && setIsExpanded(true)}
+        >
+          <div className="flex flex-1 flex-row items-center px-2">
+            <div className="flex-1">
+              <div className="flex flex-row items-center">
+                <p className="font-bold mr-2 text-sm text-white">
+                  {itemCount === 0 ? (
+                    isFlashDelivery ? 'No Flash Items' : 'No Items In Cart'
+                  ) : (
+                    <>
+                      <span className="text-base font-black text-white">
+                        ₹{totalCartValue}
+                      </span>
+                      <span className="text-sm font-bold text-white">
+                        {' '}&bull; {itemCount} {itemCount === 1 ? 'Item' : 'Items'}
+                      </span>
+                    </>
+                  )}
+                </p>
+                {itemCount > 0 && <span className="text-white">▲</span>}
+              </div>
+
+              {remainingForFreeDelivery > 0 ? (
+                <p className="mt-1 text-[10px] font-bold text-white/80">
+                  ₹{remainingForFreeDelivery} more for <span className="text-emerald-300">FREE Delivery</span>
+                </p>
+              ) : itemCount > 0 ? (
+                <div className="mt-0.5 flex flex-row items-center">
+                  <span className="text-emerald-400">✓</span>
+                  <p className="ml-1 text-[10px] font-black uppercase tracking-tighter text-emerald-300">
+                    Free Delivery Unlocked
+                  </p>
+                </div>
+              ) : (
+                <p className="mt-0.5 text-[10px] text-white/60">
+                  Shop for ₹{freeDeliveryThreshold}+ for free shipping
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div
+            className="rounded-2xl bg-white px-3 py-2 shadow-lg"
+            onClick={(e) => {
+              e.stopPropagation()
+              navigate({
+                to: isFlashDelivery ? '/flash/cart' : '/cart',
+              })
+            }}
+          >
+            <p className="font-bold text-sm" style={{ color: cartBarColor }}>
+              Go to Cart
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Expanded Dialog */}
+      <Dialog open={isExpanded} onClose={() => setIsExpanded(false)} title="">
+        <div className="flex max-h-[80vh] flex-col">
+          {/* Header */}
+          <div className="flex flex-row items-center justify-between border-b border-slate-100 px-6 py-5">
+            <div>
+              <p className="font-bold text-xl tracking-tight text-slate-900">
+                Your Cart
+              </p>
+              <p className="text-xs font-bold uppercase tracking-widest text-slate-400">
+                {itemCount} Items
+              </p>
+            </div>
+            <div
+              className="flex h-10 w-10 items-center justify-center rounded-2xl bg-slate-100"
+              onClick={() => setIsExpanded(false)}
+            >
+              <X className="h-6 w-6 text-slate-500" />
+            </div>
+          </div>
+
+          {/* Progress Bar Header */}
+          {remainingForFreeDelivery > 0 && (
+            <div className="flex flex-row items-center justify-between bg-emerald-50/50 px-6 py-3">
+              <div className="mr-4 flex-1">
+                <div className="mb-1.5 flex flex-row items-center justify-between">
+                  <p className="text-[10px] font-black uppercase text-emerald-700">Free Delivery Progress</p>
+                  <p className="text-[10px] font-black text-emerald-700">
+                    {Math.round((totalCartValue / freeDeliveryThreshold) * 100)}%
+                  </p>
+                </div>
+                <div className="h-1.5 overflow-hidden rounded-full border border-emerald-100 bg-white">
+                  <div
+                    className="h-full bg-emerald-500"
+                    style={{ width: `${(totalCartValue / freeDeliveryThreshold) * 100}%` }}
+                  />
+                </div>
+              </div>
+              <div className="items-end">
+                <p className="text-[10px] font-bold text-slate-500">Needed</p>
+                <p className="text-sm font-black text-emerald-600">+₹{remainingForFreeDelivery}</p>
+              </div>
+            </div>
+          )}
+
+          {/* Items List */}
+          <div className="flex-1 overflow-y-auto px-6 py-4">
+            {cartItems.map((item, index) => (
+              <React.Fragment key={item.id}>
+                <div className="py-4">
+                  <div className="flex flex-row items-center">
+                    <img
+                      src={productsById[item.productId]?.images?.[0]}
+                      alt=""
+                      className="h-8 w-8 rounded-lg border border-slate-100 bg-slate-50 object-cover"
+                    />
+
+                    <div className="ml-4 flex-1">
+                      <div className="mb-1 flex flex-row items-center justify-between">
+                        <p className="font-bold flex-1 text-sm text-slate-900">
+                          {productsById[item.productId]?.name || ''}{' '}
+                          <span className="text-xs font-medium text-slate-500">
+                            ({productsById[item.productId]?.productQuantity || 0}
+                            {productsById[item.productId]?.unitNotation || ''})
+                          </span>
+                        </p>
+                        <MiniQuantifier
+                          value={quantities[item.id] || item.quantity}
+                          setValue={(value) => {
+                            if (value === 0) {
+                              removeFromCart.mutate(item.id)
+                            } else {
+                              setQuantities((prev) => ({ ...prev, [item.id]: value }))
+                              updateCartItem.mutate({ productId: item.id, quantity: value })
+                            }
+                          }}
+                          step={productsById[item.productId]?.incrementStep || 1}
+                        />
+                      </div>
+                      <div className="flex flex-row items-center justify-between">
+                        {item.slotId && (
+                          <div className="flex flex-row items-center rounded-lg border border-blue-100 bg-blue-50 px-2 py-1">
+                            <Clock className="h-3 w-3 text-blue-600" />
+                            <p className="ml-1 text-[9px] font-black uppercase text-blue-700">
+                              {formatTimeRange(item.deliveryDate || new Date())}
+                            </p>
+                          </div>
+                        )}
+                        <p className="font-bold text-sm text-slate-900">
+                          ₹{(() => {
+                            const product = productsById[item.productId]
+                            const basePrice = product?.price ?? 0
+                            const price = isFlashDelivery ? (product?.flashPrice ?? basePrice) : basePrice
+                            return price * item.quantity
+                          })()}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                {index < cartItems.length - 1 && <div className="h-px w-full bg-slate-200" />}
+              </React.Fragment>
+            ))}
+          </div>
+
+          {/* Footer */}
+          <div className="border-t border-slate-100 bg-white p-6">
+            <div className="mb-5 flex flex-row items-center justify-between">
+              <div>
+                <p className="text-[10px] font-black uppercase tracking-widest text-slate-400">Subtotal</p>
+                <p className="font-bold text-2xl text-slate-900">
+                  ₹{totalCartValue}
+                </p>
+              </div>
+              {remainingForFreeDelivery === 0 && (
+                <div className="flex flex-row items-center rounded-xl border border-emerald-100 bg-emerald-50 px-3 py-1.5">
+                  <Package className="h-4 w-4 text-emerald-600" />
+                  <p className="ml-1.5 text-[10px] font-black uppercase text-emerald-700">Free Delivery</p>
+                </div>
+              )}
+            </div>
+
+            <div
+              onClick={() => {
+                setIsExpanded(false)
+                navigate({
+                  to: isFlashDelivery ? '/flash/cart' : '/cart',
+                })
+              }}
+              className="flex flex-row items-center justify-center rounded-2xl py-4 shadow-lg"
+              style={{
+                background: isFlashDelivery
+                  ? 'linear-gradient(90deg, #f81260, #c40e50)'
+                  : 'linear-gradient(90deg, #1570EF, #194185)',
+              }}
+            >
+              <p className="font-bold text-base uppercase tracking-widest text-white">
+                Go to cart
+              </p>
+              <ChevronRight className="ml-1 h-5 w-5 text-white" />
+            </div>
+          </div>
+        </div>
+      </Dialog>
+    </>
+  )
+}
diff --git a/apps/web-ui/src/components/PaymentAndOrderComponent.tsx b/apps/web-ui/src/components/PaymentAndOrderComponent.tsx
index bf3f452..5cee2ef 100644
--- a/apps/web-ui/src/components/PaymentAndOrderComponent.tsx
+++ b/apps/web-ui/src/components/PaymentAndOrderComponent.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react'
 import { trpc } from '../lib/trpc-client'
 import { useQueryClient } from '@tanstack/react-query'
-import { MyText, MyButton, MyTextInput, MyTouchableOpacity, LoadingDialog } from 'web-components'
+import { p, MyButton, pInput, div, LoadingDialog } from 'web-components'
 import { useAllProducts } from '../hooks/prominent-api-hooks'
 import { useGetEssentialConsts } from '../hooks/prominent-api-hooks'
 import { clearLocalCart } from '../hooks/cart-query-hooks'
@@ -157,18 +157,18 @@ export function PaymentAndOrderComponent({
       {/* Back Button */}
       {onBack && (
         <div className="mb-4 rounded-2xl border border-gray-100 bg-white p-4 shadow-sm">
-          <MyTouchableOpacity onClick={onBack} className="flex items-center gap-2">
+          <div onClick={onBack} className="flex items-center gap-2">
             <ArrowLeft className="h-5 w-5 text-gray-500" />
-            <MyText className="font-medium text-gray-600">Back to Cart</MyText>
-          </MyTouchableOpacity>
+            <p className="font-medium text-gray-600">Back to Cart</p>
+          </div>
         </div>
       )}
 
       {/* Special Instructions */}
       <div className="mb-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
-        <MyText weight="bold" className="mb-3 text-base text-gray-900">
+        <p className="font-bold mb-3 text-base text-gray-900">
           Delivery Instructions
-        </MyText>
+        </p>
         <textarea
           value={userNotes}
           onChange={(e) => setUserNotes(e.target.value)}
@@ -180,9 +180,9 @@ export function PaymentAndOrderComponent({
 
       {/* Payment Method */}
       <div className="mb-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
-        <MyText weight="bold" className="mb-4 text-lg text-gray-900">
+        <p className="font-bold mb-4 text-lg text-gray-900">
           Payment Method
-        </MyText>
+        </p>
 
         {/* Online Payment (Coming Soon) */}
         <div className="mb-3 flex cursor-not-allowed items-center rounded-xl border border-gray-200 bg-gray-100 p-4 opacity-50">
@@ -191,15 +191,15 @@ export function PaymentAndOrderComponent({
             <CreditCard className="h-5 w-5 text-gray-400" />
           </div>
           <div>
-            <MyText weight="bold" className="text-gray-500">
+            <p className="font-bold text-gray-500">
               Pay Online (Coming Soon)
-            </MyText>
-            <MyText className="text-xs text-gray-400">UPI, Cards, Netbanking</MyText>
+            </p>
+            <p className="text-xs text-gray-400">UPI, Cards, Netbanking</p>
           </div>
         </div>
 
         {/* Cash on Delivery */}
-        <MyTouchableOpacity
+        <div
           onClick={() => setPaymentMethod('cod')}
           className={`flex items-center rounded-xl border p-4 transition-all ${
             paymentMethod === 'cod' ? 'border-brand-500 bg-blue-50' : 'border-gray-200'
@@ -216,64 +216,64 @@ export function PaymentAndOrderComponent({
             <Banknote className="h-5 w-5 text-green-500" />
           </div>
           <div>
-            <MyText weight="bold" className="text-gray-900">
+            <p className="font-bold text-gray-900">
               Cash on Delivery
-            </MyText>
-            <MyText className="text-xs text-gray-500">Pay when you receive</MyText>
+            </p>
+            <p className="text-xs text-gray-500">Pay when you receive</p>
           </div>
-        </MyTouchableOpacity>
+        </div>
 
         <div className="mt-3 flex items-center gap-4">
           <div className="flex items-center gap-1.5">
             <Wallet className="h-3 w-3 text-purple-600" />
-            <MyText className="text-xs text-gray-500">UPI accepted during COD</MyText>
+            <p className="text-xs text-gray-500">UPI accepted during COD</p>
           </div>
           <div className="flex items-center gap-1.5">
             <Banknote className="h-3 w-3 text-green-500" />
-            <MyText className="text-xs text-gray-500">Cash payment</MyText>
+            <p className="text-xs text-gray-500">Cash payment</p>
           </div>
         </div>
       </div>
 
       {/* Bill Details */}
       <div className="mb-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
-        <MyText weight="bold" className="mb-4 text-lg text-gray-900">
+        <p className="font-bold mb-4 text-lg text-gray-900">
           Bill Details
-        </MyText>
+        </p>
 
         {/* Item Total */}
         <div className="mb-2 flex items-center justify-between">
-          <MyText className="text-gray-500">Item Total</MyText>
-          <MyText weight="medium" className="text-gray-900">
+          <p className="text-gray-500">Item Total</p>
+          <p className="font-medium text-gray-900">
             ₹{totalPrice}
-          </MyText>
+          </p>
         </div>
 
         {/* Discount */}
         {discountAmount > 0 && (
           <div className="mb-2 flex items-center justify-between">
-            <MyText className="text-gray-500">Product Discount</MyText>
-            <MyText weight="medium" className="text-green-600">
+            <p className="text-gray-500">Product Discount</p>
+            <p className="font-medium text-green-600">
               -₹{discountAmount.toFixed(2)}
-            </MyText>
+            </p>
           </div>
         )}
 
         {/* Delivery Fee */}
         <div className="mb-2 flex items-center justify-between">
           <div className="flex items-center gap-1">
-            <MyText className="text-gray-500">Delivery Fee</MyText>
+            <p className="text-gray-500">Delivery Fee</p>
             <Info className="h-3.5 w-3.5 text-gray-400" />
           </div>
           <div className="flex items-center">
             {deliveryCharge === 0 && (
-              <MyText className="mr-2 text-xs text-gray-400 line-through">
+              <p className="mr-2 text-xs text-gray-400 line-through">
                 ₹{isFlashDelivery ? constsData?.flashDeliveryCharge : constsData?.deliveryCharge}
-              </MyText>
+              </p>
             )}
-            <MyText weight="medium" className={deliveryCharge === 0 ? 'text-green-600' : 'text-gray-900'}>
+            <p className={`font-medium ${deliveryCharge === 0 ? 'text-green-600' : 'text-gray-900'}`}>
               {deliveryCharge === 0 ? 'Free' : `₹${deliveryCharge}`}
-            </MyText>
+            </p>
           </div>
         </div>
 
@@ -285,9 +285,9 @@ export function PaymentAndOrderComponent({
           return threshold > 0 && finalTotal < threshold ? (
             <div className="mb-2 flex items-center gap-2 rounded-lg bg-blue-50 p-2.5">
               <ShoppingBag className="h-4 w-4 text-blue-600" />
-              <MyText weight="medium" className="flex-1 text-xs text-blue-700">
+              <p className="font-medium flex-1 text-xs text-blue-700">
                 Add products worth ₹{(threshold - finalTotal).toFixed(0)} for free delivery
-              </MyText>
+              </p>
             </div>
           ) : null
         })()}
@@ -297,23 +297,23 @@ export function PaymentAndOrderComponent({
 
         {/* Grand Total */}
         <div className="flex items-center justify-between">
-          <MyText weight="bold" className="text-lg text-gray-900">
+          <p className="font-bold text-lg text-gray-900">
             To Pay
-          </MyText>
-          <MyText weight="bold" className="text-xl text-gray-900">
+          </p>
+          <p className="font-bold text-xl text-gray-900">
             ₹{finalTotalWithDelivery.toFixed(2)}
-          </MyText>
+          </p>
         </div>
 
         {/* Savings Banner */}
         {(discountAmount > 0 || deliveryCharge === 0) && (
           <div className="mt-4 flex items-center justify-center gap-1.5 rounded-lg bg-green-50 p-2">
             <Star className="h-4 w-4 text-green-600" />
-            <MyText weight="bold" className="text-xs text-green-700">
+            <p className="font-bold text-xs text-green-700">
               You saved ₹
               {(discountAmount + (deliveryCharge === 0 ? (isFlashDelivery ? constsData?.flashDeliveryCharge : constsData?.deliveryCharge) : 0)).toFixed(2)}{' '}
               on this order
-            </MyText>
+            </p>
           </div>
         )}
       </div>
@@ -323,14 +323,14 @@ export function PaymentAndOrderComponent({
         <div className="mb-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
           <div className="mb-3 flex items-center gap-2">
             <Tag className="h-5 w-5 text-brand-500" />
-            <MyText weight="bold" className="text-lg text-gray-900">
+            <p className="font-bold text-lg text-gray-900">
               Apply Coupon
-            </MyText>
+            </p>
           </div>
 
           <div className="space-y-2">
             {eligibleCoupons.map((coupon: any) => (
-              <MyTouchableOpacity
+              <div
                 key={coupon.id}
                 onClick={() => setSelectedCouponId(selectedCouponId === coupon.id ? null : coupon.id)}
                 className={`flex items-center justify-between rounded-xl border p-3 transition-all ${
@@ -344,22 +344,22 @@ export function PaymentAndOrderComponent({
               >
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-2">
-                    <MyText weight="bold" className="text-sm text-gray-900">
+                    <p className="font-bold text-sm text-gray-900">
                       {coupon.code}
-                    </MyText>
+                    </p>
                     {!coupon.isEligible && (
                       <span className="rounded bg-red-100 px-1.5 py-0.5 text-xs text-red-600">
                         {coupon.ineligibilityReason}
                       </span>
                     )}
                   </div>
-                  <MyText className="text-xs text-gray-500">
+                  <p className="text-xs text-gray-500">
                     {coupon.discountType === 'percentage'
                       ? `${coupon.discountValue}% off`
                       : `₹${coupon.discountValue} off`}
                     {coupon.maxValue ? ` up to ₹${coupon.maxValue}` : ''}
                     {coupon.minOrder ? ` | Min order ₹${coupon.minOrder}` : ''}
-                  </MyText>
+                  </p>
                 </div>
                 {selectedCouponId === coupon.id && (
                   <div className="flex h-6 w-6 items-center justify-center rounded-full bg-brand-500">
@@ -368,7 +368,7 @@ export function PaymentAndOrderComponent({
                     </svg>
                   </div>
                 )}
-              </MyTouchableOpacity>
+              </div>
             ))}
           </div>
         </div>
@@ -379,9 +379,9 @@ export function PaymentAndOrderComponent({
         {!selectedAddress && (
           <div className="mb-3 flex items-center gap-2 rounded-lg bg-red-50 p-3">
             <Info className="h-4 w-4 text-red-500" />
-            <MyText weight="medium" className="text-sm text-red-600">
+            <p className="font-medium text-sm text-red-600">
               Please select a delivery address to place order
-            </MyText>
+            </p>
           </div>
         )}
 
diff --git a/apps/web-ui/src/components/ProductCard.tsx b/apps/web-ui/src/components/ProductCard.tsx
new file mode 100644
index 0000000..549d55c
--- /dev/null
+++ b/apps/web-ui/src/components/ProductCard.tsx
@@ -0,0 +1,224 @@
+import React from 'react'
+import { p, div, Quantifier, MiniQuantifier } from 'web-components'
+import { useGetCart, useUpdateCartItem, useRemoveFromCart, useAddToCart } from '../hooks/cart-query-hooks'
+import { useCartStore } from '../lib/stores/cart-store'
+import { useCentralSlotStore } from '../lib/stores/central-slot-store'
+import { useProductSlotIdentifier } from '../hooks/useProductSlotIdentifier'
+import dayjs from 'dayjs'
+import { Truck, ShoppingCart, ImageOff } from 'lucide-react'
+
+interface ProductCardProps {
+  item: any
+  onPress?: () => void
+  showDeliveryInfo?: boolean
+  miniView?: boolean
+  useAddToCartDialog?: boolean
+}
+
+const formatQuantity = (quantity: number, unit: string): { value: string; display: string } => {
+  if (unit?.toLowerCase() === 'kg' && quantity < 1) {
+    return { value: `${Math.round(quantity * 1000)} g`, display: `${Math.round(quantity * 1000)}g` }
+  }
+  return { value: `${quantity} ${unit}(s)`, display: `${quantity}${unit}` }
+}
+
+export function ProductCard({
+  item,
+  onPress,
+  showDeliveryInfo = true,
+  miniView = false,
+  useAddToCartDialog = false,
+}: ProductCardProps) {
+  const [imageError, setImageError] = React.useState(false)
+  const [imageLoading, setImageLoading] = React.useState(true)
+
+  const imageUri = item.images?.[0]
+
+  const { data: cartData } = useGetCart('regular')
+  const { getQuickestSlot } = useProductSlotIdentifier()
+  const { setAddedToCartProduct } = useCartStore()
+  const updateCartItem = useUpdateCartItem('regular')
+  const removeFromCart = useRemoveFromCart('regular')
+  const addToCart = useAddToCart('regular')
+
+  // Find current quantity from cart data
+  const cartItem = cartData?.items?.find((cartItem: any) => cartItem.productId === item.id)
+  const quantity = cartItem?.quantity || 0
+
+  // Get slots data from central store
+  const slots = useCentralSlotStore((state) => state.slots)
+  const productSlotsMap = useCentralSlotStore((state) => state.productSlotsMap)
+
+  // Create slot lookup map
+  const slotMap = React.useMemo(() => {
+    const map: Record<number, any> = {}
+    slots?.forEach((slot: any) => {
+      map[slot.id] = slot
+    })
+    return map
+  }, [slots])
+
+  // Get cart item's slot delivery time if item is in cart
+  const cartSlot = cartItem?.slotId ? slotMap[cartItem.slotId] : null
+  const displayDeliveryDate = cartSlot?.deliveryTime || item.nextDeliveryDate
+
+  // Precompute the next slot and determine display out of stock status
+  const slotId = getQuickestSlot(item.id)
+  const productSlotInfo = productSlotsMap[item.id]
+  const isOutOfStockFromSlots = productSlotInfo?.isOutOfStock
+  const displayIsOutOfStock = isOutOfStockFromSlots || !slotId
+
+  const handleQuantityChange = (newQuantity: number) => {
+    if (useAddToCartDialog) {
+      setAddedToCartProduct({ productId: item.id, product: item })
+    } else if (newQuantity === 0 && cartItem) {
+      removeFromCart.mutate(cartItem.id)
+    } else if (newQuantity === 1 && !cartItem) {
+      const slotId = getQuickestSlot(item.id)
+      if (!slotId) {
+        alert('No available delivery slot for this product')
+        return
+      }
+      const slot = slotMap[slotId]
+      const deliveryTime = slot ? dayjs(slot.deliveryTime).format('ddd, DD MMM • h:mm A') : ''
+      addToCart.mutate(
+        { productId: item.id, quantity: 1, slotId, storeId: item.storeId },
+        {
+          onSuccess: () => {
+            alert(`Added ${item.name} for delivery at ${deliveryTime}`)
+          },
+        }
+      )
+    } else if (cartItem) {
+      updateCartItem.mutate({ productId: item.id, quantity: newQuantity })
+    }
+  }
+
+  return (
+    <div
+      className="flex max-w-75 flex-col overflow-hidden rounded-2xl bg-white pb-2 border border-gray-300"
+      onClick={onPress}
+    >
+      {/* Image Container */}
+      <div className="relative aspect-square w-full overflow-hidden bg-gray-100">
+        {imageUri && !imageError ? (
+          <img
+            src={imageUri}
+            alt={item.name}
+            className="h-full w-full object-cover"
+            onError={() => setImageError(true)}
+            onLoad={() => setImageLoading(false)}
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center bg-gray-100">
+            <ImageOff className="h-8 w-8 text-gray-400" />
+          </div>
+        )}
+
+        {imageLoading && imageUri && !imageError && (
+          <div className="absolute inset-0 flex items-center justify-center bg-gray-100">
+            <div className="h-6 w-6 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
+          </div>
+        )}
+
+        {displayIsOutOfStock && (
+          <div className="absolute inset-0 flex items-center justify-center bg-black/40">
+            <div className="rounded-full bg-red-500 px-3 py-1">
+              <p className="text-xs font-bold text-white">Out of Stock</p>
+            </div>
+          </div>
+        )}
+
+        {miniView && (
+          <div className="absolute bottom-2 right-2">
+            {quantity > 0 ? (
+              <MiniQuantifier
+                value={quantity}
+                setValue={handleQuantityChange}
+                step={item.incrementStep}
+              />
+            ) : (
+              <div
+                className="flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handleQuantityChange(1)
+                }}
+              >
+                <ShoppingCart className="h-4 w-4 text-brand-500" />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="px-3 pt-3">
+        <p className="font-bold mb-1 text-sm text-gray-900">
+          {item.name}
+        </p>
+
+        <div className="mb-2 flex flex-row items-baseline">
+          <p className="font-bold text-base text-brand-500">
+            ₹{item.price}
+          </p>
+          {item.marketPrice && Number(item.marketPrice) > Number(item.price) && (
+            <p className="ml-2 text-xs text-gray-400 line-through">
+              ₹{item.marketPrice}
+            </p>
+          )}
+        </div>
+
+        <div className="mb-2 flex flex-row items-center">
+          <p className="text-xs font-medium text-gray-500">
+            Quantity:{' '}
+            <span className="font-semibold text-brand-500">
+              {formatQuantity(item.productQuantity || 1, item.unitNotation).display}
+            </span>
+          </p>
+        </div>
+
+        {showDeliveryInfo && displayDeliveryDate && (
+          <div className="mb-2 flex flex-row items-center self-start rounded-lg border border-brand-100 bg-brand-50 px-2 py-1.5">
+            <Truck className="h-3 w-3 text-brand-600" />
+            <p className="ml-1.5 text-[10px] font-bold text-brand-700">
+              {dayjs(displayDeliveryDate).format('ddd, DD MMM • h:mm A')}
+            </p>
+          </div>
+        )}
+
+        {!miniView && (
+          <>
+            {displayIsOutOfStock ? (
+              <div className="mt-1 rounded-lg bg-gray-100 py-2 text-center">
+                <p className="text-xs font-bold uppercase tracking-wide text-gray-400">
+                  Unavailable
+                </p>
+              </div>
+            ) : quantity > 0 ? (
+              <Quantifier
+                value={quantity}
+                setValue={handleQuantityChange}
+                step={item.incrementStep}
+                unit={item.unitNotation}
+              />
+            ) : (
+              <button
+                className="mt-1 flex w-full items-center justify-center gap-1 rounded-lg bg-brand-500 py-2 hover:bg-brand-600 active:bg-brand-700"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  handleQuantityChange(1)
+                }}
+              >
+                <ShoppingCart className="h-4 w-4 text-white" />
+                <span className="text-xs font-bold uppercase tracking-wide text-white">
+                  Add to Cart
+                </span>
+              </button>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web-ui/src/components/index.ts b/apps/web-ui/src/components/index.ts
index 1debaf6..481c7fd 100644
--- a/apps/web-ui/src/components/index.ts
+++ b/apps/web-ui/src/components/index.ts
@@ -3,3 +3,7 @@ export { PaymentAndOrderComponent } from './PaymentAndOrderComponent'
 export { AddressForm } from './AddressForm'
 export { ProtectedRoute } from './ProtectedRoute'
 export { Dialog } from './Dialog'
+export { BottomNavigation } from './BottomNavigation'
+export { FloatingCartBar } from './FloatingCartBar'
+export { AppLayout } from './AppLayout'
+export { ProductCard } from './ProductCard'
diff --git a/apps/web-ui/src/hooks/index.ts b/apps/web-ui/src/hooks/index.ts
index bc304c9..d492daa 100644
--- a/apps/web-ui/src/hooks/index.ts
+++ b/apps/web-ui/src/hooks/index.ts
@@ -1 +1,4 @@
 export { useCheckoutAddress } from './checkout-hooks'
+export { useProductSlotIdentifier } from './useProductSlotIdentifier'
+export { usePopulateCentralStores } from './usePopulateCentralStores'
+export { usePopulateCentralProductStore } from './usePopulateCentralProductStore'
diff --git a/apps/web-ui/src/hooks/usePopulateCentralProductStore.ts b/apps/web-ui/src/hooks/usePopulateCentralProductStore.ts
new file mode 100644
index 0000000..d9c6203
--- /dev/null
+++ b/apps/web-ui/src/hooks/usePopulateCentralProductStore.ts
@@ -0,0 +1,14 @@
+import { useEffect } from 'react'
+import { useAllProducts } from './prominent-api-hooks'
+import { useCentralProductStore } from '../lib/stores/central-product-store'
+
+export function usePopulateCentralProductStore() {
+  const { data: productsData } = useAllProducts()
+  const setProducts = useCentralProductStore((state) => state.setProducts)
+
+  useEffect(() => {
+    if (productsData?.products) {
+      setProducts(productsData.products)
+    }
+  }, [productsData, setProducts])
+}
diff --git a/apps/web-ui/src/hooks/usePopulateCentralStores.ts b/apps/web-ui/src/hooks/usePopulateCentralStores.ts
new file mode 100644
index 0000000..4e506ee
--- /dev/null
+++ b/apps/web-ui/src/hooks/usePopulateCentralStores.ts
@@ -0,0 +1,57 @@
+import { useEffect } from 'react'
+import { useCentralSlotStore } from '../lib/stores/central-slot-store'
+import { useSlots } from './prominent-api-hooks'
+import { useAllProducts } from './prominent-api-hooks'
+
+export function usePopulateCentralStores() {
+  const { data: slotsData } = useSlots()
+  const { data: productsData } = useAllProducts()
+  const setSlots = useCentralSlotStore((state) => state.setSlots)
+  const setProductSlotsMap = useCentralSlotStore((state) => state.setProductSlotsMap)
+
+  useEffect(() => {
+    if (slotsData?.slots) {
+      // Transform slots to the format expected by the store
+      const formattedSlots = slotsData.slots.map((slot: any) => ({
+        id: slot.id,
+        deliveryDate: slot.deliveryDate,
+        deliveryTime: slot.deliveryTime,
+        displayDate: slot.displayDate || '',
+        displayTime: slot.displayTime || '',
+      }))
+      setSlots(formattedSlots)
+
+      // Build product slots map
+      const productMap: Record<number, any> = {}
+      const allProducts = productsData?.products || []
+
+      allProducts.forEach((product: any) => {
+        // Find slots that contain this product
+        const productSlots = slotsData.slots.filter((slot: any) =>
+          slot.products?.some((p: any) => p.id === product.id)
+        )
+
+        // Check if flash delivery is available
+        const isFlashAvailable = product.isFlashAvailable || false
+
+        // Check if out of stock (no slots available)
+        const isOutOfStock = productSlots.length === 0 && !isFlashAvailable
+
+        productMap[product.id] = {
+          slotId: productSlots.length > 0 ? productSlots[0].id : null,
+          slots: productSlots.map((s: any) => ({
+            id: s.id,
+            deliveryDate: s.deliveryDate,
+            deliveryTime: s.deliveryTime,
+            displayDate: s.displayDate || '',
+            displayTime: s.displayTime || '',
+          })),
+          isOutOfStock,
+          isFlashAvailable,
+        }
+      })
+
+      setProductSlotsMap(productMap)
+    }
+  }, [slotsData, productsData, setSlots, setProductSlotsMap])
+}
diff --git a/apps/web-ui/src/hooks/useProductSlotIdentifier.ts b/apps/web-ui/src/hooks/useProductSlotIdentifier.ts
new file mode 100644
index 0000000..7a6b000
--- /dev/null
+++ b/apps/web-ui/src/hooks/useProductSlotIdentifier.ts
@@ -0,0 +1,30 @@
+import { useCentralSlotStore } from '../lib/stores/central-slot-store'
+import { useMemo } from 'react'
+
+export function useProductSlotIdentifier() {
+  const slots = useCentralSlotStore((state) => state.slots)
+  const productSlotsMap = useCentralSlotStore((state) => state.productSlotsMap)
+
+  const getQuickestSlot = useMemo(() => {
+    return (productId: number): number | null => {
+      const productSlotInfo = productSlotsMap[productId]
+      if (!productSlotInfo || productSlotInfo.isOutOfStock) {
+        return null
+      }
+
+      const availableSlots = productSlotInfo.slots || []
+      if (availableSlots.length === 0) {
+        return null
+      }
+
+      // Return the first (quickest) slot
+      return availableSlots[0].id
+    }
+  }, [productSlotsMap])
+
+  return {
+    getQuickestSlot,
+    slots,
+    productSlotsMap,
+  }
+}
diff --git a/apps/web-ui/src/routeTree.gen.ts b/apps/web-ui/src/routeTree.gen.ts
index 2eb54ca..461aedc 100644
--- a/apps/web-ui/src/routeTree.gen.ts
+++ b/apps/web-ui/src/routeTree.gen.ts
@@ -10,6 +10,7 @@
 
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as StoresRouteImport } from './routes/stores'
+import { Route as SlotViewRouteImport } from './routes/slot-view'
 import { Route as RegisterRouteImport } from './routes/register'
 import { Route as MeRouteImport } from './routes/me'
 import { Route as LoginRouteImport } from './routes/login'
@@ -43,6 +44,11 @@ const StoresRoute = StoresRouteImport.update({
   path: '/stores',
   getParentRoute: () => rootRouteImport,
 } as any)
+const SlotViewRoute = SlotViewRouteImport.update({
+  id: '/slot-view',
+  path: '/slot-view',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const RegisterRoute = RegisterRouteImport.update({
   id: '/register',
   path: '/register',
@@ -189,6 +195,7 @@ export interface FileRoutesByFullPath {
   '/login': typeof LoginRoute
   '/me': typeof MeRouteWithChildren
   '/register': typeof RegisterRoute
+  '/slot-view': typeof SlotViewRoute
   '/stores': typeof StoresRouteWithChildren
   '/flash/cart': typeof FlashCartRoute
   '/flash/checkout': typeof FlashCheckoutRoute
@@ -219,6 +226,7 @@ export interface FileRoutesByTo {
   '/login': typeof LoginRoute
   '/me': typeof MeRouteWithChildren
   '/register': typeof RegisterRoute
+  '/slot-view': typeof SlotViewRoute
   '/stores': typeof StoresRouteWithChildren
   '/flash/cart': typeof FlashCartRoute
   '/flash/checkout': typeof FlashCheckoutRoute
@@ -250,6 +258,7 @@ export interface FileRoutesById {
   '/login': typeof LoginRoute
   '/me': typeof MeRouteWithChildren
   '/register': typeof RegisterRoute
+  '/slot-view': typeof SlotViewRoute
   '/stores': typeof StoresRouteWithChildren
   '/flash/cart': typeof FlashCartRoute
   '/flash/checkout': typeof FlashCheckoutRoute
@@ -282,6 +291,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/me'
     | '/register'
+    | '/slot-view'
     | '/stores'
     | '/flash/cart'
     | '/flash/checkout'
@@ -312,6 +322,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/me'
     | '/register'
+    | '/slot-view'
     | '/stores'
     | '/flash/cart'
     | '/flash/checkout'
@@ -342,6 +353,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/me'
     | '/register'
+    | '/slot-view'
     | '/stores'
     | '/flash/cart'
     | '/flash/checkout'
@@ -373,6 +385,7 @@ export interface RootRouteChildren {
   LoginRoute: typeof LoginRoute
   MeRoute: typeof MeRouteWithChildren
   RegisterRoute: typeof RegisterRoute
+  SlotViewRoute: typeof SlotViewRoute
   StoresRoute: typeof StoresRouteWithChildren
 }
 
@@ -385,6 +398,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof StoresRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/slot-view': {
+      id: '/slot-view'
+      path: '/slot-view'
+      fullPath: '/slot-view'
+      preLoaderRoute: typeof SlotViewRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/register': {
       id: '/register'
       path: '/register'
@@ -677,6 +697,7 @@ const rootRouteChildren: RootRouteChildren = {
   LoginRoute: LoginRoute,
   MeRoute: MeRouteWithChildren,
   RegisterRoute: RegisterRoute,
+  SlotViewRoute: SlotViewRoute,
   StoresRoute: StoresRouteWithChildren,
 }
 export const routeTree = rootRouteImport
diff --git a/apps/web-ui/src/routes/cart.tsx b/apps/web-ui/src/routes/cart.tsx
index 31df36b..e3e97da 100644
--- a/apps/web-ui/src/routes/cart.tsx
+++ b/apps/web-ui/src/routes/cart.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useGetCart, useUpdateCartItem, useRemoveFromCart } from '../hooks/cart-query-hooks'
 import { useAllProducts } from '../hooks/prominent-api-hooks'
-import { MyText, MyButton, Quantifier, AppContainer, MyTouchableOpacity } from 'web-components'
+import { p, MyButton, Quantifier, AppContainer, div } from 'web-components'
 import { Trash2 } from 'lucide-react'
 
 export const Route = createFileRoute('/cart')({ component: CartPage })
@@ -29,13 +29,13 @@ function CartPage() {
 
   return (
     <AppContainer>
-      <MyText weight="bold" className="mb-4 text-xl">
+      <p className="font-bold mb-4 text-xl">
         Your Cart
-      </MyText>
+      </p>
 
       {cartItems.length === 0 ? (
         <div className="flex flex-col items-center gap-4 py-20">
-          <MyText className="text-gray-500">Your cart is empty</MyText>
+          <p className="text-gray-500">Your cart is empty</p>
           <MyButton
             textContent="Browse Products"
             onClick={() => navigate({ to: '/home' })}
@@ -58,20 +58,20 @@ function CartPage() {
                     className="h-16 w-16 rounded-lg object-cover"
                   />
                   <div className="flex-1">
-                    <MyText weight="semibold" className="text-sm" numberOfLines={1}>
+                    <p className="font-semibold text-sm">
                       {product.name}
-                    </MyText>
-                    <MyText className="text-brand-600 text-sm font-bold">
+                    </p>
+                    <p className="text-brand-600 text-sm font-bold">
                       ₹{price}
-                    </MyText>
+                    </p>
                     <Quantifier
                       value={item.quantity}
                       setValue={(q) => updateItem.mutate({ productId: item.productId, quantity: q })}
                     />
                   </div>
-                  <MyTouchableOpacity onClick={() => removeItem.mutate(item.productId)}>
+                  <div onClick={() => removeItem.mutate(item.productId)}>
                     <Trash2 className="h-5 w-5 text-red-500" />
-                  </MyTouchableOpacity>
+                  </div>
                 </div>
               )
             })}
@@ -79,10 +79,10 @@ function CartPage() {
 
           <div className="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4 shadow-lg">
             <div className="mb-3 flex items-center justify-between">
-              <MyText weight="bold">Total</MyText>
-              <MyText weight="bold" className="text-lg text-brand-600">
+              <p className="font-bold">Total</p>
+              <p className="font-bold text-lg text-brand-600">
                 ₹{total}
-              </MyText>
+              </p>
             </div>
             <MyButton
               fullWidth
diff --git a/apps/web-ui/src/routes/checkout.tsx b/apps/web-ui/src/routes/checkout.tsx
index 5f281b6..c680a23 100644
--- a/apps/web-ui/src/routes/checkout.tsx
+++ b/apps/web-ui/src/routes/checkout.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import { useState, useMemo } from 'react'
+import { useState } from 'react'
 import { useAuth } from '../lib/auth-context'
 import { useGetCart } from '../hooks/cart-query-hooks'
 import { useAllProducts } from '../hooks/prominent-api-hooks'
@@ -10,8 +10,8 @@ import { AddressForm } from '../components/AddressForm'
 import { Dialog } from '../components/Dialog'
 import { useAddressStore } from '../lib/stores/address-store'
 import { useQueryClient } from '@tanstack/react-query'
-import { MyText, AppContainer, MyTouchableOpacity } from 'web-components'
-import { MapPin, ShoppingCart, ChevronLeft, Flashlight } from 'lucide-react'
+import { p, div } from 'web-components'
+import { MapPin, ShoppingCart, ChevronLeft } from 'lucide-react'
 
 export const Route = createFileRoute('/checkout')({ component: CheckoutPage })
 
@@ -44,43 +44,43 @@ function CheckoutContent() {
   // Handle empty cart case
   if (cartItems.length === 0) {
     return (
-      <AppContainer className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-6">
+      <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-6">
         <ShoppingCart className="mb-4 h-16 w-16 text-gray-400" />
-        <MyText weight="bold" className="mb-2 text-center text-xl text-gray-900">
+        <p className="font-bold mb-2 text-center text-xl text-gray-900">
           Your cart is empty
-        </MyText>
-        <MyText className="mb-6 text-center text-gray-500">
+        </p>
+        <p className="mb-6 text-center text-gray-500">
           Add some delicious items to your cart before checking out
-        </MyText>
-        <MyTouchableOpacity
+        </p>
+        <div
           onClick={() => navigate({ to: '/home' })}
           className="rounded-lg bg-brand-500 px-6 py-3"
         >
-          <MyText weight="bold" className="text-white">
+          <p className="font-bold text-white">
             Back to Shopping
-          </MyText>
-        </MyTouchableOpacity>
-      </AppContainer>
+          </p>
+        </div>
+      </div>
     )
   }
 
   return (
-    <AppContainer className="min-h-screen bg-gray-50 pb-8">
+    <div className="min-h-screen bg-gray-50 pb-8">
       {/* Checkout Header */}
       <div className="sticky top-0 z-10 mb-4 border-b border-gray-100 bg-white px-4 py-3">
         <div className="flex items-center">
-          <MyTouchableOpacity
+          <div
             onClick={() => navigate({ to: '/cart' })}
             className="-ml-2 mr-1 flex items-center p-2"
           >
             <ChevronLeft className="h-7 w-7 text-gray-700" />
-          </MyTouchableOpacity>
+          </div>
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-50">
             <MapPin className="h-5 w-5 text-blue-500" />
           </div>
-          <MyText weight="bold" className="ml-3 text-lg text-gray-800">
+          <p className="font-bold ml-3 text-lg text-gray-800">
             Checkout
-          </MyText>
+          </p>
         </div>
       </div>
 
@@ -129,6 +129,6 @@ function CheckoutContent() {
           isEdit={!!editingAddress}
         />
       </Dialog>
-    </AppContainer>
+    </div>
   )
 }
diff --git a/apps/web-ui/src/routes/flash.cart.tsx b/apps/web-ui/src/routes/flash.cart.tsx
index 5a774cc..119018f 100644
--- a/apps/web-ui/src/routes/flash.cart.tsx
+++ b/apps/web-ui/src/routes/flash.cart.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useGetCart, useUpdateCartItem, useRemoveFromCart } from '../hooks/cart-query-hooks'
 import { useCentralProductStore } from '../lib/stores/central-product-store'
-import { MyText, MyButton, Quantifier, AppContainer, MyTouchableOpacity } from 'web-components'
+import { p, MyButton, Quantifier, AppContainer, div } from 'web-components'
 import { Trash2, Zap } from 'lucide-react'
 
 export const Route = createFileRoute('/flash/cart')({ component: FlashCartPage })
@@ -27,14 +27,14 @@ function FlashCartPage() {
     <AppContainer>
       <div className="mb-4 flex items-center gap-2">
         <Zap className="h-5 w-5 text-yellow-500" />
-        <MyText weight="bold" className="text-xl">
+        <p className="font-bold text-xl">
           Flash Cart
-        </MyText>
+        </p>
       </div>
 
       {cartItems.length === 0 ? (
         <div className="flex flex-col items-center gap-4 py-20">
-          <MyText className="text-gray-500">Your flash cart is empty</MyText>
+          <p className="text-gray-500">Your flash cart is empty</p>
           <MyButton
             textContent="Browse Flash Products"
             onClick={() => navigate({ to: '/flash' })}
@@ -57,10 +57,10 @@ function FlashCartPage() {
                     className="h-16 w-16 rounded-lg object-cover"
                   />
                   <div className="flex-1">
-                    <MyText weight="semibold" className="text-sm" numberOfLines={1}>
+                    <p className="font-semibold text-sm">
                       {product.name}
-                    </MyText>
-                    <MyText className="text-brand-600 text-sm font-bold">₹{price}</MyText>
+                    </p>
+                    <p className="text-brand-600 text-sm font-bold">₹{price}</p>
                     <Quantifier
                       value={item.quantity}
                       setValue={(q) =>
@@ -68,9 +68,9 @@ function FlashCartPage() {
                       }
                     />
                   </div>
-                  <MyTouchableOpacity onClick={() => removeItem.mutate(item.productId)}>
+                  <div onClick={() => removeItem.mutate(item.productId)}>
                     <Trash2 className="h-5 w-5 text-red-500" />
-                  </MyTouchableOpacity>
+                  </div>
                 </div>
               )
             })}
@@ -78,10 +78,10 @@ function FlashCartPage() {
 
           <div className="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4 shadow-lg">
             <div className="mb-3 flex items-center justify-between">
-              <MyText weight="bold">Total</MyText>
-              <MyText weight="bold" className="text-lg text-brand-600">
+              <p className="font-bold">Total</p>
+              <p className="font-bold text-lg text-brand-600">
                 ₹{total}
-              </MyText>
+              </p>
             </div>
             <MyButton
               fullWidth
diff --git a/apps/web-ui/src/routes/flash.checkout.tsx b/apps/web-ui/src/routes/flash.checkout.tsx
index 3127175..b8c8f96 100644
--- a/apps/web-ui/src/routes/flash.checkout.tsx
+++ b/apps/web-ui/src/routes/flash.checkout.tsx
@@ -5,7 +5,7 @@ import { useGetCart } from '../hooks/cart-query-hooks'
 import { useCentralProductStore } from '../lib/stores/central-product-store'
 import { trpc } from '../lib/trpc-client'
 import { clearLocalCart } from '../hooks/cart-query-hooks'
-import { MyText, MyButton, LoadingDialog, AppContainer } from 'web-components'
+import { p, MyButton, LoadingDialog, AppContainer } from 'web-components'
 import { useQueryClient } from '@tanstack/react-query'
 
 export const Route = createFileRoute('/flash/checkout')({ component: FlashCheckoutPage })
@@ -63,14 +63,14 @@ function FlashCheckoutPage() {
 
   return (
     <AppContainer>
-      <MyText weight="bold" className="mb-4 text-xl">
+      <p className="font-bold mb-4 text-xl">
         Flash Checkout
-      </MyText>
+      </p>
 
       <div className="mb-6">
-        <MyText weight="semibold" className="mb-2">
+        <p className="font-semibold mb-2">
           Delivery Address
-        </MyText>
+        </p>
         {addresses?.data?.map((addr: any) => (
           <button
             key={addr.id}
@@ -81,39 +81,39 @@ function FlashCheckoutPage() {
                 : 'border-gray-200'
             }`}
           >
-            <MyText weight="semibold">{addr.name}</MyText>
-            <MyText className="text-sm text-gray-600">
+            <p className="font-semibold">{addr.name}</p>
+            <p className="text-sm text-gray-600">
               {addr.addressLine1}, {addr.city}
-            </MyText>
-            <MyText className="text-sm text-gray-500">{addr.phone}</MyText>
+            </p>
+            <p className="text-sm text-gray-500">{addr.phone}</p>
           </button>
         ))}
       </div>
 
       <div className="mb-6">
-        <MyText weight="semibold" className="mb-2">
+        <p className="font-semibold mb-2">
           Order Summary
-        </MyText>
+        </p>
         {cartItems.map((item) => {
           const product = productsById[item.productId]
           if (!product) return null
           return (
             <div key={item.productId} className="flex items-center justify-between py-2">
-              <MyText className="text-sm" numberOfLines={1}>
+              <p className="text-sm">
                 {product.name} x{item.quantity}
-              </MyText>
-              <MyText className="text-sm font-bold">
+              </p>
+              <p className="text-sm font-bold">
                 ₹{(product.discountedPrice ?? product.price) * item.quantity}
-              </MyText>
+              </p>
             </div>
           )
         })}
         <div className="mt-2 border-t border-gray-200 pt-2">
           <div className="flex items-center justify-between">
-            <MyText weight="bold">Total</MyText>
-            <MyText weight="bold" className="text-brand-600">
+            <p className="font-bold">Total</p>
+            <p className="font-bold text-brand-600">
               ₹{total}
-            </MyText>
+            </p>
           </div>
         </div>
       </div>
diff --git a/apps/web-ui/src/routes/flash.order-success.tsx b/apps/web-ui/src/routes/flash.order-success.tsx
index b1fde56..70fc53f 100644
--- a/apps/web-ui/src/routes/flash.order-success.tsx
+++ b/apps/web-ui/src/routes/flash.order-success.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router'
-import { MyText, MyButton } from 'web-components'
+import { p, MyButton } from 'web-components'
 import { Zap } from 'lucide-react'
 
 export const Route = createFileRoute('/flash/order-success')({
@@ -19,11 +19,11 @@ function FlashOrderSuccessPage() {
       <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-yellow-100">
         <Zap className="h-10 w-10 text-yellow-600" />
       </div>
-      <MyText weight="bold" className="mb-2 text-2xl text-gray-900">
+      <p className="font-bold mb-2 text-2xl text-gray-900">
         1 Hr Order Placed!
-      </MyText>
-      <MyText className="mb-1 text-gray-600">Order ID: #{orderId}</MyText>
-      <MyText className="mb-8 text-gray-600">Total: ₹{totalAmount}</MyText>
+      </p>
+      <p className="mb-1 text-gray-600">Order ID: #{orderId}</p>
+      <p className="mb-8 text-gray-600">Total: ₹{totalAmount}</p>
       <MyButton
         textContent="Continue Shopping"
         onClick={() => navigate({ to: '/flash' })}
diff --git a/apps/web-ui/src/routes/flash.product.$id.tsx b/apps/web-ui/src/routes/flash.product.$id.tsx
index d0fc48e..a013f94 100644
--- a/apps/web-ui/src/routes/flash.product.$id.tsx
+++ b/apps/web-ui/src/routes/flash.product.$id.tsx
@@ -2,7 +2,7 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useCentralProductStore } from '../lib/stores/central-product-store'
 import { useAddToCart } from '../hooks/cart-query-hooks'
 import { useState } from 'react'
-import { MyText, MyButton, Quantifier, AppContainer } from 'web-components'
+import { p, MyButton, Quantifier, AppContainer } from 'web-components'
 import { ShoppingCart, Zap } from 'lucide-react'
 
 export const Route = createFileRoute('/flash/product/$id')({
@@ -29,7 +29,7 @@ function FlashProductDetailPage() {
   if (!product) {
     return (
       <AppContainer>
-        <MyText>Product not found</MyText>
+        <p>Product not found</p>
       </AppContainer>
     )
   }
@@ -41,9 +41,9 @@ function FlashProductDetailPage() {
     <AppContainer>
       <div className="mb-4 flex items-center gap-2">
         <Zap className="h-5 w-5 text-yellow-500" />
-        <MyText className="text-sm font-semibold text-yellow-600">
+        <p className="text-sm font-semibold text-yellow-600">
           1 Hr Delivery
-        </MyText>
+        </p>
       </div>
 
       {imageUrl && (
@@ -56,21 +56,21 @@ function FlashProductDetailPage() {
         </div>
       )}
 
-      <MyText weight="bold" className="mb-1 text-xl">
+      <p className="font-bold mb-1 text-xl">
         {product.name}
-      </MyText>
-      <MyText className="mb-4 text-sm text-gray-500">
+      </p>
+      <p className="mb-4 text-sm text-gray-500">
         {product.unitValue}{product.unit}
-      </MyText>
+      </p>
 
       <div className="mb-4 flex items-baseline gap-2">
-        <MyText weight="bold" className="text-2xl text-brand-600">
+        <p className="font-bold text-2xl text-brand-600">
           ₹{price}
-        </MyText>
+        </p>
         {product.discountedPrice && (
-          <MyText className="text-sm text-gray-400 line-through">
+          <p className="text-sm text-gray-400 line-through">
             ₹{product.price}
-          </MyText>
+          </p>
         )}
       </div>
 
diff --git a/apps/web-ui/src/routes/flash.tsx b/apps/web-ui/src/routes/flash.tsx
index 950b750..9c91f04 100644
--- a/apps/web-ui/src/routes/flash.tsx
+++ b/apps/web-ui/src/routes/flash.tsx
@@ -1,15 +1,15 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useState } from 'react'
 import {
-  MyText,
+  p,
   MyButton,
   Quantifier,
-  AppContainer,
-  MyTouchableOpacity,
+  div,
 } from 'web-components'
 import { useCentralProductStore } from '../lib/stores/central-product-store'
 import { useCentralSlotStore } from '../lib/stores/central-slot-store'
 import { useAddToCart } from '../hooks/cart-query-hooks'
+import { AppLayout } from '../components/AppLayout'
 import { ShoppingCart, Zap } from 'lucide-react'
 
 export const Route = createFileRoute('/flash')({ component: FlashDeliveryPage })
@@ -34,18 +34,19 @@ function FlashDeliveryPage() {
   }
 
   return (
-    <AppContainer>
+    <AppLayout isFlashDelivery={true}>
+    <div className="p-4">
       <div className="mb-4 flex items-center gap-2">
         <Zap className="h-6 w-6 text-yellow-500" />
-        <MyText weight="bold" className="text-xl">
+        <p className="font-bold text-xl">
           1 Hr Delivery
-        </MyText>
+        </p>
       </div>
 
       <div className="mb-4 rounded-xl bg-yellow-50 p-3">
-        <MyText className="text-sm text-yellow-800">
+        <p className="text-sm text-yellow-800">
           Get these products delivered within 1 hour! Only available for select items.
-        </MyText>
+        </p>
       </div>
 
       <div className="grid grid-cols-2 gap-3">
@@ -66,12 +67,12 @@ function FlashDeliveryPage() {
                   />
                 )}
               </div>
-              <MyText weight="semibold" className="text-sm" numberOfLines={2}>
+              <p className="font-semibold text-sm">
                 {product.name}
-              </MyText>
-              <MyText weight="bold" className="text-brand-600">
+              </p>
+              <p className="font-bold text-brand-600">
                 ₹{price}
-              </MyText>
+              </p>
               <div className="mt-2 flex items-center gap-2">
                 <Quantifier
                   value={qty}
@@ -96,9 +97,10 @@ function FlashDeliveryPage() {
 
       {flashProducts.length === 0 && (
         <div className="py-20 text-center">
-          <MyText className="text-gray-500">No flash delivery products available</MyText>
+          <p className="text-gray-500">No flash delivery products available</p>
         </div>
       )}
-    </AppContainer>
+    </div>
+    </AppLayout>
   )
 }
diff --git a/apps/web-ui/src/routes/home.cart.tsx b/apps/web-ui/src/routes/home.cart.tsx
index f7cb0c6..3aea48d 100644
--- a/apps/web-ui/src/routes/home.cart.tsx
+++ b/apps/web-ui/src/routes/home.cart.tsx
@@ -1,7 +1,7 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useGetCart, useUpdateCartItem, useRemoveFromCart } from '../hooks/cart-query-hooks'
 import { useAllProducts } from '../hooks/prominent-api-hooks'
-import { MyText, MyButton, Quantifier, AppContainer, MyTouchableOpacity } from 'web-components'
+import { p, MyButton, Quantifier, AppContainer, div } from 'web-components'
 import { Trash2 } from 'lucide-react'
 
 export const Route = createFileRoute('/home/cart')({ component: CartPage })
@@ -29,13 +29,13 @@ function CartPage() {
 
   return (
     <AppContainer>
-      <MyText weight="bold" className="mb-4 text-xl">
+      <p className="font-bold mb-4 text-xl">
         Your Cart
-      </MyText>
+      </p>
 
       {cartItems.length === 0 ? (
         <div className="flex flex-col items-center gap-4 py-20">
-          <MyText className="text-gray-500">Your cart is empty</MyText>
+          <p className="text-gray-500">Your cart is empty</p>
           <MyButton
             textContent="Browse Products"
             onClick={() => navigate({ to: '/home' })}
@@ -58,20 +58,20 @@ function CartPage() {
                     className="h-16 w-16 rounded-lg object-cover"
                   />
                   <div className="flex-1">
-                    <MyText weight="semibold" className="text-sm" numberOfLines={1}>
+                    <p className="font-semibold text-sm">
                       {product.name}
-                    </MyText>
-                    <MyText className="text-brand-600 text-sm font-bold">
+                    </p>
+                    <p className="text-brand-600 text-sm font-bold">
                       ₹{price}
-                    </MyText>
+                    </p>
                     <Quantifier
                       value={item.quantity}
                       setValue={(q) => updateItem.mutate({ productId: item.productId, quantity: q })}
                     />
                   </div>
-                  <MyTouchableOpacity onClick={() => removeItem.mutate(item.productId)}>
+                  <div onClick={() => removeItem.mutate(item.productId)}>
                     <Trash2 className="h-5 w-5 text-red-500" />
-                  </MyTouchableOpacity>
+                  </div>
                 </div>
               )
             })}
@@ -79,10 +79,10 @@ function CartPage() {
 
           <div className="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-4 shadow-lg">
             <div className="mb-3 flex items-center justify-between">
-              <MyText weight="bold">Total</MyText>
-              <MyText weight="bold" className="text-lg text-brand-600">
+              <p className="font-bold">Total</p>
+              <p className="font-bold text-lg text-brand-600">
                 ₹{total}
-              </MyText>
+              </p>
             </div>
             <MyButton
               fullWidth
diff --git a/apps/web-ui/src/routes/home.checkout.tsx b/apps/web-ui/src/routes/home.checkout.tsx
index c52510d..18e30bf 100644
--- a/apps/web-ui/src/routes/home.checkout.tsx
+++ b/apps/web-ui/src/routes/home.checkout.tsx
@@ -5,7 +5,7 @@ import { useGetCart } from '../hooks/cart-query-hooks'
 import { useCentralProductStore } from '../lib/stores/central-product-store'
 import { trpc } from '../lib/trpc-client'
 import { clearLocalCart } from '../hooks/cart-query-hooks'
-import { MyText, MyButton, LoadingDialog, AppContainer, MyTouchableOpacity } from 'web-components'
+import { p, MyButton, LoadingDialog, AppContainer, div } from 'web-components'
 import { useQueryClient } from '@tanstack/react-query'
 
 export const Route = createFileRoute('/home/checkout')({ component: CheckoutPage })
@@ -63,17 +63,17 @@ function CheckoutPage() {
 
   return (
     <AppContainer>
-      <MyText weight="bold" className="mb-4 text-xl">
+      <p className="font-bold mb-4 text-xl">
         Checkout
-      </MyText>
+      </p>
 
       {/* Address Selection */}
       <div className="mb-6">
-        <MyText weight="semibold" className="mb-2">
+        <p className="font-semibold mb-2">
           Delivery Address
-        </MyText>
+        </p>
         {addresses?.data?.map((addr: any) => (
-          <MyTouchableOpacity
+          <div
             key={addr.id}
             onClick={() => setSelectedAddressId(addr.id)}
             className={`mb-2 rounded-xl border p-3 ${
@@ -82,40 +82,40 @@ function CheckoutPage() {
                 : 'border-gray-200'
             }`}
           >
-            <MyText weight="semibold">{addr.name}</MyText>
-            <MyText className="text-sm text-gray-600">
+            <p className="font-semibold">{addr.name}</p>
+            <p className="text-sm text-gray-600">
               {addr.addressLine1}, {addr.city}
-            </MyText>
-            <MyText className="text-sm text-gray-500">{addr.phone}</MyText>
-          </MyTouchableOpacity>
+            </p>
+            <p className="text-sm text-gray-500">{addr.phone}</p>
+          </div>
         ))}
       </div>
 
       {/* Order Summary */}
       <div className="mb-6">
-        <MyText weight="semibold" className="mb-2">
+        <p className="font-semibold mb-2">
           Order Summary
-        </MyText>
+        </p>
         {cartItems.map((item) => {
           const product = productsById[item.productId]
           if (!product) return null
           return (
             <div key={item.productId} className="flex items-center justify-between py-2">
-              <MyText className="text-sm" numberOfLines={1}>
+              <p className="text-sm">
                 {product.name} x{item.quantity}
-              </MyText>
-              <MyText className="text-sm font-bold">
+              </p>
+              <p className="text-sm font-bold">
                 ₹{(product.discountedPrice ?? product.price) * item.quantity}
-              </MyText>
+              </p>
             </div>
           )
         })}
         <div className="mt-2 border-t border-gray-200 pt-2">
           <div className="flex items-center justify-between">
-            <MyText weight="bold">Total</MyText>
-            <MyText weight="bold" className="text-brand-600">
+            <p className="font-bold">Total</p>
+            <p className="font-bold text-brand-600">
               ₹{total}
-            </MyText>
+            </p>
           </div>
         </div>
       </div>
diff --git a/apps/web-ui/src/routes/home.order-success.tsx b/apps/web-ui/src/routes/home.order-success.tsx
index 4150afb..c1b991e 100644
--- a/apps/web-ui/src/routes/home.order-success.tsx
+++ b/apps/web-ui/src/routes/home.order-success.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router'
-import { MyText, MyButton } from 'web-components'
+import { p, MyButton } from 'web-components'
 import { Package } from 'lucide-react'
 
 export const Route = createFileRoute('/home/order-success')({
@@ -19,15 +19,15 @@ function OrderSuccessPage() {
       <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-green-100">
         <Package className="h-10 w-10 text-green-600" />
       </div>
-      <MyText weight="bold" className="mb-2 text-2xl text-gray-900">
+      <p className="font-bold mb-2 text-2xl text-gray-900">
         Order Placed!
-      </MyText>
-      <MyText className="mb-1 text-gray-600">
+      </p>
+      <p className="mb-1 text-gray-600">
         Order ID: #{orderId}
-      </MyText>
-      <MyText className="mb-8 text-gray-600">
+      </p>
+      <p className="mb-8 text-gray-600">
         Total: ₹{totalAmount}
-      </MyText>
+      </p>
       <MyButton
         textContent="Continue Shopping"
         onClick={() => navigate({ to: '/home' })}
diff --git a/apps/web-ui/src/routes/home.product.$id.tsx b/apps/web-ui/src/routes/home.product.$id.tsx
index 2d866c6..d796165 100644
--- a/apps/web-ui/src/routes/home.product.$id.tsx
+++ b/apps/web-ui/src/routes/home.product.$id.tsx
@@ -3,7 +3,7 @@ import { useCentralProductStore } from '../lib/stores/central-product-store'
 import { trpc } from '../lib/trpc-client'
 import { useAddToCart } from '../hooks/cart-query-hooks'
 import { useState } from 'react'
-import { MyText, MyButton, Quantifier, AppContainer } from 'web-components'
+import { p, MyButton, Quantifier, AppContainer } from 'web-components'
 import { ShoppingCart, Star } from 'lucide-react'
 
 export const Route = createFileRoute('/home/product/$id')({
@@ -35,7 +35,7 @@ function ProductDetailPage() {
   if (!product) {
     return (
       <AppContainer>
-        <MyText>Product not found</MyText>
+        <p>Product not found</p>
       </AppContainer>
     )
   }
@@ -55,26 +55,26 @@ function ProductDetailPage() {
         </div>
       )}
 
-      <MyText weight="bold" className="mb-1 text-xl">
+      <p className="font-bold mb-1 text-xl">
         {product.name}
-      </MyText>
-      <MyText className="mb-2 text-sm text-gray-500">
+      </p>
+      <p className="mb-2 text-sm text-gray-500">
         {product.unitValue}{product.unit}
-      </MyText>
+      </p>
 
       <div className="mb-4 flex items-baseline gap-2">
-        <MyText weight="bold" className="text-2xl text-brand-600">
+        <p className="font-bold text-2xl text-brand-600">
           ₹{price}
-        </MyText>
+        </p>
         {product.discountedPrice && (
-          <MyText className="text-sm text-gray-400 line-through">
+          <p className="text-sm text-gray-400 line-through">
             ₹{product.price}
-          </MyText>
+          </p>
         )}
       </div>
 
       {product.description && (
-        <MyText className="mb-4 text-gray-600">{product.description}</MyText>
+        <p className="mb-4 text-gray-600">{product.description}</p>
       )}
 
       <div className="mb-6">
@@ -94,9 +94,9 @@ function ProductDetailPage() {
       {/* Reviews */}
       {reviews?.data && reviews.data.length > 0 && (
         <div className="mt-8">
-          <MyText weight="bold" className="mb-3 text-lg">
+          <p className="font-bold mb-3 text-lg">
             Reviews
-          </MyText>
+          </p>
           {reviews.data.map((review: any, i: number) => (
             <div key={i} className="mb-3 rounded-lg border border-gray-100 p-3">
               <div className="mb-1 flex items-center gap-1">
@@ -104,7 +104,7 @@ function ProductDetailPage() {
                   <Star key={j} className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                 ))}
               </div>
-              <MyText className="text-sm text-gray-600">{review.comment}</MyText>
+              <p className="text-sm text-gray-600">{review.comment}</p>
             </div>
           ))}
         </div>
diff --git a/apps/web-ui/src/routes/home.search.tsx b/apps/web-ui/src/routes/home.search.tsx
index eea1c56..7c4b3d8 100644
--- a/apps/web-ui/src/routes/home.search.tsx
+++ b/apps/web-ui/src/routes/home.search.tsx
@@ -2,7 +2,7 @@ import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router'
 import { useState, useMemo } from 'react'
 import Fuse from 'fuse.js'
 import { useCentralProductStore } from '../lib/stores/central-product-store'
-import { MyText, SearchBar, AppContainer, MyTouchableOpacity } from 'web-components'
+import { p, SearchBar, AppContainer, div } from 'web-components'
 
 export const Route = createFileRoute('/home/search')({
   component: SearchPage,
@@ -41,7 +41,7 @@ function SearchPage() {
 
       <div className="mt-4 grid grid-cols-2 gap-3">
         {results.map((product) => (
-          <MyTouchableOpacity
+          <div
             key={product.id}
             onClick={() =>
               navigate({ to: '/home/product/$id', params: { id: String(product.id) } })
@@ -57,13 +57,13 @@ function SearchPage() {
                 />
               )}
             </div>
-            <MyText weight="semibold" className="text-sm" numberOfLines={2}>
+            <p className="font-semibold text-sm">
               {product.name}
-            </MyText>
-            <MyText weight="bold" className="mt-1 text-brand-600">
+            </p>
+            <p className="font-bold mt-1 text-brand-600">
               ₹{product.discountedPrice ?? product.price}
-            </MyText>
-          </MyTouchableOpacity>
+            </p>
+          </div>
         ))}
       </div>
     </AppContainer>
diff --git a/apps/web-ui/src/routes/home.tsx b/apps/web-ui/src/routes/home.tsx
index 533e598..2c8a4c3 100644
--- a/apps/web-ui/src/routes/home.tsx
+++ b/apps/web-ui/src/routes/home.tsx
@@ -1,21 +1,27 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import dayjs from 'dayjs'
 import {
-  MyText,
-  MyTouchableOpacity,
+  p,
+  div,
   SearchBar,
-  AppContainer,
 } from 'web-components'
 import {
   useAllProducts,
   useStores,
   useBanners,
+  useSlots,
+  useGetEssentialConsts,
 } from '../hooks/prominent-api-hooks'
-import { useGetCart } from '../hooks/cart-query-hooks'
 import { useCartStore } from '../lib/stores/cart-store'
+import { useCentralSlotStore } from '../lib/stores/central-slot-store'
+import { useCentralProductStore } from '../lib/stores/central-product-store'
+import { AppLayout } from '../components/AppLayout'
+import { ProductCard } from '../components/ProductCard'
 import AddToCartDialog from '../components/AddToCartDialog'
-import { ShoppingCart, Truck } from 'lucide-react'
+import { useProductSlotIdentifier } from '../hooks/useProductSlotIdentifier'
+import { usePopulateCentralStores } from '../hooks/usePopulateCentralStores'
+import { Store, ImageOff } from 'lucide-react'
 
 export const Route = createFileRoute('/home')({ component: HomePage })
 
@@ -24,86 +30,213 @@ function HomePage() {
   const { data: productsData } = useAllProducts()
   const { data: storesData } = useStores()
   const { data: bannersData } = useBanners()
+  const { data: slotsData } = useSlots()
+  const { data: essentialConsts } = useGetEssentialConsts()
   const { setAddedToCartProduct } = useCartStore()
+  const { getQuickestSlot } = useProductSlotIdentifier()
+  const productSlotsMap = useCentralSlotStore((state) => state.productSlotsMap)
+
+  // Populate central stores with slots and product data
+  usePopulateCentralStores()
 
   const stores = storesData?.stores || []
   const banners = bannersData?.banners || []
   const allProducts = productsData?.products || []
+  const slots = slotsData?.slots || []
+
+  // Sort products: in-stock first, then by slot availability
+  const sortedProducts = useMemo(() => {
+    return [...allProducts]
+      .filter((p) => typeof p.id === 'number')
+      .sort((a, b) => {
+        const slotA = getQuickestSlot(a.id)
+        const slotB = getQuickestSlot(b.id)
+        if (slotA && !slotB) return -1
+        if (!slotA && slotB) return 1
+        const aOutOfStock = productSlotsMap[a.id]?.isOutOfStock
+        const bOutOfStock = productSlotsMap[b.id]?.isOutOfStock
+        if (aOutOfStock && !bOutOfStock) return 1
+        if (!aOutOfStock && bOutOfStock) return -1
+        return 0
+      })
+  }, [allProducts, productSlotsMap, getQuickestSlot])
+
+  // Get popular products from essential consts
+  const popularItemIds = useMemo(() => {
+    const popularItems = essentialConsts?.popularItems
+    if (!popularItems) return []
+
+    if (Array.isArray(popularItems)) {
+      return popularItems.map((id: any) => parseInt(id)).filter((id: number) => !isNaN(id))
+    } else if (typeof popularItems === 'string') {
+      return popularItems
+        .split(',')
+        .map((id: string) => parseInt(id.trim()))
+        .filter((id: number) => !isNaN(id))
+    }
+    return []
+  }, [essentialConsts?.popularItems])
+
+  const popularProducts = useMemo(() => {
+    return popularItemIds
+      .map((id) => allProducts.find((product) => product.id === id))
+      .filter((product): product is NonNullable<typeof product> => product != null)
+  }, [popularItemIds, allProducts])
+
+  // Sort slots by delivery time
+  const sortedSlots = useMemo(() => {
+    const now = dayjs()
+    return [...slots]
+      .filter((slot) => dayjs(slot.deliveryTime).isAfter(now))
+      .sort((a, b) => {
+        const deliveryDiff = dayjs(a.deliveryTime).diff(dayjs(b.deliveryTime))
+        if (deliveryDiff !== 0) return deliveryDiff
+        return dayjs(a.freezeTime).diff(dayjs(b.freezeTime))
+      })
+  }, [slots])
+
+  const handleProductPress = (id: number) => {
+    navigate({
+      to: '/home/product/$id',
+      params: { id: String(id) },
+    })
+  }
 
   const handleAddToCart = (product: any) => {
     setAddedToCartProduct({ productId: product.id, product })
   }
 
   return (
-    <div className="mx-auto min-h-screen max-w-7xl bg-white">
-      {/* Search Bar */}
-      <div className="sticky top-0 z-10 bg-white/95 backdrop-blur-sm px-4 md:px-6 lg:px-8 pt-4 pb-3 border-b border-gray-100">
-        <SearchBar
-          placeholder="Search products here..."
-          onSearch={(q) => navigate({ to: '/home/search', search: { q } })}
-        />
-      </div>
+    <AppLayout>
+      <div className="min-h-screen bg-white pb-24">
+        {/* Search Bar */}
+        <div className="sticky top-0 z-10 border-b border-gray-100 bg-white/95 px-4 pb-3 pt-4 backdrop-blur-sm">
+          <SearchBar
+            placeholder="Search products here..."
+            onSearch={(q) => navigate({ to: '/home/search', search: { q } })}
+          />
+        </div>
 
-      <div className="px-4 md:px-6 lg:px-8">
-        {/* Banner Carousel */}
-        {banners.length > 0 && (
-          <div className="mt-4 mb-8 overflow-hidden rounded-xl">
-            <BannerCarousel banners={banners} />
-          </div>
-        )}
+        <div className="px-4">
+          {/* Banner Carousel */}
+          {banners.length > 0 && (
+            <div className="mb-6 mt-4 overflow-hidden rounded-xl">
+              <BannerCarousel banners={banners} />
+            </div>
+          )}
 
-        {/* Stores Section */}
-        <div className="mb-8">
-          <div className="flex items-center justify-between mb-4">
-            <MyText weight="bold" className="text-lg md:text-xl">
-              Our Stores
-            </MyText>
-          </div>
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4">
-            {stores.map((store: any) => (
-              <StoreCard
-                key={store.id}
-                store={store}
-                onClick={() =>
-                  navigate({
-                    to: '/stores/$storeId',
-                    params: { storeId: String(store.id) },
-                  })
-                }
-              />
-            ))}
+          {/* Stores Section */}
+          {stores.length > 0 && (
+            <div className="mb-6">
+              <div className="mb-4 flex items-center justify-between">
+                <div>
+                  <p className="font-bold text-xl text-gray-900">
+                    Our Stores
+                  </p>
+                  <p className="mt-0.5 text-xs text-gray-500">
+                    Fresh from our locations
+                  </p>
+                </div>
+              </div>
+              <div className="flex flex-wrap gap-4">
+                {stores.map((store: any) => (
+                  <div key={store.id}>
+                    <StoreCard
+                      store={store}
+                      onClick={() =>
+                        navigate({
+                          to: '/stores/$storeId',
+                          params: { storeId: String(store.id) },
+                        })
+                      }
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Popular Items Section */}
+          {popularProducts.length > 0 && (
+            <div className="mb-6">
+              <div className="mb-4">
+                <p className="font-bold text-xl text-gray-900">
+                  Popular Items
+                </p>
+                <p className="mt-0.5 text-sm text-gray-500">
+                  Trending fresh picks just for you
+                </p>
+              </div>
+              <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))' }}>
+                {popularProducts.map((product) => (
+                  <ProductCard
+                    key={product.id}
+                    item={product}
+                    onPress={() => handleProductPress(product.id)}
+                    showDeliveryInfo={false}
+                    miniView={true}
+                    useAddToCartDialog={true}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Upcoming Delivery Slots Section */}
+          {sortedSlots.length > 0 && (
+            <div className="mb-6">
+              <div className="mb-4">
+                <p className="font-bold text-xl text-gray-900">
+                  Upcoming Delivery Slots
+                </p>
+                <p className="mt-0.5 text-sm text-gray-500">
+                  Plan your fresh deliveries ahead
+                </p>
+              </div>
+              <div className="scrollbar-hide -mx-4 flex gap-4 overflow-x-auto px-4 pb-2">
+                {sortedSlots.slice(0, 5).map((slot) => (
+                  <SlotCard key={slot.id} slot={slot} />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* All Products Section */}
+          <div className="rounded-t-3xl bg-white pt-4">
+            <div className="mb-4">
+              <p className="font-bold text-xl text-gray-900">
+                All Available Products
+              </p>
+              <p className="mt-0.5 text-sm text-gray-500">
+                Browse our complete selection
+              </p>
+            </div>
+
+            {/* Responsive Grid for Products - evenly distributed */}
+            <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))' }}>
+              {sortedProducts.map((product) => (
+                <ProductCard
+                  key={product.id}
+                  item={product}
+                  onPress={() => handleProductPress(product.id)}
+                  showDeliveryInfo={true}
+                  miniView={false}
+                  useAddToCartDialog={true}
+                />
+              ))}
+            </div>
+
+            {sortedProducts.length === 0 && (
+              <div className="py-8 text-center">
+                <p className="text-gray-500">No products available</p>
+              </div>
+            )}
           </div>
         </div>
 
-        {/* Products Section */}
-        <div className="mb-24">
-          <div className="flex items-center justify-between mb-4">
-            <MyText weight="bold" className="text-lg md:text-xl">
-              All Products
-            </MyText>
-          </div>
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4">
-            {allProducts.slice(0, 30).map((product) => (
-              <ProductCard
-                key={product.id}
-                product={product}
-                onClick={() =>
-                  navigate({
-                    to: '/home/product/$id',
-                    params: { id: String(product.id) },
-                  })
-                }
-                onAddToCart={() => handleAddToCart(product)}
-              />
-            ))}
-          </div>
-        </div>
+        <AddToCartDialog />
       </div>
-
-      {/* Floating Cart Bar */}
-      <FloatingCartBar onClick={() => navigate({ to: '/cart' })} />
-      <AddToCartDialog />
-    </div>
+    </AppLayout>
   )
 }
 
@@ -122,54 +255,56 @@ function BannerCarousel({ banners }: { banners: any[] }) {
   if (images.length === 0) return null
 
   return (
-    <div className="relative group">
-      <img
-        src={images[index]}
-        alt="Banner"
-        className="h-36 sm:h-44 md:h-52 lg:h-64 w-full rounded-xl object-cover transition-all duration-500"
-      />
-      {images.length > 1 && (
-        <>
-          <button
-            onClick={() => setIndex((i) => (i - 1 + images.length) % images.length)}
-            className="absolute left-2 top-1/2 -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 transition-opacity"
-          >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-            </svg>
-          </button>
-          <button
-            onClick={() => setIndex((i) => (i + 1) % images.length)}
-            className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/30 hover:bg-black/50 text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 transition-opacity"
-          >
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-            </svg>
-          </button>
-          <div className="absolute bottom-3 left-1/2 flex -translate-x-1/2 gap-1.5">
-            {images.map((_: any, i: number) => (
-              <button
-                key={i}
-                onClick={() => setIndex(i)}
-                className={`h-2 rounded-full transition-all ${
-                  i === index ? 'w-6 bg-white' : 'w-2 bg-white/50'
-                }`}
-              />
-            ))}
-          </div>
-        </>
-      )}
+    <div className="flex justify-center">
+      <div className="group relative inline-block">
+        <img
+          src={images[index]}
+          alt="Banner"
+          className="max-h-[420px] w-auto max-w-full rounded-xl object-contain transition-all duration-500"
+        />
+        {images.length > 1 && (
+          <>
+            <button
+              onClick={() => setIndex((i) => (i - 1 + images.length) % images.length)}
+              className="absolute left-2 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-all hover:bg-black/70"
+            >
+              <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+            <button
+              onClick={() => setIndex((i) => (i + 1) % images.length)}
+              className="absolute right-2 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-all hover:bg-black/70"
+            >
+              <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+            <div className="absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 gap-1.5">
+              {images.map((_: any, i: number) => (
+                <button
+                  key={i}
+                  onClick={() => setIndex(i)}
+                  className={`h-2 rounded-full transition-all ${
+                    i === index ? 'w-6 bg-white' : 'w-2 bg-white/50'
+                  }`}
+                />
+              ))}
+            </div>
+          </>
+        )}
+      </div>
     </div>
   )
 }
 
 function StoreCard({ store, onClick }: { store: any; onClick: () => void }) {
   return (
-    <MyTouchableOpacity
+    <div
       onClick={onClick}
-      className="rounded-xl border border-gray-100 bg-white p-3 shadow-sm hover:shadow-md transition-shadow"
+      className="flex flex-col items-center"
     >
-      <div className="mb-2 aspect-square w-full overflow-hidden rounded-lg bg-gray-100">
+      <div className="mb-2 flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl border-2 border-white/30 bg-gray-100 shadow-lg">
         {store.signedImageUrl ? (
           <img
             src={store.signedImageUrl}
@@ -177,152 +312,110 @@ function StoreCard({ store, onClick }: { store: any; onClick: () => void }) {
             className="h-full w-full object-cover"
           />
         ) : (
-          <div className="flex h-full items-center justify-center text-gray-400">
-            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-            </svg>
-          </div>
+          <Store className="h-7 w-7 text-gray-400" />
         )}
       </div>
-      <MyText weight="semibold" className="text-sm truncate">
-        {store.name}
-      </MyText>
-      <MyText className="text-xs text-gray-500">
-        {store.productCount || 0} products
-      </MyText>
-    </MyTouchableOpacity>
-  )
-}
-
-function ProductCard({
-  product,
-  onClick,
-  onAddToCart,
-}: {
-  product: any
-  onClick: () => void
-  onAddToCart?: () => void
-}) {
-  const imageUrl = product.images?.[0]
-  const hasDiscount =
-    product.marketPrice != null && product.marketPrice > product.price
-
-  return (
-    <div className="rounded-xl border border-gray-100 bg-white p-3 shadow-sm hover:shadow-md transition-shadow">
-      <MyTouchableOpacity onClick={onClick}>
-        <div className="mb-2 aspect-square w-full overflow-hidden rounded-lg bg-gray-100">
-          {imageUrl ? (
-            <img
-              src={imageUrl}
-              alt={product.name}
-              className="h-full w-full object-cover"
-            />
-          ) : (
-            <div className="flex h-full items-center justify-center text-gray-300">
-              <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-              </svg>
-            </div>
-          )}
-        </div>
-        <MyText weight="semibold" className="text-sm leading-tight line-clamp-2 mb-1">
-          {product.name}
-        </MyText>
-        <div className="flex items-baseline gap-1.5">
-          <MyText weight="bold" className="text-brand-600 text-sm md:text-base">
-            ₹{product.price}
-          </MyText>
-          {hasDiscount && (
-            <MyText className="text-xs text-gray-400 line-through">
-              ₹{product.marketPrice}
-            </MyText>
-          )}
-        </div>
-        <MyText className="text-[11px] text-gray-400 mb-2">
-          /{product.unit}
-        </MyText>
-        {product.nextDeliveryDate && (
-          <div className="mb-3 flex items-center gap-1 self-start rounded-lg bg-brand-50 px-2 py-1 border border-brand-100">
-            <Truck className="h-3 w-3 text-brand-600" />
-            <MyText className="text-[10px] font-bold text-brand-700">
-              {dayjs(product.nextDeliveryDate).format('ddd, DD MMM • h:mm A')}
-            </MyText>
-          </div>
-        )}
-      </MyTouchableOpacity>
-      {onAddToCart && (
-        <button
-          onClick={(e) => {
-            e.stopPropagation()
-            onAddToCart()
-          }}
-          className="flex w-full items-center justify-center gap-2 rounded-lg bg-brand-500 py-2 text-sm font-bold text-white hover:bg-brand-600 transition-colors"
-        >
-          <ShoppingCart className="h-4 w-4" />
-          Add to Cart
-        </button>
-      )}
+      <p className="font-bold text-center text-xs tracking-wide text-gray-800">
+        {store.name.replace(/^The\s+/i, '')}
+      </p>
     </div>
   )
 }
 
-function FloatingCartBar({ onClick }: { onClick: () => void }) {
-  const { data: cartData } = useGetCart('regular')
-  const { data: productsData } = useAllProducts()
-  const products = productsData?.products || []
-  const productsById: Record<number, any> = {}
-  products.forEach((p: any) => { productsById[p.id] = p })
-  const cartItems = cartData?.items || []
-  const itemCount = cartItems.length
+function SlotCard({ slot }: { slot: any }) {
+  const navigate = useNavigate()
+  const now = dayjs()
+  const freezeTime = dayjs(slot.freezeTime)
+  const isClosingSoon = freezeTime.diff(now, 'hour') < 4 && freezeTime.isAfter(now)
 
-  const totalCartValue = cartItems.reduce((sum, item) => {
-    const product = productsById[item.productId]
-    const price = product?.price ?? 0
-    return sum + price * item.quantity
-  }, 0)
+  const formatTimeRange = (deliveryTime: string) => {
+    const time = dayjs(deliveryTime)
+    const endTime = time.add(1, 'hour')
+    const startPeriod = time.format('A')
+    const endPeriod = endTime.format('A')
 
-  const freeDeliveryThreshold = 149
-  const remainingForFreeDelivery = Math.max(0, freeDeliveryThreshold - totalCartValue)
+    if (startPeriod === endPeriod) {
+      return `${time.format('h')}-${endTime.format('h')} ${startPeriod}`
+    } else {
+      return `${time.format('h:mm')} ${startPeriod} - ${endTime.format('h:mm')} ${endPeriod}`
+    }
+  }
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 z-20 bg-brand-600 px-4 py-2 md:px-6 md:py-3 shadow-lg">
-      <div className="mx-auto flex max-w-7xl items-center justify-between">
+    <div
+      onClick={() => navigate({ to: '/slot-view', search: { slotId: slot.id } })}
+      className={`min-w-70 shrink-0 cursor-pointer rounded-3xl border border-slate-100 bg-white p-5 shadow-xl ${
+        isClosingSoon ? 'border-l-4 border-l-amber-400' : 'border-l-4 border-l-brand-500'
+      }`}
+    >
+      <div className="mb-4 flex flex-row items-start justify-end">
+        {isClosingSoon && (
+          <div className="flex flex-row items-center rounded-md border border-amber-100 bg-amber-50 px-2 py-0.5">
+            <div className="mr-1 h-1 w-1 rounded-full bg-amber-500" />
+            <p className="text-[10px] font-bold text-amber-700">CLOSING SOON</p>
+          </div>
+        )}
+      </div>
+
+      <div className="mb-5 flex flex-row justify-between">
+        <div className="mr-4 flex-1">
+          <div className="mb-1.5 flex flex-row items-center">
+            <div className="mr-1.5 rounded-md bg-brand-50 p-1">
+              <svg className="h-3 w-3 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
+              </svg>
+            </div>
+            <p className="text-[10px] font-bold uppercase text-brand-700">Delivery At</p>
+          </div>
+          <p className="font-bold text-sm text-slate-900">
+            {formatTimeRange(slot.deliveryTime)}
+          </p>
+          <p className="text-[11px] font-bold text-slate-500">
+            {dayjs(slot.deliveryTime).format('ddd, MMM DD')}
+          </p>
+        </div>
+
         <div className="flex-1">
-          <div className="flex items-center gap-2">
-            <MyText weight="bold" className="text-sm text-white">
-              ₹{totalCartValue}
-            </MyText>
-            <MyText className="text-xs text-white/80">
-              {itemCount === 0
-                ? 'No items in cart'
-                : `• ${itemCount} ${itemCount === 1 ? 'item' : 'items'}`}
-            </MyText>
-          </div>
-          {remainingForFreeDelivery > 0 ? (
-            <MyText className="text-[10px] font-bold text-white/70">
-              ₹{remainingForFreeDelivery} more for FREE Delivery
-            </MyText>
-          ) : itemCount > 0 ? (
-            <div className="flex items-center gap-1">
-              <svg className="h-3 w-3 text-emerald-300" fill="currentColor" viewBox="0 0 24 24">
-                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+          <div className="mb-1.5 flex flex-row items-center">
+            <div className="mr-1.5 rounded-md bg-amber-50 p-1">
+              <svg className="h-3 w-3 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
-              <MyText className="text-[10px] font-bold text-emerald-300">
-                Free Delivery Unlocked
-              </MyText>
             </div>
-          ) : (
-            <MyText className="text-[10px] text-white/50">
-              Shop for ₹{freeDeliveryThreshold}+ for free shipping
-            </MyText>
-          )}
+            <p className="text-[10px] font-bold uppercase text-amber-700">Order By</p>
+          </div>
+          <p className="font-bold text-sm text-slate-900">
+            {dayjs(slot.freezeTime).format('h:mm A')}
+          </p>
+          <p className="text-[11px] font-bold text-slate-500">
+            {dayjs(slot.freezeTime).format('ddd, MMM DD')}
+          </p>
         </div>
-        <button
-          onClick={onClick}
-          className="rounded-full bg-white px-4 py-2 text-sm font-bold text-brand-600 shadow-md hover:bg-gray-100 transition-colors"
-        >
-          Go to Cart
-        </button>
+      </div>
+
+      <div className="flex flex-row items-center">
+        <div className="mr-3 flex flex-row">
+          {slot.products?.slice(0, 3).map((p: any, i: number) => (
+            <div
+              key={p.id}
+              className={`h-8 w-8 overflow-hidden rounded-full border-2 border-white bg-slate-100 ${i > 0 ? '-ml-3' : ''}`}
+            >
+              {p.images?.[0] ? (
+                <img src={p.images[0]} alt="" className="h-full w-full object-cover" />
+              ) : (
+                <div className="flex h-full items-center justify-center">
+                  <ImageOff className="h-3.5 w-3.5 text-slate-400" />
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+        <p className="text-[11px] font-bold text-brand-600">
+          View all {slot.products?.length || 0} items
+        </p>
+        <svg className="ml-1 h-4 w-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+        </svg>
       </div>
     </div>
   )
diff --git a/apps/web-ui/src/routes/login.tsx b/apps/web-ui/src/routes/login.tsx
index ab17073..fe99e47 100644
--- a/apps/web-ui/src/routes/login.tsx
+++ b/apps/web-ui/src/routes/login.tsx
@@ -3,7 +3,7 @@ import { useState, useEffect, useRef } from 'react'
 import { useForm, Controller } from 'react-hook-form'
 import { useAuth } from '../lib/auth-context'
 import { trpc } from '../lib/trpc-client'
-import { MyText, MyButton, MyTextInput, MyTouchableOpacity } from 'web-components'
+import { p, MyButton, pInput, div } from 'web-components'
 
 export const Route = createFileRoute('/login')({ component: LoginPage })
 
@@ -126,12 +126,12 @@ function LoginPage() {
   return (
     <div className="flex min-h-screen items-center justify-center bg-gradient-to-b from-brand-400 to-brand-700 p-4">
       <div className="w-full max-w-md">
-        <MyText weight="bold" className="mb-2 text-center text-4xl text-white">
+        <p className="font-bold mb-2 text-center text-4xl text-white">
           Welcome
-        </MyText>
-        <MyText className="mb-8 text-center text-lg text-blue-100">
+        </p>
+        <p className="mb-8 text-center text-lg text-blue-100">
           Sign in to continue your journey
-        </MyText>
+        </p>
 
         <div className="rounded-2xl bg-white p-8 shadow-xl">
           <form onSubmit={handleSubmit(onSubmit)}>
@@ -140,7 +140,7 @@ function LoginPage() {
                 control={control}
                 name="mobile"
                 render={({ field: { onChange, value } }) => (
-                  <MyTextInput
+                  <pInput
                     placeholder="Enter your mobile number"
                     value={value}
                     onChange={(e) => {
@@ -155,9 +155,9 @@ function LoginPage() {
 
             {step === 'otp' && (
               <div className="mb-6">
-                <MyText weight="semibold" className="mb-3 text-center text-base text-gray-800">
+                <p className="font-semibold mb-3 text-center text-base text-gray-800">
                   Enter 4-digit OTP
-                </MyText>
+                </p>
                 <div className="flex justify-center gap-2">
                   {[0, 1, 2, 3].map((i) => (
                     <input
@@ -177,22 +177,21 @@ function LoginPage() {
                   ))}
                 </div>
                 <div className="mt-4 flex items-center justify-between border-t border-gray-100 pt-4">
-                  <MyTouchableOpacity
+                  <div
                     onClick={() => { setStep('choice'); setOtpCells(['', '', '', '']) }}
                   >
-                    <MyText weight="medium" className="text-gray-500">Back</MyText>
-                  </MyTouchableOpacity>
-                  <MyTouchableOpacity
+                    <p className="font-medium text-gray-500">Back</p>
+                  </div>
+                  <div
                     onClick={() => sendOtpMutation.mutate({ mobile: selectedMobile })}
                     disabled={!canResend}
                   >
-                    <MyText
-                      weight="semibold"
-                      className={canResend ? 'text-brand-600' : 'text-gray-400'}
+                    <p
+                      className={`font-semibold ${canResend ? 'text-brand-600' : 'text-gray-400'}`}
                     >
                       {canResend ? 'Resend OTP' : `Resend in ${resendCountdown}s`}
-                    </MyText>
-                  </MyTouchableOpacity>
+                    </p>
+                  </div>
                 </div>
               </div>
             )}
@@ -202,7 +201,7 @@ function LoginPage() {
                 control={control}
                 name="password"
                 render={({ field: { onChange, value } }) => (
-                  <MyTextInput
+                  <pInput
                     placeholder="Enter your password"
                     value={value}
                     onChange={(e) => onChange(e.target.value)}
@@ -235,14 +234,14 @@ function LoginPage() {
           </form>
 
           {step === 'otp' && (
-            <MyTouchableOpacity
+            <div
               onClick={() => { setStep('password'); setOtpCells(['', '', '', '']) }}
               className="mt-4 block text-center"
             >
-              <MyText weight="semibold" className="text-brand-600">
+              <p className="font-semibold text-brand-600">
                 Or login with Password
-              </MyText>
-            </MyTouchableOpacity>
+              </p>
+            </div>
           )}
         </div>
       </div>
diff --git a/apps/web-ui/src/routes/me.about.tsx b/apps/web-ui/src/routes/me.about.tsx
index d96e094..c79dc8c 100644
--- a/apps/web-ui/src/routes/me.about.tsx
+++ b/apps/web-ui/src/routes/me.about.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { MyText, AppContainer } from 'web-components'
+import { p, AppContainer } from 'web-components'
 import { Heart, Shield, Truck, Leaf } from 'lucide-react'
 
 export const Route = createFileRoute('/me/about')({ component: AboutPage })
@@ -30,9 +30,9 @@ function AboutPage() {
 
   return (
     <AppContainer>
-      <MyText weight="bold" className="mb-6 text-2xl">
+      <p className="font-bold mb-6 text-2xl">
         About Freshyo
-      </MyText>
+      </p>
 
       <div className="grid grid-cols-2 gap-4">
         {missions.map((mission) => (
@@ -41,23 +41,23 @@ function AboutPage() {
             className="rounded-xl border border-gray-100 bg-white p-4 shadow-sm"
           >
             <mission.icon className="mb-2 h-8 w-8 text-brand-500" />
-            <MyText weight="semibold" className="mb-1">
+            <p className="font-semibold mb-1">
               {mission.title}
-            </MyText>
-            <MyText className="text-sm text-gray-600">{mission.desc}</MyText>
+            </p>
+            <p className="text-sm text-gray-600">{mission.desc}</p>
           </div>
         ))}
       </div>
 
       <div className="mt-8">
-        <MyText weight="bold" className="mb-3 text-lg">
+        <p className="font-bold mb-3 text-lg">
           Sourcing & Quality
-        </MyText>
-        <MyText className="mb-6 text-sm leading-relaxed text-gray-600">
+        </p>
+        <p className="mb-6 text-sm leading-relaxed text-gray-600">
           We partner with trusted local farmers who follow ethical and sustainable
           farming practices. Every product undergoes rigorous quality checks to ensure
           you receive only the freshest meat.
-        </MyText>
+        </p>
       </div>
     </AppContainer>
   )
diff --git a/apps/web-ui/src/routes/me.addresses.tsx b/apps/web-ui/src/routes/me.addresses.tsx
index 66a2324..a169f8a 100644
--- a/apps/web-ui/src/routes/me.addresses.tsx
+++ b/apps/web-ui/src/routes/me.addresses.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { trpc } from '../lib/trpc-client'
-import { MyText, MyButton, AppContainer } from 'web-components'
+import { p, MyButton, AppContainer } from 'web-components'
 import { MapPin, Plus } from 'lucide-react'
 import { useState } from 'react'
 
@@ -16,14 +16,14 @@ function AddressesPage() {
 
   return (
     <AppContainer>
-      <MyText weight="bold" className="mb-4 text-xl">
+      <p className="font-bold mb-4 text-xl">
         My Addresses
-      </MyText>
+      </p>
 
       {addresses.length === 0 ? (
         <div className="flex flex-col items-center gap-4 py-20">
           <MapPin className="h-12 w-12 text-gray-300" />
-          <MyText className="text-gray-500">No addresses saved</MyText>
+          <p className="text-gray-500">No addresses saved</p>
         </div>
       ) : (
         <div className="flex flex-col gap-3">
@@ -34,15 +34,15 @@ function AddressesPage() {
             >
               <div className="flex items-start justify-between">
                 <div className="flex-1">
-                  <MyText weight="semibold">{addr.name}</MyText>
-                  <MyText className="text-sm text-gray-600">
+                  <p className="font-semibold">{addr.name}</p>
+                  <p className="text-sm text-gray-600">
                     {addr.addressLine1}
                     {addr.addressLine2 ? `, ${addr.addressLine2}` : ''}
-                  </MyText>
-                  <MyText className="text-sm text-gray-600">
+                  </p>
+                  <p className="text-sm text-gray-600">
                     {addr.city}, {addr.state} - {addr.pincode}
-                  </MyText>
-                  <MyText className="text-sm text-gray-500">{addr.phone}</MyText>
+                  </p>
+                  <p className="text-sm text-gray-500">{addr.phone}</p>
                   {addr.isDefault && (
                     <span className="mt-1 inline-block rounded-full bg-brand-100 px-2 py-0.5 text-xs text-brand-700">
                       Default
diff --git a/apps/web-ui/src/routes/me.complaints.tsx b/apps/web-ui/src/routes/me.complaints.tsx
index 1215312..fc1f510 100644
--- a/apps/web-ui/src/routes/me.complaints.tsx
+++ b/apps/web-ui/src/routes/me.complaints.tsx
@@ -1,116 +1,179 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { trpc } from '../lib/trpc-client'
+import { p, AppContainer, div } from 'web-components'
+import { Phone, Mail, Headphones, CheckCircle, Clock, AlertCircle, ThumbsUp, MessageSquare } from 'lucide-react'
+import { useGetEssentialConsts } from '../hooks/prominent-api-hooks'
+import dayjs from 'dayjs'
+import { Dialog } from '../components/Dialog'
 import { useState } from 'react'
-import {
-  MyText,
-  MyButton,
-  MyTextInput,
-  AppContainer,
-  MyTouchableOpacity,
-} from 'web-components'
-import { MessageSquare, Plus } from 'lucide-react'
 
 export const Route = createFileRoute('/me/complaints')({ component: ComplaintsPage })
 
-function ComplaintsPage() {
-  const { data } = trpc.user.complaint.getAll.useQuery()
-  const raiseMutation = trpc.user.complaint.raise.useMutation()
-  const utils = trpc.useUtils()
-  const [showForm, setShowForm] = useState(false)
-  const [body, setBody] = useState('')
-  const complaints = data?.data || []
+interface ComplaintItemProps {
+  item: any
+}
 
-  const handleSubmit = () => {
-    if (!body.trim()) return
-    raiseMutation.mutate(
-      { body: body.trim() },
-      {
-        onSuccess: () => {
-          setBody('')
-          setShowForm(false)
-          utils.user.complaint.getAll.invalidate()
-        },
-      }
+function ComplaintItem({ item }: ComplaintItemProps) {
+  return (
+    <div className="mb-4 rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
+      {/* Header: ID, Date, Status */}
+      <div className="mb-3 flex flex-row items-start justify-between">
+        <div>
+          <div className="flex flex-row items-center">
+            <p className="text-base font-bold text-gray-900">Complaint #{item.id}</p>
+            {item.orderId && (
+              <div className="ml-2 rounded bg-gray-100 px-2 py-0.5">
+                <p className="text-[10px] font-bold text-gray-500">Order #{item.orderId}</p>
+              </div>
+            )}
+          </div>
+          <p className="mt-1 text-xs text-gray-400">
+            {dayjs(item.createdAt).format('MMM DD, YYYY • h:mm A')}
+          </p>
+        </div>
+
+        <div
+          className={`rounded-full px-3 py-1 ${
+            item.isResolved ? 'bg-green-100' : 'bg-amber-100'
+          }`}
+        >
+          <p
+            className={`text-xs font-bold ${
+              item.isResolved ? 'text-green-700' : 'text-amber-700'
+            }`}
+          >
+            {item.isResolved ? 'Resolved' : 'Pending'}
+          </p>
+        </div>
+      </div>
+
+      {/* Complaint Body */}
+      <p className="mb-4 text-sm leading-6 text-gray-700">{item.complaintBody}</p>
+
+      {/* Admin Response */}
+      {item.response && (
+        <div className="rounded-xl border border-blue-100 bg-blue-50 p-4">
+          <div className="mb-2 flex flex-row items-center">
+            <div className="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-blue-100">
+              <Headphones className="h-3.5 w-3.5 text-blue-600" />
+            </div>
+            <p className="text-xs font-bold uppercase tracking-wide text-blue-800">Support Response</p>
+          </div>
+          <p className="text-sm leading-5 text-blue-900">{item.response}</p>
+        </div>
+      )}
+
+      {!item.response && !item.isResolved && (
+        <div className="mt-2 flex flex-row items-center">
+          <Clock className="h-3.5 w-3.5 text-gray-400" />
+          <p className="ml-1 text-xs italic text-gray-400">We are reviewing your complaint...</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ComplaintsPage() {
+  const navigate = useNavigate()
+  const { data, isLoading, error, refetch } = trpc.user.complaint.getAll.useQuery()
+  const complaints = data?.complaints || []
+  const { data: constsData } = useGetEssentialConsts()
+  const [showContactDialog, setShowContactDialog] = useState(false)
+
+  if (isLoading) {
+    return (
+      <AppContainer>
+        <div className="flex min-h-full flex-1 items-center justify-center bg-gray-50">
+          <p className="font-medium text-gray-500">Loading complaints...</p>
+        </div>
+      </AppContainer>
+    )
+  }
+
+  if (error) {
+    return (
+      <AppContainer>
+        <div className="flex min-h-full flex-1 flex-col items-center justify-center bg-gray-50">
+          <AlertCircle className="mb-4 h-12 w-12 text-red-500" />
+          <p className="text-lg font-bold text-gray-900">Oops!</p>
+          <p className="mt-2 text-gray-500">Failed to load complaints</p>
+        </div>
+      </AppContainer>
     )
   }
 
   return (
     <AppContainer>
-      <div className="mb-4 flex items-center justify-between">
-        <MyText weight="bold" className="text-xl">
-          Help & Complaints
-        </MyText>
-        <MyTouchableOpacity
-          onClick={() => setShowForm(!showForm)}
-          className="flex items-center gap-1 text-brand-600"
-        >
-          <Plus className="h-4 w-4" />
-          <MyText className="text-sm">New</MyText>
-        </MyTouchableOpacity>
-      </div>
-
-      {/* Raise Complaint Form */}
-      {showForm && (
-        <div className="mb-6 rounded-xl border border-gray-100 bg-white p-4 shadow-sm">
-          <MyText weight="semibold" className="mb-3">
-            Raise a Complaint
-          </MyText>
-          <textarea
-            className="mb-3 min-h-24 w-full rounded-lg border border-gray-200 p-3 text-sm"
-            value={body}
-            onChange={(e) => setBody(e.target.value)}
-            placeholder="Describe your issue..."
-            rows={4}
-          />
-          <MyButton
-            onClick={handleSubmit}
-            disabled={raiseMutation.isPending || !body.trim()}
-            textContent={raiseMutation.isPending ? 'Submitting...' : 'Submit'}
-          />
-        </div>
-      )}
-
-      {/* Complaint List */}
-      {complaints.length === 0 ? (
-        <div className="flex flex-col items-center gap-4 py-20">
-          <MessageSquare className="h-12 w-12 text-gray-300" />
-          <MyText className="text-gray-500">No complaints yet</MyText>
-        </div>
-      ) : (
-        <div className="flex flex-col gap-3">
-          {complaints.map((complaint: any) => (
-            <div
-              key={complaint.id}
-              className="rounded-xl border border-gray-100 bg-white p-4 shadow-sm"
-            >
-              <div className="mb-2 flex items-center justify-between">
-                <span
-                  className={`rounded-full px-2 py-0.5 text-xs font-medium ${
-                    complaint.status === 'resolved'
-                      ? 'bg-green-100 text-green-700'
-                      : 'bg-yellow-100 text-yellow-700'
-                  }`}
-                >
-                  {complaint.status || 'pending'}
-                </span>
-                <MyText className="text-xs text-gray-400">
-                  {complaint.createdAt
-                    ? new Date(complaint.createdAt).toLocaleDateString()
-                    : ''}
-                </MyText>
-              </div>
-              <MyText className="text-sm text-gray-700">{complaint.body}</MyText>
-              {complaint.adminResponse && (
-                <div className="mt-2 rounded-lg bg-blue-50 p-2">
-                  <MyText className="text-xs text-blue-600">
-                    Response: {complaint.adminResponse}
-                  </MyText>
-                </div>
-              )}
+      <div className="min-h-full flex-1 bg-gray-50">
+        {/* Support Header */}
+        <div className="bg-brand-600 px-4 py-5">
+          <div className="mb-4 flex flex-row items-center">
+            <div className="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-white/20">
+              <Headphones className="h-5 w-5 text-white" />
             </div>
-          ))}
+            <p className="text-lg font-bold text-white">Need Help?</p>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            {/* Call Us Card */}
+            <a
+              href={`tel:${constsData?.supportMobile || '8688182552'}`}
+              className="flex w-full flex-row items-center rounded-xl bg-white p-3"
+            >
+              <div className="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-green-100">
+                <Phone className="h-5 w-5 text-green-600" />
+              </div>
+              <div>
+                <p className="text-[10px] font-bold uppercase text-gray-500">Call Us</p>
+                <p className="text-base font-bold text-gray-900">
+                  {constsData?.supportMobile || '8688182552'}
+                </p>
+              </div>
+            </a>
+
+            {/* Email Card */}
+            <a
+              href={`mailto:${constsData?.supportEmail || 'qushammohd@gmail.com'}`}
+              className="flex w-full flex-row items-center rounded-xl bg-white p-3"
+            >
+              <div className="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
+                <Mail className="h-5 w-5 text-blue-600" />
+              </div>
+              <div>
+                <p className="text-[10px] font-bold uppercase text-gray-500">Email</p>
+                <p className="text-sm font-bold text-gray-900">
+                  {constsData?.supportEmail || 'qushammohd@gmail.com'}
+                </p>
+              </div>
+            </a>
+          </div>
         </div>
-      )}
+
+        {/* Complaints List */}
+        <div className="px-4 py-6">
+          {complaints.length === 0 ? (
+            <div className="flex flex-1 flex-col items-center justify-center py-20">
+              <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gray-100">
+                <ThumbsUp className="h-10 w-10 text-gray-400" />
+              </div>
+              <p className="text-xl font-bold text-gray-900">No Complaints</p>
+              <p className="mt-2 px-10 text-center leading-5 text-gray-500">
+                You haven't raised any complaints yet. That's great!
+              </p>
+              <button
+                onClick={() => navigate({ to: '/home' })}
+                className="mt-8 rounded-xl bg-brand-600 px-6 py-3 font-bold text-white shadow-sm"
+              >
+                Continue Shopping
+              </button>
+            </div>
+          ) : (
+            complaints.map((complaint: any) => (
+              <ComplaintItem key={complaint.id} item={complaint} />
+            ))
+          )}
+        </div>
+      </div>
     </AppContainer>
   )
 }
diff --git a/apps/web-ui/src/routes/me.coupons.tsx b/apps/web-ui/src/routes/me.coupons.tsx
index d0cc8b4..6c4b624 100644
--- a/apps/web-ui/src/routes/me.coupons.tsx
+++ b/apps/web-ui/src/routes/me.coupons.tsx
@@ -1,80 +1,182 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { trpc } from '../lib/trpc-client'
 import { useState } from 'react'
-import { MyText, MyButton, MyTextInput, AppContainer } from 'web-components'
-import { Ticket } from 'lucide-react'
+import { p, MyButton, AppContainer, div } from 'web-components'
+import { Ticket, AlertCircle } from 'lucide-react'
+import dayjs from 'dayjs'
 
 export const Route = createFileRoute('/me/coupons')({ component: CouponsPage })
 
+interface Coupon {
+  id: number
+  code: string
+  discountType: 'percentage' | 'flat'
+  discountValue: number
+  maxValue?: number
+  minOrder?: number
+  description: string
+  validTill?: string | Date
+  usageCount: number
+  maxLimitForUser?: number
+  isExpired: boolean
+  isUsedUp: boolean
+}
+
+interface CouponCardProps {
+  coupon: Coupon
+}
+
+function CouponCard({ coupon }: CouponCardProps) {
+  const getStatusColor = () => {
+    if (coupon.isExpired) return 'text-red-500'
+    if (coupon.isUsedUp) return 'text-orange-500'
+    return 'text-green-600'
+  }
+
+  const getStatusText = () => {
+    if (coupon.isExpired) return 'Expired'
+    if (coupon.isUsedUp) return 'Used'
+    return 'Available'
+  }
+
+  const formatDate = (date?: string | Date) => {
+    if (!date) return 'No expiry'
+    return dayjs(date).format('DD MMM YYYY')
+  }
+
+  return (
+    <div className="mb-3 rounded-lg border border-gray-100 bg-white p-4 shadow-sm">
+      <div className="mb-2 flex items-start justify-between">
+        <div className="flex-1">
+          <p className="mb-1 text-lg font-semibold text-gray-800">{coupon.code}</p>
+          <p className="mb-2 text-sm text-gray-600">{coupon.description}</p>
+        </div>
+        <div className="items-end text-right">
+          <p className={`mb-1 text-sm font-medium ${getStatusColor()}`}>{getStatusText()}</p>
+          {coupon.maxLimitForUser && (
+            <p className="text-xs text-gray-500">Used: {coupon.usageCount}/{coupon.maxLimitForUser}</p>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <p className="text-xs text-gray-500">Valid till: {formatDate(coupon.validTill)}</p>
+        <button
+          className={`rounded-full px-3 py-1 text-xs font-medium text-white ${
+            coupon.isExpired || coupon.isUsedUp
+              ? 'cursor-not-allowed bg-gray-400'
+              : 'bg-blue-500 hover:bg-blue-600'
+          }`}
+          disabled={coupon.isExpired || coupon.isUsedUp}
+        >
+          {coupon.isExpired || coupon.isUsedUp ? 'Unavailable' : 'Apply'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+interface CouponSectionProps {
+  title: string
+  coupons: Coupon[]
+  emptyMessage: string
+}
+
+function CouponSection({ title, coupons, emptyMessage }: CouponSectionProps) {
+  return (
+    <div className="mb-6">
+      <p className="mb-3 text-lg font-semibold text-gray-800">{title}</p>
+
+      {coupons.length === 0 ? (
+        <div className="flex flex-col items-center rounded-lg bg-gray-50 p-6">
+          <Ticket className="mb-2 h-12 w-12 text-gray-400" />
+          <p className="text-center text-gray-500">{emptyMessage}</p>
+        </div>
+      ) : (
+        coupons.map((coupon) => <CouponCard key={coupon.id} coupon={coupon} />)
+      )}
+    </div>
+  )
+}
+
 function CouponsPage() {
   const [code, setCode] = useState('')
-  const { data } = trpc.user.coupon.getMyCoupons.useQuery()
-  const redeemMutation = trpc.user.coupon.redeemReservedCoupon.useMutation()
-  const utils = trpc.useUtils()
-  const coupons = data?.data || []
+  const { data, isLoading, error, refetch } = trpc.user.coupon.getMyCoupons.useQuery()
+  const redeemMutation = trpc.user.coupon.redeemReservedCoupon.useMutation({
+    onSuccess: () => {
+      setCode('')
+      refetch()
+    },
+  })
+
+  const personalCoupons = data?.data?.personal || []
+  const generalCoupons = data?.data?.general || []
 
   const handleRedeem = () => {
-    if (!code.trim()) return
-    redeemMutation.mutate(
-      { couponCode: code.trim() },
-      {
-        onSuccess: () => {
-          setCode('')
-          utils.user.coupon.getMyCoupons.invalidate()
-        },
-      }
+    if (!code.trim() || code.trim().length < 4) return
+    redeemMutation.mutate({ secretCode: code.trim().toUpperCase() })
+  }
+
+  if (isLoading) {
+    return (
+      <AppContainer>
+        <div className="flex flex-1 items-center justify-center">
+          <p className="text-gray-600">Loading coupons...</p>
+        </div>
+      </AppContainer>
+    )
+  }
+
+  if (error) {
+    return (
+      <AppContainer>
+        <div className="flex flex-1 flex-col items-center justify-center p-4">
+          <AlertCircle className="mb-2 h-12 w-12 text-red-500" />
+          <p className="text-center text-red-600">Failed to load coupons. Please try again.</p>
+        </div>
+      </AppContainer>
     )
   }
 
   return (
     <AppContainer>
-      <MyText weight="bold" className="mb-4 text-xl">
-        My Coupons
-      </MyText>
+      <div className="flex-1 p-4">
+        {/* Add Coupon Card */}
+        <div className="mb-6 rounded-lg border border-gray-100 bg-white p-4 shadow-sm">
+          <p className="mb-3 text-lg font-semibold text-gray-800">Add a Coupon</p>
+          <input
+            type="text"
+            placeholder="Enter coupon code"
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            className="mb-4 w-full rounded-lg border border-gray-200 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+          />
+          <button
+            onClick={handleRedeem}
+            disabled={redeemMutation.isPending || code.trim().length < 4}
+            className={`w-full rounded-lg px-4 py-3 text-center font-semibold text-white ${
+              redeemMutation.isPending || code.trim().length < 4
+                ? 'cursor-not-allowed bg-gray-400 opacity-50'
+                : 'bg-blue-500 hover:bg-blue-600'
+            }`}
+          >
+            {redeemMutation.isPending ? 'Adding...' : 'Add Coupon'}
+          </button>
+        </div>
 
-      {/* Redeem Code */}
-      <div className="mb-6 flex gap-2">
-        <MyTextInput
-          placeholder="Enter coupon code"
-          value={code}
-          onChange={(e) => setCode(e.target.value)}
-          className="flex-1"
+        {/* Coupon Sections */}
+        <CouponSection
+          title="Only for Me"
+          coupons={personalCoupons}
+          emptyMessage="No personal coupons available"
         />
-        <MyButton
-          onClick={handleRedeem}
-          disabled={redeemMutation.isPending || !code.trim()}
-          textContent={redeemMutation.isPending ? 'Redeeming...' : 'Redeem'}
+
+        <CouponSection
+          title="Apply to All"
+          coupons={generalCoupons}
+          emptyMessage="No general coupons available"
         />
       </div>
-
-      {/* Coupon List */}
-      {coupons.length === 0 ? (
-        <div className="flex flex-col items-center gap-4 py-20">
-          <Ticket className="h-12 w-12 text-gray-300" />
-          <MyText className="text-gray-500">No coupons yet</MyText>
-        </div>
-      ) : (
-        <div className="flex flex-col gap-3">
-          {coupons.map((coupon: any) => (
-            <div
-              key={coupon.id}
-              className="rounded-xl border border-dashed border-brand-200 bg-brand-50 p-4"
-            >
-              <MyText weight="bold" className="text-brand-700">
-                {coupon.code}
-              </MyText>
-              <MyText className="text-sm text-gray-600">
-                {coupon.description || `${coupon.discountPercent || 0}% off`}
-              </MyText>
-              {coupon.expiresAt && (
-                <MyText className="mt-1 text-xs text-gray-400">
-                  Expires: {new Date(coupon.expiresAt).toLocaleDateString()}
-                </MyText>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
     </AppContainer>
   )
 }
diff --git a/apps/web-ui/src/routes/me.edit-profile.tsx b/apps/web-ui/src/routes/me.edit-profile.tsx
index 641db3c..ee18812 100644
--- a/apps/web-ui/src/routes/me.edit-profile.tsx
+++ b/apps/web-ui/src/routes/me.edit-profile.tsx
@@ -2,7 +2,9 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useState } from 'react'
 import { useAuth } from '../lib/auth-context'
 import { trpc } from '../lib/trpc-client'
-import { MyText, MyButton, MyTextInput, AppContainer } from 'web-components'
+import { p, AppContainer, div } from 'web-components'
+import { AlertCircle, LogOut, Trash2, User, Mail, Phone, X } from 'lucide-react'
+import { Dialog } from '../components/Dialog'
 
 export const Route = createFileRoute('/me/edit-profile')({ component: EditProfilePage })
 
@@ -11,17 +13,23 @@ function EditProfilePage() {
   const { user, logout, loginWithToken } = useAuth()
   const [name, setName] = useState(user?.name || '')
   const [email, setEmail] = useState(user?.email || '')
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [enteredMobile, setEnteredMobile] = useState('')
 
   const updateMutation = trpc.user.auth.updateProfile.useMutation({
     onSuccess: (data) => {
-      if (data.token && data.user) {
-        loginWithToken(data.token, data.user)
+      if (data.data.token && data.data.user) {
+        loginWithToken(data.data.token, data.data.user)
       }
+      navigate({ to: '/me' })
     },
   })
 
   const deleteMutation = trpc.user.auth.deleteAccount.useMutation({
-    onSuccess: () => logout(),
+    onSuccess: () => {
+      setShowDeleteModal(false)
+      logout()
+    },
   })
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -29,65 +37,166 @@ function EditProfilePage() {
     updateMutation.mutate({ name, email })
   }
 
+  const handleDeleteAccount = () => {
+    setShowDeleteModal(true)
+  }
+
+  const confirmDeleteAccount = () => {
+    if (!enteredMobile.trim()) {
+      alert('Please enter your mobile number')
+      return
+    }
+    deleteMutation.mutate({ mobile: enteredMobile.trim() })
+  }
+
   return (
     <AppContainer>
-      <MyText weight="bold" className="mb-4 text-xl">
-        Edit Profile
-      </MyText>
+      <div className="flex min-h-full flex-col px-4 py-8">
+        {/* Header */}
+        <div className="mb-8 mt-4 text-center">
+          <p className="mb-2 text-3xl font-bold text-gray-800">Edit Profile</p>
+          <p className="text-base text-gray-600">Update your account details</p>
+        </div>
 
-      <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-        <MyTextInput
-          placeholder="Name"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-        />
-        <MyTextInput
-          placeholder="Email"
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-        />
-        <MyTextInput
-          placeholder="Mobile"
-          value={user?.mobile || ''}
-          disabled
-          className="bg-gray-50"
-        />
+        {/* Profile Form */}
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          {/* Name Field */}
+          <div className="rounded-lg border border-gray-100 bg-white p-4 shadow-sm">
+            <label className="mb-2 flex items-center gap-2 text-sm font-medium text-gray-700">
+              <User className="h-4 w-4" />
+              Full Name
+            </label>
+            <input
+              type="text"
+              placeholder="Enter your name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="w-full rounded-lg border border-gray-200 px-4 py-3 text-sm focus:border-blue-500 focus:outline-none"
+            />
+          </div>
 
-        <MyButton
-          type="submit"
-          fullWidth
-          disabled={updateMutation.isPending}
-          textContent={updateMutation.isPending ? 'Saving...' : 'Save Changes'}
-          className="bg-brand-500 text-white"
-        />
-      </form>
+          {/* Email Field */}
+          <div className="rounded-lg border border-gray-100 bg-white p-4 shadow-sm">
+            <label className="mb-2 flex items-center gap-2 text-sm font-medium text-gray-700">
+              <Mail className="h-4 w-4" />
+              Email Address
+            </label>
+            <input
+              type="email"
+              placeholder="Enter your email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full rounded-lg border border-gray-200 px-4 py-3 text-sm focus:border-blue-500 focus:outline-none"
+            />
+          </div>
 
-      <div className="mt-8 border-t border-gray-200 pt-8">
-        <MyButton
-          fullWidth
-          variant="red"
-          onClick={() => logout()}
-          textContent="Logout"
-        />
+          {/* Mobile Field (Disabled) */}
+          <div className="rounded-lg border border-gray-100 bg-white p-4 shadow-sm">
+            <label className="mb-2 flex items-center gap-2 text-sm font-medium text-gray-700">
+              <Phone className="h-4 w-4" />
+              Mobile Number
+            </label>
+            <input
+              type="tel"
+              value={user?.mobile || ''}
+              disabled
+              className="w-full cursor-not-allowed rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-500"
+            />
+            <p className="mt-1 text-xs text-gray-400">Mobile number cannot be changed</p>
+          </div>
 
-        <MyButton
-          fullWidth
-          variant="red"
-          onClick={() => {
-            if (window.confirm('Are you sure you want to delete your account?')) {
-              deleteMutation.mutate({ mobile: user?.mobile || '' })
-            }
-          }}
-          disabled={deleteMutation.isPending}
-          textContent={
-            deleteMutation.isPending
-              ? 'Deleting...'
-              : 'Delete My Account'
-          }
-          className="mt-3 bg-red-600 text-white"
-        />
+          {/* Save Button */}
+          <button
+            type="submit"
+            disabled={updateMutation.isPending}
+            className={`mt-2 w-full rounded-lg px-4 py-3 font-semibold text-white transition-colors ${
+              updateMutation.isPending
+                ? 'cursor-not-allowed bg-gray-400'
+                : 'bg-blue-600 hover:bg-blue-700'
+            }`}
+          >
+            {updateMutation.isPending ? 'Saving...' : 'Save Changes'}
+          </button>
+        </form>
+
+        {/* Action Buttons */}
+        <div className="mt-8 space-y-3">
+          {/* Logout Button */}
+          <button
+            onClick={logout}
+            className="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-red-600 transition-colors hover:bg-red-50"
+          >
+            <LogOut className="h-4 w-4" />
+            Logout
+          </button>
+
+          {/* Delete Account Button */}
+          <button
+            onClick={handleDeleteAccount}
+            className="flex w-full items-center justify-center gap-2 rounded-lg bg-red-600 px-4 py-3 font-medium text-white transition-colors hover:bg-red-700"
+          >
+            <Trash2 className="h-4 w-4" />
+            Delete Me and My Data
+          </button>
+        </div>
       </div>
+
+      {/* Delete Account Modal */}
+      <Dialog open={showDeleteModal} onClose={() => setShowDeleteModal(false)}>
+        <div className="p-4">
+          <div className="mb-4 flex items-center justify-between">
+            <div className="flex items-center gap-2 text-red-600">
+              <AlertCircle className="h-6 w-6" />
+              <p className="text-xl font-bold">Delete Account Permanently</p>
+            </div>
+            <button
+              onClick={() => setShowDeleteModal(false)}
+              className="rounded-full p-1 hover:bg-gray-100"
+            >
+              <X className="h-5 w-5 text-gray-500" />
+            </button>
+          </div>
+
+          <p className="mb-4 text-center text-gray-700">
+            This action cannot be undone. All your data will be permanently deleted.
+          </p>
+
+          <p className="mb-4 text-sm text-gray-600">
+            Enter your registered mobile number to confirm:
+          </p>
+
+          <div className="mb-6">
+            <input
+              type="tel"
+              value={enteredMobile}
+              onChange={(e) => setEnteredMobile(e.target.value)}
+              placeholder="Enter mobile number"
+              className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-red-500 focus:outline-none"
+              maxLength={15}
+            />
+          </div>
+
+          <div className="flex gap-3">
+            <button
+              onClick={() => setShowDeleteModal(false)}
+              className="flex-1 rounded-lg border border-gray-200 bg-gray-100 px-4 py-3 font-medium text-gray-700 transition-colors hover:bg-gray-200"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={confirmDeleteAccount}
+              disabled={deleteMutation.isPending || !enteredMobile.trim()}
+              className={`flex-1 rounded-lg px-4 py-3 font-medium text-white transition-colors ${
+                deleteMutation.isPending || !enteredMobile.trim()
+                  ? 'cursor-not-allowed bg-red-400'
+                  : 'bg-red-600 hover:bg-red-700'
+              }`}
+            >
+              {deleteMutation.isPending ? 'Deleting...' : 'Delete Forever'}
+            </button>
+          </div>
+        </div>
+      </Dialog>
     </AppContainer>
   )
 }
diff --git a/apps/web-ui/src/routes/me.orders.$id.tsx b/apps/web-ui/src/routes/me.orders.$id.tsx
index 718de16..6918f8c 100644
--- a/apps/web-ui/src/routes/me.orders.$id.tsx
+++ b/apps/web-ui/src/routes/me.orders.$id.tsx
@@ -1,147 +1,479 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { createFileRoute, useNavigate, useParams } from '@tanstack/react-router'
 import { trpc } from '../lib/trpc-client'
-import { useState } from 'react'
-import { MyText, MyButton, LoadingDialog, AppContainer, MyTouchableOpacity } from 'web-components'
-import { ArrowLeft, Package } from 'lucide-react'
+import { useState, useEffect } from 'react'
+import { p, AppContainer, div } from 'web-components'
+import { ChevronLeft, CreditCard, Package, CheckCircle, XCircle, Clock, Zap, Calendar, Edit2, Tag, AlertCircle, X } from 'lucide-react'
+import { Dialog } from '../components/Dialog'
+import dayjs from 'dayjs'
 
 export const Route = createFileRoute('/me/orders/$id')({
   component: OrderDetailPage,
 })
 
 function OrderDetailPage() {
-  const { id } = Route.useParams()
+  const { id } = useParams({ from: '/me/orders/$id' })
   const navigate = useNavigate()
   const orderId = Number(id)
-  const [showCancelDialog, setShowCancelDialog] = useState(false)
 
-  const { data } = trpc.user.order.getOrderById.useQuery({ orderId })
-  const cancelMutation = trpc.user.order.cancelOrder.useMutation()
-  const order = data?.data
+  const { data: orderData, isLoading, error, refetch } = trpc.user.order.getOrderById.useQuery(
+    { orderId: orderId+'' },
+    { enabled: !!orderId }
+  )
 
-  const handleCancel = () => {
-    cancelMutation.mutate(
-      { orderId },
-      { onSuccess: () => setShowCancelDialog(false) }
-    )
+  const [isEditingNotes, setIsEditingNotes] = useState(false)
+  const [notesText, setNotesText] = useState('')
+  const [notesInput, setNotesInput] = useState('')
+  const [cancelDialogOpen, setCancelDialogOpen] = useState(false)
+  const [cancelReason, setCancelReason] = useState('')
+  const [complaintDialogOpen, setComplaintDialogOpen] = useState(false)
+  const [complaintBody, setComplaintBody] = useState('')
+
+  // const order = orderData?.data
+
+  const updateNotesMutation = trpc.user.order.updateUserNotes.useMutation({
+    onSuccess: () => {
+      setNotesText(notesInput)
+      setIsEditingNotes(false)
+      refetch()
+    },
+  })
+
+  const cancelOrderMutation = trpc.user.order.cancelOrder.useMutation({
+    onSuccess: () => {
+      setCancelDialogOpen(false)
+      setCancelReason('')
+      refetch()
+    },
+  })
+
+  const raiseComplaintMutation = trpc.user.complaint.raise.useMutation({
+    onSuccess: () => {
+      setComplaintDialogOpen(false)
+      setComplaintBody('')
+      refetch()
+    },
+  })
+
+  useEffect(() => {
+    if (orderData?.userNotes) {
+      setNotesText(orderData.userNotes)
+      setNotesInput(orderData.userNotes)
+    }
+  }, [orderData])
+
+  const handleCancelOrder = () => {
+    if (!cancelReason.trim()) {
+      alert('Please enter a reason for cancellation')
+      return
+    }
+    cancelOrderMutation.mutate({ id: orderId, reason: cancelReason })
   }
 
-  if (!order) {
+  const handleRaiseComplaint = () => {
+    if (!complaintBody.trim()) {
+      alert('Please describe your complaint')
+      return
+    }
+    raiseComplaintMutation.mutate({ orderId: orderId+'', complaintBody: complaintBody.trim() })
+  }
+
+  if (isLoading) {
     return (
       <AppContainer>
-        <MyText>Loading...</MyText>
+        <div className="flex min-h-full flex-1 items-center justify-center bg-white">
+          <p className="font-medium text-slate-400">Loading details...</p>
+        </div>
       </AppContainer>
     )
   }
 
+  if (error || !orderData) {
+    return (
+      <AppContainer>
+        <div className="flex min-h-full flex-1 flex-col items-center justify-center bg-white p-8">
+          <AlertCircle className="mb-4 h-12 w-12 text-red-500" />
+          <p className="mt-4 text-lg font-bold text-slate-900">Failed to load</p>
+          <button
+            onClick={() => navigate({ to: '/me/orders' })}
+            className="mt-6 rounded-xl bg-slate-900 px-6 py-2 font-bold text-white"
+          >
+            Go Back
+          </button>
+        </div>
+      </AppContainer>
+    )
+  }
+
+  const getStatusConfig = (status: string) => {
+    const s = status.toLowerCase()
+    switch (s) {
+      case 'delivered':
+      case 'success':
+        return { label: 'Delivered', color: '#10B981', bgColor: 'bg-green-50', textColor: 'text-green-700' }
+      case 'cancelled':
+      case 'failed':
+        return { label: 'Cancelled', color: '#EF4444', bgColor: 'bg-red-50', textColor: 'text-red-700' }
+      case 'pending':
+      case 'processing':
+        return { label: 'Pending', color: '#F59E0B', bgColor: 'bg-yellow-50', textColor: 'text-yellow-700' }
+      default:
+        return { label: status, color: '#3B82F6', bgColor: 'bg-blue-50', textColor: 'text-blue-700' }
+    }
+  }
+
+  const orderAny = orderData as any
+  const subtotal = orderData.items?.reduce((sum: number, item: any) => sum + (item.amount || item.price * item.quantity), 0) || 0
+  const discountAmount = orderData.discountAmount || 0
+  const deliveryCharge = orderData.deliveryCharge || 0
+  const totalAmount = orderData.orderAmount || subtotal - discountAmount + deliveryCharge
+  const statusConfig = getStatusConfig(orderData.deliveryStatus || 'pending')
+
   return (
     <AppContainer>
-      <MyTouchableOpacity
-        onClick={() => navigate({ to: '/me/orders' })}
-        className="mb-4 flex items-center gap-2"
-      >
-        <ArrowLeft className="h-5 w-5" />
-        <MyText>Back to Orders</MyText>
-      </MyTouchableOpacity>
-
-      <div className="mb-4">
-        <MyText weight="bold" className="text-xl">
-          Order #{order.id}
-        </MyText>
-        <span
-          className={`mt-1 inline-block rounded-full px-3 py-1 text-xs font-medium ${
-            order.status === 'delivered'
-              ? 'bg-green-100 text-green-700'
-              : order.status === 'cancelled'
-                ? 'bg-red-100 text-red-700'
-                : 'bg-yellow-100 text-yellow-700'
-          }`}
-        >
-          {order.status}
-        </span>
-      </div>
-
-      {/* Items */}
-      <div className="mb-6">
-        <MyText weight="semibold" className="mb-2">
-          Items
-        </MyText>
-        {(order.items || []).map((item: any, i: number) => (
-          <div
-            key={i}
-            className="flex items-center justify-between border-b border-gray-100 py-2"
-          >
-            <MyText className="text-sm">
-              {item.product?.name || `Product #${item.productId}`} x{item.quantity}
-            </MyText>
-            <MyText className="text-sm font-bold">₹{item.price || 0}</MyText>
-          </div>
-        ))}
-        <div className="flex items-center justify-between pt-2">
-          <MyText weight="bold">Total</MyText>
-          <MyText weight="bold" className="text-brand-600">
-            ₹{order.totalAmount || 0}
-          </MyText>
-        </div>
-      </div>
-
-      {/* Address */}
-      {order.address && (
-        <div className="mb-6">
-          <MyText weight="semibold" className="mb-2">
-            Delivery Address
-          </MyText>
-          <div className="rounded-xl border border-gray-100 bg-gray-50 p-3">
-            <MyText weight="semibold">{order.address.name}</MyText>
-            <MyText className="text-sm text-gray-600">
-              {order.address.addressLine1}, {order.address.city}
-            </MyText>
-            <MyText className="text-sm text-gray-500">{order.address.phone}</MyText>
-          </div>
-        </div>
-      )}
-
-      {/* Cancel Button */}
-      {order.status !== 'cancelled' && order.status !== 'delivered' && (
-        <MyButton
-          variant="red"
-          fullWidth
-          textContent={
-            cancelMutation.isPending ? 'Cancelling...' : 'Cancel Order'
-          }
-          onClick={() => setShowCancelDialog(true)}
-          disabled={cancelMutation.isPending}
-        />
-      )}
-
-      {/* Cancel Confirmation Dialog */}
-      {showCancelDialog && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <div className="mx-4 w-full max-w-sm rounded-xl bg-white p-6">
-            <MyText weight="bold" className="mb-2 text-lg">
-              Cancel Order?
-            </MyText>
-            <MyText className="mb-6 text-sm text-gray-600">
-              Are you sure you want to cancel this order?
-            </MyText>
-            <div className="flex gap-3">
-              <MyButton
-                textContent="No, Keep It"
-                onClick={() => setShowCancelDialog(false)}
-                className="flex-1 bg-gray-100 text-gray-700"
-              />
-              <MyButton
-                variant="red"
-                textContent="Yes, Cancel"
-                onClick={handleCancel}
-                className="flex-1"
-                disabled={cancelMutation.isPending}
-              />
+      <div className="flex min-h-full flex-1 flex-col bg-slate-50">
+        {/* Header */}
+        <div className="flex flex-row items-center justify-between border-b border-slate-100 bg-white px-6 pb-4 pt-4">
+          <div className="flex flex-row items-center">
+            <button
+              onClick={() => navigate({ to: '/me/orders' })}
+              className="-ml-2 mr-3 p-2"
+            >
+              <ChevronLeft className="h-6 w-6 text-slate-800" />
+            </button>
+            <div>
+              <p className="text-lg font-bold text-slate-900">Order #{orderData.orderId || orderData.id}</p>
+              <p className="text-xs text-slate-400">
+                {dayjs(orderData.orderDate || orderData.createdAt).format('DD MMM, h:mm A')}
+              </p>
+              {orderData.isFlashDelivery && (
+                <p className="mt-1 text-xs font-bold text-amber-600">⚡ 1 Hr Delivery</p>
+              )}
             </div>
           </div>
+          <div className="flex flex-row items-center gap-2">
+            <div
+              className={`rounded-full px-3 py-1 ${statusConfig.bgColor}`}
+              style={{ backgroundColor: statusConfig.color + '10' }}
+            >
+              <p className="text-[10px] font-bold uppercase" style={{ color: statusConfig.color }}>
+                {statusConfig.label}
+              </p>
+            </div>
+            {orderData.isFlashDelivery && (
+              <div className="rounded-full border border-amber-200 bg-amber-100 px-2 py-1">
+                <p className="text-[10px] font-black uppercase text-amber-700">⚡</p>
+              </div>
+            )}
+          </div>
         </div>
-      )}
 
-      <LoadingDialog open={cancelMutation.isPending} message="Cancelling order..." />
+        <div className="flex-1 overflow-y-auto p-4 pb-12">
+          {/* 1 Hr Delivery Banner */}
+          {orderData.isFlashDelivery && (
+            <div className="mb-4 rounded-2xl border border-amber-200 bg-linear-to-r from-amber-50 to-yellow-50 p-4">
+              <div className="flex flex-row items-center">
+                <Zap className="h-6 w-6 text-amber-600" />
+                <div className="ml-3 flex-1">
+                  <p className="text-sm font-bold text-amber-900">1 Hr Delivery Order</p>
+                  <p className="mt-1 text-xs text-amber-700">
+                    Your order will be delivered within 1 hr of placement
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Main Info Card */}
+          <div className="mb-4 rounded-2xl border border-slate-100 bg-white p-5">
+            <div className="mb-4 flex flex-row items-center justify-between">
+              <div className="flex flex-row items-center">
+                <div className="mr-3 flex h-10 w-10 items-center justify-center rounded-full bg-slate-50">
+                  <CreditCard className="h-5 w-5 text-slate-500" />
+                </div>
+                <div>
+                  <p className="text-[10px] font-bold uppercase text-slate-400">Payment Method</p>
+                  <p className="font-bold text-slate-900">
+                    {orderData.paymentMode?.toUpperCase() === 'COD' ? 'Cash on Delivery' : orderData.paymentMode}
+                  </p>
+                </div>
+              </div>
+              <div className="items-end text-right">
+                <p className="text-[10px] font-bold uppercase text-slate-400">Status</p>
+                <p className="font-bold capitalize text-slate-900">{orderData.paymentStatus}</p>
+              </div>
+            </div>
+
+            {/* Delivery Date Info */}
+            {(orderData.deliveryDate || orderData.isFlashDelivery) &&
+              ['delivered', 'success'].includes((orderData.deliveryStatus || '').toLowerCase()) && (
+                <div className="flex flex-row items-center border-t border-slate-50 pt-4">
+                  {orderData.isFlashDelivery ? (
+                    <Zap className="h-4 w-4 text-amber-600" />
+                  ) : (
+                    <CheckCircle className="h-4 w-4 text-green-600" />
+                  )}
+                  <p className={`ml-2 text-xs font-medium ${orderData.isFlashDelivery ? 'text-amber-700' : 'text-slate-600'}`}>
+                    {orderData.isFlashDelivery
+                      ? `Flash Delivered on ${dayjs(orderData.createdAt || orderData.orderDate).add(30, 'minutes').format('DD MMM YYYY, h:mm A')}`
+                      : `Delivered on ${dayjs(orderData.deliveryDate).format('DD MMM YYYY, h:mm A')}`}
+                  </p>
+                </div>
+              )}
+
+            {/* Pending 1 Hr Delivery Info */}
+            {orderData.isFlashDelivery &&
+              !['delivered', 'success'].includes((orderData.deliveryStatus || '').toLowerCase()) && (
+                <div className="flex flex-row items-center border-t border-slate-50 pt-4">
+                  <Zap className="h-4 w-4 text-amber-600" />
+                  <p className="ml-2 text-xs font-medium text-amber-700">
+                    1 Hr Delivery: {dayjs(orderData.createdAt || orderData.orderDate).add(30, 'minutes').format('DD MMM YYYY, h:mm A')}
+                  </p>
+                </div>
+              )}
+          </div>
+
+          {/* Special Instructions */}
+          <div className="mb-4 rounded-2xl border border-slate-100 bg-white p-5">
+            <div className="mb-3 flex flex-row items-center justify-between">
+              <p className="text-[10px] font-bold uppercase text-slate-400">Special Instructions</p>
+              {isEditingNotes ? (
+                <div className="flex flex-row gap-2">
+                  <button
+                    onClick={() => {
+                      setIsEditingNotes(false)
+                      setNotesInput(notesText)
+                    }}
+                    className="rounded-lg bg-slate-100 px-3 py-1"
+                  >
+                    <p className="text-xs font-bold text-slate-600">Cancel</p>
+                  </button>
+                  <button
+                    onClick={() => {
+                      updateNotesMutation.mutate({ id: orderId, userNotes: notesInput })
+                    }}
+                    disabled={updateNotesMutation.isPending}
+                    className="rounded-lg bg-blue-500 px-3 py-1"
+                  >
+                    <p className="text-xs font-bold text-white">
+                      {updateNotesMutation.isPending ? 'Saving...' : 'Save'}
+                    </p>
+                  </button>
+                </div>
+              ) : (
+                <button
+                  onClick={() => {
+                    setNotesInput(notesText || '')
+                    setIsEditingNotes(true)
+                  }}
+                  className="flex flex-row items-center rounded-lg bg-slate-50 px-2 py-1"
+                >
+                  <Edit2 className="mr-1 h-3 w-3 text-slate-500" />
+                  <p className="text-xs font-medium text-slate-500">{notesText ? 'Edit' : 'Add'}</p>
+                </button>
+              )}
+            </div>
+            {isEditingNotes ? (
+              <textarea
+                className="min-h-20 rounded-xl border border-slate-200 bg-slate-50 p-3 text-sm text-slate-700"
+                value={notesInput}
+                onChange={(e) => setNotesInput(e.target.value)}
+                placeholder="Add special delivery instructions..."
+                rows={4}
+              />
+            ) : (
+              <p className="text-sm leading-5 text-slate-700">
+                {notesText || 'No instructions added'}
+              </p>
+            )}
+          </div>
+
+          {/* Cancellation Detail */}
+          {orderData.cancelReason && (
+            <div className="mb-4 rounded-2xl border border-rose-100 bg-rose-50 p-5">
+              <p className="mb-2 text-[10px] font-bold uppercase text-rose-700">Cancellation Reason</p>
+              <p className="text-sm font-medium text-rose-900">{orderData.cancelReason}</p>
+              {orderData.refundAmount && (
+                <div className="mt-3 flex flex-row items-center justify-between border-t border-rose-200/50 pt-3">
+                  <p className="text-xs text-rose-700">Refund Amount</p>
+                  <p className="text-base font-bold text-rose-900">₹{orderData.refundAmount}</p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Items Section */}
+          <div className="mb-2 px-1">
+            <p className="mb-3 text-base font-bold text-slate-900">Order Items</p>
+          </div>
+
+          {orderData.items?.map((item: any, index: number) => (
+            <div
+              key={index}
+              className="mb-3 flex flex-row items-center rounded-2xl border border-slate-100 bg-white p-3 shadow-sm"
+            >
+              <div className="mr-4 flex h-14 w-14 items-center justify-center rounded-xl border border-slate-100 bg-slate-50 p-1">
+                {item.image ? (
+                  <img
+                    src={item.image}
+                    alt=""
+                    className="h-full w-full rounded-lg object-cover"
+                  />
+                ) : (
+                  <Package className="h-6 w-6 text-slate-400" />
+                )}
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-bold text-slate-900">{item.productName || item.product?.name || `Product #${item.productId}`}</p>
+                <p className="mt-1 text-xs text-slate-400">
+                  {item.quantity} × ₹{item.price}
+                </p>
+              </div>
+              <p className="ml-2 text-base font-bold text-slate-900">₹{item.amount || item.price * item.quantity}</p>
+            </div>
+          ))}
+
+          {/* Coupon */}
+          {orderData.couponCode && (
+            <div className="mb-4 mt-2 flex flex-row items-center justify-between rounded-2xl border border-emerald-100 bg-emerald-50 p-4">
+              <div className="flex flex-row items-center">
+                <Tag className="h-5 w-5 text-emerald-600" />
+                <div className="ml-3">
+                  <p className="text-sm font-bold text-emerald-900">{orderData.couponCode}</p>
+                  <p className="text-[10px] text-emerald-600">Coupon Applied</p>
+                </div>
+              </div>
+              <p className="font-bold text-emerald-700">-₹{orderData.discountAmount}</p>
+            </div>
+          )}
+
+          {/* Summary Section */}
+          <div className="mb-6 rounded-2xl border border-slate-100 bg-white p-5">
+            <div className="mb-3 flex flex-row justify-between">
+              <p className="text-sm text-slate-500">Subtotal</p>
+              <p className="font-medium text-slate-900">₹{subtotal}</p>
+            </div>
+            {discountAmount > 0 && (
+              <div className="mb-3 flex flex-row justify-between">
+                <p className="text-sm text-emerald-600">Discount</p>
+                <p className="font-medium text-emerald-600">-₹{discountAmount}</p>
+              </div>
+            )}
+            <div className="mb-3 flex flex-row justify-between">
+              <p className="text-sm text-slate-500">Delivery</p>
+              <p className="font-medium text-slate-900">
+                {deliveryCharge > 0 ? `₹${deliveryCharge}` : 'Free'}
+              </p>
+            </div>
+            <div className="flex flex-row items-center justify-between border-t border-slate-50 pt-4">
+              <p className="text-base font-bold text-slate-900">Total Amount</p>
+              <p className="text-xl font-bold text-slate-900">₹{totalAmount}</p>
+            </div>
+          </div>
+
+          {/* Footer Actions */}
+          <div className="flex flex-row gap-3">
+            <button
+              onClick={() => navigate({ to: '/me' })}
+              className="flex-1 rounded-xl bg-slate-100 py-3.5 text-center font-bold text-slate-600"
+            >
+              Back
+            </button>
+            <button
+              onClick={() => setComplaintDialogOpen(true)}
+              className="flex-1 rounded-xl bg-blue-600 py-3.5 text-center font-bold text-white"
+            >
+              Raise Complaint
+            </button>
+          </div>
+
+          {/* Cancel Order Button */}
+          {!['success', 'delivered', 'cancelled'].includes((orderData.deliveryStatus || '').toLowerCase()) && (
+            <div className="mt-4">
+              <button
+                onClick={() => setCancelDialogOpen(true)}
+                className="flex w-full flex-row items-center justify-center rounded-xl border border-red-100 bg-red-50 py-3.5"
+              >
+                <XCircle className="mr-2 h-5 w-5 text-red-600" />
+                <p className="font-bold text-red-600">Cancel Order</p>
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Cancel Order Dialog */}
+        <Dialog open={cancelDialogOpen} onClose={() => setCancelDialogOpen(false)}>
+          <div className="p-6">
+            <div className="mb-4 flex flex-row items-center justify-between">
+              <p className="text-xl font-bold text-gray-900">Cancel Order</p>
+              <button onClick={() => setCancelDialogOpen(false)}>
+                <X className="h-6 w-6 text-gray-400" />
+              </button>
+            </div>
+
+            <div className="mb-4 rounded-xl border border-red-100 bg-red-50 p-4">
+              <p className="text-sm text-red-800">
+                Are you sure you want to cancel this order? This action cannot be undone.
+              </p>
+            </div>
+
+            <p className="mb-2 font-medium text-gray-700">Reason for cancellation</p>
+            <textarea
+              className="mb-6 min-h-24 w-full rounded-xl border border-gray-200 bg-gray-50 p-4 text-base text-gray-800"
+              value={cancelReason}
+              onChange={(e) => setCancelReason(e.target.value)}
+              placeholder="Please tell us why you are cancelling..."
+              rows={3}
+            />
+
+            <button
+              className={`w-full rounded-xl py-4 text-center font-bold text-white shadow-sm ${
+                cancelOrderMutation.isPending ? 'bg-red-400 opacity-70' : 'bg-red-600'
+              }`}
+              onClick={handleCancelOrder}
+              disabled={cancelOrderMutation.isPending}
+            >
+              {cancelOrderMutation.isPending ? 'Cancelling...' : 'Confirm Cancellation'}
+            </button>
+          </div>
+        </Dialog>
+
+        {/* Raise Complaint Dialog */}
+        <Dialog open={complaintDialogOpen} onClose={() => setComplaintDialogOpen(false)}>
+          <div className="p-6">
+            <div className="mb-4 flex flex-row items-center justify-between">
+              <p className="text-xl font-bold text-gray-900">Raise Complaint</p>
+              <button onClick={() => setComplaintDialogOpen(false)}>
+                <X className="h-6 w-6 text-gray-400" />
+              </button>
+            </div>
+
+            <div className="mb-4 rounded-xl border border-amber-100 bg-amber-50 p-4">
+              <p className="text-sm text-amber-800">
+                Please describe your issue with this order. Our support team will get back to you within 24 hours.
+              </p>
+            </div>
+
+            <p className="mb-2 font-medium text-gray-700">Complaint Details</p>
+            <textarea
+              className="mb-6 min-h-32 w-full rounded-xl border border-gray-200 bg-gray-50 p-4 text-base text-gray-800"
+              value={complaintBody}
+              onChange={(e) => setComplaintBody(e.target.value)}
+              placeholder="Describe your issue in detail..."
+              rows={4}
+            />
+
+            <button
+              className={`w-full rounded-xl py-4 text-center font-bold text-white shadow-sm ${
+                raiseComplaintMutation.isPending ? 'bg-blue-400 opacity-70' : 'bg-blue-600'
+              }`}
+              onClick={handleRaiseComplaint}
+              disabled={raiseComplaintMutation.isPending}
+            >
+              {raiseComplaintMutation.isPending ? 'Submitting...' : 'Submit Complaint'}
+            </button>
+          </div>
+        </Dialog>
+      </div>
     </AppContainer>
   )
-}
+}
\ No newline at end of file
diff --git a/apps/web-ui/src/routes/me.orders.tsx b/apps/web-ui/src/routes/me.orders.tsx
index 484d623..324e751 100644
--- a/apps/web-ui/src/routes/me.orders.tsx
+++ b/apps/web-ui/src/routes/me.orders.tsx
@@ -1,30 +1,30 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { trpc } from '../lib/trpc-client'
-import { MyText, AppContainer, MyTouchableOpacity } from 'web-components'
+import { p, AppContainer, div } from 'web-components'
 import { Package, ChevronRight } from 'lucide-react'
 
 export const Route = createFileRoute('/me/orders')({ component: OrdersPage })
 
 function OrdersPage() {
   const navigate = useNavigate()
-  const { data } = trpc.user.order.getOrders.useQuery({ page: 0, limit: 20 })
+  const { data } = trpc.user.order.getOrders.useQuery({ page: 1, limit: 20 })
   const orders = data?.data || []
 
   return (
     <AppContainer>
-      <MyText weight="bold" className="mb-4 text-xl">
+      <p className="font-bold mb-4 text-xl">
         My Orders
-      </MyText>
+      </p>
 
       {orders.length === 0 ? (
         <div className="flex flex-col items-center gap-4 py-20">
           <Package className="h-12 w-12 text-gray-300" />
-          <MyText className="text-gray-500">No orders yet</MyText>
+          <p className="text-gray-500">No orders yet</p>
         </div>
       ) : (
         <div className="flex flex-col gap-3">
           {orders.map((order: any) => (
-            <MyTouchableOpacity
+            <div
               key={order.id}
               onClick={() =>
                 navigate({ to: '/me/orders/$id', params: { id: String(order.id) } })
@@ -33,14 +33,14 @@ function OrdersPage() {
             >
               <div className="flex items-center justify-between">
                 <div>
-                  <MyText weight="semibold" className="text-sm">
+                  <p className="font-semibold text-sm">
                     Order #{order.id}
-                  </MyText>
-                  <MyText className="text-xs text-gray-500">
+                  </p>
+                  <p className="text-xs text-gray-500">
                     {order.createdAt
                       ? new Date(order.createdAt).toLocaleDateString()
                       : ''}
-                  </MyText>
+                  </p>
                 </div>
                 <div className="flex items-center gap-2">
                   <span
@@ -57,10 +57,10 @@ function OrdersPage() {
                   <ChevronRight className="h-4 w-4 text-gray-400" />
                 </div>
               </div>
-              <MyText className="mt-1 text-xs text-gray-400">
+              <p className="mt-1 text-xs text-gray-400">
                 Total: ₹{order.totalAmount || 0}
-              </MyText>
-            </MyTouchableOpacity>
+              </p>
+            </div>
           ))}
         </div>
       )}
diff --git a/apps/web-ui/src/routes/me.terms.tsx b/apps/web-ui/src/routes/me.terms.tsx
index 64887e7..dddb8bd 100644
--- a/apps/web-ui/src/routes/me.terms.tsx
+++ b/apps/web-ui/src/routes/me.terms.tsx
@@ -1,56 +1,56 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { MyText, AppContainer } from 'web-components'
+import { p, AppContainer } from 'web-components'
 
 export const Route = createFileRoute('/me/terms')({ component: TermsPage })
 
 function TermsPage() {
   return (
     <AppContainer>
-      <MyText weight="bold" className="mb-6 text-2xl">
+      <p className="font-bold mb-6 text-2xl">
         Terms & Conditions
-      </MyText>
+      </p>
 
       <div className="prose prose-sm max-w-none text-gray-600">
-        <MyText weight="semibold" className="mb-2 mt-4 text-gray-900">
+        <p className="font-semibold mb-2 mt-4 text-gray-900">
           1. Acceptance of Terms
-        </MyText>
-        <MyText className="mb-4">
+        </p>
+        <p className="mb-4">
           By using Freshyo, you agree to these terms. If you do not agree, please
           do not use our service.
-        </MyText>
+        </p>
 
-        <MyText weight="semibold" className="mb-2 mt-4 text-gray-900">
+        <p className="font-semibold mb-2 mt-4 text-gray-900">
           2. Orders and Payments
-        </MyText>
-        <MyText className="mb-4">
+        </p>
+        <p className="mb-4">
           All orders are subject to availability. We reserve the right to cancel
           any order. Payments are collected at the time of delivery (COD).
-        </MyText>
+        </p>
 
-        <MyText weight="semibold" className="mb-2 mt-4 text-gray-900">
+        <p className="font-semibold mb-2 mt-4 text-gray-900">
           3. Delivery Policy
-        </MyText>
-        <MyText className="mb-4">
+        </p>
+        <p className="mb-4">
           Delivery times are estimates. We strive to deliver within the promised
           time window but delays may occur due to unforeseen circumstances.
-        </MyText>
+        </p>
 
-        <MyText weight="semibold" className="mb-2 mt-4 text-gray-900">
+        <p className="font-semibold mb-2 mt-4 text-gray-900">
           4. Returns and Refunds
-        </MyText>
-        <MyText className="mb-4">
+        </p>
+        <p className="mb-4">
           If you are not satisfied with the quality of your order, please contact
           us within 24 hours of delivery. Refunds will be processed after quality
           assessment.
-        </MyText>
+        </p>
 
-        <MyText weight="semibold" className="mb-2 mt-4 text-gray-900">
+        <p className="font-semibold mb-2 mt-4 text-gray-900">
           5. Privacy
-        </MyText>
-        <MyText className="mb-4">
+        </p>
+        <p className="mb-4">
           We respect your privacy. Your personal information is used only for
           order processing and delivery purposes.
-        </MyText>
+        </p>
       </div>
     </AppContainer>
   )
diff --git a/apps/web-ui/src/routes/me.tsx b/apps/web-ui/src/routes/me.tsx
index 2c65290..d1c8132 100644
--- a/apps/web-ui/src/routes/me.tsx
+++ b/apps/web-ui/src/routes/me.tsx
@@ -1,6 +1,7 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { createFileRoute, useNavigate, Outlet, useLocation } from '@tanstack/react-router'
 import { useAuth } from '../lib/auth-context'
-import { MyText, MyButton, AppContainer, ProfileImage, MyTouchableOpacity } from 'web-components'
+import { p, MyButton, ProfileImage } from 'web-components'
+import { AppLayout } from '../components/AppLayout'
 import {
   Package,
   MapPin,
@@ -17,19 +18,23 @@ export const Route = createFileRoute('/me')({ component: MePage })
 
 function MePage() {
   const navigate = useNavigate()
+  const location = useLocation()
   const { user, logout } = useAuth()
 
+  // Check if we're on the exact /me path (not a child route like /me/orders)
+  const isExactMePath = location.pathname === '/me'
+
   if (!user) {
     return (
-      <AppContainer>
-        <div className="flex flex-col items-center gap-4 py-20">
-          <MyText>Please sign in</MyText>
-          <MyButton
-            textContent="Sign In"
-            onClick={() => navigate({ to: '/login' })}
-          />
-        </div>
-      </AppContainer>
+      <AppLayout>
+      <div className="flex flex-col items-center gap-4 py-20">
+        <p>Please sign in</p>
+        <MyButton
+          textContent="Sign In"
+          onClick={() => navigate({ to: '/login' })}
+        />
+      </div>
+      </AppLayout>
     )
   }
 
@@ -65,51 +70,58 @@ function MePage() {
   ]
 
   return (
-    <AppContainer>
-      {/* Profile Header */}
-      <div className="mb-6 flex items-center gap-4 rounded-xl bg-brand-50 p-4">
-        <ProfileImage uri={user.profileImage} size={64} />
-        <div>
-          <MyText weight="bold" className="text-lg">
-            {user.name || 'User'}
-          </MyText>
-          <MyText className="text-sm text-gray-500">{user.mobile}</MyText>
-        </div>
-      </div>
-
-      {/* Menu */}
-      {menuItems.map((section) => (
-        <div key={section.section} className="mb-6">
-          <MyText weight="semibold" className="mb-2 text-sm text-gray-500 uppercase tracking-wide">
-            {section.section}
-          </MyText>
-          <div className="rounded-xl border border-gray-100 bg-white shadow-sm">
-            {section.items.map((item) => (
-              <MyTouchableOpacity
-                key={item.label}
-                onClick={() => navigate({ to: item.to as any })}
-                className="flex w-full items-center gap-3 border-b border-gray-50 px-4 py-3.5 last:border-b-0"
-              >
-                <item.icon className="h-5 w-5 text-gray-400" />
-                <MyText className="flex-1 text-left text-sm">{item.label}</MyText>
-              </MyTouchableOpacity>
-            ))}
+    <AppLayout>
+      {isExactMePath ? (
+        <div className="p-4">
+          {/* Profile Header */}
+          <div className="mb-6 flex items-center gap-4 rounded-xl bg-brand-50 p-4">
+            <ProfileImage uri={user.profileImage} size={64} />
+            <div>
+              <p className="text-lg font-bold">
+                {user.name || 'User'}
+              </p>
+              <p className="text-sm text-gray-500">{user.mobile}</p>
+            </div>
           </div>
+
+          {/* Menu */}
+          {menuItems.map((section) => (
+            <div key={section.section} className="mb-6">
+              <p className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-500">
+                {section.section}
+              </p>
+              <div className="rounded-xl border border-gray-100 bg-white shadow-sm">
+                {section.items.map((item) => (
+                  <div
+                    key={item.label}
+                    onClick={() => navigate({ to: item.to as any })}
+                    className="flex w-full items-center gap-3 border-b border-gray-50 px-4 py-3.5 last:border-b-0"
+                  >
+                    <item.icon className="h-5 w-5 text-gray-400" />
+                    <p className="flex-1 text-left text-sm">{item.label}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+
+          {/* Logout */}
+          <MyButton
+            fullWidth
+            onClick={logout}
+            variant="red"
+            className="mb-8"
+            textContent="Logout"
+          />
+
+          <p className="mb-8 text-center text-xs text-gray-400">
+            Version 1.0.0
+          </p>
         </div>
-      ))}
-
-      {/* Logout */}
-      <MyButton
-        fullWidth
-        onClick={logout}
-        variant="red"
-        className="mb-8"
-        textContent="Logout"
-      />
-
-      <MyText className="mb-8 text-center text-xs text-gray-400">
-        Version 1.0.0
-      </MyText>
-    </AppContainer>
+      ) : (
+        /* Render child routes when not on exact /me path */
+        <Outlet />
+      )}
+    </AppLayout>
   )
 }
diff --git a/apps/web-ui/src/routes/register.tsx b/apps/web-ui/src/routes/register.tsx
index bcf487b..5cea19f 100644
--- a/apps/web-ui/src/routes/register.tsx
+++ b/apps/web-ui/src/routes/register.tsx
@@ -2,7 +2,7 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useState } from 'react'
 import { useAuth } from '../lib/auth-context'
 import { trpc } from '../lib/trpc-client'
-import { MyText, MyButton, MyTextInput, MyTextButton } from 'web-components'
+import { p, MyButton, pInput, pButton } from 'web-components'
 
 export const Route = createFileRoute('/register')({ component: RegisterPage })
 
@@ -31,28 +31,28 @@ function RegisterPage() {
   return (
     <div className="flex min-h-screen items-center justify-center bg-gradient-to-b from-brand-400 to-brand-700 p-4">
       <div className="w-full max-w-md">
-        <MyText weight="bold" className="mb-2 text-center text-4xl text-white">
+        <p className="font-bold mb-2 text-center text-4xl text-white">
           Create Account
-        </MyText>
-        <MyText className="mb-8 text-center text-lg text-blue-100">
+        </p>
+        <p className="mb-8 text-center text-lg text-blue-100">
           Join Freshyo today
-        </MyText>
+        </p>
 
         <div className="rounded-2xl bg-white p-8 shadow-xl">
           <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-            <MyTextInput
+            <pInput
               placeholder="Full Name"
               value={name}
               onChange={(e) => setName(e.target.value)}
               required
             />
-            <MyTextInput
+            <pInput
               placeholder="Email"
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
             />
-            <MyTextInput
+            <pInput
               placeholder="Mobile Number"
               value={mobile}
               onChange={(e) => {
@@ -61,7 +61,7 @@ function RegisterPage() {
               }}
               required
             />
-            <MyTextInput
+            <pInput
               placeholder="Password"
               type="password"
               value={password}
diff --git a/apps/web-ui/src/routes/slot-view.tsx b/apps/web-ui/src/routes/slot-view.tsx
new file mode 100644
index 0000000..5333f33
--- /dev/null
+++ b/apps/web-ui/src/routes/slot-view.tsx
@@ -0,0 +1,465 @@
+import {
+  createFileRoute,
+  useNavigate,
+  useSearch,
+} from "@tanstack/react-router";
+import { useState, useMemo, useEffect } from "react";
+import dayjs from "dayjs";
+import {
+  p,
+  div,
+  Quantifier,
+  MiniQuantifier,
+} from "web-components";
+import {
+  useSlots,
+  useAllProducts,
+  useStores,
+} from "../hooks/prominent-api-hooks";
+import { useCentralProductStore } from "../lib/stores/central-product-store";
+import { useCentralSlotStore } from "../lib/stores/central-slot-store";
+import {
+  useAddToCart,
+  useGetCart,
+  useUpdateCartItem,
+  useRemoveFromCart,
+} from "../hooks/cart-query-hooks";
+import { usePopulateCentralProductStore } from "../hooks/usePopulateCentralProductStore";
+import { AppLayout } from "../components/AppLayout";
+import { Truck, Store, Grid3X3, ChevronLeft, ShoppingCart } from "lucide-react";
+
+export const Route = createFileRoute("/slot-view")({
+  component: SlotViewPage,
+});
+
+function SlotViewPage() {
+  const search = useSearch({ from: "/slot-view" }) as {
+    slotId?: string;
+    storeId?: string;
+  };
+  const slotId = search.slotId ? Number(search.slotId) : undefined;
+  const storeId = search.storeId ? Number(search.storeId) : undefined;
+
+  const navigate = useNavigate();
+  const { data: slotsData } = useSlots();
+  const { productsById } = useCentralProductStore();
+  const productSlotsMap = useCentralSlotStore((state) => state.productSlotsMap);
+  const { data: storesData } = useStores();
+
+  // Populate central product store with products data
+  usePopulateCentralProductStore();
+
+  const stores = storesData?.stores || [];
+
+  // Find the specific slot from cached data
+  const slot = slotsData?.slots?.find((s: any) => s.id === slotId);
+
+  const addToCart = useAddToCart("regular");
+  const { data: cartData } = useGetCart("regular");
+
+  const formatTimeRange = (deliveryTime: string) => {
+    const time = dayjs(deliveryTime);
+    const endTime = time.add(1, "hour");
+    const startPeriod = time.format("A");
+    const endPeriod = endTime.format("A");
+
+    if (startPeriod === endPeriod) {
+      return `${time.format("h")}-${endTime.format("h")} ${startPeriod}`;
+    } else {
+      return `${time.format("h:mm")} ${startPeriod} - ${endTime.format("h:mm")} ${endPeriod}`;
+    }
+  };
+
+  const handleAddToCart = (productId: number) => {
+    const item = filteredProducts.find((p) => p.id === productId);
+    const deliveryTime = slot?.deliveryTime
+      ? dayjs(slot.deliveryTime).format("ddd, DD MMM • h:mm A")
+      : "";
+    addToCart.mutate(
+      { productId, quantity: 1, slotId: slotId || 0, storeId: item?.storeId },
+      {
+        onSuccess: () => {
+          alert(
+            `Added ${item?.name || "item"} for delivery at ${deliveryTime}`,
+          );
+        },
+      },
+    );
+  };
+
+  // Get product details from central store using slot product IDs
+  const slotProducts =
+    slot?.products
+      ?.map((p: any) => productsById[p.id])
+      ?.filter(
+        (product: any): product is NonNullable<typeof product> =>
+          product !== null && product !== undefined,
+      )
+      ?.filter((product: any) => !productSlotsMap[product.id]?.isOutOfStock) ||
+    [];
+
+  const filteredProducts = storeId
+    ? slotProducts.filter((p: any) => p.storeId === storeId)
+    : slotProducts;
+
+  if (!slot) {
+    return (
+      <AppLayout>
+        <div className="flex min-h-screen flex-col items-center justify-center">
+          <p className="font-bold mb-4 text-2xl text-gray-900">
+            Slot View
+          </p>
+          <p className="text-gray-600">No delivery slot available.</p>
+        </div>
+      </AppLayout>
+    );
+  }
+
+  return (
+    <AppLayout>
+      <div className="min-h-screen bg-gray-50">
+        {/* Header */}
+        <div className="sticky top-0 z-10 border-b border-gray-200 bg-white px-4 py-3">
+          <div className="flex items-center gap-3">
+            <div
+              onClick={() => navigate({ to: "/home" })}
+              className="p-2"
+            >
+              <ChevronLeft className="h-6 w-6 text-gray-700" />
+            </div>
+            <div>
+              <p className="font-bold text-lg text-gray-900">
+                {dayjs(slot.deliveryTime).format("ddd, DD MMM")}
+              </p>
+              <p className="text-sm text-brand-600">
+                {formatTimeRange(slot.deliveryTime as any)}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex md:flex-row">
+          <div className="w-24 sticky">
+            {/* <div className=""> */}
+              <StoreSidebar
+                stores={stores}
+                slotId={slotId}
+                storeId={storeId}
+                onStoreSelect={(newStoreId) =>
+                  navigate({
+                    to: "/slot-view",
+                    search: { slotId, storeId: newStoreId },
+                  })
+                }
+                onAllSelect={() =>
+                  navigate({ to: "/slot-view", search: { slotId } })
+                }
+              />
+            {/* </div> */}
+          </div>
+
+          {/* Products Grid */}
+          <div className="flex-1 p-4">
+            <div className="mb-4 flex items-center justify-between">
+              <p className="font-bold text-xl text-gray-900">
+                {storeId
+                  ? stores.find((s: any) => s.id === storeId)?.name ||
+                    "Store Products"
+                  : "All Products"}
+              </p>
+              <p className="text-sm text-gray-500">
+                {filteredProducts.length} items
+              </p>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              {filteredProducts.map((product: any) => (
+                <CompactProductCard
+                  key={product.id}
+                  item={product}
+                  handleAddToCart={handleAddToCart}
+                  onPress={() =>
+                    navigate({
+                      to: "/home/product/$id",
+                      params: { id: String(product.id) },
+                    })
+                  }
+                />
+              ))}
+            </div>
+
+            {filteredProducts.length === 0 && (
+              <div className="py-10 text-center">
+                <p className="font-medium text-gray-400">
+                  {storeId
+                    ? "No products from this store in this slot."
+                    : "No products available for this slot."}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </AppLayout>
+  );
+}
+
+const formatQuantity = (
+  quantity: number,
+  unit: string,
+): { value: string; display: string } => {
+  if (unit?.toLowerCase() === "kg" && quantity < 1) {
+    return {
+      value: `${Math.round(quantity * 1000)} g`,
+      display: `${Math.round(quantity * 1000)}g`,
+    };
+  }
+  return { value: `${quantity} ${unit}(s)`, display: `${quantity}${unit}` };
+};
+
+interface StoreSidebarProps {
+  stores: any[];
+  slotId?: number;
+  storeId?: number;
+  onStoreSelect: (storeId: number) => void;
+  onAllSelect: () => void;
+}
+
+function StoreSidebar({
+  stores,
+  slotId,
+  storeId,
+  onStoreSelect,
+  onAllSelect,
+}: StoreSidebarProps) {
+  return (
+    <div className="w-full border-b border-gray-200 bg-white p-4 md:w-24 md:border-b-0 md:border-r">
+      <div className="flex gap-3 overflow-x-auto md:flex-col md:gap-3">
+        {/* All Products Item */}
+        <div
+          onClick={onAllSelect}
+          className={`flex flex-col items-center rounded-2xl p-3 ${
+            !storeId
+              ? "bg-gradient-to-br from-brand-400 to-brand-600 text-white shadow-lg"
+              : "border border-gray-100 bg-white text-gray-500"
+          }`}
+        >
+          <div
+            className={`mb-1 flex h-10 w-10 items-center justify-center rounded-full border ${
+              !storeId ? "border-white/30 bg-white/20" : "bg-gray-50"
+            }`}
+          >
+            <Grid3X3
+              className={`h-5 w-5 ${!storeId ? "text-white" : "text-gray-500"}`}
+            />
+          </div>
+          <p
+            className={`text-center text-[10px] font-bold ${!storeId ? "text-white" : "text-gray-500"}`}
+          >
+            ALL
+          </p>
+        </div>
+
+        <div className="hidden h-px bg-gray-200 md:my-1 md:block" />
+
+        {/* Store Items */}
+        {stores.map((store: any) => {
+          const isActive = storeId === store.id;
+
+          return (
+            <div
+              key={store.id}
+              onClick={() => onStoreSelect(store.id)}
+              className={`flex flex-col items-center rounded-2xl p-2 ${
+                isActive
+                  ? "bg-gradient-to-br from-brand-400 to-brand-600 text-white shadow-lg"
+                  : "border border-gray-100 bg-white text-gray-500"
+              }`}
+            >
+              <div
+                className={`mb-2 flex h-12 w-12 items-center justify-center overflow-hidden rounded-full border-2 ${
+                  isActive
+                    ? "border-white bg-white"
+                    : "border-gray-100 bg-gray-50"
+                }`}
+              >
+                {store.signedImageUrl ? (
+                  <img
+                    src={store.signedImageUrl}
+                    alt={store.name}
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <Store
+                    className={`h-6 w-6 ${isActive ? "text-brand-500" : "text-gray-400"}`}
+                  />
+                )}
+              </div>
+              <p
+                className={`w-full text-center text-[10px] leading-tight ${
+                  isActive
+                    ? "font-bold text-white"
+                    : "font-medium text-gray-500"
+                }`}
+              >
+                {store.name.replace(/^The\s+/i, "")}
+              </p>
+            </div>
+          );
+        })}
+
+        {stores.map((store: any) => {
+          const isActive = storeId === store.id;
+
+          return (
+            <div
+              key={store.id}
+              onClick={() => onStoreSelect(store.id)}
+              className={`flex flex-col items-center rounded-2xl p-2 ${
+                isActive
+                  ? "bg-gradient-to-br from-brand-400 to-brand-600 text-white shadow-lg"
+                  : "border border-gray-100 bg-white text-gray-500"
+              }`}
+            >
+              <div
+                className={`mb-2 flex h-12 w-12 items-center justify-center overflow-hidden rounded-full border-2 ${
+                  isActive
+                    ? "border-white bg-white"
+                    : "border-gray-100 bg-gray-50"
+                }`}
+              >
+                {store.signedImageUrl ? (
+                  <img
+                    src={store.signedImageUrl}
+                    alt={store.name}
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <Store
+                    className={`h-6 w-6 ${isActive ? "text-brand-500" : "text-gray-400"}`}
+                  />
+                )}
+              </div>
+              <p
+                className={`w-full text-center text-[10px] leading-tight ${
+                  isActive
+                    ? "font-bold text-white"
+                    : "font-medium text-gray-500"
+                }`}
+              >
+                {store.name.replace(/^The\s+/i, "")}
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+interface CompactProductCardProps {
+  item: any;
+  handleAddToCart: (productId: number) => void;
+  onPress?: () => void;
+}
+
+function CompactProductCard({
+  item,
+  handleAddToCart,
+  onPress,
+}: CompactProductCardProps) {
+  const { data: cartData } = useGetCart("regular");
+  const productSlotsMap = useCentralSlotStore((state) => state.productSlotsMap);
+  const updateCartItem = useUpdateCartItem("regular");
+  const removeFromCart = useRemoveFromCart("regular");
+
+  const cartItem = cartData?.items?.find(
+    (cartItem: any) => cartItem.productId === item.id,
+  );
+  const quantity = cartItem?.quantity || 0;
+  const isOutOfStock = productSlotsMap[item.id]?.isOutOfStock;
+
+  const handleQuantityChange = (newQuantity: number) => {
+    if (newQuantity === 0 && cartItem) {
+      removeFromCart.mutate(cartItem.id);
+    } else if (newQuantity === 1 && !cartItem) {
+      handleAddToCart(item.id);
+    } else if (cartItem) {
+      updateCartItem.mutate({ productId: cartItem.id, quantity: newQuantity });
+    }
+  };
+
+  return (
+    <div
+      onClick={onPress}
+      className="mb-2 overflow-hidden rounded-lg border border-gray-100 bg-white shadow-sm"
+    >
+      <div className="relative">
+        <img
+          src={item.images?.[0]}
+          alt={item.name}
+          className="aspect-square w-full object-cover"
+        />
+        {isOutOfStock && (
+          <div className="absolute inset-0 flex items-center justify-center bg-black/30">
+            <p className="text-xs font-bold text-white">
+              Out of Stock
+            </p>
+          </div>
+        )}
+        <div className="absolute bottom-2 right-2">
+          {quantity > 0 ? (
+            <MiniQuantifier
+              value={quantity}
+              setValue={handleQuantityChange}
+              step={item.incrementStep}
+            />
+          ) : (
+            <div
+              className="flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleQuantityChange(1);
+              }}
+            >
+              <ShoppingCart className="h-4 w-4 text-brand-500" />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="p-2">
+        <p
+          className="font-medium mb-1 text-xs text-gray-900"
+        >
+          {item.name}
+        </p>
+
+        <div className="flex items-center justify-between">
+          <div className="flex flex-wrap items-baseline">
+            <p className="font-bold text-sm text-brand-500">
+              ₹{item.price}
+            </p>
+            {item.marketPrice &&
+              Number(item.marketPrice) > Number(item.price) && (
+                <p className="ml-1 text-xs text-gray-400 line-through">
+                  ₹{item.marketPrice}
+                </p>
+              )}
+            <p className="ml-1 text-xs text-gray-600">
+              Qty:{" "}
+              <span className="font-semibold text-brand-500">
+                {
+                  formatQuantity(
+                    item.productQuantity || 1,
+                    item.unit || item.unitNotation,
+                  ).display
+                }
+              </span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web-ui/src/routes/stores.$storeId.product.$productId.tsx b/apps/web-ui/src/routes/stores.$storeId.product.$productId.tsx
index 11a13d5..ff3a4f7 100644
--- a/apps/web-ui/src/routes/stores.$storeId.product.$productId.tsx
+++ b/apps/web-ui/src/routes/stores.$storeId.product.$productId.tsx
@@ -2,7 +2,7 @@ import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useCentralProductStore } from '../lib/stores/central-product-store'
 import { useAddToCart } from '../hooks/cart-query-hooks'
 import { useState } from 'react'
-import { MyText, MyButton, Quantifier, AppContainer, MyTouchableOpacity } from 'web-components'
+import { p, MyButton, Quantifier, AppContainer, div } from 'web-components'
 import { ShoppingCart, ArrowLeft } from 'lucide-react'
 
 export const Route = createFileRoute('/stores/$storeId/product/$productId')({
@@ -30,7 +30,7 @@ function StoreProductDetailPage() {
   if (!product) {
     return (
       <AppContainer>
-        <MyText>Product not found</MyText>
+        <p>Product not found</p>
       </AppContainer>
     )
   }
@@ -40,12 +40,12 @@ function StoreProductDetailPage() {
 
   return (
     <AppContainer>
-      <MyTouchableOpacity
+      <div
         onClick={() => navigate({ to: '/stores/$storeId', params: { storeId } })}
         className="mb-4 flex items-center gap-2"
       >
         <ArrowLeft className="h-5 w-5" />
-      </MyTouchableOpacity>
+      </div>
 
       {imageUrl && (
         <div className="mb-4 aspect-square w-full overflow-hidden rounded-xl bg-gray-100">
@@ -57,26 +57,26 @@ function StoreProductDetailPage() {
         </div>
       )}
 
-      <MyText weight="bold" className="mb-1 text-xl">
+      <p className="font-bold mb-1 text-xl">
         {product.name}
-      </MyText>
-      <MyText className="mb-2 text-sm text-gray-500">
+      </p>
+      <p className="mb-2 text-sm text-gray-500">
         {product.unitValue}{product.unit}
-      </MyText>
+      </p>
 
       <div className="mb-4 flex items-baseline gap-2">
-        <MyText weight="bold" className="text-2xl text-brand-600">
+        <p className="font-bold text-2xl text-brand-600">
           ₹{price}
-        </MyText>
+        </p>
         {product.discountedPrice && (
-          <MyText className="text-sm text-gray-400 line-through">
+          <p className="text-sm text-gray-400 line-through">
             ₹{product.price}
-          </MyText>
+          </p>
         )}
       </div>
 
       {product.description && (
-        <MyText className="mb-4 text-gray-600">{product.description}</MyText>
+        <p className="mb-4 text-gray-600">{product.description}</p>
       )}
 
       <div className="mb-6">
diff --git a/apps/web-ui/src/routes/stores.$storeId.tsx b/apps/web-ui/src/routes/stores.$storeId.tsx
index 12cd6c3..b0fb9a3 100644
--- a/apps/web-ui/src/routes/stores.$storeId.tsx
+++ b/apps/web-ui/src/routes/stores.$storeId.tsx
@@ -1,95 +1,207 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import { useStoreWithProducts } from '../hooks/prominent-api-hooks'
+import { createFileRoute, useNavigate, useParams } from '@tanstack/react-router'
+import { useStoreWithProducts, useAllProducts } from '../hooks/prominent-api-hooks'
 import { useState, useMemo } from 'react'
-import { MyText, AppContainer, MyTouchableOpacity } from 'web-components'
-import { ArrowLeft } from 'lucide-react'
+import { p } from 'web-components'
+import { AppLayout } from '../components/AppLayout'
+import { ProductCard } from '../components/ProductCard'
+import { usePopulateCentralStores } from '../hooks/usePopulateCentralStores'
+import { ArrowLeft, Store, X, Grid3X3 } from 'lucide-react'
 
 export const Route = createFileRoute('/stores/$storeId')({
   component: StoreDetailPage,
 })
 
+interface Tag {
+  id: number
+  tagName: string
+  productIds?: number[]
+}
+
 function StoreDetailPage() {
-  const { storeId } = Route.useParams()
+  const { storeId } = useParams({ from: '/stores/$storeId' })
   const navigate = useNavigate()
-  const { data } = useStoreWithProducts(Number(storeId))
-  const [selectedTag, setSelectedTag] = useState<string | null>(null)
+  const storeIdNum = Number(storeId)
+  const [selectedTagId, setSelectedTagId] = useState<number | null>(null)
 
-  const store = data?.store
-  const products = data?.products || []
+  // Populate central stores with slots and product data for out-of-stock checking
+  usePopulateCentralStores()
 
-  const tags = useMemo(() => {
-    const tagSet = new Set<string>()
-    products.forEach((p: any) => {
-      const tag = p.category || 'All'
-      tagSet.add(tag)
+  const { data: storeData, isLoading, error, refetch } = useStoreWithProducts(storeIdNum)
+  const { data: productsData, isLoading: isProductsLoading } = useAllProducts()
+
+  const productById = useMemo(() => {
+    const map = new Map<number, any>()
+    productsData?.products?.forEach((product) => {
+      map.set(product.id, product)
     })
-    return ['All', ...Array.from(tagSet)]
-  }, [products])
+    return map
+  }, [productsData])
 
-  const filteredProducts = useMemo(() => {
-    if (!selectedTag || selectedTag === 'All') return products
-    return products.filter((p: any) => (p.category || 'All') === selectedTag)
-  }, [products, selectedTag])
+  const storeProducts = useMemo(() => {
+    if (!storeData?.products) return []
+    return storeData.products
+      .map((product: any) => productById.get(product.id))
+      .filter(Boolean)
+  }, [storeData, productById])
+
+  // Filter products based on selected tag
+  const filteredProducts = selectedTagId
+    ? storeProducts.filter((product: any) => {
+        const selectedTag = storeData?.tags.find((t: Tag) => t.id === selectedTagId)
+        return selectedTag?.productIds?.includes(product.id) ?? false
+      })
+    : storeProducts
+
+  const isMeatStore = storeData?.store?.name?.toLowerCase().includes('meat')
+
+  if (isLoading || isProductsLoading) {
+    return (
+      <AppLayout>
+        <div className="flex min-h-screen items-center justify-center bg-gray-50">
+          <p className="font-medium text-gray-500">
+            {isLoading ? 'Loading store...' : 'Loading products...'}
+          </p>
+        </div>
+      </AppLayout>
+    )
+  }
+
+  if (error || !storeData) {
+    return (
+      <AppLayout>
+        <div className="flex min-h-screen flex-col items-center justify-center bg-gray-50">
+          <svg className="mb-4 h-12 w-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <p className="font-bold mb-2 text-lg text-gray-900">
+            Oops!
+          </p>
+          <p className="text-gray-500">Store not found or error loading</p>
+        </div>
+      </AppLayout>
+    )
+  }
 
   return (
-    <AppContainer>
-      <div className="mb-4 flex items-center gap-3">
-        <MyTouchableOpacity onClick={() => navigate({ to: '/stores' })}>
-          <ArrowLeft className="h-5 w-5" />
-        </MyTouchableOpacity>
-        <MyText weight="bold" className="text-xl">
-          {store?.name || 'Store'}
-        </MyText>
-      </div>
-
-      {/* Tag Filter */}
-      <div className="mb-4 flex gap-2 overflow-x-auto pb-2">
-        {tags.map((tag) => (
-          <button
-            key={tag}
-            onClick={() => setSelectedTag(tag === 'All' ? null : tag)}
-            className={`whitespace-nowrap rounded-full px-4 py-1.5 text-sm ${
-              (tag === 'All' && !selectedTag) || selectedTag === tag
-                ? 'bg-brand-500 text-white'
-                : 'bg-gray-100 text-gray-600'
-            }`}
-          >
-            {tag}
-          </button>
-        ))}
-      </div>
-
-      {/* Products */}
-      <div className="grid grid-cols-2 gap-3">
-        {filteredProducts.map((product: any) => (
-          <MyTouchableOpacity
-            key={product.id}
-            onClick={() =>
-              navigate({
-                to: '/stores/$storeId/product/$productId',
-                params: { storeId, productId: String(product.id) },
-              })
-            }
-            className="rounded-xl border border-gray-100 bg-white p-3 shadow-sm"
-          >
-            <div className="mb-2 aspect-square w-full overflow-hidden rounded-lg bg-gray-100">
-              {product.images?.[0] && (
-                <img
-                  src={product.images[0].uri}
-                  alt={product.name}
-                  className="h-full w-full object-cover"
-                />
-              )}
+    <AppLayout>
+      <div className="min-h-screen bg-gray-50 pb-24">
+        {/* Back Button */}
+        <div className="sticky top-0 z-10 border-b border-gray-200 bg-white px-4 py-3">
+          <div className="flex items-center gap-3">
+            <div onClick={() => navigate({ to: '/stores' })} className="p-2">
+              <ArrowLeft className="h-5 w-5 text-gray-700" />
             </div>
-            <MyText weight="semibold" className="text-sm" numberOfLines={2}>
-              {product.name}
-            </MyText>
-            <MyText weight="bold" className="mt-1 text-brand-600">
-              ₹{product.discountedPrice ?? product.price}
-            </MyText>
-          </MyTouchableOpacity>
-        ))}
+            <p className="font-bold text-lg text-gray-900">
+              {storeData?.store?.name || 'Store'}
+            </p>
+          </div>
+        </div>
+
+        <div className="px-4 pt-4">
+
+          {/* Store Info Card */}
+          <div className="flex items-center gap-2 mb-6 rounded-2xl border border-gray-100 bg-white p-6 text-center shadow-sm">
+            <div className="mb-4 flex h-16 w-16 items-center justify-center self-center rounded-full bg-pink-50">
+              <Store className="h-7 w-7 text-brand-500" />
+            </div>
+            <p className="font-bold mb-2 text-center text-2xl text-gray-900">
+              {storeData?.store?.name}
+            </p>
+            {storeData?.store?.description && (
+              <p className="px-4 text-center leading-5 text-gray-500">
+                {storeData?.store?.description}
+              </p>
+            )}
+          </div>
+
+          {/* Tags Section */}
+          {storeData?.tags && storeData.tags.length > 0 && (
+            <div className="mb-6 flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
+              {storeData.tags.map((tag: Tag) => (
+                <TagChip
+                  key={tag.id}
+                  tag={tag}
+                  isSelected={selectedTagId === tag.id}
+                  onPress={() => setSelectedTagId(selectedTagId === tag.id ? null : tag.id)}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Products Count & Clear Filter */}
+          <div className="mb-4 flex items-center justify-between">
+            <div className="flex items-center">
+              <Grid3X3 className="mr-2 h-5 w-5 text-gray-700" />
+              <p className="font-bold text-lg text-gray-900">
+                {selectedTagId
+                  ? `${storeData?.tags.find((t: Tag) => t.id === selectedTagId)?.tagName} items`
+                  : `${filteredProducts.length} products`}
+              </p>
+            </div>
+            {selectedTagId && (
+              <div
+                onClick={() => setSelectedTagId(null)}
+                className="flex items-center"
+              >
+                <p className="mr-1 text-sm font-medium text-brand-500">Clear</p>
+                <X className="h-4 w-4 text-brand-500" />
+              </div>
+            )}
+          </div>
+
+          {/* Products Grid */}
+          <div className="grid gap-4 sm:grid-cols-2" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))' }}>
+            {filteredProducts.map((product: any) => (
+              <ProductCard
+                key={product.id}
+                item={product}
+                onPress={() =>
+                  navigate({
+                    to: '/stores/$storeId/product/$productId',
+                    params: { storeId, productId: String(product.id) },
+                  })
+                }
+                showDeliveryInfo={false}
+                miniView={true}
+                useAddToCartDialog={true}
+              />
+            ))}
+          </div>
+
+          {filteredProducts.length === 0 && (
+            <div className="py-10 text-center">
+              <p className="font-medium text-gray-400">
+                {selectedTagId ? 'No products in this category' : 'No products available'}
+              </p>
+            </div>
+          )}
+        </div>
       </div>
-    </AppContainer>
+    </AppLayout>
+  )
+}
+
+interface TagChipProps {
+  tag: Tag
+  isSelected: boolean
+  onPress: () => void
+}
+
+function TagChip({ tag, isSelected, onPress }: TagChipProps) {
+  const productCount = tag.productIds?.length || 0
+
+  return (
+    <button
+      onClick={onPress}
+      className={`whitespace-nowrap rounded-lg border px-4 py-2 ${
+        isSelected
+          ? 'border-brand-500 bg-brand-500 text-white'
+          : 'border-brand-500 bg-white text-brand-500'
+      }`}
+    >
+      <span className={`text-sm font-medium ${isSelected ? 'text-white' : 'text-brand-500'}`}>
+        {tag.tagName} ({productCount})
+      </span>
+    </button>
   )
 }
diff --git a/apps/web-ui/src/routes/stores.tsx b/apps/web-ui/src/routes/stores.tsx
index 0798450..c2372df 100644
--- a/apps/web-ui/src/routes/stores.tsx
+++ b/apps/web-ui/src/routes/stores.tsx
@@ -1,53 +1,229 @@
-import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { createFileRoute, useNavigate, Outlet, useLocation } from '@tanstack/react-router'
 import { useStores } from '../hooks/prominent-api-hooks'
-import { MyText, AppContainer, MyTouchableOpacity } from 'web-components'
-import { Store } from 'lucide-react'
+import { p, div } from 'web-components'
+import { AppLayout } from '../components/AppLayout'
+import { Store, ArrowRight, Building2 } from 'lucide-react'
 
 export const Route = createFileRoute('/stores')({ component: StoresPage })
 
+export const ASSETS_BASE_URL = 'http://localhost:4000/assets'
+
 function StoresPage() {
   const navigate = useNavigate()
-  const { data } = useStores()
-  const stores = data?.data || []
+  const location = useLocation()
+  const { data: storesData, isLoading, error } = useStores()
+  const stores = storesData?.stores || []
+  
+  // Check if we're on the exact /stores path (not a child like /stores/123)
+  const isExactStoresPath = location.pathname === '/stores'
+
+  if (isLoading) {
+    return (
+      <AppLayout>
+        <div className="flex min-h-screen flex-col items-center justify-center bg-slate-50">
+          <div className="flex h-20 w-20 items-center justify-center">
+            <Building2 className="h-12 w-12 text-brand-200" />
+          </div>
+          <p className="mt-4 text-[10px] font-black uppercase tracking-widest text-slate-400">
+            Opening Marketplace...
+          </p>
+        </div>
+      </AppLayout>
+    )
+  }
+
+  if (error) {
+    return (
+      <AppLayout>
+        <div className="flex min-h-screen flex-col items-center justify-center bg-slate-50 p-10">
+          <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-rose-50">
+            <svg className="h-8 w-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+          <p className="font-bold mb-2 text-center text-xl text-slate-900">
+            Store Fetch Failed
+          </p>
+          <p className="mb-8 text-center font-medium leading-5 text-slate-500">
+            We couldn't reach our vendor network.
+          </p>
+          <button
+            onClick={() => window.location.reload()}
+            className="rounded-2xl bg-brand-600 px-8 py-3 text-xs font-black uppercase tracking-widest text-white shadow-lg shadow-brand-200"
+          >
+            Retry
+          </button>
+        </div>
+      </AppLayout>
+    )
+  }
 
   return (
-    <AppContainer>
-      <MyText weight="bold" className="mb-4 text-xl">
-        Our Stores
-      </MyText>
-
-      <div className="grid grid-cols-2 gap-4">
-        {stores.map((store: any) => (
-          <MyTouchableOpacity
-            key={store.id}
-            onClick={() =>
-              navigate({
-                to: '/stores/$storeId',
-                params: { storeId: String(store.id) },
-              })
-            }
-            className="rounded-xl border border-gray-100 bg-white p-4 shadow-sm"
-          >
-            <div className="mb-3 flex h-32 w-full items-center justify-center overflow-hidden rounded-lg bg-gray-100">
-              {store.imageUrl ? (
-                <img
-                  src={store.imageUrl}
-                  alt={store.name}
-                  className="h-full w-full object-cover"
-                />
-              ) : (
-                <Store className="h-10 w-10 text-gray-400" />
-              )}
+    <AppLayout>
+      <div className="min-h-screen bg-slate-50 pb-32">
+        {isExactStoresPath ? (
+          <>
+            <div className="px-3 pt-6">
+              {/* Header */}
+              <div className="mb-4 flex items-center">
+                <div className="mr-3 h-6 w-1 rounded-full bg-gradient-to-b from-brand-500 to-brand-700" />
+                <div>
+                  <p className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">
+                    Our Outlets
+                  </p>
+                  <p className="font-bold text-3xl tracking-tight text-slate-900">
+                    Our Stores
+                  </p>
+                </div>
+              </div>
+              <p className="pr-4 text-sm font-medium leading-5 text-slate-500">
+                Experience the finest selection of premium meat, poultry, fresh fruits, vegetables, and dairy directly from our own stores.
+              </p>
             </div>
-            <MyText weight="semibold" className="text-sm">
-              {store.name}
-            </MyText>
-            <MyText className="text-xs text-gray-500">
-              {store.productCount || 0} products
-            </MyText>
-          </MyTouchableOpacity>
-        ))}
+
+            {/* Store Cards */}
+            <div className="px-3 pt-4">
+              {stores.map((store: any) => (
+                <StoreCard key={store.id} store={store} />
+              ))}
+            </div>
+
+            {stores.length === 0 && (
+              <div className="flex flex-1 flex-col items-center justify-center py-20">
+                <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-white shadow-sm">
+                  <Building2 className="h-12 w-12 text-slate-400" />
+                </div>
+                <p className="font-bold text-center text-xl tracking-tight text-slate-900">
+                  No Stores Available
+                </p>
+              </div>
+            )}
+          </>
+        ) : (
+          /* Render child routes (e.g., store detail) when not on exact /stores path */
+          <Outlet />
+        )}
       </div>
-    </AppContainer>
+    </AppLayout>
   )
 }
+
+interface StoreCardProps {
+  store: any
+}
+
+function StoreCard({ store }: StoreCardProps) {
+  const navigate = useNavigate()
+    const sampleProducts = store.sampleProducts || []
+    const remainingCount = store.productCount - sampleProducts.length
+    const isMeatStore = store.name?.toLowerCase().includes('meat')
+
+    const navigateToStore = () => {
+      navigate({
+        to: '/stores/$storeId',
+        params: { storeId: String(store.id) },
+      })
+    }
+
+    return (
+      <div className="mb-4 overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-lg shadow-slate-200">
+        {/* Meat Store Images - Show at top if store name contains 'meat' */}
+
+        {/* Top Header Section */}
+        <div onClick={navigateToStore} className="cursor-pointer p-4 pb-0">
+          <div className="mb-4 flex items-center">
+            <div className="h-12 w-12 rounded-xl border border-slate-200 bg-slate-50 p-0.5 shadow-sm">
+              <div className="relative h-full w-full overflow-hidden rounded-[10px]">
+                {store.signedImageUrl || store.imageUrl ? (
+                  <img
+                    src={store.signedImageUrl || store.imageUrl}
+                    alt={store.name}
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <div className="flex h-full w-full items-center justify-center">
+                    <Store className="h-5 w-5 text-slate-400" />
+                  </div>
+                )}
+              </div>
+            </div>
+
+            <div className="ml-3 flex-1">
+              <p className="font-bold text-lg text-slate-900">
+                {store.name}
+              </p>
+            </div>
+
+            <div className="flex items-center justify-center rounded-xl border border-brand-100 bg-brand-50 px-2.5 py-1.5">
+              <p className="font-bold text-sm text-brand-700">
+                {store.productCount}
+              </p>
+              <p className="ml-1 text-[8px] font-black uppercase tracking-tighter text-brand-600">
+                Items
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Horizontal Scrollable Product Collection */}
+        {sampleProducts.length > 0 && (
+          <div className="mb-5">
+            <div className="flex gap-3 overflow-x-auto px-4 pb-2 scrollbar-hide">
+              {sampleProducts.map((product: any) => (
+                <div
+                  key={product.id}
+                  onClick={navigateToStore}
+                  className="w-24 shrink-0 cursor-pointer items-center"
+                >
+                  <div className="mb-2 h-24 w-24 rounded-2xl border border-slate-200 bg-slate-50 p-1 shadow-sm">
+                    <img
+                      src={product.signedImageUrl || product.images?.[0]}
+                      alt={product.name}
+                      className="h-full w-full rounded-xl object-cover"
+                    />
+                  </div>
+                  <p
+                    className="font-bold text-center text-[10px] leading-tight text-slate-900"
+                  >
+                    {product.name}
+                  </p>
+                </div>
+              ))}
+
+              {remainingCount > 0 && (
+                <div className="flex shrink-0 flex-col items-center justify-center">
+                  <div
+                    onClick={navigateToStore}
+                    className="flex h-24 w-24 cursor-pointer flex-col items-center justify-center rounded-2xl bg-slate-900 shadow-md"
+                  >
+                    <p className="font-bold text-base text-white">
+                      +{remainingCount}
+                    </p>
+                    <p className="text-[8px] font-black uppercase tracking-widest text-white/60">
+                      Discover
+                    </p>
+                    <ArrowRight className="mt-1 h-4 w-4 text-white" />
+                  </div>
+                  <div className="h-8" />
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Explore Store Button */}
+        <div className="px-4 pb-4">
+          <div
+            onClick={navigateToStore}
+            className="flex flex-row items-center justify-center rounded-[18px] bg-brand-600 py-3 shadow-lg shadow-brand-200"
+          >
+            <p className="font-bold mr-2 text-sm uppercase tracking-wider text-white">
+              Explore Store
+            </p>
+            <ArrowRight className="h-4 w-4 text-white" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
diff --git a/apps/web-ui/src/styles.css b/apps/web-ui/src/styles.css
index e2b9a8c..a0db490 100644
--- a/apps/web-ui/src/styles.css
+++ b/apps/web-ui/src/styles.css
@@ -2,6 +2,19 @@
 @import "tailwindcss";
 
 @theme {
+  --color-brand-25: #EFF8FF;
+  --color-brand-50: #F5FAFF;
+  --color-brand-100: #D1E9FF;
+  --color-brand-200: #B2DDFF;
+  --color-brand-300: #84CAFF;
+  --color-brand-400: #53B1FD;
+  --color-brand-500: #2E90FA;
+  --color-brand-600: #1570EF;
+  --color-brand-700: #175CD3;
+  --color-brand-800: #1849A9;
+  --color-brand-900: #194185;
+}
+/* @theme {
   --color-brand-25: #FFF5F6;
   --color-brand-50: #FFE8EA;
   --color-brand-100: #FFD1D6;
@@ -13,7 +26,8 @@
   --color-brand-700: #9E2630;
   --color-brand-800: #771D24;
   --color-brand-900: #501318;
-}
+} */
+
 
 * {
   box-sizing: border-box;
@@ -29,3 +43,31 @@ body {
   margin: 0;
 }
 
+/* Safe area padding for mobile devices */
+.pb-safe {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+/* Hide scrollbar but allow scrolling */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Line clamp utilities */
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Safe area padding for mobile devices */
+.pb-safe {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
diff --git a/package-lock.json b/package-lock.json
index c85df15..474b265 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -133,6 +133,7 @@
         "@trpc/server": "^11.6.0",
         "@turf/turf": "^7.2.0",
         "@types/bcryptjs": "^2.4.6",
+        "aws4fetch": "^1.0.20",
         "axios": "^1.11.0",
         "bcryptjs": "^3.0.2",
         "dayjs": "^1.11.18",
@@ -9919,6 +9920,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/aws4fetch": {
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/aws4fetch/-/aws4fetch-1.0.20.tgz",
+      "integrity": "sha512-/djoAN709iY65ETD6LKCtyyEI04XIBP5xVvfmNxsEP0uJB5tyaGBztSryRr4HqMStr9R06PisQE7m9zDTXKu6g==",
+      "license": "MIT"
+    },
     "node_modules/axios": {
       "version": "1.13.6",
       "license": "MIT",
diff --git a/packages/web-components/src/components/dialog.tsx b/packages/web-components/src/components/dialog.tsx
index 2f468b6..6a72d59 100644
--- a/packages/web-components/src/components/dialog.tsx
+++ b/packages/web-components/src/components/dialog.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { MyText } from './my-text'
+import { p } from './my-text'
 import { MyButton } from './my-button'
 import { cn } from '../lib/utils'
 
@@ -30,7 +30,7 @@ export function BottomDialog({
   if (!visible && !open) return null
 
   return (
-    <div className="fixed inset-0 z-50 flex items-end justify-center">
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div
         className={`absolute inset-0 bg-black/30 transition-opacity duration-200 ${
           open ? 'opacity-100' : 'opacity-0'
@@ -90,9 +90,9 @@ export function ConfirmationDialog({
   return (
     <BottomDialog open={open} onClose={handleCancel}>
       <div className="p-4">
-        <MyText weight="bold" className="mb-4 text-lg">
+        <p weight="bold" className="mb-4 text-lg">
           {title}
-        </MyText>
+        </p>
         <p className="mb-6 text-gray-600">{message}</p>
         {commentNeeded && (
           <textarea
diff --git a/packages/web-components/src/components/image-uploader-neo.tsx b/packages/web-components/src/components/image-uploader-neo.tsx
index 42c5360..cf89cd4 100644
--- a/packages/web-components/src/components/image-uploader-neo.tsx
+++ b/packages/web-components/src/components/image-uploader-neo.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react'
 import { cn } from '../lib/utils'
 import { Plus, X } from 'lucide-react'
-import { MyTouchableOpacity } from './my-touchable-opacity'
+import { div } from './my-touchable-opacity'
 
 export interface ImageUploaderNeoItem {
   imgUrl: string
@@ -75,7 +75,7 @@ export function ImageUploaderNeo({
               alt={`Upload ${index + 1}`}
               className="h-full w-full rounded object-cover"
             />
-            <MyTouchableOpacity
+            <div
               onClick={() =>
                 onImageRemove({
                   url: image.imgUrl,
@@ -85,7 +85,7 @@ export function ImageUploaderNeo({
               className="absolute right-1 top-1 rounded-full bg-red-500 p-1 text-white"
             >
               <X className="h-3 w-3" />
-            </MyTouchableOpacity>
+            </div>
           </div>
         ))}
         {(!allowMultiple || totalCount < 1) && (
diff --git a/packages/web-components/src/components/my-button.tsx b/packages/web-components/src/components/my-button.tsx
index 18cedb0..cdd8aeb 100644
--- a/packages/web-components/src/components/my-button.tsx
+++ b/packages/web-components/src/components/my-button.tsx
@@ -43,10 +43,10 @@ export function MyButton({
   )
 }
 
-interface MyTextButtonProps extends Omit<MyButtonProps, 'children'> {
+interface pButtonProps extends Omit<MyButtonProps, 'children'> {
   text: string
 }
 
-export function MyTextButton({ text, ...props }: MyTextButtonProps) {
+export function pButton({ text, ...props }: pButtonProps) {
   return <MyButton {...props}>{text}</MyButton>
 }
diff --git a/packages/web-components/src/components/my-text-input.tsx b/packages/web-components/src/components/my-text-input.tsx
index a5bfa76..4b53249 100644
--- a/packages/web-components/src/components/my-text-input.tsx
+++ b/packages/web-components/src/components/my-text-input.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { cn } from '../lib/utils'
-import { MyText } from './my-text'
+import { p } from './my-text'
 
-interface MyTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+interface pInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   topLabel?: string
   fullWidth?: boolean
   shrunkPadding?: boolean
@@ -12,7 +12,7 @@ interface MyTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   style?: React.CSSProperties
 }
 
-export function MyTextInput({
+export function pInput({
   topLabel,
   fullWidth = true,
   shrunkPadding = false,
@@ -21,7 +21,7 @@ export function MyTextInput({
   className,
   style,
   ...props
-}: MyTextInputProps) {
+}: pInputProps) {
   const inputClasses = cn(
     'flex w-full rounded-md border border-input bg-background px-3 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
     shrunkPadding ? 'py-1.5' : 'py-2',
@@ -34,9 +34,9 @@ export function MyTextInput({
   return (
     <div style={{ ...(fullWidth ? { width: '100%' } : {}), ...style }}>
       {topLabel && (
-        <MyText weight="medium" className="mb-1 text-sm text-gray-500">
+        <p weight="medium" className="mb-1 text-sm text-gray-500">
           {topLabel}
-        </MyText>
+        </p>
       )}
       {multiline ? (
         <textarea
diff --git a/packages/web-components/src/components/my-text.tsx b/packages/web-components/src/components/my-text.tsx
index 4438ddd..67a9d16 100644
--- a/packages/web-components/src/components/my-text.tsx
+++ b/packages/web-components/src/components/my-text.tsx
@@ -3,7 +3,7 @@ import { cn } from '../lib/utils'
 
 type Weight = 'normal' | 'medium' | 'semibold' | 'bold'
 
-interface MyTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+interface pProps extends React.HTMLAttributes<HTMLSpanElement> {
   weight?: Weight
   numberOfLines?: number
   style?: React.CSSProperties
@@ -16,14 +16,14 @@ const weightClasses: Record<Weight, string> = {
   bold: 'font-bold',
 }
 
-export function MyText({
+export function p({
   children,
   weight = 'normal',
   numberOfLines,
   className,
   style,
   ...props
-}: MyTextProps) {
+}: pProps) {
   return (
     <span
       className={cn(weightClasses[weight], className)}
diff --git a/packages/web-components/src/components/my-touchable-opacity.tsx b/packages/web-components/src/components/my-touchable-opacity.tsx
index a08f1d8..304cbf7 100644
--- a/packages/web-components/src/components/my-touchable-opacity.tsx
+++ b/packages/web-components/src/components/my-touchable-opacity.tsx
@@ -1,19 +1,19 @@
 import React from 'react'
 import { cn } from '../lib/utils'
 
-interface MyTouchableOpacityProps
+interface divProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   activeOpacity?: number
   children: React.ReactNode
 }
 
-export function MyTouchableOpacity({
+export function div({
   activeOpacity = 0.7,
   className,
   children,
   style,
   ...props
-}: MyTouchableOpacityProps) {
+}: divProps) {
   return (
     <button
       className={cn(
diff --git a/packages/web-components/src/components/quantifier.tsx b/packages/web-components/src/components/quantifier.tsx
index d7fc052..ec8efc1 100644
--- a/packages/web-components/src/components/quantifier.tsx
+++ b/packages/web-components/src/components/quantifier.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { cn } from '../lib/utils'
-import { MyText } from './my-text'
+import { p } from './my-text'
 import { Minus, Plus } from 'lucide-react'
 
 interface QuantifierProps {
@@ -36,9 +36,9 @@ export function Quantifier({
       >
         <Minus className="h-3.5 w-3.5" />
       </button>
-      <MyText weight="semibold" className="min-w-[32px] text-center text-sm">
+      <p weight="semibold" className="min-w-[32px] text-center text-sm">
         {value}
-      </MyText>
+      </p>
       <button
         onClick={increase}
         disabled={value >= max}
@@ -66,9 +66,9 @@ export function MiniQuantifier({
       >
         <Minus className="h-3 w-3" />
       </button>
-      <MyText weight="semibold" className="min-w-[24px] text-center text-xs">
+      <p weight="semibold" className="min-w-[24px] text-center text-xs">
         {value}
-      </MyText>
+      </p>
       <button
         onClick={() => value < max && setValue(value + step)}
         disabled={value >= max}
diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
index aad0e03..affa844 100644
--- a/packages/web-components/src/index.ts
+++ b/packages/web-components/src/index.ts
@@ -1,8 +1,8 @@
 // Components
-export { MyText } from './components/my-text'
-export { MyButton, MyTextButton } from './components/my-button'
-export { MyTextInput } from './components/my-text-input'
-export { MyTouchableOpacity } from './components/my-touchable-opacity'
+export { p } from './components/my-text'
+export { MyButton, pButton } from './components/my-button'
+export { pInput } from './components/my-text-input'
+export { div } from './components/my-touchable-opacity'
 export { LoadingDialog } from './components/loading-dialog'
 export { BottomDialog, ConfirmationDialog } from './components/dialog'
 export { Checkbox } from './components/checkbox'
diff --git a/packages/web-components/tailwind.config.ts b/packages/web-components/tailwind.config.ts
index e569beb..8e06bbd 100644
--- a/packages/web-components/tailwind.config.ts
+++ b/packages/web-components/tailwind.config.ts
@@ -1,89 +1,87 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from "tailwindcss";
 
 const config: Config = {
-  darkMode: ['class'],
-  content: [
-    './src/**/*.{ts,tsx}',
-  ],
+  darkMode: ["class"],
+  content: ["./src/**/*.{ts,tsx}"],
   theme: {
     container: {
       center: true,
-      padding: '2rem',
+      padding: "2rem",
       screens: {
-        '2xl': '1400px',
+        "2xl": "1400px",
       },
     },
     extend: {
       colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
         primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
         },
         secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
         },
         destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
         },
         muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
         },
         accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
         },
         popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
         },
         card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
         },
         brand: {
-          25: '#FFF5F6',
-          50: '#FFE8EA',
-          100: '#FFD1D6',
-          200: '#FFA3AE',
-          300: '#FF7585',
-          400: '#FF475D',
-          500: '#E63946',
-          600: '#C5303C',
-          700: '#9E2630',
-          800: '#771D24',
-          900: '#501318',
+          25: "#F5FAFF",
+          50: "#EFF8FF",
+          100: "#D1E9FF",
+          200: "#B2DDFF",
+          300: "#84CAFF",
+          400: "#53B1FD",
+          500: "#2E90FA",
+          600: "#1570EF",
+          700: "#175CD3",
+          800: "#1849A9",
+          900: "#194185",
         },
       },
       borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
       },
       keyframes: {
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' },
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
         },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
         },
       },
       animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
       },
     },
   },
   plugins: [],
-}
+};
 
-export default config
+export default config;
\ No newline at end of file