diff --git a/api/challenge/challenge.php b/api/challenge/challenge.php
index 0dd3601e710579a847fd10a8a6b0d153c82a2a5e..a3ef75311046342d3bde4df8f34a924852351fe2 100644
--- a/api/challenge/challenge.php
+++ b/api/challenge/challenge.php
@@ -77,15 +77,15 @@ foreach ($customers as $item) {
     $achievementList .= '<td>'.$item["threshold"].'</td>   ';
     $achievementList .= '<td>';
     if ($claimStatus){
-        $achievementList .= '<button id="cobtain" onclick=#>Obtained </button>';
+        $achievementList .= '<button id="obtain" class="obtain">Obtained </button>';
     } else {
-        $achievementList .= '<button id="obtain-not" onclick=#>Unobtained </button>';
+        $achievementList .= '<button id="obtain-not" class="obtain-not">Unobtained </button>';
     }
     $achievementList .= '</td><td>';
     if (!$claimStatus){
-        $achievementList .= '<button id="claim" onclick=claimFunction(' .$user_id. ',' .$item["id"]. ')>Claim</button>';
+        $achievementList .= '<button id="claim" class="claim" onclick=claimFunction(' .$user_id. ',' .$item["id"]. ')>Claim</button>';
     } else {
-        $achievementList .= '<button id="claim-not" onclick=unclaimFunction(' .$user_id. ',' .$item["id"]. ')>Unclaim</button>';
+        $achievementList .= '<button id="claim-not" class="claim-not" onclick=unclaimFunction(' .$user_id. ',' .$item["id"]. ')>Unclaim</button>';
     }
     $achievementList .= '</td></tr>';   
 }
diff --git a/public/css/challenge.css b/public/css/challenge.css
new file mode 100644
index 0000000000000000000000000000000000000000..e8fa713a7f36f64576d5743a93be08f2e587bc94
--- /dev/null
+++ b/public/css/challenge.css
@@ -0,0 +1,7 @@
+.obtain {
+    background-color: rgb(0, 255, 0);
+}
+
+.obtain-not {
+    background-color: rgb(255, 0, 0);
+}
\ No newline at end of file