diff --git a/app/views/announcement/index.html.haml b/app/views/announcement/index.html.haml
index ad89c83f..bb8c3616 100644
--- a/app/views/announcement/index.html.haml
+++ b/app/views/announcement/index.html.haml
@@ -1,14 +1,16 @@
 - provide(:title, generate_title("Announcements"))
 .container.container--main
+  - @announcements.each do |announcement|
+    .card
+      .card-body
+        .d-flex.w-100.justify-content-between
+          %p.mb-3= announcement.content
+          %small.text-muted= announcement.starts_at
+        
+        .d-flex.w-100
+          = link_to "Edit", announcement_edit_path(id: announcement.id), class: 'btn btn-link text-primary'
+          = button_to "Delete", announcement_destroy_path(id: announcement.id), method: :delete, class: 'btn btn-link text-danger', confirm: 'Are you sure you want to delete this announcement?'
+
   .row
     .col-md-12
-      = link_to "Add new", :announcement_new, class: "btn btn-default"
-  - @announcements.each do |announcement|
-    .panel.panel-default
-      .panel-heading
-        = announcement.starts_at
-      .panel-body
-        = announcement.content
-      .panel-footer
-        = button_to "Edit", announcement_edit_path(id: announcement.id), method: :get, class: 'btn btn-link'
-        = button_to "Delete", announcement_destroy_path(id: announcement.id), method: :delete, class: 'btn btn-link', confirm: 'Are you sure you want to delete this announcement?'
\ No newline at end of file
+      = link_to "Add new", :announcement_new, class: "btn btn-primary"
\ No newline at end of file