@@ -15,6 +15,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { useToast } from "@/components/ui/use-toast";
+import { cn } from "@/lib/utils";
 import {
   CheckCircle2Icon,
   Loader2Icon,
@@ -394,106 +395,132 @@ export default function ApplicantActionButton({
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
-            className="h-6 w-6 p-0 text-gray-400 hover:text-gray-300"
+            size="sm"
+            className="h-8 w-8 rounded-full p-0 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
           >
             <span className="sr-only">More actions</span>
-            <MoreHorizontalIcon className="h-3 w-3" />
+            <MoreHorizontalIcon className="h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent
           align="end"
-          className="dark:bg-dark-200 min-w-[160px] bg-white"
+          className="min-w-[200px] rounded-lg border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-700 dark:bg-gray-800"
         >
-          <DropdownMenuLabel>Actions</DropdownMenuLabel>
-          <DropdownMenuSeparator />
+          <DropdownMenuLabel className="px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-100">
+            Actions
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator className="bg-gray-200 dark:bg-gray-700" />
 
           {/* Primary Actions */}
           <DropdownMenuItem 
-            className="text-black-500 dark:text-light-800 cursor-pointer"
+            className="cursor-pointer rounded-md px-3 py-2 text-sm text-gray-700 transition-colors hover:bg-blue-50 hover:text-blue-700 focus:bg-blue-50 focus:text-blue-700 dark:text-gray-300 dark:hover:bg-blue-900/20 dark:hover:text-blue-300"
             onClick={handleViewDetails}
           >
+            <svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+            </svg>
             View Details
           </DropdownMenuItem>
 
           <DropdownMenuItem 
-            className="text-black-500 dark:text-light-800 cursor-pointer"
+            className="cursor-pointer rounded-md px-3 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:bg-gray-50 focus:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100"
             onClick={handleEditApplicant}
           >
+            <svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+            </svg>
             Edit Applicant
           </DropdownMenuItem>
 
-          <DropdownMenuSeparator />
+          <DropdownMenuSeparator className="bg-gray-200 dark:bg-gray-700" />
 
           {/* Status Change Actions */}
           {applicant.application_status !== "applying" && (
             <DropdownMenuItem
-              className="text-black-500 dark:text-light-800 cursor-pointer"
+              className="cursor-pointer rounded-md px-3 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:bg-gray-50 focus:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100"
               onClick={() => {
                 setDialogState("applying");
                 setIsDialogOpen(true);
               }}
             >
+              <svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
               Move to Applying
             </DropdownMenuItem>
           )}
 
           {applicant.application_status !== "testing" && (
             <DropdownMenuItem
-              className="text-black-500 dark:text-light-800 cursor-pointer"
+              className="cursor-pointer rounded-md px-3 py-2 text-sm text-amber-700 transition-colors hover:bg-amber-50 hover:text-amber-800 focus:bg-amber-50 focus:text-amber-800 dark:text-amber-400 dark:hover:bg-amber-900/20 dark:hover:text-amber-300"
               onClick={() => {
                 setDialogState("testing");
                 setIsDialogOpen(true);
               }}
             >
+              <svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
               Move to Testing
             </DropdownMenuItem>
           )}
 
           {applicant.application_status !== "onboarding" && (
             <DropdownMenuItem
-              className="text-black-500 dark:text-light-800 cursor-pointer"
+              className="cursor-pointer rounded-md px-3 py-2 text-sm text-emerald-700 transition-colors hover:bg-emerald-50 hover:text-emerald-800 focus:bg-emerald-50 focus:text-emerald-800 dark:text-emerald-400 dark:hover:bg-emerald-900/20 dark:hover:text-emerald-300"
               onClick={() => {
                 setDialogState("onboarding");
                 setIsDialogOpen(true);
               }}
             >
+              <svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+              </svg>
               Move to Onboarding
             </DropdownMenuItem>
           )}
 
           {applicant.application_status !== "denied" && (
             <DropdownMenuItem
-              className="text-red-500 dark:text-red-400 cursor-pointer"
+              className="cursor-pointer rounded-md px-3 py-2 text-sm text-red-700 transition-colors hover:bg-red-50 hover:text-red-800 focus:bg-red-50 focus:text-red-800 dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300"
               onClick={() => {
                 setDialogState("denied");
                 setIsDialogOpen(true);
               }}
             >
+              <svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
               Move to Denied
             </DropdownMenuItem>
           )}
 
-          <DropdownMenuSeparator />
+          <DropdownMenuSeparator className="bg-gray-200 dark:bg-gray-700" />
 
           {/* Test Actions - only show for testing status */}
           {applicant.application_status === "testing" && (
             <>
               <DropdownMenuItem
-                className="text-green-500 dark:text-green-400 cursor-pointer"
+                className="cursor-pointer rounded-md px-3 py-2 text-sm text-green-700 transition-colors hover:bg-green-50 hover:text-green-800 focus:bg-green-50 focus:text-green-800 dark:text-green-400 dark:hover:bg-green-900/20 dark:hover:text-green-300"
                 onClick={() => {
                   setDialogState("pass");
                   setIsDialogOpen(true);
                 }}
               >
+                <CheckCircle2Icon className="mr-2 h-4 w-4" />
                 Pass Test
               </DropdownMenuItem>
               <DropdownMenuItem
-                className="text-red-500 dark:text-red-400 cursor-pointer"
+                className="cursor-pointer rounded-md px-3 py-2 text-sm text-red-700 transition-colors hover:bg-red-50 hover:text-red-800 focus:bg-red-50 focus:text-red-800 dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300"
                 onClick={() => {
                   setDialogState("fail");
                   setIsDialogOpen(true);
                 }}
               >
+                <svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
                 Fail Test
               </DropdownMenuItem>
             </>
@@ -503,25 +530,29 @@ export default function ApplicantActionButton({
           {applicant.application_status === "onboarding" && (
             <>
               <DropdownMenuItem
-                className="text-green-500 dark:text-green-400 cursor-pointer"
+                className="cursor-pointer rounded-md px-3 py-2 text-sm text-green-700 transition-colors hover:bg-green-50 hover:text-green-800 focus:bg-green-50 focus:text-green-800 dark:text-green-400 dark:hover:bg-green-900/20 dark:hover:text-green-300"
                 onClick={() => {
                   setDialogState("accept");
                   setIsDialogOpen(true);
                 }}
               >
+                <CheckCircle2Icon className="mr-2 h-4 w-4" />
                 Accept Applicant
               </DropdownMenuItem>
               <DropdownMenuItem
-                className="text-red-500 dark:text-red-400 cursor-pointer"
+                className="cursor-pointer rounded-md px-3 py-2 text-sm text-red-700 transition-colors hover:bg-red-50 hover:text-red-800 focus:bg-red-50 focus:text-red-800 dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300"
                 onClick={() => {
                   setDialogState("deny");
                   setIsDialogOpen(true);
                 }}
               >
+                <svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
                 Deny Applicant
               </DropdownMenuItem>
               <DropdownMenuItem
-                className="text-black-500 dark:text-light-800 cursor-pointer"
+                className="cursor-pointer rounded-md px-3 py-2 text-sm text-blue-700 transition-colors hover:bg-blue-50 hover:text-blue-800 focus:bg-blue-50 focus:text-blue-800 dark:text-blue-400 dark:hover:bg-blue-900/20 dark:hover:text-blue-300"
                 onClick={() => {
                   setDialogState("remindToOnboarding");
                   setIsDialogOpen(true);
@@ -536,7 +567,7 @@ export default function ApplicantActionButton({
           {/* Remind to Take Test - show for testing and applying status */}
           {(applicant.application_status === "testing" || applicant.application_status === "applying") && (
             <DropdownMenuItem
-              className="text-black-500 dark:text-light-800 cursor-pointer"
+              className="cursor-pointer rounded-md px-3 py-2 text-sm text-blue-700 transition-colors hover:bg-blue-50 hover:text-blue-800 focus:bg-blue-50 focus:text-blue-800 dark:text-blue-400 dark:hover:bg-blue-900/20 dark:hover:text-blue-300"
               onClick={() => {
                 setDialogState("remindToTakeTest");
                 setIsDialogOpen(true);
@@ -557,28 +588,37 @@ export default function ApplicantActionButton({
           setIsLoading(false); // Reset loading state when dialog closes
         }
       }}>
-        <DialogContent>
+        <DialogContent className="rounded-lg border border-gray-200 bg-white shadow-xl dark:border-gray-700 dark:bg-gray-900">
           <DialogHeader>
-            <DialogTitle>{getDialogTitle()}</DialogTitle>
-            <DialogDescription>
+            <DialogTitle className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+              {getDialogTitle()}
+            </DialogTitle>
+            <DialogDescription className="text-sm text-gray-600 dark:text-gray-400">
               {getDialogDescription()}
             </DialogDescription>
           </DialogHeader>
-          <DialogFooter>
+          <DialogFooter className="gap-3">
             <Button 
               variant="outline" 
               onClick={() => {
                 setIsDialogOpen(false);
                 setDialogState(null);
                 setIsLoading(false);
               }}
+              className="border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"
             >
               Cancel
             </Button>
             <Button
               onClick={handleConfirmAction}
               disabled={isLoading}
               variant={dialogState === "delete" || dialogState === "denied" || dialogState === "fail" || dialogState === "deny" ? "destructive" : "default"}
+              className={cn(
+                "min-w-[100px]",
+                (dialogState === "delete" || dialogState === "denied" || dialogState === "fail" || dialogState === "deny") 
+                  ? "bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800"
+                  : "bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800"
+              )}
             >
               {isLoading ? (
                 <>