diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 2a40922..6b3aa42 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -35,7 +35,6 @@ import {
   Zap,
 } from "lucide-react";
 import { Link } from "react-router-dom";
-import { Checkbox } from "@/components/ui/checkbox";
 
 import { recipeService, Recipe } from "@/api/recipe";
 import userService from "@/api/user";
@@ -632,17 +631,13 @@ export default function Profile() {
                           key={opt.key}
                           type="button"
                           onClick={() => toggleEquipment(opt.key)}
-                          className={`flex flex-col items-center justify-center gap-1 rounded-xl border-2 px-2 py-3 text-xs font-medium transition-all ${
+                          aria-pressed={active}
+                          className={`flex flex-col items-center justify-center gap-1.5 rounded-xl border-2 px-2 py-3.5 text-xs font-medium transition-all active:scale-[0.97] ${
                             active
-                              ? "border-orange-500 bg-orange-50 dark:bg-orange-950/30 text-orange-700 dark:text-orange-300"
+                              ? "border-orange-500 bg-orange-50 dark:bg-orange-950/30 text-orange-700 dark:text-orange-300 shadow-sm shadow-orange-500/10"
                               : "border-border hover:border-orange-200 hover:bg-orange-50/50 dark:hover:bg-orange-950/20 text-muted-foreground"
                           }`}
                         >
-                          <Checkbox
-                            checked={active}
-                            className="pointer-events-none sr-only"
-                            tabIndex={-1}
-                          />
                           <span className="text-2xl leading-none">{opt.emoji}</span>
                           <span className="text-center leading-tight">{opt.label}</span>
                         </button>