diff --git a/package-lock.json b/package-lock.json
index c3ec63640..55cd1c777 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9236,10 +9236,9 @@
       "license": "MIT"
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
-      "license": "MIT",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
diff --git a/src/components/admin/services/contacts/Contact.jsx b/src/components/admin/services/contacts/Contact.jsx
index 3b24c0113..910adcdab 100644
--- a/src/components/admin/services/contacts/Contact.jsx
+++ b/src/components/admin/services/contacts/Contact.jsx
@@ -1,10 +1,18 @@
 "use client";
-import { User } from "lucide-react";
+import {
+  UserCheck,
+  Gavel,
+  Users,
+  Wrench,
+  Smile,
+  HandHeart,
+} from "lucide-react";
 import Button from "../../Button";
 import Select from "@/components/Select";
 import { useState } from "react";
 import { api } from "@/utils/api";
 import toaster from "@/utils/toaster";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 const STATUSES = ["confirmed", "pending", "not attending"];
 
@@ -14,9 +22,18 @@ const MAPPINGS = {
   "not attending": -1,
 };
 
+const roleIcons = {
+  participants: <UserCheck className="mx-2" />,
+  judges: <Gavel className="mx-2" />,
+  volunteers: <Smile className="mx-2" />,
+  mentors: <HandHeart className="mx-2" />,
+  admins: <Wrench className="mx-2" />,
+  committees: <Users className="mx-2" />,
+};
+
 const Contact = ({ role, disabled, setDisabled }) => {
   const [status, setStatus] = useState({
-    status: "confirmed",
+    status: "",
   });
 
   const onClick = async () => {
@@ -30,6 +47,7 @@ const Contact = ({ role, disabled, setDisabled }) => {
 
     if (items.length === 0) {
       toaster("The email list is empty!", "error");
+      setDisabled(false);
       return;
     }
 
@@ -40,21 +58,30 @@ const Contact = ({ role, disabled, setDisabled }) => {
   };
 
   return (
-    <div className="lg:text-md grid w-full grid-cols-3 gap-0.5 rounded bg-white p-2 text-sm lg:w-1/2">
-      <div className="flex items-center">
-        <User className="mx-2" /> {role}
-      </div>
-
-      <Select
-        items={STATUSES}
-        placeholder="Status"
-        field="status"
-        user={status}
-        setUser={setStatus}
-      />
-
-      <Button text="copy" color="green" onClick={onClick} disabled={disabled} />
-    </div>
+    <Card className="my-4 w-full lg:w-1/2">
+      <CardHeader>
+        <CardTitle className="flex items-center">
+          {roleIcons[role]} {role}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <Select
+          items={STATUSES}
+          placeholder="Select a status..."
+          field="status"
+          user={status}
+          setUser={setStatus}
+          onChange={() => setDisabled(status.status === "")}
+          className="placeholder-gray-400"
+        />
+        <Button
+          text="copy"
+          color="green"
+          onClick={onClick}
+          disabled={status.status === "" || disabled}
+        />
+      </CardContent>
+    </Card>
   );
 };