diff --git a/app/team/page.js b/app/team/page.js
index 911ab8d..cc84f59 100644
--- a/app/team/page.js
+++ b/app/team/page.js
@@ -60,8 +60,8 @@ export default function Team(props) {
       {/* <Header route={"/team"} />   */}
       <main className="standard_margin">
         <Heading level="h2">{t("team.title")}</Heading>
-        {/* <section className="mx-auto grid xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> */}
-        <section className="mx-auto flex flex-wrap gap-8 justify-center">
+         <section className="mx-auto grid xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 md:gap-4 ">
+        {/* <section className="mx-auto flex flex-wrap gap-8 justify-center"> */}
           {team["UPM Team"]?.members ? renderMembers(team["UPM Team"].members) : <p>No members found.</p>}
         </section>
       </main>
diff --git a/components/core/Cards.jsx b/components/core/Cards.jsx
index 623df86..de50ecc 100644
--- a/components/core/Cards.jsx
+++ b/components/core/Cards.jsx
@@ -234,7 +234,7 @@ const Card = React.forwardRef(
               {name}
             </CardTitle>
             { role && (<CardDescription type="short-p">{role}</CardDescription>)}
-           {email && <CardDescription className={"font-semibold"}>{email}</CardDescription>}
+           {email && <CardDescription className={"font-semibold break-words text-wrap"}>{email}</CardDescription>}
           </CardContent>
         )}
         {/* {( email &&