diff --git a/public/merch/crewneck.png b/public/merch/crewneck.png
new file mode 100644
index 0000000..344fbfe
Binary files /dev/null and b/public/merch/crewneck.png differ
diff --git a/public/merch/keychains.png b/public/merch/keychains.png
new file mode 100644
index 0000000..e88dc30
Binary files /dev/null and b/public/merch/keychains.png differ
diff --git a/public/merch/lanyard.png b/public/merch/lanyard.png
new file mode 100644
index 0000000..64c28dd
Binary files /dev/null and b/public/merch/lanyard.png differ
diff --git a/public/merch/stickers.png b/public/merch/stickers.png
new file mode 100644
index 0000000..af63c75
Binary files /dev/null and b/public/merch/stickers.png differ
diff --git a/public/merch/t-shirt1.png b/public/merch/t-shirt1.png
new file mode 100644
index 0000000..6396a58
Binary files /dev/null and b/public/merch/t-shirt1.png differ
diff --git a/public/merch/t-shirt2.png b/public/merch/t-shirt2.png
new file mode 100644
index 0000000..af6102f
Binary files /dev/null and b/public/merch/t-shirt2.png differ
diff --git a/public/merch/tote.png b/public/merch/tote.png
new file mode 100644
index 0000000..6adc53d
Binary files /dev/null and b/public/merch/tote.png differ
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 5b2ffdc..c47a863 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -51,15 +51,8 @@ const Footer = () => {
                                 Wall of Fame
                             </Link>
                             <Link
-                                href={""}
-                                onClick={() => {
-                                    disabled && notifications.show({
-                                        title: 'Coming soon~',
-                                        message: '',
-                                        color: "red"
-                                    })
-                                }}
-                                className={` transition-colors duration-300 ease-out ${disabled ? "opacity-50" : "hover:text-aqua-2"}`}
+                                href={"/merchandise"}
+                                className={`transition-colors duration-300 ease-out hover:text-aqua-2`}
                             >
                                 Merchandise
                             </Link>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 0b1111a..1e95adf 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -76,7 +76,7 @@ const Navbar = () => {
                     <HiUserGroup />
                     <span className='text-white'>Wall of Fame</span>
                 </NavLink>
-                <NavLink href='' isActive={router.pathname === "/merchandise"} disabled>
+                <NavLink href='/merchandise' isActive={router.pathname === "/merchandise"} disabled={false}>
                     <HiShoppingBag />
                     <span className='text-white'>Merchandise</span>
                 </NavLink>
diff --git a/src/pages/merchandise.tsx b/src/pages/merchandise.tsx
index 8537dc6..24f5eb4 100644
--- a/src/pages/merchandise.tsx
+++ b/src/pages/merchandise.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@/components/elements/Button";
 import Image from "next/image"
 
 interface CardProps {
@@ -9,12 +10,18 @@ interface CardProps {
 
 function Card(props: CardProps) {
   return (
-    <div className="border-screaminGreen-4 border-2 border-solid p-8 rounded-lg text-left flex flex-col gap-4 items-start">
-      <Image src={props.src} width={128} height={256} alt="" />
-      <p className="text-white-1 px-3 text-sm py-1 rounded-full border-screaminGreen-2 border-2 border-solid">{props.preorder}</p>
-      <p className="text-white-1">{props.name}</p>
-      <p className="bg-shimmerGreen bg-clip-text text-transparent font-bold">{props.price}</p>
-    </div>
+    <a
+      href={'https://docs.google.com/forms/d/e/1FAIpQLSfCvs1slkswhpjx26kiBpDF8I713zIpIDGXzi6SKuReyeQ7lQ/viewform'}
+      target="__blank"
+      rel="noreferrer" 
+    >
+      <div className="transition-all duration-200 hover:scale-105 active:scale-100 active:opacity-30 border-screaminGreen-4 border-2 border-solid p-8 rounded-lg text-left flex flex-col gap-4 items-start">
+        <Image className="bg-zinc-500 rounded-xl bg-opacity-30 mx-auto object-contain" src={props.src} width={256} height={256} alt="" />
+          <p className="text-white-1 px-3 text-sm py-1 rounded-full border-screaminGreen-2 border-2 border-solid">Preorder Now!</p>
+        <p className="text-white-1">{props.name}</p>
+        <p className="bg-shimmerGreen bg-clip-text text-transparent font-bold">{props.price}</p>
+      </div>
+    </a>
   )
 }
 
@@ -28,13 +35,13 @@ export default function Merch() {
       <h1 className="px-5 text-3xl sm:text-5xl mb-10 bg-shimmerGreen bg-clip-text text-transparent">Exclusive Preorders!</h1>
       <div className="bg-[url(/merch/bg-merch-mobile.png)] sm:bg-[url(/merch/bg-merch-desktop.png)] bg-cover bg-center min-h-screen" />
       <div className="flex justify-center px-10 gap-10 flex-wrap">
-        <Card name="Kaos OH Jaya Jaya" preorder="Preorder X hari" price="$10" src="logo.png" />
-        <Card name="Kaos OH Jaya Jaya" preorder="Preorder X hari" price="$10" src="logo.png" />
-        <Card name="Kaos OH Jaya Jaya" preorder="Preorder X hari" price="$10" src="logo.png" />
-        <Card name="Kaos OH Jaya Jaya" preorder="Preorder X hari" price="$10" src="logo.png" />
-        <Card name="Kaos OH Jaya Jaya" preorder="Preorder X hari" price="$10" src="logo.png" />
-        <Card name="Kaos OH Jaya Jaya" preorder="Preorder X hari" price="$10" src="logo.png" />
-        <Card name="Kaos OH Jaya Jaya" preorder="Preorder X hari" price="$10" src="logo.png" />
+        <Card name="T-SHIRT CSUI" preorder="PREORDER NOW!" price="Rp90.000" src="/merch/t-shirt1.png" />
+        <Card name="T-SHIRT OH FASILKOM" preorder="PREORDER NOW!" price="Rp85.000" src="/merch/t-shirt2.png" />
+        <Card name="CREWNECK" preorder="PREORDER NOW!" price="Rp160.000" src="/merch/crewneck.png" />
+        <Card name="TOTEBAG" preorder="PREORDER NOW!" price="Rp45.000" src="/merch/tote.png" />
+        <Card name="LANYARD" preorder="PREORDER NOW!" price="Rp20.000" src="/merch/lanyard.png" />
+        <Card name="STICKER" preorder="PREORDER NOW!" price="Rp7.000" src="/merch/stickers.png" />
+        <Card name="KEYCHAIN" preorder="PREORDER NOW!" price="Rp15.000" src="/merch/keychains.png" />
       </div>
       <div className="bg-[url(/merch/bg-bottom-merch.png)] bg-center bg-no-repeat min-h-screen" />
     </div>