diff --git a/17th Website/src/components/ProfilePage/activityCard.vue b/17th Website/src/components/ProfilePage/activityCard.vue
index f51aa08..ed6179c 100644
--- a/17th Website/src/components/ProfilePage/activityCard.vue	
+++ b/17th Website/src/components/ProfilePage/activityCard.vue	
@@ -1,15 +1,20 @@
 <script setup>
+import { ref } from 'vue';
+const props = defineProps(['Activity']);
 
-const props = defineProps(['Title']);
-
-console.log(props.Title)
+console.log(props.Activity);
 </script>
 
 <template>
 
-<div class="border-2 border-white rounded-xl p-2 px-4">
-    <h2>hello</h2>
-    <p>date</p>
-</div>
+    <div class="border-2 border-white rounded-xl p-2 px-4 w-full m-2">
+        <div class="flex flex-row mt-2 pb-2">
+            <h2 v-if="props.Activity.Type == 0" class="bg-green-600 font-bold px-4 rounded-md mr-4">Attended</h2>
+            <h2 v-else-if="props.Activity.Type == 1" class="bg-yellow-400 font-bold px-4 rounded-md mr-4">Promotion</h2>
+            <h2 v-else="props.Activity.Type == 2" class="bg-cyan-500 font-bold px-4 rounded-md mr-4">Achived</h2>
+            <h2>{{props.Activity.EventName}}</h2>
+        </div>
+        <p class="text-white">{{props.Activity.EventDate}}</p>
+    </div>
 
 </template>
\ No newline at end of file