diff --git a/src/app/manage/clubs/page.jsx b/src/app/manage/clubs/page.jsx
index 576f1951..8bc9a367 100644
--- a/src/app/manage/clubs/page.jsx
+++ b/src/app/manage/clubs/page.jsx
@@ -34,7 +34,7 @@ export default async function ManageClubs() {
           variant="contained"
           startIcon={<Icon variant="add" />}
         >
-          New Club
+          New Club/Body
         </Button>
       </Stack>
 
diff --git a/src/app/manage/members/[id]/page.jsx b/src/app/manage/members/[id]/page.jsx
index 760bf618..a584a86d 100644
--- a/src/app/manage/members/[id]/page.jsx
+++ b/src/app/manage/members/[id]/page.jsx
@@ -44,7 +44,11 @@ export default async function ManageMember({ params }) {
         <MemberActionsList member={member} user={user} />
         <Grid container spacing={2} mt={4}>
           <Grid item xs={12}>
-            <Stack direction="row" alignItems="center" spacing={4}>
+            <Stack
+              direction={{ xs: "column", lg: "row" }}
+              alignItems="center"
+              spacing={4}
+            >
               <UserImage
                 image={userMeta.img}
                 name={userProfile.firstName}
@@ -85,7 +89,7 @@ export default async function ManageMember({ params }) {
                 textTransform="uppercase"
                 gutterBottom
               >
-                Club
+                Club/Body
               </Typography>
               <ClubButton clubid={id?.split(encodeURIComponent(":"))[0]} />
             </Grid>
diff --git a/src/components/clubs/ClubsTable.jsx b/src/components/clubs/ClubsTable.jsx
index fdb182b1..995a2703 100644
--- a/src/components/clubs/ClubsTable.jsx
+++ b/src/components/clubs/ClubsTable.jsx
@@ -2,7 +2,9 @@
 
 import { useRouter } from "next/navigation";
 
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import { DataGrid, GridLogicOperator } from "@mui/x-data-grid";
 
 import Tag from "components/Tag";
@@ -10,69 +12,108 @@ import QuickSearchToolbar from "components/QuickSearchToolbar";
 
 import ClubLogo from "components/clubs/ClubLogo";
 
-const columns = [
-  {
-    field: "img",
-    headerName: "",
-    flex: 1,
-    valueGetter: ({ row }) => ({ name: row.name, logo: row.logo }),
-    renderCell: ({ value }) => (
-      <ClubLogo name={value.name} logo={value.logo} width={32} height={32} />
-    ),
-  },
-  {
-    field: "code",
-    headerName: "Code",
-    flex: 3,
-  },
-  {
-    field: "name",
-    headerName: "Name",
-    flex: 6,
-  },
-  {
-    field: "email",
-    headerName: "Email",
-    flex: 6,
-    renderCell: ({ value }) => (
-      <Box textTransform="lowercase" fontSize="0.9em" fontFamily="monospace">
-        {value}
-      </Box>
-    ),
-  },
-  {
-    field: "category",
-    headerName: "Category",
-    flex: 2,
-    valueGetter: ({ row }) => ({
-      category: row.category,
-      studentBody: row.studentBody,
-    }),
-    renderCell: ({ value }) => (
-      <Box textTransform="capitalize">
-        {value.studentBody ? "Student Body" : value.category}
-      </Box>
-    ),
-  },
-  {
-    field: "state",
-    headerName: "State",
-    align: "center",
-    headerAlign: "center",
-    flex: 2,
-    renderCell: ({ value }) => (
-      <Tag label={value} color={value === "active" ? "success" : "error"} />
-    ),
-  },
-];
-
 export default function ClubsTable({ clubs }) {
   const router = useRouter();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+
+  const columns = [
+    {
+      field: "img",
+      headerName: "",
+      flex: 1,
+      valueGetter: ({ row }) => ({ name: row.name, logo: row.logo }),
+      renderCell: ({ value }) => (
+        <ClubLogo name={value.name} logo={value.logo} width={32} height={32} />
+      ),
+    },
+    ...(isMobile
+      ? []
+      : [
+          {
+            field: "code",
+            headerName: "Code",
+            flex: 3,
+          },
+        ]),
+    {
+      field: "name",
+      headerName: "Name",
+      flex: isMobile ? null : 6,
+      renderCell: (p) =>
+        p.value ? (
+          <Typography
+            variant="body2"
+            style={{
+              overflowWrap: "break-word",
+              wordWrap: "break-word",
+              msWordBreak: "break-all",
+              wordBreak: "break-all",
+              msHyphens: "auto",
+              MozHyphens: "auto",
+              WebkitHyphens: "auto",
+              hyphens: "auto",
+            }}
+          >
+            {p.value}
+          </Typography>
+        ) : (
+          p.value
+        ),
+    },
+    ...(isMobile
+      ? []
+      : [
+          {
+            field: "email",
+            headerName: "Email",
+            flex: 6,
+            renderCell: ({ value }) => (
+              <Box
+                textTransform="lowercase"
+                fontSize="0.9em"
+                fontFamily="monospace"
+              >
+                {value}
+              </Box>
+            ),
+          },
+        ]),
+    {
+      field: "category",
+      headerName: "Category",
+      flex: isMobile ? null : 2,
+      valueGetter: ({ row }) => ({
+        category: row.category,
+        studentBody: row.studentBody,
+      }),
+      renderCell: ({ value }) => (
+        <Box textTransform="capitalize">
+          {value.studentBody ? "Student Body" : value.category}
+        </Box>
+      ),
+    },
+    {
+      field: "state",
+      headerName: "State",
+      align: "center",
+      headerAlign: "center",
+      flex: isMobile ? null : 2,
+      renderCell: ({ value }) => (
+        <Tag
+          label={value}
+          color={value === "active" ? "success" : "error"}
+          sx={{ my: 2 }}
+        />
+      ),
+    },
+  ];
 
   if (!clubs) return null;
   return (
     <DataGrid
       autoHeight
+      getRowHeight={() => (isMobile ? "auto" : "none")}
       rows={clubs}
       columns={columns}
       getRowId={(r) => r.cid}
diff --git a/src/components/events/EventForm.jsx b/src/components/events/EventForm.jsx
index 83dcf77d..08d0d19e 100644
--- a/src/components/events/EventForm.jsx
+++ b/src/components/events/EventForm.jsx
@@ -222,12 +222,12 @@ export default function EventForm({
       typeof formData.poster === "string"
         ? formData.poster
         : Array.isArray(formData.poster) && formData.poster.length > 0
-          ? await uploadFile(formData.poster[0], "image")
-          : null;
+        ? await uploadFile(formData.poster[0], "image")
+        : null;
 
     // convert dates to ISO strings
     data.datetimeperiod = formData.datetimeperiod.map((d) =>
-      new Date(d).toISOString(),
+      new Date(d).toISOString()
     );
 
     // convert budget to array of objects with only required attributes
@@ -488,7 +488,7 @@ export default function EventForm({
                   fullWidth
                   onClick={() =>
                     handleSubmit((data) =>
-                      onSubmit(data, { shouldSubmit: true }),
+                      onSubmit(data, { shouldSubmit: true })
                     )()
                   }
                   disabled={budgetEditing}
@@ -735,6 +735,7 @@ function EventAudienceSelect({ control }) {
         {...field}
         color="primary"
         onChange={(u, v) => handleChange(u, v)}
+        sx={{ display: "flex", flexWrap: "wrap" }}
       >
         {Object.keys(audienceMap).map((key) => (
           <ToggleButton disableRipple key={key} value={key}>
diff --git a/src/components/events/EventsTable.jsx b/src/components/events/EventsTable.jsx
index cdaa6b74..893c2362 100644
--- a/src/components/events/EventsTable.jsx
+++ b/src/components/events/EventsTable.jsx
@@ -3,6 +3,8 @@
 import { useRouter } from "next/navigation";
 
 import { Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import { DataGrid, GridLogicOperator } from "@mui/x-data-grid";
 
 import { ISOtoHuman } from "utils/formatTime";
@@ -12,131 +14,163 @@ import Tag from "components/Tag";
 import Icon from "components/Icon";
 import QuickSearchToolbar from "components/QuickSearchToolbar";
 
-const columns = [
-  {
-    field: "code",
-    headerName: "",
-    flex: 3,
-    renderCell: ({ value }) => (
-      <Typography variant="body2" color="text.disabled">
-        {value}
-      </Typography>
-    ),
-  },
-  {
-    field: "name",
-    headerName: "Name",
-    flex: 5,
-  },
-  {
-    field: "club",
-    headerName: "Club",
-    flex: 3,
-    valueGetter: ({ row }) => row.clubid,
-  },
-  {
-    field: "scheduled",
-    headerName: "Scheduled",
-    flex: 3,
-    align: "center",
-    headerAlign: "center",
-    valueGetter: ({ row }) => row.datetimeperiod[0],
-    valueFormatter: ({ value }) => ISOtoHuman(value),
-  },
-  // {
-  //   field: "budget",
-  //   headerName: "Budget/SLC",
-  //   flex: 2,
-  //   align: "center",
-  //   headerAlign: "center",
-  //   valueGetter: ({ row }) => ({
-  //     requested: row.budget.length > 0,
-  //     approved: row.status.budget,
-  //   }),
-  //   renderCell: ({ value }) => (
-  //     <Icon
-  //       sx={{
-  //         color: !value.requested
-  //           ? "secondary.main"
-  //           : !value.approved
-  //             ? "warning.main"
-  //             : "success.main",
-  //       }}
-  //       variant={
-  //         !value.requested
-  //           ? "remove-rounded"
-  //           : !value.approved
-  //             ? "refresh-rounded"
-  //             : "check"
-  //       }
-  //     />
-  //   ),
-  // },
-  {
-    field: "venue",
-    headerName: "Venue/SLO",
-    flex: 2,
-    align: "center",
-    headerAlign: "center",
-    valueGetter: ({ row }) => ({
-      requested: row.location.length > 0,
-      approved: row.status.room,
-    }),
-    renderCell: ({ value }) => (
-      <Icon
-        sx={{
-          color: !value.requested
-            ? "secondary.main"
-            : !value.approved
+export default function EventsTable({
+  events,
+  scheduleSort = "asc",
+  hideClub = false,
+}) {
+  const router = useRouter();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+
+  const columns = [
+    ...(isMobile
+      ? []
+      : [
+          {
+            field: "code",
+            headerName: "",
+            flex: 3,
+            renderCell: ({ value }) => (
+              <Typography variant="body2" color="text.disabled">
+                {value}
+              </Typography>
+            ),
+          },
+        ]),
+    {
+      field: "name",
+      headerName: "Name",
+      flex: isMobile ? null : 5,
+      renderCell: (p) =>
+        p.value ? (
+          <Typography
+            variant="body2"
+            style={{
+              overflowWrap: "break-word",
+              wordWrap: "break-word",
+              msWordBreak: "break-all",
+              wordBreak: "break-all",
+              msHyphens: "auto",
+              MozHyphens: "auto",
+              WebkitHyphens: "auto",
+              hyphens: "auto",
+            }}
+          >
+            {p.value}
+          </Typography>
+        ) : (
+          p.value
+        ),
+    },
+    ...(isMobile
+      ? []
+      : [
+          {
+            field: "club",
+            headerName: "Club",
+            flex: 3,
+            valueGetter: ({ row }) => row.clubid,
+          },
+          {
+            field: "scheduled",
+            headerName: "Scheduled",
+            flex: 3,
+            align: "center",
+            headerAlign: "center",
+            valueGetter: ({ row }) => row.datetimeperiod[0],
+            valueFormatter: ({ value }) => ISOtoHuman(value),
+          },
+        ]),
+    // {
+    //   field: "budget",
+    //   headerName: "Budget/SLC",
+    //   flex: isMobile ? null : 2,
+    //   align: "center",
+    //   headerAlign: "center",
+    //   valueGetter: ({ row }) => ({
+    //     requested: row.budget.length > 0,
+    //     approved: row.status.budget,
+    //   }),
+    //   renderCell: ({ value }) => (
+    //     <Icon
+    //       sx={{
+    //         color: !value.requested
+    //           ? "secondary.main"
+    //           : !value.approved
+    //             ? "warning.main"
+    //             : "success.main",
+    //       }}
+    //       variant={
+    //         !value.requested
+    //           ? "remove-rounded"
+    //           : !value.approved
+    //             ? "refresh-rounded"
+    //             : "check"
+    //       }
+    //     />
+    //   ),
+    // },
+    {
+      field: "venue",
+      headerName: "Venue/SLO",
+      flex: isMobile ? null : 2,
+      align: "center",
+      headerAlign: "center",
+      valueGetter: ({ row }) => ({
+        requested: row.location.length > 0,
+        approved: row.status.room,
+      }),
+      renderCell: ({ value }) => (
+        <Icon
+          sx={{
+            color: !value.requested
+              ? "secondary.main"
+              : !value.approved
               ? "warning.main"
               : "success.main",
-        }}
-        variant={
-          !value.requested
-            ? "remove-rounded"
-            : !value.approved
+          }}
+          variant={
+            !value.requested
+              ? "remove-rounded"
+              : !value.approved
               ? "refresh-rounded"
               : "check"
-        }
-      />
-    ),
-  },
-  {
-    field: "status",
-    headerName: "Status",
-    flex: 3,
-    align: "center",
-    headerAlign: "center",
-    valueGetter: ({ row }) => ({
-      state: row.status.state,
-      start: row.datetimeperiod[0],
-    }),
-    renderCell: ({ value }) => {
-      // change state to 'completed' if it has been approved and is in the past
-      if (value.state === "approved" && new Date(value.start) < new Date())
-        value.state = "completed";
-
-      return (
-        <Tag
-          label={stateLabel(value.state).shortName}
-          color={stateLabel(value.state).color}
+          }
         />
-      );
+      ),
     },
-  },
-];
+    {
+      field: "status",
+      headerName: "Status",
+      flex: isMobile ? null : 3,
+      align: "center",
+      headerAlign: "center",
+      valueGetter: ({ row }) => ({
+        state: row.status.state,
+        start: row.datetimeperiod[0],
+      }),
+      renderCell: ({ value }) => {
+        // change state to 'completed' if it has been approved and is in the past
+        if (value.state === "approved" && new Date(value.start) < new Date())
+          value.state = "completed";
 
-export default function EventsTable({
-  events,
-  scheduleSort = "asc",
-  hideClub = false,
-}) {
-  const router = useRouter();
+        return (
+          <Tag
+            label={stateLabel(value.state).shortName}
+            color={stateLabel(value.state).color}
+            sx={{ my: 2 }}
+          />
+        );
+      },
+    },
+  ];
 
   if (!events) return null;
   return (
     <DataGrid
       autoHeight
+      getRowHeight={() => (isMobile ? "auto" : "none")}
       rows={events}
       columns={hideClub ? columns.filter((c) => c.field !== "club") : columns}
       getRowId={(r) => r._id}
diff --git a/src/components/members/MemberForm.jsx b/src/components/members/MemberForm.jsx
index 9a34bbb3..db94002d 100644
--- a/src/components/members/MemberForm.jsx
+++ b/src/components/members/MemberForm.jsx
@@ -382,7 +382,7 @@ function MemberClubSelect({ control, edit }) {
           <InputLabel id="cid">Club *</InputLabel>
           <Select
             labelId="cid"
-            label="Club *"
+            label="Club/Body *"
             fullWidth
             disabled={edit}
             {...field}
diff --git a/src/components/members/MemberPositions.jsx b/src/components/members/MemberPositions.jsx
index a79c0a4e..db1707a9 100644
--- a/src/components/members/MemberPositions.jsx
+++ b/src/components/members/MemberPositions.jsx
@@ -11,6 +11,8 @@ import {
   Typography,
   CircularProgress,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 import Tag from "components/Tag";
 import Icon from "components/Icon";
@@ -23,7 +25,7 @@ const showActions = (rows, user) => {
   if (user?.role !== "cc") return false;
   if (rows.length > 0) {
     const allApprovedRejected = rows.every(
-      (row) => row.approved || row.rejected,
+      (row) => row.approved || row.rejected
     );
     return !allApprovedRejected;
   } else return false;
@@ -38,6 +40,9 @@ export default function MemberPositions({
   setPositionEditing = console.log,
 }) {
   const { user } = useAuth();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
   const minYear = 2010;
 
   // position item template
@@ -88,11 +93,25 @@ export default function MemberPositions({
     {
       field: "name",
       headerName: "Role",
-      flex: 4,
+      flex: isMobile ? null : 4,
       editable: editable,
       renderCell: (p) =>
         p.value ? (
-          p.value
+          <Typography
+            variant="body2"
+            style={{
+              overflowWrap: "break-word",
+              wordWrap: "break-word",
+              msWordBreak: "break-all",
+              wordBreak: "break-all",
+              msHyphens: "auto",
+              MozHyphens: "auto",
+              WebkitHyphens: "auto",
+              hyphens: "auto",
+            }}
+          >
+            {p.value}
+          </Typography>
         ) : (
           <Typography color="text.secondary">
             <i>Double click to edit</i>
@@ -102,14 +121,14 @@ export default function MemberPositions({
     {
       field: "startYear",
       headerName: "Start Year",
-      flex: 2,
+      flex: isMobile ? null : 2,
       editable: editable,
     },
     {
       field: "endYear",
       headerName: "End Year",
       valueGetter: ({ row }) => row.endYear || "-",
-      flex: 2,
+      flex: isMobile ? null : 2,
       editable: editable,
     },
     // if editing, show delete button
@@ -137,7 +156,7 @@ export default function MemberPositions({
             headerName: "Status",
             align: "center",
             headerAlign: "center",
-            flex: 2,
+            flex: isMobile ? null : 2,
             valueGetter: ({ row }) => ({
               approved: row.approved,
               rejected: row.rejected,
@@ -148,6 +167,7 @@ export default function MemberPositions({
                   approved ? "Approved" : rejected ? "Rejected" : "Pending"
                 }
                 color={approved ? "success" : rejected ? "error" : "warning"}
+                sx={{ my: 2 }}
               />
             ),
           },
@@ -193,6 +213,7 @@ export default function MemberPositions({
 
       <DataGrid
         autoHeight
+        getRowHeight={() => (isMobile ? "auto" : "none")}
         rows={rows}
         columns={columns}
         editMode="row"
diff --git a/src/components/members/MembersTable.jsx b/src/components/members/MembersTable.jsx
index 1e1b195c..6d8b5ece 100644
--- a/src/components/members/MembersTable.jsx
+++ b/src/components/members/MembersTable.jsx
@@ -1,11 +1,12 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-
 import Image from "next/image";
 
 import { Box, Avatar, Stack, Tooltip, Typography } from "@mui/material";
 import { DataGrid, GridLogicOperator } from "@mui/x-data-grid";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 import Icon from "components/Icon";
 import QuickSearchToolbar from "components/QuickSearchToolbar";
@@ -14,6 +15,9 @@ import { getFile } from "utils/files";
 
 export default function MembersTable({ members, showClub = false }) {
   const router = useRouter();
+  const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const columns = [
     {
@@ -22,7 +26,7 @@ export default function MembersTable({ members, showClub = false }) {
       flex: 1,
       valueGetter: ({ row }) => ({ name: row.firstName, img: row.img }),
       renderCell: ({ value }) => (
-        <Avatar sx={{ height: 32, width: 32 }}>
+        <Avatar sx={{ height: 32, width: 32, my: 2 }}>
           {value.img ? (
             <Image alt={value.name} src={getFile(value.img)} fill={true} />
           ) : null}
@@ -35,80 +39,92 @@ export default function MembersTable({ members, showClub = false }) {
       valueGetter: ({ row }) => `${row.firstName} ${row.lastName}`,
       flex: 6,
     },
-    {
-      field: "email",
-      headerName: "Email",
-      flex: 8,
-      renderCell: ({ value }) => (
-        <Box textTransform="lowercase" fontSize="0.9em" fontFamily="monospace">
-          {value}
-        </Box>
-      ),
-    },
+    ...(isDesktop
+      ? [
+          {
+            field: "email",
+            headerName: "Email",
+            flex: 8,
+            renderCell: ({ value }) => (
+              <Box
+                textTransform="lowercase"
+                fontSize="0.9em"
+                fontFamily="monospace"
+              >
+                {value}
+              </Box>
+            ),
+          },
+        ]
+      : []),
     ...(showClub
       ? [
           {
             field: "cid",
-            headerName: "Club",
+            headerName: "Club ID",
             flex: 4,
           },
         ]
       : []),
-    {
-      field: "positions",
-      headerName: "Positions",
-      flex: 8,
-      valueGetter: ({ row }) => row.roles,
-      renderCell: ({ value }) => (
-        <Stack direction="column">
-          {value?.map((role, key) => (
-            <Typography
-              key={key}
-              variant="body2"
-              my={1}
-              sx={{
-                color: "text.secondary",
-                display: "flex",
-                alignItems: "center",
-              }}
-            >
-              {role?.name}
-              <Box color="grey.400" display="inline-block" mx={0.5}>
-                ({role?.startYear} - {role?.endYear || "present"})
-              </Box>
-              <Tooltip
-                arrow
-                title={
-                  role?.approved
-                    ? "Approved"
-                    : role?.rejected
-                      ? "Rejected"
-                      : "Pending approval"
-                }
-              >
-                <Icon
-                  external
-                  color={
-                    role?.approved
-                      ? "success.main"
-                      : role?.rejected
-                        ? "error.main"
-                        : "warning.main"
-                  }
-                  variant={
-                    role?.approved
-                      ? "eva:checkmark-outline"
-                      : role?.rejected
-                        ? "eva:close-outline"
-                        : "eva:refresh-fill"
-                  }
-                />
-              </Tooltip>
-            </Typography>
-          ))}
-        </Stack>
-      ),
-    },
+    ...(isMobile
+      ? []
+      : [
+          {
+            field: "positions",
+            headerName: "Positions",
+            flex: 8,
+            valueGetter: ({ row }) => row.roles,
+            renderCell: ({ value }) => (
+              <Stack direction="column">
+                {value?.map((role, key) => (
+                  <Typography
+                    key={key}
+                    variant="body2"
+                    my={1}
+                    sx={{
+                      color: "text.secondary",
+                      display: "flex",
+                      alignItems: "center",
+                    }}
+                  >
+                    {role?.name}
+                    <Box color="grey.400" display="inline-block" mx={0.5}>
+                      ({role?.startYear} - {role?.endYear || "present"})
+                    </Box>
+                    <Tooltip
+                      arrow
+                      title={
+                        role?.approved
+                          ? "Approved"
+                          : role?.rejected
+                          ? "Rejected"
+                          : "Pending approval"
+                      }
+                    >
+                      <Icon
+                        external
+                        color={
+                          role?.approved
+                            ? "success.main"
+                            : role?.rejected
+                            ? "error.main"
+                            : "warning.main"
+                        }
+                        variant={
+                          role?.approved
+                            ? "eva:checkmark-outline"
+                            : role?.rejected
+                            ? "eva:close-outline"
+                            : "eva:refresh-fill"
+                        }
+                      />
+                    </Tooltip>
+                  </Typography>
+                ))}
+              </Stack>
+            ),
+          },
+        ]),
   ];
 
   if (!members) return null;
@@ -118,7 +134,7 @@ export default function MembersTable({ members, showClub = false }) {
       rows={members}
       columns={columns}
       getRowId={(r) => r.mid}
-      getRowHeight={() => "auto"}
+      getRowHeight={() => (isMobile ? "auto" : "none")}
       onRowClick={(params) => router.push(`/manage/members/${params.row.mid}`)}
       disableRowSelectionOnClick
       initialState={{
diff --git a/src/components/profile/UserMemberships.jsx b/src/components/profile/UserMemberships.jsx
index a437e66a..6d44fc4d 100644
--- a/src/components/profile/UserMemberships.jsx
+++ b/src/components/profile/UserMemberships.jsx
@@ -1,13 +1,18 @@
 "use client";
 
-import { useState, useEffect, use } from "react";
+import { useState, useEffect } from "react";
 
 import { DataGrid } from "@mui/x-data-grid";
+import { Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 import { useToast } from "components/Toast";
 
 export default function UserMemberships({ rows = [] }) {
   const { triggerToast } = useToast();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   // fetch cid -> club name mapping
   const [clubs, setClubs] = useState([]);
@@ -26,7 +31,7 @@ export default function UserMemberships({ rows = [] }) {
           res.data.reduce((acc, { cid, name }) => {
             acc[cid] = name;
             return acc;
-          }, {}),
+          }, {})
         );
       }
     })();
@@ -36,21 +41,57 @@ export default function UserMemberships({ rows = [] }) {
     {
       field: "name",
       headerName: "Role",
-      flex: 7,
-      renderCell: (p) => p.value,
+      flex: isMobile ? null : 7,
+      renderCell: (p) => {
+        return (
+          <Typography
+            variant="body2"
+            style={{
+              overflowWrap: "break-word",
+              wordWrap: "break-word",
+              msWordBreak: "break-all",
+              wordBreak: "break-all",
+              msHyphens: "auto",
+              MozHyphens: "auto",
+              WebkitHyphens: "auto",
+              hyphens: "auto",
+            }}
+          >
+            {p.value}
+          </Typography>
+        );
+      },
     },
     {
       field: "cid",
       headerName: "Club",
-      flex: 5,
-      renderCell: (p) => clubs[p.value],
+      flex: isMobile ? null : 5,
+      renderCell: (p) => {
+        return (
+          <Typography
+            variant="body2"
+            style={{
+              overflowWrap: "break-word",
+              wordWrap: "break-word",
+              msWordBreak: "break-all",
+              wordBreak: "break-all",
+              msHyphens: "auto",
+              MozHyphens: "auto",
+              WebkitHyphens: "auto",
+              hyphens: "auto",
+            }}
+          >
+            {clubs[p.value]}
+          </Typography>
+        );
+      },
     },
     {
       field: "startYear",
       headerName: "Start Year",
       headerAlign: "center",
       align: "center",
-      flex: 3,
+      flex: isMobile ? null : 3,
     },
     {
       field: "endYear",
@@ -58,7 +99,7 @@ export default function UserMemberships({ rows = [] }) {
       headerAlign: "center",
       align: "center",
       valueGetter: ({ row }) => row.endYear || "-",
-      flex: 3,
+      flex: isMobile ? null : 3,
     },
   ];
 
@@ -67,6 +108,7 @@ export default function UserMemberships({ rows = [] }) {
       {rows?.length ? (
         <DataGrid
           autoHeight
+          getRowHeight={() => (isMobile ? "auto" : "none")}
           rows={rows}
           columns={columns}
           disableRowSelectionOnClick