diff --git a/.env.xmpl b/.env.xmpl
new file mode 100644
index 0000000000000000000000000000000000000000..98cdc4aa23625799fa2ccad2af40799efeec5637
--- /dev/null
+++ b/.env.xmpl
@@ -0,0 +1,3 @@
+DB_USER="postgres"
+DB_PASSWORD="toco"
+DB="toco"
\ No newline at end of file
diff --git a/api/exercise/submit.php b/api/exercise/submit.php
index 4c8828ee9d3fa5c6bd6e324cc8f60293d3f5c462..12955ba72df71d091931d24abdd820aefec13288 100644
--- a/api/exercise/submit.php
+++ b/api/exercise/submit.php
@@ -1,5 +1,5 @@
 <?php
-function submitQuiz($exerciseId, $selectedOptions, $userId, $isDone)
+function submitQuiz($exerciseId, $exerciseName, $selectedOptions, $userId, $isDone)
 {
     // rest submit exercise
     $pairs = array();
@@ -87,6 +87,7 @@ function submitQuiz($exerciseId, $selectedOptions, $userId, $isDone)
                             <ser:addGems>
                                 <user_id>' . $userId . '</user_id>
                                 <gem>' . $score . '</gem>
+                                <type> Gems Recieved from ' . $exerciseName . ' Exercise</type>
                             </ser:addGems>
                         </x:Body>
                     </x:Envelope>';
@@ -119,12 +120,13 @@ function submitQuiz($exerciseId, $selectedOptions, $userId, $isDone)
 
 if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submitQuiz'])) {
     $exerciseId = $_POST['exerciseId'];
+    $exerciseName = $_POST['exerciseName'];
     $userId = $_POST['userId'];
     $isDone = $_POST['isDone'];
     $selectedOptions = isset($_POST['selectedOptions']) ? $_POST['selectedOptions'] : [];
 
-    $score = submitQuiz($exerciseId, $selectedOptions, $userId, $isDone);
+    $score = submitQuiz($exerciseId, $exerciseName, $selectedOptions, $userId, $isDone);
 
-    header('Location: ../../exercise/result/' . $exerciseId . '?score=' . $score . '&isDone=' . $isDone);
+    header('Location: ../../exercise/result/' . $exerciseId . '?name=' . $exerciseName . '&score=' . $score . '&isDone=' . $isDone);
 }
 ?>
\ No newline at end of file
diff --git a/app/controllers/Merchandise.php b/app/controllers/Merchandise.php
index bbc1b0db159bed2955a017473ee6494f2655b4ec..b653e7908ce145412bcc80339d9b1ac763a72cfc 100644
--- a/app/controllers/Merchandise.php
+++ b/app/controllers/Merchandise.php
@@ -39,18 +39,17 @@ class Merchandise extends Controller
         );
 
         $response = curl_exec($ch);
+        $data['gems'] = $response;
 
         if (curl_errno($ch)) {
-            echo 'Curl error: ' . curl_error($ch);
+            $data['gems'] = "-1";
         }
 
         curl_close($ch);
-        $data['gems'] = $response;
 
         if (preg_match('/<return>(\d+)<\/return>/', $response, $matches)) {
             $data['gems'] = (int) $matches[1];
         } else {
-            echo 'Error extracting numeric value from XML response.';
         }
 
         // merch
@@ -61,7 +60,7 @@ class Merchandise extends Controller
         $response = curl_exec($ch);
         $merch = json_decode($response, true);
 
-        $data["merch"] = $merch['result'];
+        $data["merch"] = $merch['result'] ?? [];
 
         $this->view('header/index', $data);
         $this->view('navbar/index');
diff --git a/app/controllers/Transaction.php b/app/controllers/Transaction.php
index 49ba7781eafe11aeeb92efc4598a9f3c57edb6a6..71d558edccf0a9f7cd6920de4226b3bdc2006291 100644
--- a/app/controllers/Transaction.php
+++ b/app/controllers/Transaction.php
@@ -54,7 +54,8 @@ class Transaction extends Controller
             $transaction = [
                 'amount' => intval($components[0]),
                 'action' => $components[1],
-                'status' => $components[2]
+                'status' => $components[2],
+                'created_at' => $components[3]
             ];
             $data['transaction'][] = $transaction;
         }
