use UI Button

src/pages/Volunteers/VolunteerCard.jsx

@@ -26,15 +26,15 @@ export default function VolunteerCard({ id }) {
     return (
         <div className={`${styles.profileboard} glassCard`}>
 
-            {/* Header : titre + bouton expand */}
             <div className={styles.header}>
                 <h2>{user?.name}</h2>
-                <button
-                    className={`${styles.expandButton} glassCard`}
+                 <Button
+                    variant={"transparent"}
                     onClick={toggleExpand}
+                    className={`${isExpanded ? styles.moreButtonClicked : ""}`}
                 >
-                    {isExpanded ? "▼" : "▲"}
-                </button>
+                    {">"}
+                </Button>
             </div>
 
             <div className={styles.mainContent}>

src/pages/Volunteers/VolunteersPage.module.css

@@ -88,6 +88,10 @@
     font-size: 16px;
 }
 
+.moreButtonClicked {
+    rotate: 90deg;
+}
+
 @media screen and (min-width: 768px) {
     .profilePictureContainer {
         width: 150px;