diff --git a/api/merch/buy.php b/api/merch/buy.php
new file mode 100644
index 0000000000000000000000000000000000000000..28d1bf61be72b75ee8cdaac667d5cb1d61c6e57b
--- /dev/null
+++ b/api/merch/buy.php
@@ -0,0 +1,37 @@
+<?php
+function buyItem($merchId, $userId)
+{
+    // rest buy merchandise
+    $ch = curl_init();
+    // curl_setopt($ch, CURLOPT_URL, "http://express:5000/merch/buy/" . $merchId);
+    curl_setopt($ch, CURLOPT_URL, "http://192.168.0.11:5000/merch/buy/" . $merchId);
+    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+    curl_setopt($ch, CURLOPT_POST, 1);
+    curl_setopt(
+        $ch,
+        CURLOPT_POSTFIELDS,
+        json_encode(
+            array(
+                "user_id" => (int)$userId
+            )
+        )
+    );
+    curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
+    $response = curl_exec($ch);
+    var_dump($response);
+
+    if ($response === false) {
+        echo 'Error: ' . curl_error($ch);
+    } else {
+        $data = json_decode($response, true);
+    }
+}
+
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['buyMerch'])) {
+    $merchId = $_POST['merchId'];
+    $userId = $_POST['userId'];
+
+    buyItem($merchId, $userId);
+}
+?>
\ No newline at end of file
diff --git a/app/controllers/Merchandise.php b/app/controllers/Merchandise.php
index dcf2dbc4426797fdb621b2d8eee2aa58ca07acf6..a8cca195f497027b0488c2f2fa6f8ef73a141786 100644
--- a/app/controllers/Merchandise.php
+++ b/app/controllers/Merchandise.php
@@ -9,6 +9,7 @@ class Merchandise extends Controller
         $data["pageTitle"] = "Merch!";
         $data["user_id"] = $_SESSION['user_id'];
 
+        // user's gems
         $baseUrl = 'http://soap:8080/service/gems';
 
         $soapRequest = '<x:Envelope
@@ -44,13 +45,23 @@ class Merchandise extends Controller
 
         curl_close($ch);
         $data['gems'] = $response;
-        
+
         if (preg_match('/<return>(\d+)<\/return>/', $response, $matches)) {
-            $data['gems'] = (int)$matches[1];
+            $data['gems'] = (int) $matches[1];
         } else {
             echo 'Error extracting numeric value from XML response.';
         }
 
+        // merch
+        // $baseUrl = 'http://express:5000/merch';
+        $baseUrl = 'http://192.168.0.11:5000/merch';
+        $ch = curl_init($baseUrl);
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+        $response = curl_exec($ch);
+        $merch = json_decode($response, true);
+
+        $data["merch"] = $merch['result'];
+
         $this->view('header/index', $data);
         $this->view('navbar/index');
         $this->view('merchandise/index', $data);
diff --git a/app/views/merchandise/index.php b/app/views/merchandise/index.php
index b3d5031d1f3628e92f5e5a1bc60e95839ebbd992..5c14fd09ce36fcf185bf8d62bde4abc202c64af3 100644
--- a/app/views/merchandise/index.php
+++ b/app/views/merchandise/index.php
@@ -1,3 +1,39 @@
 <?php
-echo $data['gems'];
-?>
\ No newline at end of file
+?>
+
+<div class="merch">
+    <div class="container merch-container">
+        <h1 class="font-bold text-xl text-blue-purple-gradient">
+            Merchandise
+        </h1>
+        <div>
+            <?= $data['gems'] ?>
+        </div>
+        <div>
+            <? foreach ($data['merch'] as $merch): ?>
+                <div>
+                    <div>
+                        <!-- <img src="http://express:5000/image/?filename=<?= $merch['image'] ?>" alt=""> -->
+                        <img src="http://192.168.0.11:5000/image/?filename=<?= $merch['image'] ?>" alt="">
+                    </div>
+                    <div>
+                        <?= $merch['name'] ?>
+                    </div>
+                    <div>
+                        <?= $merch['price'] ?>
+                    </div>
+                    <div>
+                        <?= $merch['desc'] ?>
+                    </div>
+                    <div>
+                        <form action="../../../api/merch/buy.php" method="post">
+                            <input type="hidden" name="merchId" value="<?= $merch['merchandise_id'] ?>">
+                            <input type="hidden" name="userId" value="<?= $data['user_id'] ?>">
+                            <button type="submit" name="buyMerch">Buy</button>
+                        </form>
+                    </div>
+                </div>
+            <? endforeach; ?>
+        </div>
+    </div>
+</div>
\ No newline at end of file