diff --git a/apps/web/features/merch/constants/index.tsx b/apps/web/features/merch/constants/index.tsx
new file mode 100644
index 00000000..2f581e88
--- /dev/null
+++ b/apps/web/features/merch/constants/index.tsx
@@ -0,0 +1,2 @@
+export * from "./queryKeys"
+export * from "./routes"
\ No newline at end of file
diff --git a/apps/web/features/merch/functions/index.tsx b/apps/web/features/merch/functions/index.tsx
new file mode 100644
index 00000000..317c01db
--- /dev/null
+++ b/apps/web/features/merch/functions/index.tsx
@@ -0,0 +1,3 @@
+export * from "./cart"
+export * from "./currency"
+export * from "./stock"
diff --git a/apps/web/pages/merch/index.tsx b/apps/web/pages/merch/index.tsx
index e584c61d..a4e34b33 100644
--- a/apps/web/pages/merch/index.tsx
+++ b/apps/web/pages/merch/index.tsx
@@ -1,12 +1,11 @@
 import React, { useState } from "react";
 import { Flex, Divider, Select, Heading, Grid } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
-import { Card, Page } from "ui/components/merch";
-import { QueryKeys } from "features/merch/constants/queryKeys";
+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/lib/merch";
-import { MerchListSkeleton } from "ui/components/merch/skeleton";
-import { isOutOfStock } from "features/merch/functions/stock";
+import { isOutOfStock } from "features/merch/functions";
 
 const MerchandiseList = () => {
   const [selectedCategory, setSelectedCategory] = useState<string>("");
diff --git a/apps/web/pages/merch/product/[slug].tsx b/apps/web/pages/merch/product/[slug].tsx
index 97461e88..01cb6525 100644
--- a/apps/web/pages/merch/product/[slug].tsx
+++ b/apps/web/pages/merch/product/[slug].tsx
@@ -29,19 +29,20 @@ import {
   useCartStore,
 } from "features/merch/context/cart";
 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 { routes, QueryKeys } from "features/merch/constants";
 import {
+  displayPrice,
+  displayQtyInCart,
   displayStock,
   getDefaultColor,
   getDefaultSize,
+  getQtyInCart,
   getQtyInStock,
   isColorAvailable,
   isOutOfStock,
   isSizeAvailable,
-} from "features/merch/functions/stock";
-import { displayQtyInCart, getQtyInCart } from "features/merch/functions/cart";
+} from "features/merch/functions";
+
 
 const GroupTitle = ({ children }: any) => (
   <Heading fontSize="md" mb={2} color="grey" textTransform="uppercase">
diff --git a/packages/ui/components/merch/Card.tsx b/packages/ui/components/merch/Card.tsx
index a2675a34..610e7032 100644
--- a/packages/ui/components/merch/Card.tsx
+++ b/packages/ui/components/merch/Card.tsx
@@ -1,8 +1,8 @@
 import { ArrowForwardIcon } from "@chakra-ui/icons";
 import { Box, Image, Text, GridItem, Flex, Badge, Center } from "@chakra-ui/react";
 import Link from "next/link";
-import { displayPrice } from "web/features/merch/functions/currency";
-import { routes } from "web/features/merch/constants/routes"
+import { displayPrice } from "web/features/merch/functions";
+import { routes } from "web/features/merch/constants"
 
 type CardProps = {
   _productId: string;
diff --git a/packages/ui/components/merch/CartHeader.tsx b/packages/ui/components/merch/CartHeader.tsx
new file mode 100644
index 00000000..24801557
--- /dev/null
+++ b/packages/ui/components/merch/CartHeader.tsx
@@ -0,0 +1,45 @@
+import {
+  Box,
+  Flex,
+  HStack,
+  Spacer,
+  Show,
+  Hide,
+  Icon,
+} from "@chakra-ui/react";
+import Link from 'next/link';
+import { routes } from "web/features/merch/constants";
+
+
+export const CartHeader = () => {
+  return (
+    <Flex pos="sticky" zIndex={2} bg="#0e2b50" top={0} py={4} px={{ base: 4, md: 4, lg: 16 }} align="center">
+      <Spacer />
+      <Show below="xl">
+        <Link href={routes.CART}>
+          <Flex alignItems="center" gap={1} mr={4}>
+            <Icon viewBox="0 0 24 24" boxSize={5}>
+              <path fill="none" stroke-width="1.5" stroke="white"
+              d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+            </Icon>
+          </Flex>
+        </Link>
+      </Show>
+      <Hide below="xl">
+        <HStack spacing={5} alignItems="center">
+          <Link href={routes.CART}>
+            <Box px={2} py={1} borderRadius={7}
+            _hover={{ bg: "#426899", transition: "0.5s", color: "white" }}>
+              <Flex alignItems="center" gap={1}>
+              <Icon viewBox="0 0 24 24" boxSize={8}>
+                <path fill="none" stroke-width="1.5" stroke="white"
+                d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+              </Icon>
+              </Flex>
+            </Box>
+          </Link>
+        </HStack>
+      </Hide>
+    </Flex>
+  );
+};
\ No newline at end of file
diff --git a/packages/ui/components/merch/EmptyProductView.tsx b/packages/ui/components/merch/EmptyProductView.tsx
index 259842b2..1536450d 100644
--- a/packages/ui/components/merch/EmptyProductView.tsx
+++ b/packages/ui/components/merch/EmptyProductView.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { Center, Flex, Heading, Spinner, Text } from "@chakra-ui/react";
-import routes from "../../../../apps/web/features/merch/constants/routes";
+import { routes } from "web/features/merch/constants";
 
 export const EmptyProductView: React.FC = () => {
   useEffect(() => {