diff --git a/app/views/header/index.php b/app/views/header/index.php
index 7615531bf570e1acd3fb0e72e034a8281ddad95f..5121dfe8e88bd5b042cf3482f3d5372b56d0da88 100644
--- a/app/views/header/index.php
+++ b/app/views/header/index.php
@@ -31,5 +31,6 @@
     <link rel="stylesheet" href="/public/css/exercise.css">
     <link rel="stylesheet" href="/public/css/question.css">
     <link rel="stylesheet" href="/public/css/merchandise.css">
+    <link rel="stylesheet" href="/public/css/transaction.css">
   </head>
   <body>
\ No newline at end of file
diff --git a/app/views/question/index.php b/app/views/question/index.php
index c079d5926453735d4b5899e77ef93f236f60916c..ba9dcfb8a9869fa99fc3aa22d10625fd9890cecb 100644
--- a/app/views/question/index.php
+++ b/app/views/question/index.php
@@ -34,6 +34,7 @@
                 <?php endforeach; ?>
                 <div class="" id="hidden"></div>
                 <input type="hidden" name="exerciseId" value="<?= $data['currentExercise']['exercise_id'] ?>">
+                <input type="hidden" name="exerciseName" value="<?= $data['currentExercise']['exe_name'] ?>">
                 <input type="hidden" name="userId" value="<?= $data["user_id"] ?>">
                 <input type="hidden" name="isDone" value="<?= $data["isDone"] ?>">
                 <div class="button-container">
diff --git a/app/views/transaction/index.php b/app/views/transaction/index.php
index cca13b6e0f424395aee6f02b9096b17d1addd2a0..5f2a4b31691759d3fb5b0397f1090570f6c33a46 100644
--- a/app/views/transaction/index.php
+++ b/app/views/transaction/index.php
@@ -13,15 +13,45 @@
           <div class="transaction-head">
             <div class="content">
               <h2 class="font-bold text-md">
-                <?= $transaction['amount'] ?>
+                <?= $transaction['action'] ?>
               </h2>
-              <span class="font-reg text-xs">
-                <?= $transaction['action'] ?> &#9679;
-                <?= $transaction['status'] ?>
-              </span>
+              <? if (explode(' ', $transaction['action'])[0] == 'Buy'): ?>
+                <h3 class="font-bold amount-text-buy">
+                  -
+                  <?= $transaction['amount'] ?> Gems
+                </h3>
+              <? else: ?>
+                <h3 class="font-bold amount-text-get">
+                  +
+                  <?= $transaction['amount'] ?> Gems
+                </h3>
+              <? endif; ?>
+              <div class="font-reg datetime-text">
+                Date: <?=(explode(' ', $transaction['created_at'])[0])?>
+              </div>
+              <div class="font-reg datetime-text">
+                Time: <?=(explode(' ', $transaction['created_at'])[1])?>
+              </div>
+              <? if ($transaction['status'] == 'ACCEPTED'): ?>
+                <h3 class="font-reg status-text-green">
+                  <?= $transaction['status'] ?>
+                </h3>
+              <? else: ?>
+                <h3 class="font-reg status-text-red">
+                  <?= $transaction['status'] ?>
+                </h3>
+              <? endif; ?>
             </div>
+            <span class="font-reg text-xs">
+              <? if (explode(' ', $transaction['action'])[0] == 'Buy'): ?>
+                <img src="/assets/images/gem.svg" alt="merch" class="merch-icon">
+              <? else: ?>
+                <img src="/assets/images/gem.svg" alt="gem" class="gem-icon">
+              <? endif; ?>
+            </span>
           </div>
         </div>
       <?php endforeach; ?>
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/public/css/exercise.css b/public/css/exercise.css
index 67b3af5e1e644802cb4a6bf4cd819a52fa29c9f4..c9405424a4375ff4a43279b3fe6fd10c49bd2ad9 100644
--- a/public/css/exercise.css
+++ b/public/css/exercise.css
@@ -4,7 +4,7 @@
     width: 100%;
     padding-top: 120px;
     display: flex;
-    align-items: center;
+    /* align-items: center; */
     justify-content: center;
     padding-bottom: 60px;
     min-height: 100vh;
@@ -128,66 +128,12 @@
     display: inline;
   }
   
