diff --git a/apps/web/pages/merch/cart/index.tsx b/apps/web/pages/merch/cart/index.tsx
new file mode 100644
index 00000000..45e2fd33
--- /dev/null
+++ b/apps/web/pages/merch/cart/index.tsx
@@ -0,0 +1,379 @@
+/* eslint-disable */
+/* eslint-disable @typescript-eslint/no-misused-promises */
+
+
+import React, { useRef, useState, FC, useEffect } from "react";
+import Link from "next/link";
+import {
+  Button,
+  Flex,
+  Heading,
+  useBreakpointValue,
+  Divider,
+  useDisclosure,
+  Grid,
+  GridItem,
+  Text,
+  Input,
+  Spinner,
+} from "@chakra-ui/react";
+import { useQuery } from "@tanstack/react-query";
+import Joi from "joi";
+import {
+  CartAction,
+  CartActionType,
+  useCartStore,
+} from "features/merch/context/cart";
+import {
+  CartCard,
+  CartEmptyView,
+  CartHeader,
+  CartItemCard,
+  CartRemoveModal,
+  LoadingScreen,
+  Page,
+} from "ui/components/merch";
+import { api } from "features/merch/services/api";
+import { routes, QueryKeys } from "features/merch/constants";
+import { displayPrice } from "features/merch/functions";
+import { calculatePricing } from "merch-helpers";
+import { useRouter } from "next/router";
+
+type ValidationType = {
+  error: boolean;
+  isLoading: boolean;
+};
+
+const Cart: FC = () => {
+  // Context hook.
+  const cartContext = useCartStore();
+  const { state: cartState, dispatch: cartDispatch } = cartContext;
+
+  const router = useRouter();
+  const [reroute, setReroute] = useState<boolean>(false);
+
+  // Email input for billing.
+  const [validation, setValidation] = useState<ValidationType>({
+    isLoading: false,
+    error: false,
+  });
+
+  // Calculation of pricing
+  const [isCartLoading, setIsCartLoading] = useState(true);
+  const { data: products, isLoading: isProductsQueryLoading } = useQuery(
+    [QueryKeys.PRODUCTS],
+    () => api.getProducts(),
+    {
+      onSuccess: () => {
+        setIsCartLoading(false);
+      },
+    }
+  );
+
+  // Voucher section
+  // const [voucherInput, setVoucherInput] = useState("");
+  // const [voucherError, setVoucherError] = useState<boolean>(false);
+
+  const pricedCart = products
+    ? calculatePricing(products, cartState.cart, undefined)
+    : null;
+
+  const emailValidator = Joi.string()
+    .email({ tlds: { allow: false } })
+    .required()
+    .label("Email");
+
+  // Removal Modal cartStates
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const toBeRemoved = useRef({ productId: "", size: "", color: "" });
+
+  // Check if break point hit.
+  const isMobile: boolean =
+    useBreakpointValue({ base: true, md: false }) || false;
+
+  // Apply voucher - TODO
+  // const { mutate: applyVoucher, isLoading: voucherLoading } = useMutation(
+  //   () => api.postQuotation(cartState.cart, voucherInput),
+  //   {
+  //     onMutate: () => {
+  //       setPriceLoading(true);
+  //     },
+  //     onSuccess: (data: PricedCart) => {
+  //       setPriceInfo(data.total);
+  //       if (data.price.discount > 0) {
+  //         // Voucher is valid
+  //         cartDispatch({ type: CartActionType.VALID_VOUCHER, payload: voucherInput });
+  //         setVoucherError(false);
+  //         setVoucherInput("");
+  //       } else {
+  //         setVoucherError(true);
+  //       }
+  //     },
+  //     onSettled: () => {
+  //       setPriceLoading(false);
+  //     },
+  //   }
+  // );
+
+  // const handleRemoveVoucher = () => {
+  //   setVoucherInput("");
+  //   cartDispatch({ type: CartActionType.REMOVE_VOUCHER, payload: null });
+  //   applyVoucher();
+  // };
+
+  // Update Cart Item by Size & Id (To be changed next time: BE)
+  const removeItem = (productId: string, size: string, color: string) => {
+    cartDispatch({
+      type: CartActionType.REMOVE_ITEM,
+      payload: { id: productId, size: size, color: color },
+    });
+    onClose();
+  };
+
+  // Set modal's ref value to size & productId pair.
+  const handleRemoveItem = (productId: string, size: string, color: string) => {
+    onOpen();
+    toBeRemoved.current.size = size;
+    toBeRemoved.current.color = color;
+    toBeRemoved.current.productId = productId;
+  };
+
+  // Update Cart Item by Size & Id (To be changed next time: BE)
+  const onQuantityChange = (
+    productId: string,
+    size: string,
+    color: string,
+    qty: number
+  ) => {
+    const action: CartAction = {
+      type: CartActionType.UPDATE_QUANTITY,
+      payload: { id: productId, size: size, color: color, quantity: qty },
+    };
+    cartDispatch(action);
+  };
+
+  const handleToCheckout = async () => {
+    setValidation({ isLoading: true, error: false });
+    try {
+      await emailValidator.validateAsync(cartState.billingEmail);
+      cartDispatch({
+        type: CartActionType.UPDATE_BILLING_EMAIL,
+        payload: cartState.billingEmail,
+      });
+      setReroute(true);
+    } catch (error: any) {
+      setValidation({ isLoading: false, error: true });
+    }
+  };
+
+  const CartHeading = (
+    <Heading textAlign="center" mb={[4, 6, 12]} size="xl">
+      Your Cart
+    </Heading>
+  );
+
+  const PriceInfoSection = (
+    <CartCard title="Order Summary" mt={[2, 4]}>
+      {!pricedCart ? (
+        <Flex flexDir="column" alignItems="center" justifyContent="center">
+          <Spinner />
+          <Text mt={2}>Calculating your cart price</Text>
+        </Flex>
+      ) : (
+        <>
+          <Flex flexDir="column" gap={[2, 3]}>
+            <Flex justifyContent="space-between" fontSize={["sm", "md"]}>
+              <Text>Item(s) subtotal</Text>
+              <Text>{displayPrice(pricedCart.subtotal)}</Text>
+            </Flex>
+            <Flex justifyContent="space-between" fontSize={["sm", "md"]}>
+              <Text>Voucher Discount</Text>
+              <Text noOfLines={1}>{displayPrice(pricedCart.discount)}</Text>
+            </Flex>
+            <Divider />
+            <Flex
+              justifyContent="space-between"
+              fontSize={["sm", "md"]}
+              fontWeight={600}
+            >
+              <Text>Total</Text>
+              <Text>{displayPrice(pricedCart.total)}</Text>
+            </Flex>
+          </Flex>
+          <Divider />
+          <Flex flexDirection="column" rowGap={2}>
+            <Input
+              required
+              placeholder="Name"
+              value={cartState.name}
+              id="name"
+              type="text"
+              onChange={(event) => {
+                cartDispatch({
+                  type: CartActionType.UPDATE_NAME,
+                  payload: event.target.value,
+                });
+              }}
+              variant="outline"
+            />
+
+            <Input
+              required
+              placeholder="Billing email address"
+              value={cartState.billingEmail}
+              id="email"
+              type="text"
+              onChange={(event) => {
+                cartDispatch({
+                  type: CartActionType.UPDATE_BILLING_EMAIL,
+                  payload: event.target.value,
+                });
+              }}
+              variant="outline"
+            />
+            <Text fontSize="sm" color="red">
+              {validation.error && "*Invalid email format"}
+            </Text>
+
+            <Button
+              width="100%"
+              onClick={handleToCheckout}
+              _hover={{ bg: "primary-blue" }}
+              isLoading={validation.isLoading}
+              disabled={
+                cartState.billingEmail.length === 0 ||
+                cartState.name.length === 0 ||
+                validation.isLoading
+              }
+            >
+              CHECK OUT
+            </Button>
+
+            <Link href={routes.HOME}>
+              <Button width="100%" variant="outline">
+                CONTINUE SHOPPING
+              </Button>
+            </Link>
+          </Flex>
+        </>
+      )}
+    </CartCard>
+  );
+  /* TODO
+  const VoucherSection = (
+    <CartCard title="Voucher">
+      <FormControl>
+        <Flex gap={2}>
+          <Input
+            size="sm"
+            flex={1}
+            id="voucher-code"
+            value={voucherInput}
+            disabled={voucherLoading}
+            placeholder="Voucher Code"
+            onChange={(e: React.FormEvent<EventTarget>) => {
+              const target = e.target as HTMLInputElement;
+              setVoucherInput(target.value);
+            }}
+          />
+          <Button
+            px={4}
+            size="sm"
+            isLoading={voucherLoading}
+            variant="outline"
+            disabled={voucherInput.length === 0 || priceLoading || voucherLoading}
+            onClick={() => applyVoucher()}
+          >
+            Apply
+          </Button>
+        </Flex>
+        <FormHelperText>
+          {!cartState.voucher ? (
+            <Text>Apply your voucher code!</Text>
+          ) : (
+            <Text textAlign="right">
+              {voucherError && <Text color="red.500">Invalid voucher</Text>}
+              {cartState.voucher && priceInfo.discount > 0 && (
+                <Flex justifyContent="flex-end">
+                  <Text color="green.500">Applied Voucher</Text>
+                  <Button ml={1} variant="link" onClick={handleRemoveVoucher}>
+                    <LinkIcon height={3} width={3} />
+                  </Button>
+                </Flex>
+              )}
+            </Text>
+          )}
+        </FormHelperText>
+      </FormControl>
+    </CartCard>
+  );
+*/
+  const renderCartView = () => (
+    <Grid templateColumns={{ base: "repeat(1, 1fr)", xl: "repeat(6, 1fr)" }}>
+      <GridItem colSpan={4} px={[0, 4]}>
+        {!isMobile && <CartHeader />}
+        {cartState.cart.items.map((item, index) => (
+          <>
+            <CartItemCard
+              key={item.id + item.size}
+              data={item}
+              productInfo={products?.find((product) => product.id === item.id)}
+              isLoading={isProductsQueryLoading}
+              isMobile={isMobile}
+              onRemove={handleRemoveItem}
+              onQuantityChange={onQuantityChange}
+            />
+            {index !== cartState.cart.items.length - 1 && <Divider />}
+          </>
+        ))}
+      </GridItem>
+      <GridItem colSpan={2} px={[0, 4]}>
+        {/* {VoucherSection} TODO*/}
+        {PriceInfoSection}
+        <CartCard title="Collection Details" mt={[2, 4]} mb={[2, 4]}>
+          <Text fontSize={["xs", "sm"]}>
+            An email will be sent to you closer to the collection date. Our
+            collection venue is at 50 Nanyang Ave, #32 Block N4 #02a, Singapore
+            639798.
+          </Text>
+        </CartCard>
+      </GridItem>
+      <CartRemoveModal
+        isOpen={isOpen}
+        onClose={onClose}
+        removeItem={() =>
+          removeItem(
+            toBeRemoved.current.productId,
+            toBeRemoved.current.size,
+            toBeRemoved.current.color
+          )
+        }
+      />
+    </Grid>
+  );
+
+  const renderCartContent = () => {
+    if (isCartLoading) {
+      return <LoadingScreen text="Fetching Cart Details" />;
+    }
+    if (cartState.cart.items.length === 0) {
+      return <CartEmptyView />;
+    }
+    return renderCartView();
+  };
+
+  useEffect(() => {
+    if (reroute) {
+      void router.push(routes.CHECKOUT);
+    }
+  }, [reroute]);
+
+  return (
+    <Page>
+      {CartHeading}
+      {renderCartContent()}
+    </Page>
+  );
+};
+
+export default Cart;
diff --git a/apps/web/pages/merch/checkout/index.tsx b/apps/web/pages/merch/checkout/index.tsx
new file mode 100644
index 00000000..07f44240
--- /dev/null
+++ b/apps/web/pages/merch/checkout/index.tsx
@@ -0,0 +1,190 @@
+/* eslint-disable */
+
+import { CartEmptyView, Page } from "ui/components/merch";
+import { useCartStore } from "@/features/merch/context/cart";
+import { useEffect, useState } from "react";
+import { useCheckoutStore } from "@/features/merch/context/checkout";
+import {
+  Box,
+  Divider,
+  Flex,
+  Grid,
+  GridItem,
+  Heading,
+  Text,
+  Image,
+  Badge,
+} from "@chakra-ui/react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { QueryKeys, routes } from "@/features/merch/constants";
+import { api } from "@/features/merch/services/api";
+import CheckoutSkeleton from "@/features/merch/components/checkout/Skeleton";
+import Link from "next/link";
+import { displayPrice } from "@/features/merch/functions";
+import { useRouter } from "next/router";
+import StripeForm from "@/features/merch/components/checkout/StripeForm";
+import { CheckoutResponse } from "types";
+
+const CheckoutPage = () => {
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const { state: cartState } = useCartStore();
+  const { setState: setCheckoutState } = useCheckoutStore();
+
+  // Fetch and check if cart item is valid.
+  const { mutate: initCheckout } = useMutation(
+    () =>
+      api.postCheckoutCart(
+        cartState.cart,
+        cartState.billingEmail,
+        cartState.voucher
+      ),
+    {
+      retry: false,
+      onMutate: () => {
+        setIsLoading(true);
+      },
+      onSuccess: (data: CheckoutResponse) => {
+        setCheckoutState(data);
+      },
+      onSettled: () => {
+        setIsLoading(false);
+      },
+    }
+  );
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!cartState.billingEmail) {
+      void router.push(routes.CART);
+      return;
+    }
+    initCheckout();
+  }, []);
+
+  return (
+    <Page>
+      <Heading textAlign="center" mb={[4, 6, 12]} size="xl">
+        Checkout
+      </Heading>
+      {isLoading ? (
+        <CheckoutSkeleton />
+      ) : cartState.cart.items.length === 0 ? (
+        <CartEmptyView />
+      ) : (
+        <CheckoutView />
+      )}
+    </Page>
+  );
+};
+
+const CheckoutView = () => {
+  const { state: checkoutState } = useCheckoutStore();
+  return (
+    <Grid
+      templateColumns={{ base: "repeat(1, 1fr)", lg: "repeat(2, 1fr)" }}
+      rowGap={[4, 0]}
+      columnGap={[0, 4]}
+    >
+      <GridItem px={[0, 4]} colSpan={1} mb={8}>
+        {OrderSummary()}
+      </GridItem>
+      <GridItem px={[0, 4]} colSpan={1}>
+        {checkoutState?.payment?.clientSecret && (
+          <StripeForm clientSecret={checkoutState?.payment?.clientSecret} />
+        )}
+      </GridItem>
+    </Grid>
+  );
+};
+
+const OrderSummary = () => {
+  const { state: cartState } = useCartStore();
+  const { state: checkoutState } = useCheckoutStore();
+
+  const noOfItems = cartState.cart.items.length;
+
+  const { data: products } = useQuery(
+    [QueryKeys.PRODUCTS],
+    () => api.getProducts(),
+    {}
+  );
+
+  return (
+    <Box borderWidth={1} borderRadius="lg" p={[4, 6]} boxShadow="md">
+      <Flex justifyContent="space-between" alignItems="center">
+        <Heading fontSize={["xl", "2xl", "3xl"]}>Order Summary</Heading>
+        <Link href={routes.CART}>
+          <Text fontSize={["md", "l"]}>{`${noOfItems} item(s) Edit`}</Text>
+        </Link>
+      </Flex>
+      <Text fontSize="sm">{`Name: ${cartState.name}`}</Text>
+      <Text fontSize="sm">{`Billing email: ${cartState.billingEmail}`}</Text>
+      {cartState.cart.items?.map((item) => {
+        const product = products?.find(({ id }) => id === item.id);
+        const subtotal = (product?.price ?? -1) * item.quantity;
+        return (
+          <Flex key={item.id.toString()} mt={[4, 6]}>
+            <Image
+              src={product?.images?.[0]}
+              fallbackSrc="https://via.placeholder.com/100"
+              boxSize="70"
+              objectFit="contain"
+              borderRadius="md"
+              alt={product?.name}
+            />
+            <Flex flexDirection="column" flex={1} ml={2}>
+              <Flex justifyContent="space-between" alignItems="flex-start">
+                <Text fontWeight={500} noOfLines={2}>
+                  {product?.name}
+                </Text>
+                <Text fontWeight={500}>{displayPrice(subtotal)}</Text>
+              </Flex>
+              <Flex color="gray.600" alignItems="center">
+                <Text fontSize="sm">{`Color: ${item.color}`}</Text>
+              </Flex>
+              <Flex
+                justifyContent="space-between"
+                color="gray.600"
+                alignItems="center"
+              >
+                <Flex alignItems="center">
+                  <Text fontSize="sm">{`Qty x${item.quantity}`}</Text>
+                  <Badge h="fit-content" w="fit-content" ml={2}>
+                    <Text textTransform="uppercase">{item.size}</Text>
+                  </Badge>
+                </Flex>
+                <Text>{displayPrice(product?.price ?? 0)} each</Text>
+              </Flex>
+            </Flex>
+          </Flex>
+        );
+      })}
+
+      <Divider mt={[4, 8]} mb={[2, 4]} />
+      <Flex
+        justifyContent="flex-end"
+        mt={2}
+        fontWeight={500}
+        fontSize={["sm", "md", "l"]}
+        gap={2}
+        color="gray.700"
+      >
+        <Flex flexDir="column">
+          {/* <Text>Subtotal:</Text> */}
+          {/* <Text>Discount:</Text> */}
+          <Text fontSize="lg">Grand total:</Text>
+        </Flex>
+        <Flex flexDir="column" textAlign="end">
+          {/* <Text>{displayPrice(checkoutState?.price?.subtotal ?? 0)}</Text> */}
+          {/* <Text>{displayPrice(checkoutState?.price?.discount ?? 0)}</Text> */}
+          <Text fontSize="lg">
+            {displayPrice(checkoutState?.price?.grandTotal ?? 0)}
+          </Text>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+};
+
+export default CheckoutPage;
diff --git a/apps/web/pages/merch/index.tsx b/apps/web/pages/merch/index.tsx
new file mode 100644
index 00000000..c6cdfcb6
--- /dev/null
+++ b/apps/web/pages/merch/index.tsx
@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import { Flex, Divider, Select, Heading, Grid } from "@chakra-ui/react";
+import { useQuery } from "@tanstack/react-query";
+import { Card, MerchListSkeleton, Page } from "ui/components/merch";
+import { QueryKeys } from "features/merch/constants";
+import { api } from "features/merch/services/api";
+import { Product } from "types";
+import { isOutOfStock } from "features/merch/functions";
+
+const MerchandiseList = () => {
+  const [selectedCategory, setSelectedCategory] = useState<string>("");
+
+  const { data: products, isLoading } = useQuery(
+    [QueryKeys.PRODUCTS],
+    () => api.getProducts(),
+    {}
+  );
+
+  const categories = products?.map((product: Product) => product?.category);
+  const uniqueCategories = categories
+    ?.filter((c, idx) => categories.indexOf(c) === idx)
+    .filter(Boolean);
+
+  const handleCategoryChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    setSelectedCategory(event.target.value);
+  };
+
+  return (
+    <Page>
+      <Flex justifyContent="space-between" alignItems="center">
+        <Heading fontSize={["md", "2xl"]} textColor={["primary.600", "black"]}>
+          New Drop
+        </Heading>
+        <Select
+          bgColor={["white", "gray.100"]}
+          w="fit-content"
+          textAlign="center"
+          alignSelf="center"
+          placeholder="All Product Type"
+          size="sm"
+          disabled={isLoading}
+          value={selectedCategory}
+          onChange={handleCategoryChange}
+        >
+          {uniqueCategories?.map((category, idx) => (
+            <option key={idx.toString()} value={category}>
+              {category}
+            </option>
+          ))}
+        </Select>
+      </Flex>
+      <Divider borderColor="blackAlpha.500" mt={[5, 10]} />
+      {isLoading ? (
+        <MerchListSkeleton />
+      ) : (
+        <Grid
+          templateColumns={{
+            base: "repeat(2, 1fr)",
+            md: "repeat(3, 1fr)",
+            lg: "repeat(4, 1fr)",
+          }}
+          columnGap={4}
+          rowGap={2}
+        >
+          {products
+            ?.filter((product: Product) => {
+              if (!product?.is_available) return false;
+              if (selectedCategory === "") return true;
+              return product?.category === selectedCategory;
+            })
+            ?.map((item: Product, idx: number) => (
+              <Card
+                _productId={item.id}
+                key={idx.toString()}
+                text={item?.name}
+                price={item?.price}
+                imgSrc={item?.images?.[0]}
+                sizeRange={`${item?.sizes?.[0]} - ${
+                  item.sizes?.[item.sizes.length - 1]
+                }`}
+                isOutOfStock={isOutOfStock(item)}
+              />
+            ))}
+        </Grid>
+      )}
+    </Page>
+  );
+};
+
+export default MerchandiseList;
diff --git a/apps/web/pages/merch/orders/[slug].tsx b/apps/web/pages/merch/orders/[slug].tsx
new file mode 100644
index 00000000..5f9e8a52
--- /dev/null
+++ b/apps/web/pages/merch/orders/[slug].tsx
@@ -0,0 +1,199 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { Image, Badge, Button, Divider, Flex, Heading, Text, useBreakpointValue } from "@chakra-ui/react";
+import { useQuery } from "@tanstack/react-query";
+import {  Page } from "ui/components/merch";
+import { Order, OrderStatus } from "types";
+import { api } from "features/merch/services/api";
+import { routes } from "features/merch/constants/routes";
+import { QueryKeys } from "features/merch/constants/queryKeys";
+import { displayPrice } from "features/merch/functions/currency";
+import Link from "next/link"
+import LoadingScreen from "ui/components/merch/skeleton/LoadingScreen";
+import { getOrderStatusColor, renderOrderStatus } from "merch-helpers";
+import OrderItem from "ui/components/merch/OrderItem";
+const OrderSummary: React.FC = () => {
+// Check if break point hit. KIV
+  const isMobile: boolean = useBreakpointValue({ base: true, md: false }) || false;
+  const router = useRouter();
+  const orderSlug = router.query.slug as string | undefined;
+
+  const [showThankYou, setShowThankYou] = useState<boolean>(false);
+  const [orderState, setOrderState] = useState<Order | null>(null);
+  // TODO: Fetch subtotal and total from server.
+  const [total, setTotal] = useState(0);
+  // Fetch and check if cart item is valid. Number(item.price) set to convert string to num
+  const { isLoading } = useQuery(
+    [QueryKeys.ORDER, orderSlug],
+    () => api.getOrder(orderSlug ?? ""),
+    {
+      enabled: !!orderSlug,
+      onSuccess: (data: Order) => {
+        setOrderState(data);
+        setTotal(
+          data.items.reduce((acc, item) => {
+            return item.price * item.quantity + acc;
+          }, 0)
+        );
+        setShowThankYou(true);
+      },
+    }
+  );
+
+  const renderThankYouMessage = () => (
+    <>
+      <Heading size="xl">THANK YOU</Heading>
+      <Text>Thank you for your purchase. We have received your order.</Text>
+      <Link href={routes.HOME}>
+        <Button borderRadius={0} size="sm">
+          CONTINUE SHOPPING
+        </Button>
+      </Link>
+      <Divider my={8} />
+    </>
+  );
+  const renderOrderSummary = () => (
+    <>
+      <Flex flexDirection="column" alignItems="center" rowGap={3}>
+        {showThankYou && renderThankYouMessage()}
+      </Flex>
+
+      <Flex
+        p={6}
+        borderWidth="1px"
+        borderRadius="lg"
+        overflow="hidden"
+        flexDir="column"
+      >
+        <div>
+          <Flex display= { { base: "flex", md: "none" } } justifyContent="space-between">
+            <Flex flexDir="column" w="100%">
+              <Badge
+                width="fit-content"
+                fontSize="sm"
+                mb={2}
+                color={getOrderStatusColor(orderState?.status ?? OrderStatus.PENDING_PAYMENT)}
+              >
+                {renderOrderStatus(orderState?.status ?? OrderStatus.PENDING_PAYMENT)}
+              </Badge>
+              <Heading size="md">Order Number</Heading>
+              <Heading size="lg">
+                {orderState?.id.split("-")[0]}
+              </Heading>
+              <Flex alignItems="center" mb={2}>
+                <Text fontSize="sm">{orderState?.id}</Text>
+              </Flex>
+              <Text fontSize="sm" color="grey">
+                Order date:{" "}
+                {orderState?.transaction_time
+                  ? new Date(`${orderState.transaction_time}`).toLocaleString(
+                    "en-sg"
+                  )
+                  : ""}
+              </Text>
+              {/*<Text>Last update: {orderState?.lastUpdate}</Text>*/}
+            </Flex>
+          </Flex>
+        </div>
+        <div>
+          <Flex display= { { base: "none", md: "flex" } } justifyContent="space-between">
+            <Flex flexDir="column">
+              <Flex alignItems="center" gap={6}>
+                <Heading size="md">Order Number</Heading>
+                <Badge
+                  width="fit-content"
+                  fontSize="sm"
+                  color={getOrderStatusColor(orderState?.status ?? OrderStatus.PENDING_PAYMENT)}
+                >
+                  {renderOrderStatus(orderState?.status ?? OrderStatus.PENDING_PAYMENT)}
+                </Badge>
+              </Flex>
+              <Heading size="lg" mb={2}>
+                {orderState?.id.split("-")[0]}
+              </Heading>
+              <Flex alignItems="center">
+                <Text fontSize="sm">{orderState?.id}</Text>
+              </Flex>
+            </Flex>
+            <Flex flexDir="column" fontSize="sm" color="grey">
+              <Text>
+                Order date:{" "}
+                {orderState?.transaction_time
+                  ? new Date(`${orderState.transaction_time}`).toLocaleString(
+                    "en-sg"
+                  )
+                  : ""}
+              </Text>
+              {/*<Text>Last update: {orderState?.lastUpdate}</Text>*/}
+            </Flex>
+          </Flex>
+        </div>
+        <Divider my={4} />
+        {/*{orderState?.items.map((item) => (*/}
+        {/*  <OrderItem data={item} isMobile={isMobile} />*/}
+        {/*))}*/}
+
+        {orderState? <OrderItem  isMobile={isMobile} orderData={orderState}/>: <Text>Order Not Found</Text>}
+
+
+        <Flex alignItems="end" flexDirection="row" gap={1} mt={4}>
+          <Flex flexDir="column" flex={1} textAlign="end" fontWeight={500}>
+            <Text>Item Subtotal:</Text>
+            <Text>Voucher Discount:</Text>
+            <Text>Total:</Text>
+          </Flex>
+          <Flex flexDir="column" textAlign="end">
+            <Text fontSize="md"> {displayPrice(total)}</Text>
+            <Text fontSize="md"> 
+              {/*{displayPrice( TODO*/}
+              {/*  (orderState?.billing?.subtotal ?? 0) -*/}
+              {/*  (orderState?.billing?.total ?? 0)*/}
+              {/*)}*/}
+              0
+            </Text>
+            <Text fontSize="md">{displayPrice(total)}</Text>
+          </Flex>
+        </Flex>
+      </Flex>
+
+      <Flex
+        mt={6}
+        alignItems="center"
+        py={3}
+        borderRadius="lg"
+        borderWidth="1px"
+        flexDirection="column"
+        rowGap={4}
+      >
+        {/* TODO: QR Code generator based on Param. */}
+        <Image
+          src={
+            orderState
+              ? `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${ process.env.NEXT_PUBLIC_FRONTEND_URL ?? "http://localhost:3001"}/merch/orders/${orderState?.id}`
+              : ""
+          }
+          alt="QRCode"
+          width={150}
+          height={150}
+          sizes="(max-width: 768px)"
+        />
+        <Text fontWeight="bold">
+          Please screenshot this QR code and show it at SCSE Lounge to collect your order.
+          Alternatively, show the email receipt you have received.
+        </Text>
+        <Text>
+          For any assistance, please contact our email address:
+          merch@ntuscse.com
+        </Text>
+      </Flex>
+    </>
+  );
+  const renderSummaryPage = () => {
+    if (isLoading) return <LoadingScreen text="Fetching order detail" />;
+    //rmb to change this v
+    if (orderState === undefined || orderState === null){return <LoadingScreen text="Order Does Not Exist" />;}
+    return renderOrderSummary();
+  };
+  return <Page>{renderSummaryPage()}</Page>;
+}
+export default OrderSummary
diff --git a/apps/web/pages/merch/product/[slug].tsx b/apps/web/pages/merch/product/[slug].tsx
new file mode 100644
index 00000000..4085d159
--- /dev/null
+++ b/apps/web/pages/merch/product/[slug].tsx
@@ -0,0 +1,474 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import {
+  Badge,
+  Button,
+  Center,
+  Divider,
+  Flex,
+  Grid,
+  GridItem,
+  Heading,
+  Input,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react";
+import {
+  EmptyProductView,
+  MerchCarousel,
+  MerchDetailSkeleton,
+  Page,
+  SizeChartDialog,
+  SizeOption,
+} from "ui/components/merch";
+import { Product } from "types";
+import {
+  CartAction,
+  CartActionType,
+  useCartStore,
+} from "features/merch/context/cart";
+import { QueryKeys, routes } from "features/merch/constants";
+import {
+  displayPrice,
+  displayQtyInCart,
+  displayStock, getDefaultColor, getDefaultSize,
+  getQtyInCart,
+  getQtyInStock,
+  isColorAvailable,
+  isOutOfStock,
+  isSizeAvailable,
+} from "features/merch/functions";
+import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from "next";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "@/features/merch/services/api";
+
+interface GroupTitleProps {
+  children: React.ReactNode;
+}
+
+const GroupTitle = ({ children }: GroupTitleProps) => (
+  <Heading fontSize="md" mb={2} color="grey" textTransform="uppercase">
+    {children}
+  </Heading>
+);
+
+const MerchDetail = (_props: InferGetStaticPropsType<typeof getStaticProps>) => {
+  // Context hook.
+  const { state: cartState, dispatch: cartDispatch } = useCartStore();
+  const router = useRouter();
+  const id = (router.query.slug ?? "") as string;
+
+  const [quantity, setQuantity] = useState<number>(1);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
+  const [selectedSize, setSelectedSize] = useState<string | null>(null);
+  const [selectedColor, setSelectedColor] = useState<string | null>(null);
+  const [maxQuantity, setMaxQuantity] = useState<number>(1);
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const { data: product, isLoading } = useQuery(
+    [QueryKeys.PRODUCT, id],
+    () => api.getProduct(id),
+    {
+      onSuccess: (data: Product) => {
+        setIsDisabled(!(data?.is_available === true));
+        setSelectedSize(getDefaultSize(data));
+        setSelectedColor(getDefaultColor(data));
+      },
+    }
+  );
+
+  //* In/decrement quantity
+  const handleQtyChangeCounter = (isAdd = true) => {
+    const value = isAdd ? 1 : -1;
+    if (!isAdd && quantity === 1) return;
+    if (isAdd && quantity >= maxQuantity) return;
+    setQuantity(quantity + value);
+  };
+
+  //* Manual input quantity.
+  const handleQtyChangeInput = (e: React.FormEvent<EventTarget>): void => {
+    const target = e.target as HTMLInputElement;
+    if (Number.isNaN(parseInt(target.value, 10))) {
+      setQuantity(1);
+      return;
+    }
+    const value = parseInt(target.value, 10);
+    if (value <= 0) {
+      setQuantity(1);
+    } else if (value > maxQuantity) {
+      setQuantity(maxQuantity);
+    } else {
+      setQuantity(value);
+    }
+  };
+
+  const updateMaxQuantity = (color: string, size: string) => {
+    if (product) {
+      const stockQty = getQtyInStock(product, color, size);
+      const cartQty = getQtyInCart(
+        cartState.cart.items,
+        product.id,
+        color,
+        size
+      );
+      const max = stockQty > cartQty ? stockQty - cartQty : 0;
+      setMaxQuantity(max);
+    }
+  };
+
+  const handleAddToCart = () => {
+    if (!selectedColor || !selectedSize) {
+      return;
+    }
+    setIsDisabled(true);
+    const payload: CartAction = {
+      type: CartActionType.ADD_ITEM,
+      payload: {
+        id,
+        quantity,
+        color: selectedColor,
+        size: selectedSize,
+      },
+    };
+    cartDispatch(payload);
+    setMaxQuantity(maxQuantity - quantity);
+    setQuantity(1);
+    setIsDisabled(false);
+  };
+
+  const handleBuyNow = async () => {
+    handleAddToCart();
+    await router.push(routes.CART);
+  };
+
+  const ProductNameSection = (
+    <Flex flexDirection="column" gap={1}>
+      <Heading color="primary.600" fontSize={["xl", "2xl", "3xl", "4xl"]}>
+        {product?.name}
+        {!product?.is_available && (
+          <Badge
+            color="grey"
+            ml={4}
+            fontSize="md"
+            variant="outline"
+            display="inline"
+          >
+            unavailable
+          </Badge>
+        )}
+        {product && isOutOfStock(product) && (
+          <Badge
+            color="grey"
+            ml={4}
+            fontSize="md"
+            variant="outline"
+            display="inline"
+          >
+            out of stock
+          </Badge>
+        )}
+      </Heading>
+      <Text fontSize="xl" fontWeight={600} color="primary.600">
+        {displayPrice(product?.price ?? 0)}
+      </Text>
+    </Flex>
+  );
+
+  const renderSizeSection = (
+    <Flex flexDirection="column">
+      <Flex
+        justifyContent="space-between"
+        alignItems="center"
+        mb={2}
+        display="flex"
+      >
+        <GroupTitle>Sizes</GroupTitle>
+        {product?.size_chart && (
+          <Button size="sm" variant="unstyled" onClick={onOpen}>
+            Size Chart
+          </Button>
+        )}
+      </Flex>
+      <Flex gap={[4, 4]} flexWrap="wrap">
+        {product?.sizes?.map((size, idx) => {
+          return (
+            <SizeOption
+              key={idx.toString()}
+              active={(selectedSize === size).toString()}
+              onClick={() => {
+                setQuantity(1);
+                if (size !== selectedSize) {
+                  setSelectedSize(size);
+                  if (selectedColor) {
+                    updateMaxQuantity(selectedColor, size);
+                  }
+                } else {
+                  setSelectedSize(null);
+                }
+              }}
+              disabled={
+                isDisabled ||
+                (product
+                  ? !isSizeAvailable(product, size) // size is not available for all colors
+                  : false) ||
+                (product && selectedColor
+                  ? getQtyInStock(product, selectedColor, size) === 0 // size is not available for selected color
+                  : false)
+              }
+            >
+              <Text
+                textTransform="uppercase"
+                fontSize={{ base: "sm", md: "md" }}
+              >
+                {size}
+              </Text>
+            </SizeOption>
+          );
+        })}
+      </Flex>
+    </Flex>
+  );
+
+  const renderColorSection = (
+    <Flex flexDirection="column" mt={4}>
+      <Flex
+        justifyContent="space-between"
+        alignItems="center"
+        mb={2}
+        display="flex"
+      >
+        <GroupTitle>Colors</GroupTitle>
+      </Flex>
+      <Flex gap={[4, 4]} flexWrap="wrap">
+        {product?.colors?.map((color, idx) => {
+          return (
+            <SizeOption
+              key={idx.toString()}
+              active={(selectedColor === color).toString()}
+              onClick={() => {
+                setQuantity(1);
+                if (color !== selectedColor) {
+                  setSelectedColor(color);
+                  if (selectedSize) {
+                    updateMaxQuantity(color, selectedSize);
+                  }
+                } else {
+                  setSelectedColor(null);
+                }
+              }}
+              width="auto"
+              px={4}
+              disabled={
+                isDisabled ||
+                (product
+                  ? !isColorAvailable(product, color) // color is not available for all sizes
+                  : false) ||
+                (product && selectedSize
+                  ? getQtyInStock(product, color, selectedSize) === 0 // color is not available for selected size
+                  : false)
+              }
+            >
+              <Text
+                textTransform="uppercase"
+                fontSize={{ base: "sm", md: "md" }}
+              >
+                {color}
+              </Text>
+            </SizeOption>
+          );
+        })}
+      </Flex>
+    </Flex>
+  );
+
+  const renderQuantitySection = (
+    <Flex flexDirection="column" mt={8}>
+      <GroupTitle>Quantity</GroupTitle>
+      <Flex gap={4}>
+        <SizeOption
+          key={"decrement_qty"}
+          disabled={
+            isDisabled || !(selectedColor && selectedSize) || quantity <= 1
+          }
+          active={false.toString()}
+          onClick={() => handleQtyChangeCounter(false)}
+        >
+          -
+        </SizeOption>
+        <Input
+          type="tel"
+          pattern="[0-9]*"
+          max={maxQuantity}
+          textAlign="center"
+          value={quantity}
+          borderRadius={0}
+          maxWidth={100}
+          placeholder="Item Count"
+          disabled={isDisabled || !(selectedColor && selectedSize)}
+          onChange={handleQtyChangeInput}
+        />
+        <SizeOption
+          key={"increment_qty"}
+          disabled={
+            isDisabled ||
+            !(selectedColor && selectedSize) ||
+            quantity >= maxQuantity
+          }
+          active={false.toString()}
+          onClick={() => handleQtyChangeCounter(true)}
+        >
+          +
+        </SizeOption>
+        <Center>
+          <Text fontSize="m" fontWeight={500} color="primary.600">
+            {product && selectedColor && selectedSize && product.is_available
+              ? displayStock(product, selectedColor, selectedSize)
+              : ""}
+          </Text>
+        </Center>
+      </Flex>
+      <Flex flexDirection="column" mt={2}>
+        <Text fontSize="m" fontWeight={300} color="primary.400">
+          {product && selectedColor && selectedSize
+            ? displayQtyInCart(
+                cartState.cart.items,
+                product.id,
+                selectedColor,
+                selectedSize
+              )
+            : ""}
+        </Text>
+        <Text fontSize="m" fontWeight={300} color="primary.400">
+          {product && selectedColor && selectedSize && maxQuantity === 0
+            ? "You have reached the maximum purchase quantity."
+            : ""}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+
+  const purchaseButtons = (
+    <Flex gap={6} flexWrap="wrap">
+      <Button
+        bg="gray.200"
+        _hover={{ bg: "gray.300" }}
+        flex={1}
+        borderRadius={0}
+        variant="outline"
+        onClick={handleAddToCart}
+        disabled={
+          isDisabled || !(selectedColor && selectedSize) || maxQuantity === 0
+        }
+      >
+        ADD TO CART
+      </Button>
+      <Button
+        bg="red.600"
+        _hover={{ bg: "red.500" }}
+        flex={1}
+        borderRadius={0}
+        onClick={handleBuyNow}
+        disabled={
+          isDisabled || !(selectedColor && selectedSize) || maxQuantity === 0
+        }
+      >
+        BUY NOW
+      </Button>
+    </Flex>
+  );
+
+  const renderMerchDetails = () => {
+    return (
+      <Grid templateColumns={{ base: "repeat(1, 1fr)", md: "repeat(5, 1fr)" }}>
+        <GridItem colSpan={2} px={[0, 4]}>
+          <MerchCarousel images={product?.images ?? []} />
+        </GridItem>
+        <GridItem colSpan={3} px={[0, 4]}>
+          {ProductNameSection}
+          <Divider mt={4} mb={6} />
+          {renderSizeSection}
+          {renderColorSection}
+          {renderQuantitySection}
+          <Divider my={6} />
+          {purchaseButtons}
+          <Divider my={6} />
+          {/* {renderDescription} */}
+        </GridItem>
+        <SizeChartDialog
+          sizeChart={product?.size_chart}
+          onClose={onClose}
+          isOpen={isOpen}
+        />
+      </Grid>
+    );
+  };
+
+  const renderMerchPage = () => {
+    if (isLoading) return <MerchDetailSkeleton />;
+    if (product === undefined || product === null) return <EmptyProductView />;
+    return renderMerchDetails();
+  };
+
+  return <Page>{renderMerchPage()}</Page>;
+};
+
+export default MerchDetail;
+
+export const getStaticProps: GetStaticProps<{
+  slug: string;
+  product: Product | undefined;
+}> = async ({ params }) => {
+  console.log("generating static props for /merch/product/[slug]");
+  console.log("params", JSON.stringify(params));
+
+  // TODO: replace this with trpc/react-query call
+  if (!process.env.NEXT_PUBLIC_MERCH_API_ORIGIN) {
+    throw new Error("NEXT_PUBLIC_MERCH_API_ORIGIN is not defined");
+  }
+  const res = await fetch(
+    `${
+      process.env.NEXT_PUBLIC_MERCH_API_ORIGIN
+    }/trpc/getProduct?batch=1&input=${encodeURIComponent(
+      JSON.stringify({ "0": { id: params?.slug } })
+    )}`
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  const product = (await res.json())[0].result.data as Product;
+
+  return {
+    props: {
+      slug: params?.slug as string,
+      product: product,
+    },
+  };
+};
+
+// eslint-disable-next-line @typescript-eslint/require-await
+export const getStaticPaths: GetStaticPaths = async () => {
+  console.log("generating static paths for /merch/product/[slug]");
+
+  // TODO: replace this with trpc/react-query call
+  if (!process.env.NEXT_PUBLIC_MERCH_API_ORIGIN) {
+    throw new Error("NEXT_PUBLIC_MERCH_API_ORIGIN is not defined");
+  }
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_MERCH_API_ORIGIN}/trpc/getProducts`
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  const products = (await res.json()).result.data.products as Product[];
+
+  return {
+    paths: products.map((product) => ({
+      params: {
+        slug: product.id,
+      },
+    })),
+    // https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-blocking
+    fallback: "blocking",
+  };
+};