diff --git a/components/announcement/announcements-list.tsx b/components/announcement/announcements-list.tsx
index 220eafbd..f7aa64b4 100644
--- a/components/announcement/announcements-list.tsx
+++ b/components/announcement/announcements-list.tsx
@@ -123,7 +123,7 @@ export function AnnouncementsList({ userRole }: AnnouncementsListProps) {
         : role.charAt(0).toUpperCase() + role.slice(1);
       
       return (
-        <Badge key={role} variant="outline" className="mr-1">
+        <Badge key={role} variant="secondary" className="mr-1 bg-gray-100 hover:bg-gray-200 text-gray-800 border-gray-200">
           {roleName}
         </Badge>
       );
@@ -182,6 +182,7 @@ export function AnnouncementsList({ userRole }: AnnouncementsListProps) {
                           variant="outline"
                           size="sm"
                           onClick={() => handleViewAnnouncement(announcement)}
+                          className="bg-white hover:bg-gray-50 border-gray-200 text-gray-700"
                         >
                           <Eye className="h-4 w-4" />
                           <span className="sr-only">View</span>
@@ -190,6 +191,7 @@ export function AnnouncementsList({ userRole }: AnnouncementsListProps) {
                           variant="outline"
                           size="sm"
                           onClick={() => handleDeleteClick(announcement)}
+                          className="bg-white hover:bg-gray-50 border-gray-200 text-gray-700"
                         >
                           <Trash2 className="h-4 w-4" />
                           <span className="sr-only">Delete</span>