I modified the creator's page by adding borders and adjusting the width of the center column. I also added a button to the message.

src/views/creators/CreatorPage.vue

@@ -9,13 +9,7 @@
     
     <div class="w-full mt-20">
 
-      <v-tabs
+   
-          v-model="tab"
-          bg-color="primary"
-      >
-        <v-tab value="content">Contenu</v-tab>
-        <v-tab value="community">Communauté</v-tab>
-      </v-tabs>
 
       <v-card-text>
         <v-tabs-window v-model="tab">

src/views/messages/Message.vue

@@ -1,9 +1,6 @@
 <template>
-
   <div class="flex flex-column">
-
+    <div class="flex flex-row p-1 items-center">
-    <div class="flex flex-row p-1">
-
       <div class="px-2 content-center">
         <img :src="message.portrait"
              alt="Profile Image"
@@ -12,54 +9,68 @@
              height="32px">
       </div>
 
-      <div class="p-2">
+      <div class="p-2 flex-1">
-
+        <div class="flex justify-between items-center">
           <div>
-          <span class="font-semibold font-sans mr-2">{{ message.created_by }}</span>
+            <span class="font-semibold font-sans mr-2">{{ message.createdBy }}</span>
             <span class="text-sm font-sans text-gray-700">il y a 3 heures</span>
           </div>
+          <v-menu :location="location">
+            <template v-slot:activator="{ props }">
+              <v-btn variant="plain" icon v-bind="props">
+                <v-icon>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item @click="editMessage(message)">
+                <v-list-item-title>Edit</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="deleteMessage(message)">
+                <v-list-item-title>Delete</v-list-item-title>
+              </v-list-item>
+              <v-list-item @click="reportMessage(message)">
+                <v-list-item-title>Report</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
 
         <div class="font-sans">
           {{ message.value }}
         </div>
-
-        <div class="flex px-4">
-
-          <div>
-            <v-icon>mdi-thumb-up-outline</v-icon>
-            {{ message.thumb_up_count }}
-          </div>
-
-          <div>
-            <v-icon>mdi-thumb-down-outline</v-icon>
-            {{ message.thumb_down_count }}
-          </div>
-
-          <div>
-            <v-btn variant="flat">Reply</v-btn>
       </div>
     </div>   
-
   </div>
-
-    </div>
-
-  </div>
-
 </template>
 
-<script setup>
+<script>
-
+export default {
-import {defineProps} from 'vue';
+  props: {
-
-defineProps({
     message: {
       type: Object,
       required: true
     }
-});
+  },
-
+  methods: {
+    editMessage(message) {
+      // Logic for editing the message
+      console.log('Edit message', message);
+    },
+    deleteMessage(message) {
+      // Logic for deleting the message
+      console.log('Delete message', message);
+    },
+    reportMessage(message) {
+      // Logic for reporting the message
+      console.log('Report message', message);
+    }
+  }
+}
 </script>
 
-
+<style scoped>
-
+.content-center {
+  display: flex;
+  align-items: center;
+}
+</style>