diff --git a/src/components/Changeset/ChangesetBanner.tsx b/src/components/Changeset/ChangesetBanner.tsx
index 230cace426..bd127d4aa1 100644
--- a/src/components/Changeset/ChangesetBanner.tsx
+++ b/src/components/Changeset/ChangesetBanner.tsx
@@ -4,16 +4,8 @@ import {
   Edit as EditIcon,
 } from '@mui/icons-material';
 import { Alert, AlertTitle, Tooltip } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { IconButton } from '../IconButton';
 
-const useStyles = makeStyles()(({ spacing, breakpoints }) => ({
-  root: {
-    maxWidth: breakpoints.values.md,
-    margin: spacing(0, 2),
-  },
-}));
-
 interface Props {
   changesetId: string | undefined;
   onEdit?: () => void;
@@ -21,8 +13,6 @@ interface Props {
 }
 
 export const ChangesetBanner = (props: Props) => {
-  const { classes } = useStyles();
-
   if (!props.changesetId) {
     return null;
   }
@@ -30,7 +20,10 @@ export const ChangesetBanner = (props: Props) => {
     <Alert
       severity="info"
       icon={<ChangeIcon fontSize="inherit" />}
-      className={classes.root}
+      sx={(theme) => ({
+        maxWidth: theme.breakpoints.values.md,
+        margin: theme.spacing(0, 2),
+      })}
       action={
         <>
           {props.onEdit && (
diff --git a/src/components/Debug/Code.tsx b/src/components/Debug/Code.tsx
index 6b71b084f0..4f98e956eb 100644
--- a/src/components/Debug/Code.tsx
+++ b/src/components/Debug/Code.tsx
@@ -1,6 +1,6 @@
 import { Box, BoxProps } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { ChildrenProp } from '~/common';
+import { ChildrenProp, extendSx } from '~/common';
 
 interface CodeProps extends Omit<BoxProps, 'component'> {
   json?: any;
@@ -15,18 +15,15 @@ export const Code = ({
   return (
     <Box
       component="pre"
-      sx={{
-        p: 1,
-        borderRadius: 1,
-        margin: 0,
-        color: 'common.white',
-        bgcolor: 'grey.800',
-        fontFamily: 'monospace',
-        fontSize: '0.875rem',
-        overflow: 'auto',
-        whiteSpace: 'pre-wrap',
-        ...sx,
-      }}
+      sx={[
+        (theme) => ({
+          padding: theme.spacing(1),
+          borderRadius: theme.shape.borderRadius,
+          color: theme.palette.background.paper,
+          backgroundColor: theme.palette.grey[800],
+        }),
+        ...extendSx(sx),
+      ]}
       {...rest}
     >
       {json ? JSON.stringify(json, undefined, 2) : children}
diff --git a/src/components/Error/Error.tsx b/src/components/Error/Error.tsx
index 9ad0d2b801..fb2bcdeb5a 100644
--- a/src/components/Error/Error.tsx
+++ b/src/components/Error/Error.tsx
@@ -1,25 +1,15 @@
 import { ApolloError } from '@apollo/client';
 import { Button, Grid, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { usePrevious } from 'ahooks';
 import { isPlainObject } from 'lodash';
 import { ElementType, isValidElement, ReactNode, useEffect } from 'react';
 import { useErrorBoundary } from 'react-error-boundary';
 import { useLocation } from 'react-router-dom';
-import { makeStyles } from 'tss-react/mui';
 import { getErrorInfo } from '~/api';
 import { ButtonLink, StatusCode, useNavigate } from '../Routing';
 import { ErrorRenderers, renderError } from './error-handling';
 
-const useStyles = makeStyles()(({ spacing }) => ({
-  page: {
-    overflow: 'auto',
-    padding: spacing(4, 0, 0, 4),
-  },
-  buttons: {
-    marginTop: spacing(3),
-  },
-}));
-
 export interface ErrorProps {
   /**
    * The error body to display.
@@ -62,8 +52,8 @@ export const Error = ({
   disableButtons,
   component: Component = 'div',
 }: ErrorProps) => {
-  const { classes, cx } = useStyles();
   const navigate = useNavigate();
+  const theme = useTheme();
 
   useResetErrorOnLocationChange();
 
@@ -87,14 +77,23 @@ export const Error = ({
     error && getErrorInfo(error).codes.includes('NotFound') ? 404 : 500;
 
   return (
-    <Component className={cx(page && classes.page)}>
+    <Component
+      style={
+        page
+          ? {
+              overflow: 'auto',
+              padding: theme.spacing(4, 0, 0, 4),
+            }
+          : undefined
+      }
+    >
       {/* Default status code to be helpful for the most common ones. The
       children can still override this by rendering <StatusCode /> themselves */}
       <StatusCode code={statusCode} />
       <Typography gutterBottom>Oops, Sorry.</Typography>
       {rendered}
       {!disableButtons && (
-        <Grid container spacing={3} className={classes.buttons}>
+        <Grid container spacing={3} sx={{ mt: 3 }}>
           <Grid item>
             <Button
               onClick={() => navigate(-1)}
diff --git a/src/components/FieldOverviewCard/FieldOverviewCard.tsx b/src/components/FieldOverviewCard/FieldOverviewCard.tsx
index 10b454033b..df6cbe6a06 100644
--- a/src/components/FieldOverviewCard/FieldOverviewCard.tsx
+++ b/src/components/FieldOverviewCard/FieldOverviewCard.tsx
@@ -3,57 +3,29 @@ import {
   Card,
   CardActionArea,
   CardActions,
+  CardProps,
   Grid,
   Skeleton,
+  Stack,
   Tooltip,
   TooltipProps,
   Typography,
 } from '@mui/material';
 import { To } from 'history';
 import { ReactNode } from 'react';
-import { makeStyles } from 'tss-react/mui';
-import { DateTimeOrISO } from '~/common';
+import { DateTimeOrISO, extendSx } from '~/common';
 import { FormattedDateTime } from '../Formatters';
 import { HugeIcon, HugeIconProps } from '../Icons';
 import { ButtonLink, CardActionAreaLink } from '../Routing';
 
-const useStyles = makeStyles()(({ spacing, palette }) => ({
-  root: {
-    flex: 1,
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  topArea: {
-    flex: 1,
-    display: 'flex',
-    justifyContent: 'space-evenly',
-    padding: spacing(3, 4),
-  },
-  rightContent: {
-    flex: 1,
-    alignSelf: 'flex-start',
-    paddingLeft: spacing(4),
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-evenly',
-  },
-  emptyValue: {
-    color: palette.action.disabled,
-  },
-  bottomArea: {
-    paddingRight: spacing(1),
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-}));
-
 interface FieldOverviewCardData {
   value?: ReactNode;
   updatedAt?: DateTimeOrISO;
   to?: To;
 }
 
+// removed duplicate import
+
 export interface FieldOverviewCardProps extends Pick<HugeIconProps, 'icon'> {
   className?: string;
   data?: FieldOverviewCardData;
@@ -65,6 +37,7 @@ export interface FieldOverviewCardProps extends Pick<HugeIconProps, 'icon'> {
   redacted?: boolean;
   title?: string;
   viewLabel?: string;
+  CardProps?: CardProps;
 }
 
 const DEFAULT_EMPTY = <>&nbsp;</>;
@@ -81,31 +54,45 @@ export const FieldOverviewCard = ({
   redacted,
   title,
   viewLabel: buttonLabel,
+  CardProps,
 }: FieldOverviewCardProps) => {
-  const { classes, cx } = useStyles();
-
   const showData = !loading && !redacted;
   const ActionArea = showData && data?.to ? CardActionAreaLink : CardActionArea;
   const Btn = data?.to ? ButtonLink : Button;
 
   const card = (
-    <Card className={cx(classes.root, className)}>
+    <Card
+      className={className}
+      sx={[
+        {
+          flex: 1,
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+        },
+        ...extendSx(CardProps?.sx),
+      ]}
+    >
       <ActionArea
         disabled={!data || redacted}
         to={data?.to ?? ''}
-        className={classes.topArea}
+        sx={{
+          flex: 1,
+          display: 'flex',
+          justifyContent: 'space-evenly',
+          py: 3,
+          px: 4,
+        }}
         onClick={onClick}
       >
         <HugeIcon icon={icon} loading={!data} />
-        <div className={classes.rightContent}>
+        <Stack flex={1} alignSelf="flex-start" pl={4} spacing={2}>
           <Typography variant="h4">
             {loading ? <Skeleton width="80%" /> : data ? title : ''}
           </Typography>
           <Typography
             variant="h1"
-            className={cx({
-              [classes.emptyValue]: data && !data.value,
-            })}
+            sx={data && !data.value ? { color: 'action.disabled' } : undefined}
           >
             {loading || redacted ? (
               <Skeleton animation={loading ? 'pulse' : false} />
@@ -115,7 +102,7 @@ export const FieldOverviewCard = ({
               ''
             )}
           </Typography>
-        </div>
+        </Stack>
       </ActionArea>
       {buttonLabel && (
         <CardActions>
@@ -123,7 +110,11 @@ export const FieldOverviewCard = ({
             container
             spacing={loading ? 4 : 2}
             wrap="nowrap"
-            className={classes.bottomArea}
+            sx={{
+              pr: 1,
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
           >
             <Grid item xs={loading}>
               <Btn
diff --git a/src/components/FundingAccountCard/FundingAccountCard.tsx b/src/components/FundingAccountCard/FundingAccountCard.tsx
index 98965e8ef4..ce634d0825 100644
--- a/src/components/FundingAccountCard/FundingAccountCard.tsx
+++ b/src/components/FundingAccountCard/FundingAccountCard.tsx
@@ -1,39 +1,22 @@
 import { Card, CardActions, CardContent, Typography } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { DisplaySimpleProperty } from '../DisplaySimpleProperty';
 import { FormattedDateTime } from '../Formatters';
 import { FundingAccountCardFragment } from './FundingAccountCard.graphql';
 
-const useStyles = makeStyles()(({ spacing }) => {
-  return {
-    root: {
-      width: '100%',
-      maxWidth: 400,
-    },
-    name: {
-      marginBottom: spacing(2),
-    },
-    cardActions: {
-      justifyContent: 'flex-end',
-    },
-  };
-});
-
 interface FundingAccountCardProps {
   className?: string;
   fundingAccount: FundingAccountCardFragment;
 }
 
+// Candidate for Removal
 export const FundingAccountCard = ({
   className,
   fundingAccount,
 }: FundingAccountCardProps) => {
-  const { classes, cx } = useStyles();
-
   return (
-    <Card className={cx(classes.root, className)}>
+    <Card className={className} sx={{ width: '100%', maxWidth: 400 }}>
       <CardContent>
-        <Typography variant="h4" className={classes.name}>
+        <Typography variant="h4" sx={{ mb: 2 }}>
           {fundingAccount.name.value}
         </Typography>
         <DisplaySimpleProperty
@@ -41,7 +24,7 @@ export const FundingAccountCard = ({
           value={fundingAccount.accountNumber.value}
         />
       </CardContent>
-      <CardActions className={classes.cardActions}>
+      <CardActions sx={{ justifyContent: 'flex-end' }}>
         <Typography variant="caption" color="textSecondary">
           Created <FormattedDateTime date={fundingAccount.createdAt} />
         </Typography>
diff --git a/src/components/LanguageEngagementListItemCard/LanguageEngagementListItemCard.tsx b/src/components/LanguageEngagementListItemCard/LanguageEngagementListItemCard.tsx
index 3f0ac70e4b..4e208594e1 100644
--- a/src/components/LanguageEngagementListItemCard/LanguageEngagementListItemCard.tsx
+++ b/src/components/LanguageEngagementListItemCard/LanguageEngagementListItemCard.tsx
@@ -3,9 +3,9 @@ import {
   CardActions,
   CardContent,
   Grid,
+  Stack,
   Typography,
 } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { EngagementStatusLabels } from '~/api/schema.graphql';
 import { labelFrom } from '~/common';
 import { idForUrl } from '../Changeset';
@@ -14,33 +14,6 @@ import { useNumberFormatter } from '../Formatters';
 import { ButtonLink, CardActionAreaLink } from '../Routing';
 import { LanguageEngagementListItemFragment } from './LanguageEngagementListItem.graphql';
 
-const useStyles = makeStyles()(({ spacing }) => ({
-  root: {
-    width: '100%',
-  },
-  card: {
-    display: 'flex',
-    alignItems: 'initial',
-  },
-
-  cardContent: {
-    flex: 1,
-    padding: spacing(2, 3),
-    display: 'flex',
-  },
-  leftContent: {
-    flex: 1,
-  },
-  rightContent: {
-    flex: 0,
-    textAlign: 'right',
-    marginLeft: spacing(2),
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-end',
-  },
-}));
-
 export type LanguageEngagementListItemCardProps =
   LanguageEngagementListItemFragment & {
     className?: string;
@@ -52,7 +25,6 @@ export const LanguageEngagementListItemCard = (
   const { language: securedLanguage, className, status, products } = props;
 
   const numberFormatter = useNumberFormatter();
-  const { classes, cx } = useStyles();
 
   const language = securedLanguage.value;
   const name = language?.name.value ?? language?.displayName.value;
@@ -62,18 +34,28 @@ export const LanguageEngagementListItemCard = (
   const ethnologueCode = language?.ethnologue.code.value;
 
   return (
-    <Card className={cx(classes.root, className)}>
+    <Card className={className} sx={{ width: '100%' }}>
       <CardActionAreaLink
         to={`/engagements/${idForUrl(props)}`}
-        className={classes.card}
+        sx={{
+          display: 'flex',
+          alignItems: 'initial',
+        }}
       >
-        <CardContent className={classes.cardContent}>
+        <CardContent
+          sx={{
+            flex: 1,
+            px: 3,
+            py: 2,
+            display: 'flex',
+          }}
+        >
           <Grid
             container
             direction="column"
             justifyContent="space-between"
             spacing={1}
-            className={classes.leftContent}
+            sx={{ flex: 1 }}
           >
             <Grid item>
               <Typography variant="h4">{name}</Typography>
@@ -99,7 +81,14 @@ export const LanguageEngagementListItemCard = (
               wrap={(node) => <Grid item>{node}</Grid>}
             />
           </Grid>
-          <div className={classes.rightContent}>
+          <Stack
+            sx={{
+              flex: 0,
+              textAlign: 'right',
+              ml: 2,
+              justifyContent: 'flex-end',
+            }}
+          >
             <DisplaySimpleProperty aria-hidden="true" />
             <div>
               <Typography variant="h1">
@@ -109,7 +98,7 @@ export const LanguageEngagementListItemCard = (
                 Goals
               </Typography>
             </div>
-          </div>
+          </Stack>
         </CardContent>
       </CardActionAreaLink>
       <CardActions>
diff --git a/src/components/LocationCard/LocationCard.tsx b/src/components/LocationCard/LocationCard.tsx
index 84430425ef..c74a57dffd 100644
--- a/src/components/LocationCard/LocationCard.tsx
+++ b/src/components/LocationCard/LocationCard.tsx
@@ -5,7 +5,6 @@ import {
   Skeleton,
   Typography,
 } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { LocationTypeLabels } from '~/api/schema.graphql';
 import { labelFrom } from '~/common';
 import { FormattedDateTime } from '../Formatters';
@@ -14,22 +13,6 @@ import { Redacted } from '../Redacted';
 import { ButtonLink, CardActionAreaLink } from '../Routing';
 import { LocationCardFragment } from './LocationCard.graphql';
 
-const useStyles = makeStyles()(({ spacing }) => {
-  return {
-    root: {
-      width: '100%',
-      maxWidth: 400,
-    },
-    cardActions: {
-      display: 'flex',
-      justifyContent: 'space-between',
-    },
-    createdAt: {
-      paddingRight: spacing(1), // make symmetrical with button padding
-    },
-  };
-});
-
 export interface LocationCardProps {
   className?: string;
   loading?: boolean;
@@ -46,9 +29,8 @@ export const LocationCard = ({
   removing,
 }: LocationCardProps) => {
   const { id, name, locationType, createdAt } = location ?? {};
-  const { classes, cx } = useStyles();
   return (
-    <Card className={cx(classes.root, className)}>
+    <Card className={className} sx={{ width: '100%', maxWidth: 400 }}>
       <CardActionAreaLink to={`/locations/${id}`}>
         <CardContent>
           <Typography variant="h4" gutterBottom>
@@ -77,7 +59,7 @@ export const LocationCard = ({
           </Typography>
         </CardContent>
       </CardActionAreaLink>
-      <CardActions className={classes.cardActions}>
+      <CardActions sx={{ justifyContent: 'space-between' }}>
         <ButtonLink to={`/locations/${id}`} color="primary" disabled={loading}>
           View Location
         </ButtonLink>
@@ -94,7 +76,9 @@ export const LocationCard = ({
           <Typography
             variant="caption"
             color="textSecondary"
-            className={classes.createdAt}
+            sx={{
+              pr: 1,
+            }}
           >
             {loading ? (
               <Skeleton width="25%" />
diff --git a/src/components/MemberListSummary/MemberListSummary.tsx b/src/components/MemberListSummary/MemberListSummary.tsx
index d093ea73ad..66a525630e 100644
--- a/src/components/MemberListSummary/MemberListSummary.tsx
+++ b/src/components/MemberListSummary/MemberListSummary.tsx
@@ -7,25 +7,11 @@ import {
 } from '@mui/material';
 import { To } from 'history';
 import { compact } from 'lodash';
-import { makeStyles } from 'tss-react/mui';
 import { listOrPlaceholders } from '~/common';
 import { Avatar } from '../Avatar';
 import { HugeIcon, HugeIconProps } from '../Icons';
 import { CardActionAreaLink } from '../Routing';
 
-const useStyles = makeStyles()(({ spacing }) => ({
-  bottomContent: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  avatarGroup: {
-    marginRight: spacing(1),
-  },
-  memberNames: {
-    flexGrow: 1,
-  },
-}));
-
 export interface MemberSummaryItem {
   // url to picture
   picture?: string;
@@ -51,8 +37,6 @@ export const MemberListSummary = ({
   to,
   icon,
 }: MemberListSummaryProps) => {
-  const { classes } = useStyles();
-
   return (
     <CardActionAreaLink to={to} disabled={!members}>
       <CardContent>
@@ -71,8 +55,8 @@ export const MemberListSummary = ({
             See All
           </Typography>
         </Stack>
-        <div className={classes.bottomContent}>
-          <AvatarGroup max={max} className={classes.avatarGroup}>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <AvatarGroup max={max} sx={{ mr: 1 }}>
             {listOrPlaceholders(members, max).map((member, i) => (
               <Avatar
                 key={member?.id || i}
@@ -84,11 +68,7 @@ export const MemberListSummary = ({
               </Avatar>
             ))}
           </AvatarGroup>
-          <Typography
-            className={classes.memberNames}
-            color="primary"
-            variant="body2"
-          >
+          <Typography sx={{ flexGrow: 1 }} color="primary" variant="body2">
             {!members ? (
               <>
                 <Skeleton variant="text" width="75%" />
diff --git a/src/components/MethodologiesCard/MethodologiesCard.tsx b/src/components/MethodologiesCard/MethodologiesCard.tsx
index 13ee35b552..eca8954da1 100644
--- a/src/components/MethodologiesCard/MethodologiesCard.tsx
+++ b/src/components/MethodologiesCard/MethodologiesCard.tsx
@@ -6,7 +6,6 @@ import {
   Skeleton,
   Typography,
 } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import {
   ApproachIcons,
   displayMethodology,
@@ -15,31 +14,6 @@ import {
 } from '~/common';
 import { MethodologiesCardFragment } from './MethodologiesCard.graphql';
 
-const useStyles = makeStyles()(({ palette, spacing }) => ({
-  root: {
-    width: '100%',
-    height: '100%',
-  },
-  actionArea: {
-    height: '100%',
-  },
-  cardContent: {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    padding: spacing(3, 4),
-  },
-  methodology: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  icon: {
-    display: 'flex',
-    color: palette.text.secondary,
-    marginRight: spacing(0.5),
-  },
-}));
-
 export interface MethodologiesCardProps {
   data?: MethodologiesCardFragment;
   onClick?: () => void;
@@ -51,17 +25,23 @@ export const MethodologiesCard = ({
   onClick,
   className,
 }: MethodologiesCardProps) => {
-  const { classes, cx } = useStyles();
-
   if (data?.canRead === false) {
     return null;
   }
 
   const methodologyListChips = listOrPlaceholders(data?.value, 2).map(
     (methodology, index) => (
-      <Grid item className={classes.methodology} key={methodology ?? index}>
+      <Grid
+        item
+        key={methodology ?? index}
+        sx={{ display: 'flex', alignItems: 'center' }}
+      >
         {methodology && (
-          <Grid item wrap="nowrap" className={classes.icon}>
+          <Grid
+            item
+            wrap="nowrap"
+            sx={{ display: 'flex', color: 'text.secondary', mr: 0.5 }}
+          >
             {ApproachIcons[MethodologyToApproach[methodology]]}
           </Grid>
         )}
@@ -77,7 +57,15 @@ export const MethodologiesCard = ({
   );
 
   const content = (
-    <CardContent className={classes.cardContent}>
+    <CardContent
+      sx={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        py: 3,
+        px: 4,
+      }}
+    >
       <Typography variant="h4" paragraph>
         Methodologies
       </Typography>
@@ -94,9 +82,9 @@ export const MethodologiesCard = ({
   );
 
   return (
-    <Card className={cx(classes.root, className)}>
+    <Card className={className} sx={{ width: '1', height: '1' }}>
       {data?.canEdit ? (
-        <CardActionArea onClick={onClick} className={classes.actionArea}>
+        <CardActionArea onClick={onClick} sx={{ height: '1' }}>
           {content}
         </CardActionArea>
       ) : (
diff --git a/src/components/OrganizationListItemCard/OrganizationListItemCard.tsx b/src/components/OrganizationListItemCard/OrganizationListItemCard.tsx
index 40b4c5c0c6..03fa30a5e6 100644
--- a/src/components/OrganizationListItemCard/OrganizationListItemCard.tsx
+++ b/src/components/OrganizationListItemCard/OrganizationListItemCard.tsx
@@ -1,28 +1,8 @@
 import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material';
 import { random } from 'lodash';
-import { makeStyles } from 'tss-react/mui';
 import { CardActionAreaLink } from '../Routing';
 import { OrganizationListItemFragment } from './OrganizationListItem.graphql';
 
-const useStyles = makeStyles()(({ breakpoints, spacing }) => {
-  const cardWidth = breakpoints.values.sm;
-  return {
-    root: {
-      width: '100%',
-      maxWidth: cardWidth,
-    },
-    card: {
-      display: 'flex',
-      alignItems: 'initial',
-    },
-    cardContent: {
-      flex: 1,
-      padding: spacing(2, 3),
-      display: 'flex',
-      justifyContent: 'space-between',
-    },
-  };
-});
 export interface OrganizationListItemCardProps {
   organization?: OrganizationListItemFragment;
   className?: string;
@@ -35,16 +15,28 @@ export const OrganizationListItemCard = ({
   organization,
   className,
 }: OrganizationListItemCardProps) => {
-  const { classes, cx } = useStyles();
-
   return (
-    <Card className={cx(className, classes.root)}>
+    <Card
+      className={className}
+      sx={(theme) => ({
+        width: '100%',
+        maxWidth: theme.breakpoints.values.sm,
+      })}
+    >
       <CardActionAreaLink
         disabled={!organization}
         to={`/organizations/${organization?.id}`}
-        className={classes.card}
+        sx={{ display: 'flex', alignItems: 'initial' }}
       >
-        <CardContent className={classes.cardContent}>
+        <CardContent
+          sx={{
+            flex: 1,
+            py: 2,
+            px: 3,
+            display: 'flex',
+            justifyContent: 'space-between',
+          }}
+        >
           <Grid container direction="column" spacing={1}>
             <Grid item>
               <Typography variant="h4">
diff --git a/src/components/PartnerListItemCard/PartnerListItemCard.tsx b/src/components/PartnerListItemCard/PartnerListItemCard.tsx
index 95c750de6a..aea55aeb99 100644
--- a/src/components/PartnerListItemCard/PartnerListItemCard.tsx
+++ b/src/components/PartnerListItemCard/PartnerListItemCard.tsx
@@ -1,31 +1,11 @@
 import { Card, CardContent, Skeleton, Stack, Typography } from '@mui/material';
 import { random } from 'lodash';
-import { makeStyles } from 'tss-react/mui';
 import { PartialDeep } from 'type-fest';
 import { PartnersQueryVariables } from '../../scenes/Partners/List/PartnerList.graphql';
 import { CardActionAreaLink } from '../Routing';
 import { TogglePinButton } from '../TogglePinButton';
 import { PartnerListItemFragment } from './PartnerListItemCard.graphql';
 
-const useStyles = makeStyles()(({ breakpoints }) => {
-  const cardWidth = breakpoints.values.sm;
-  return {
-    root: {
-      width: '100%',
-      maxWidth: cardWidth,
-      position: 'relative',
-    },
-    card: {
-      display: 'flex',
-      alignItems: 'initial',
-    },
-    pin: {
-      position: 'absolute',
-      top: 5,
-      right: 5,
-    },
-  };
-});
 export interface PartnerListItemCardProps {
   partner?: PartnerListItemFragment;
   className?: string;
@@ -38,18 +18,23 @@ export const PartnerListItemCard = ({
   partner,
   className,
 }: PartnerListItemCardProps) => {
-  const { classes, cx } = useStyles();
-
   const org = partner?.organization.value;
   const acronym = org?.acronym.value;
   const name = org?.name.value;
 
   return (
-    <Card className={cx(className, classes.root)}>
+    <Card
+      className={className}
+      sx={{
+        width: '100%',
+        maxWidth: (theme) => theme.breakpoints.values.sm,
+        position: 'relative',
+      }}
+    >
       <CardActionAreaLink
         disabled={!partner}
         to={`/partners/${partner?.id}`}
-        className={classes.card}
+        sx={{ display: 'flex', alignItems: 'initial' }}
       >
         <Stack component={CardContent} flex={1} gap={1}>
           <Typography variant="h4">
@@ -77,7 +62,7 @@ export const PartnerListItemCard = ({
         listFilter={(args: PartialDeep<PartnersQueryVariables>) =>
           args.input?.filter?.pinned ?? false
         }
-        className={classes.pin}
+        sx={{ position: 'absolute', top: 5, right: 5 }}
         size="small"
       />
     </Card>
diff --git a/src/components/ProgressButton/ProgressButton.tsx b/src/components/ProgressButton/ProgressButton.tsx
index 6079588341..2fba2f4b73 100644
--- a/src/components/ProgressButton/ProgressButton.tsx
+++ b/src/components/ProgressButton/ProgressButton.tsx
@@ -32,6 +32,10 @@ export const ProgressButton = forwardRef<
     <>
       {progress ? (
         <div
+          // This is to center spinner within button, while maintaining consistent button width.
+          // If we were to replace the button text, the button size could change which we want to
+          // avoid because the buttons shifting around is jarring for the user. Esp since the
+          // spinner is only shown for a short time.
           style={{
             position: 'absolute',
             inset: 0,
diff --git a/src/components/ProjectChangeRequestListItem/ProjectChangeRequestListItem.tsx b/src/components/ProjectChangeRequestListItem/ProjectChangeRequestListItem.tsx
index 3eedf66dae..62af483910 100644
--- a/src/components/ProjectChangeRequestListItem/ProjectChangeRequestListItem.tsx
+++ b/src/components/ProjectChangeRequestListItem/ProjectChangeRequestListItem.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   Card,
   CardActions,
@@ -7,7 +8,6 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { ProjectChangeRequestTypeLabels } from '~/api/schema.graphql';
 import { labelsFrom } from '~/common';
 import { useProjectId } from '../../scenes/Projects/useProjectId';
@@ -16,23 +16,6 @@ import { FormattedDateTime } from '../Formatters';
 import { useNavigate } from '../Routing';
 import { ProjectChangeRequestListItemFragment as ChangeRequest } from './ProjectChangeRequestListItem.graphql';
 
-const useStyles = makeStyles()(({ palette, spacing }) => ({
-  titleLoading: {
-    display: 'flex',
-  },
-  dash: {
-    color: palette.text.secondary,
-    margin: spacing(0, 1),
-  },
-  cardActions: {
-    display: 'flex',
-    padding: spacing(1, 2, 1, 1),
-  },
-  spacer: {
-    flex: 1,
-  },
-}));
-
 export interface ProjectChangeRequestListItemProps {
   data?: ChangeRequest;
   className?: string;
@@ -42,7 +25,6 @@ export const ProjectChangeRequestListItem = ({
   data,
   className,
 }: ProjectChangeRequestListItemProps) => {
-  const { classes } = useStyles();
   const { projectId, changesetId: currentlyViewing } = useProjectId();
   const navigate = useNavigate();
 
@@ -51,7 +33,13 @@ export const ProjectChangeRequestListItem = ({
       <CardContent>
         <Typography
           variant="body1"
-          className={data ? undefined : classes.titleLoading}
+          sx={
+            data
+              ? undefined
+              : {
+                  display: 'flex',
+                }
+          }
         >
           <Typography
             component="span"
@@ -62,7 +50,7 @@ export const ProjectChangeRequestListItem = ({
           >
             {!data ? <Skeleton width="100%" /> : data.status.value}
           </Typography>
-          <span className={classes.dash}>—</span>
+          <Box sx={{ color: 'text.secondary', mx: 1 }}>—</Box>
           <Typography
             component="span"
             variant="inherit"
@@ -87,7 +75,13 @@ export const ProjectChangeRequestListItem = ({
           {!data ? <Skeleton width="40%" /> : data.summary.value}
         </Typography>
       </CardContent>
-      <CardActions className={classes.cardActions}>
+      <CardActions
+        sx={(theme) => ({
+          display: 'flex',
+          justifyContent: 'space-between',
+          padding: theme.spacing(1, 2, 1, 1),
+        })}
+      >
         {!data || data.canEdit ? (
           <Button
             disabled={!data || currentlyViewing === data.id}
@@ -104,7 +98,6 @@ export const ProjectChangeRequestListItem = ({
             Review
           </Button>
         </Tooltip>
-        <div className={classes.spacer} />
         <Typography variant="subtitle2" color="textSecondary">
           {!data ? (
             <Skeleton width="23ch" />
diff --git a/src/components/Redacted/Redacted.tsx b/src/components/Redacted/Redacted.tsx
index b999abb295..8fde699cca 100644
--- a/src/components/Redacted/Redacted.tsx
+++ b/src/components/Redacted/Redacted.tsx
@@ -1,6 +1,6 @@
 import { Skeleton, SkeletonProps, Tooltip, TooltipProps } from '@mui/material';
 import { Except } from 'type-fest';
-import { ChildrenProp } from '~/common';
+import { ChildrenProp, extendSx } from '~/common';
 
 export interface RedactedProps {
   info: TooltipProps['title'];
@@ -22,10 +22,12 @@ export const Redacted = ({
         animation={false}
         width={width}
         {...SkeletonProps}
-        sx={{
-          transform: 'initial',
-          ...SkeletonProps?.sx,
-        }}
+        sx={[
+          {
+            text: 'initial',
+          },
+          ...extendSx(SkeletonProps?.sx),
+        ]}
       >
         {children}
       </Skeleton>
diff --git a/src/components/Upload/UploadItem.tsx b/src/components/Upload/UploadItem.tsx
index 11df18529d..a08b41fd72 100644
--- a/src/components/Upload/UploadItem.tsx
+++ b/src/components/Upload/UploadItem.tsx
@@ -2,50 +2,15 @@ import {
   Cancel as CancelIcon,
   CheckCircle as CheckIcon,
 } from '@mui/icons-material';
-import { CircularProgress, IconButton, Typography } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
+import {
+  Box,
+  CircularProgress,
+  IconButton,
+  Stack,
+  Typography,
+} from '@mui/material';
 import { UploadFile } from './Reducer';
 
-const useStyles = makeStyles()(({ palette, spacing }) => ({
-  container: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: spacing(1),
-    '&:not(:last-of-type)': {
-      borderBottom: `1px solid ${palette.divider}`,
-    },
-    width: '100%',
-  },
-  text: {
-    marginRight: spacing(2),
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-  fileName: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-  statusText: {
-    fontSize: '0.65rem',
-    verticalAlign: 'middle',
-  },
-  percentCompleted: {
-    verticalAlign: 'middle',
-  },
-  progressContainer: {
-    padding: '12px',
-  },
-  postUploadButton: {
-    color: palette.error.main,
-  },
-  completedIcon: {
-    color: palette.primary.main,
-  },
-}));
-
 interface UploadItemProps {
   file: UploadFile;
   onClear: () => void;
@@ -54,7 +19,6 @@ interface UploadItemProps {
 export const UploadItem = (props: UploadItemProps) => {
   const { file, onClear } = props;
   const { error, fileName, percentCompleted, uploadId, completedAt } = file;
-  const { classes } = useStyles();
 
   const progressLabel = error
     ? error.message
@@ -65,54 +29,84 @@ export const UploadItem = (props: UploadItemProps) => {
     : 'Uploading';
 
   return (
-    <div className={classes.container}>
-      <div className={classes.text}>
-        <Typography variant="body2" className={classes.fileName}>
+    <Box
+      sx={(theme) => ({
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: theme.spacing(1),
+        '&:not(:last-of-type)': {
+          borderBottom: `1px solid ${theme.palette.divider}`,
+        },
+        width: '100%',
+      })}
+    >
+      <Stack
+        sx={(theme) => ({
+          mr: theme.spacing(2),
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        })}
+      >
+        <Typography
+          variant="body2"
+          sx={{
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
           {fileName}
         </Typography>
         <Typography
           variant="caption"
-          className={classes.statusText}
+          sx={{
+            fontSize: '0.65rem',
+            verticalAlign: 'middle',
+          }}
           color={error ? 'error' : 'textSecondary'}
         >
           {progressLabel}
         </Typography>
         {!error && !completedAt && uploadId && (
           <Typography
-            className={classes.percentCompleted}
+            sx={{
+              verticalAlign: 'middle',
+            }}
             variant="caption"
             color="primary"
           >
             &nbsp;– {Math.min(99, Math.round(percentCompleted))}%
           </Typography>
         )}
-      </div>
+      </Stack>
       {error ? (
-        <IconButton
-          aria-label="clear"
-          onClick={onClear}
-          className={classes.postUploadButton}
-        >
+        <IconButton aria-label="clear" onClick={onClear} color="error">
           <CancelIcon />
         </IconButton>
       ) : completedAt ? (
         <IconButton
           aria-label="completed"
+          color="error"
           onClick={() => console.log('TODO: Add onCompleted click handler')}
-          className={classes.postUploadButton}
         >
-          <CheckIcon className={classes.completedIcon} />
+          <CheckIcon color="primary" />
         </IconButton>
       ) : (
-        <div className={classes.progressContainer}>
+        <Box
+          sx={{
+            p: '12px',
+          }}
+        >
           <CircularProgress
             variant="determinate"
             size="1.5em"
             thickness={4.6}
             value={percentCompleted}
           />
-        </div>
+        </Box>
       )}
-    </div>
+    </Box>
   );
 };
diff --git a/src/components/Upload/UploadItems.tsx b/src/components/Upload/UploadItems.tsx
index 4c467ac87b..9ae9481100 100644
--- a/src/components/Upload/UploadItems.tsx
+++ b/src/components/Upload/UploadItems.tsx
@@ -1,14 +1,7 @@
 import { Box, Typography } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { UploadFile, UploadState } from './Reducer/uploadTypings';
 import { UploadItem } from './UploadItem';
 
-const useStyles = makeStyles()(({ palette }) => ({
-  noUploadsText: {
-    color: palette.action.disabled,
-  },
-}));
-
 interface UploadItemsProps {
   removeUpload: (queueId: UploadFile['queueId']) => void;
   state: UploadState;
@@ -20,7 +13,6 @@ export const UploadItems = (props: UploadItemsProps) => {
     removeUpload,
   } = props;
   const areFilesUploading = submittedFiles.length > 0;
-  const { classes } = useStyles();
 
   // const testFile = {
   //   completedAt: undefined,
@@ -51,7 +43,9 @@ export const UploadItems = (props: UploadItemsProps) => {
           <Typography
             variant="h5"
             component="span"
-            className={classes.noUploadsText}
+            sx={(theme) => ({
+              color: theme.palette.action.disabled,
+            })}
           >
             No uploads
           </Typography>