diff --git a/frontend/src/components/CustomListElement.vue b/frontend/src/components/CustomListElement.vue
index b6646196d6d56f63cfa6fcdbab9dd54570b4d3f2..b955b5675d79db799ebee604daf8a5bfd1d8cb32 100644
--- a/frontend/src/components/CustomListElement.vue
+++ b/frontend/src/components/CustomListElement.vue
@@ -30,10 +30,6 @@ export default {
     <!-- Bottom-left description -->
     <div class="list-item-description mb-0">{{ description }}</div>
 
-    <!-- Right-side badge -->
-    <div @click="alert('Test')" :class="{'custom-badge-not-completed': !completed, 'custom-badge-completed': completed}">
-       {{completed === true ? 'completed' : 'mark as completed'}}
-    </div>
   </div>
 </template>
 
diff --git a/frontend/src/components/MainPage.vue b/frontend/src/components/MainPage.vue
index c4ef7503cda9795c0fa635b62fa04a0b9c549673..10c800c4f8694e4651e8467566ee985fdbbdea35 100644
--- a/frontend/src/components/MainPage.vue
+++ b/frontend/src/components/MainPage.vue
@@ -119,16 +119,32 @@ export default {
             <b-tabs content-class="mt-2">
               <b-tab title="Active ToDos">
                 <ul class="list-group mt-3 h-75" v-if="items.length > 0">
-                  <li v-for="(item, index) in items" :key="index" class="list-group-item" @click="showDetails(item)">
-                    <CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
+                  <li v-for="(item, index) in items" :key="index" class="list-group-item">
+                    <div class="d-flex justify-content-between align-items-center w-100">
+                      <div class="flex-grow-1">
+                        <CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
+                      </div>
+                      <div class="badge-container">
+                        <div class="custom-badge-not-completed">running</div>
+                      </div>
+                      <b-button variant="danger" @click.stop="deleteItem(index)">Delete</b-button>
+                    </div>
                   </li>
                 </ul>
                 <p v-else class="text-muted text-center">No Todos. Click the button above to add new todos.</p>
               </b-tab>
               <b-tab title="Completed ToDos">
                 <ul class="list-group mt-3 h-75" v-if="completedItems.length > 0">
-                  <li v-for="(item, index) in completedItems" :key="index" class="list-group-item" @click="showDetails(item)">
-                    <CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
+                  <li v-for="(item, index) in completedItems" :key="index" class="list-group-item">
+                    <div class="d-flex justify-content-between align-items-center w-100">
+                      <div class="flex-grow-1">
+                        <CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
+                      </div>
+                      <div class="badge-container">
+                        <div class="custom-badge-completed">completed</div>
+                      </div>
+                      <b-button variant="danger" @click.stop="deleteItem(index)">Delete</b-button>
+                    </div>
                   </li>
                 </ul>
                 <p v-else class="text-muted text-center">No Todos. Click the button above to add new todos.</p>
@@ -158,11 +174,45 @@ html, body {
 }
 
 .list-group-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   border: 1px gray solid;
   border-radius: 25px;
+  width: 100%;
 }
 
 .list-group-item:hover {
   background-color: #e9ecef;
 }
+
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
+.badge-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+}
+
+.custom-badge-completed,
+.custom-badge-not-completed {
+  padding: 5px;
+  margin-left: 10px; /* Add some space between the badge and the element before it */
+  border-radius: 15px;
+}
+
+.custom-badge-completed {
+  background-color: #92ca19;
+  border: 1px #7eb900 solid;
+}
+
+.custom-badge-not-completed {
+  background-color: #ffd133;
+  border: 1px #caa219 solid;
+  color: black;
+}
+
 </style>
\ No newline at end of file