diff --git a/components/boardMemberCard.jsx b/components/boardMemberCard.jsx
index a5a6c3fe586fb6725b43d3d2ca5aa3e04727bb73..e77bc6bdcf00928fa6aad35c65add761ed93ac70 100644
--- a/components/boardMemberCard.jsx
+++ b/components/boardMemberCard.jsx
@@ -8,7 +8,11 @@ import { getAccentColor } from "../utilities/colors";
 
 export default function BoardMemberCard({ entry }) {
   const theme = useMantineTheme();
-  const { locale } = useRouter();
+  const { locale, push } = useRouter();
+
+  const sendMail = (address) => {
+    push("mailto:" + address);
+  };
 
   return (
     <Paper
@@ -29,25 +33,22 @@ export default function BoardMemberCard({ entry }) {
           {entry.name}
         </Text>
         <Text ta="center" c="dimmed" fz="sm">
-          {entry.mail ? entry.mail + " • " : ""}
+          {entry.mail ? entry.mail.replace("@", " [ät] ") + " • " : ""}
           {entry.role[locale || "en"]}
         </Text>
       </div>
 
       {entry.mail && (
         <div>
-          <a href={"mailto:" + entry.mail} style={{ textDecoration: "none" }}>
-            <Button
-              leftIcon={
-                <Icon icon={ICONS.EMAIL} color={getAccentColor(theme)} />
-              }
-              variant="default"
-              fullWidth
-              mt="md"
-            >
-              Send message
-            </Button>
-          </a>
+          <Button
+            leftIcon={<Icon icon={ICONS.EMAIL} color={getAccentColor(theme)} />}
+            variant="default"
+            fullWidth
+            mt="md"
+            onClick={() => sendMail(entry.mail)}
+          >
+            Send message
+          </Button>
         </div>
       )}
     </Paper>