-  /* === VIDEO CARD === */
-  
-  .exercise .exercise-container .card-container .exercise-card .video-card-container {
-    display: none;
-  }
-  
-  .exercise .exercise-container .card-container .exercise-card.active .video-card-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    width: 100%;
-    margin-top: 20px;
-    cursor: default;
-  }
-  
-  .exercise .exercise-container .card-container .exercise-card.active .video-card-container .video-card {
-    padding: 10px 16px;
-    width: 100%;
-    border-radius: 10px;
-    background-color: var(--white);
-  
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  
-  .exercise .exercise-container .card-container .exercise-card.active .video-card-container .video-card .content {
-    display: flex;
-    flex-direction: column;
-    gap: -5px;
-  }
-  
-  .exercise .exercise-container .card-container .exercise-card.active .video-card-container .video-card .content h3 {
-    color: var(--orange);
-  }
-  
-  .exercise .exercise-container .card-container .exercise-card.active .video-card-container .video-card .content span {
-    color: var(--grey);
-  }
-  
-  .exercise .exercise-container .card-container .exercise-card.active .video-card-container .video-card .watch-btn {
-    padding: 8px 16px;
-    border: 2px solid var(--orange);
-    background-color: var(--white);
-    border-radius: 50px;
-    color: var(--orange);
-  }
-  
-  .exercise .exercise-container .card-container .exercise-card.active .video-card-container .video-card .watch-btn:hover {
-    background-color: var(--orange);
-    color: var(--white);
-  }
-  
   /* ===#===#===#===#===#=== Laptop ===#===#===#===#===#=== */
   
   @media (min-width: 1024px) {
     
     .exercise {
-      padding-top: 180px;
+      padding-top: 120px;
       padding-bottom: 120px;
     }
     
@@ -204,10 +150,6 @@
   
   @media (min-width: 1440px) {
   
-    .exercise .exercise-container .input-container .search-bar {
-      max-width: 800px;
-    }
-  
     .exercise .exercise-container .card-container {
       max-width: 1000px;
     }
diff --git a/public/css/transaction.css b/public/css/transaction.css
new file mode 100644
index 0000000000000000000000000000000000000000..00e74cdfbd00632dccc8f1fa1e3a44a714730bed
--- /dev/null
+++ b/public/css/transaction.css
@@ -0,0 +1,119 @@
+.transaction {
+    width: 100%;
+    padding-top: 120px;
+    display: flex;
+    /* align-items: center; */
+    justify-content: center;
+    padding-bottom: 60px;
+    min-height: 100vh;
+}
+
+.transaction .transaction-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 50px;
+}
+
+.transaction .transaction-container h1 {
+    text-align: center;
+}
+
+.transaction .transaction-container .card-container {
+    display: flex;
+    max-width: 600px;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+}
+
+.transaction .transaction-container .card-container .transaction-card {
+    border: 2px solid var(--orange);
+    padding: 10px 16px 16px 16px;
+    width: 100%;
+    border-radius: 10px;
+    background-color: var(--white);
+    transition: all 0.15s ease-in-out;
+}
+
+.transaction .transaction-container .card-container .transaction-card:hover {
+    background-color: #F5F5F5;
+}
+
+.transaction .transaction-container .card-container .transaction-card.active {
+    background-color: var(--orange);
+}
+
+.transaction .transaction-container .card-container .transaction-card .transaction-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.transaction .transaction-container .card-container .transaction-card .transaction-head .content {
+    display: flex;
+    flex-direction: column;
+    gap: -5px;
+}
+
+.transaction .transaction-container .card-container .transaction-card .transaction-head .content h2 {
+    color: var(--orange);
+}
+
+.transaction .transaction-container .card-container .transaction-card .transaction-head .content span {
+    color: var(--grey);
+}
+
+.transaction .transaction-container .card-container .transaction-card.active .transaction-head .content h2,
+.transaction .transaction-container .card-container .transaction-card.active .transaction-head .content span {
+    color: var(--white);
+}
+
+.amount-text-get {
+    color: #2AAA8A;
+    margin-bottom: 20px;
+}
+
+.amount-text-buy {
+    color: var(--red);
+    margin-bottom: 20px;
+}
+
+.datetime-text {
+    color: var(--grey);
+}
+
+.status-text-green {
+    margin-top: 15px;
+    color: #2AAA8A;
+}
+
+.status-text-red {
+    margin-top: 15px;
+    color: var(--red);
+}
+
+/* ===#===#===#===#===#=== Laptop ===#===#===#===#===#=== */
+
+@media (min-width: 1024px) {
+
+    .transaction {
+        padding-top: 120px;
+        padding-bottom: 120px;
+    }
+
+    .transaction .transaction-container {
+        gap: 50px;
+    }
+}
+
+/* ===#===#===#===#===#=== Desktop ===#===#===#===#===#=== */
+
+@media (min-width: 1440px) {
+
+    .transaction .transaction-container .card-container {
+        max-width: 1000px;
+    }
+
+}
\ No newline at end of file