diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/StyledComponents.ts b/src/components/Contacts/ContactDetails/ContactDetailsTab/StyledComponents.ts
index 1f1437701..f6ba84de5 100644
--- a/src/components/Contacts/ContactDetails/ContactDetailsTab/StyledComponents.ts
+++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/StyledComponents.ts
@@ -1,5 +1,6 @@
 import Add from '@mui/icons-material/Add';
 import Create from '@mui/icons-material/Create';
+import Lock from '@mui/icons-material/Lock';
 import { Button, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
@@ -23,3 +24,10 @@ export const AddText = styled(Typography)(({ theme }) => ({
   textTransform: 'uppercase',
   fontWeight: 'bold',
 }));
+
+export const LockIcon = styled(Lock)(({ theme }) => ({
+  width: '18px',
+  height: '18px',
+  margin: theme.spacing(0),
+  color: theme.palette.cruGrayMedium.main,
+}));
diff --git a/src/components/Tool/FixMailingAddresses/Contact.tsx b/src/components/Tool/FixMailingAddresses/Contact.tsx
index 9cff5d6a0..97d68fc70 100644
--- a/src/components/Tool/FixMailingAddresses/Contact.tsx
+++ b/src/components/Tool/FixMailingAddresses/Contact.tsx
@@ -1,70 +1,59 @@
 import React, { Fragment } from 'react';
-import { mdiCheckboxMarkedCircle, mdiLock, mdiPencil, mdiPlus } from '@mdi/js';
+import styled from '@emotion/styled';
+import { mdiCheckboxMarkedCircle, mdiPlus } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import StarIcon from '@mui/icons-material/Star';
 import StarOutlineIcon from '@mui/icons-material/StarOutline';
-import { Avatar, Box, Button, Grid, Hidden, Typography } from '@mui/material';
+import {
+  Avatar,
+  Box,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Grid,
+  Hidden,
+  IconButton,
+  Typography,
+} from '@mui/material';
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
+import {
+  EditIcon,
+  LockIcon,
+} from 'src/components/Contacts/ContactDetails/ContactDetailsTab/StyledComponents';
 import { useLocale } from 'src/hooks/useLocale';
 import { dateFormatShort } from 'src/lib/intlFormat';
+import { contactPartnershipStatus } from 'src/utils/contacts/contactPartnershipStatus';
 import theme from '../../../theme';
 import { emptyAddress } from './FixMailingAddresses';
 import { ContactAddressFragment } from './GetInvalidAddresses.generated';
 
-const useStyles = makeStyles()(() => ({
-  left: {
-    [theme.breakpoints.up('lg')]: {
-      border: `1px solid ${theme.palette.cruGrayMedium.main}`,
-    },
-  },
-  container: {
-    display: 'flex',
-    alignItems: 'center',
-    marginBottom: theme.spacing(2),
-    [theme.breakpoints.down('md')]: {
-      border: `1px solid ${theme.palette.cruGrayMedium.main}`,
-    },
-  },
-  boxBottom: {
-    backgroundColor: theme.palette.cruGrayLight.main,
-    width: '100%',
-    [theme.breakpoints.down('sm')]: {
-      paddingTop: theme.spacing(2),
-    },
-  },
-  buttonTop: {
-    padding: theme.spacing(1),
-    [theme.breakpoints.down('md')]: {
-      display: 'flex',
-      justifyContent: 'center',
-      padding: theme.spacing(2),
-    },
-    '& .MuiButton-root': {
-      backgroundColor: theme.palette.mpdxBlue.main,
-      width: '100%',
-      color: 'white',
-      [theme.breakpoints.down('md')]: {
-        width: '50%',
-      },
-      [theme.breakpoints.down('xs')]: {
-        width: '100%',
-      },
-    },
+const ContactHeader = styled(CardHeader)(() => ({
+  '.MuiCardHeader-action': {
+    alignSelf: 'center',
   },
-  buttonIcon: {
+}));
+
+const ContactIconContainer = styled(IconButton)(() => ({
+  margin: theme.spacing(0, 1),
+  width: theme.spacing(4),
+  height: theme.spacing(4),
+}));
+
+const ContactAvatar = styled(Avatar)(() => ({
+  width: theme.spacing(4),
+  height: theme.spacing(4),
+}));
+
+const useStyles = makeStyles()(() => ({
+  confirmButon: {
     marginRight: theme.spacing(1),
   },
-  rowChangeResponsive: {
-    flexDirection: 'column',
-    [theme.breakpoints.down('sm')]: {
-      marginTop: -20,
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-    },
+  contactCard: {
+    marginBottom: theme.spacing(2),
   },
   responsiveBorder: {
     [theme.breakpoints.down('sm')]: {
@@ -80,22 +69,28 @@ const useStyles = makeStyles()(() => ({
     paddingTop: theme.spacing(2),
     paddingBottom: theme.spacing(2),
   },
+  paddingL2: {
+    paddingLeft: theme.spacing(2),
+    '@media(max-width: 900px)': {
+      paddingLeft: 0,
+    },
+  },
   paddingB2: {
     paddingBottom: theme.spacing(2),
   },
   address: {
     borderBottom: '1px solid gray',
     width: '100%',
-    cursor: 'text',
+    cursor: 'pointer',
   },
   hoverHighlight: {
+    cursor: 'pointer',
     '&:hover': {
       color: theme.palette.mpdxBlue.main,
     },
   },
-  avatar: {
-    width: theme.spacing(7),
-    height: theme.spacing(7),
+  alignCenter: {
+    textAlign: 'center',
   },
 }));
 
@@ -121,179 +116,138 @@ const Contact: React.FC<Props> = ({
   //TODO: Make contact name a link to contact page
 
   return (
-    <Grid container className={classes.container}>
-      <Grid container>
-        <Grid item lg={10} xs={12}>
-          <Box display="flex" alignItems="center" className={classes.left}>
-            <Grid container>
-              <Grid item xs={12}>
+    <Card className={classes.contactCard}>
+      <ContactHeader
+        avatar={<ContactAvatar src="" aria-label="Contact Avatar" />}
+        action={
+          <Button variant="contained" className={classes.confirmButon}>
+            <Icon path={mdiCheckboxMarkedCircle} size={0.8} />
+            {t('Confirm')}
+          </Button>
+        }
+        title={<Typography variant="h6">{name}</Typography>}
+        subheader={<Typography>{contactPartnershipStatus[status]}</Typography>}
+      />
+      <CardContent className={(classes.paddingX, classes.paddingY)}>
+        <Grid item xs={12}>
+          <Grid container>
+            <Hidden mdDown>
+              <Grid item xs={12} md={5} className={classes.paddingB2}>
+                <Box display="flex" justifyContent="space-between">
+                  <Grid item md={8}>
+                    <Typography>
+                      <strong>{t('Source')}</strong>
+                    </Typography>
+                  </Grid>
+                  <Grid item md={4}>
+                    <Typography align="center">
+                      <strong>{t('Primary')}</strong>
+                    </Typography>
+                  </Grid>
+                </Box>
+              </Grid>
+              <Grid item xs={12} md={7} className={classes.paddingB2}>
                 <Box
                   display="flex"
-                  alignItems="center"
-                  style={{ height: '100%' }}
-                  p={2}
+                  justifyContent="flex-start"
+                  className={classes.paddingX}
                 >
-                  <Avatar src="" className={classes.avatar} />
-                  <Box display="flex" flexDirection="column" ml={2}>
-                    <Typography variant="h6">{name}</Typography>
-                    <Typography>{status}</Typography>
-                  </Box>
+                  <Typography>
+                    <strong>{t('Address')}</strong>
+                  </Typography>
                 </Box>
               </Grid>
-
-              <Grid item xs={12} className={classes.boxBottom}>
-                <Grid container>
-                  <Hidden smDown>
-                    <Grid item xs={12} md={6} className={classes.paddingY}>
-                      <Box
-                        display="flex"
-                        justifyContent="space-between"
-                        className={classes.paddingX}
-                      >
-                        <Typography>
-                          <strong>{t('Source')}</strong>
-                        </Typography>
-                        <Typography>
-                          <strong>{t('Primary')}</strong>
+            </Hidden>
+            {addresses.map((address) => (
+              <Fragment key={address.street}>
+                <Grid item xs={12} md={5} className={classes.paddingB2}>
+                  <Box display="flex" justifyContent="space-between">
+                    <Grid item md={8}>
+                      <Hidden mdUp>
+                        <Typography display="inline">
+                          <strong>{t('Source')}: </strong>
                         </Typography>
-                      </Box>
+                      </Hidden>
+                      <Typography display="inline">
+                        {address.source}{' '}
+                      </Typography>
+                      <Typography display="inline">
+                        {dateFormatShort(
+                          DateTime.fromISO(address.createdAt),
+                          locale,
+                        )}
+                      </Typography>
                     </Grid>
-                    <Grid item xs={12} md={6} className={classes.paddingY}>
-                      <Box
-                        display="flex"
-                        justifyContent="flex-start"
-                        className={classes.paddingX}
-                      >
-                        <Typography>
-                          <strong>{t('Address')}</strong>
-                        </Typography>
-                      </Box>
+                    <Grid item md={4} className={classes.alignCenter}>
+                      <ContactIconContainer aria-label={t('Edit Icon')}>
+                        {address.primaryMailingAddress ? (
+                          <StarIcon className={classes.hoverHighlight} />
+                        ) : (
+                          <StarOutlineIcon className={classes.hoverHighlight} />
+                        )}
+                      </ContactIconContainer>
                     </Grid>
-                  </Hidden>
-                  {addresses.map((address) => (
-                    <Fragment key={address.street}>
-                      <Grid item xs={12} md={6} className={classes.paddingB2}>
-                        <Box
-                          display="flex"
-                          justifyContent="space-between"
-                          className={classes.paddingX}
-                        >
-                          <Box>
-                            <Hidden mdUp>
-                              <Typography display="inline">
-                                <strong>{t('Source')}: </strong>
-                              </Typography>
-                            </Hidden>
-                            <Typography display="inline">
-                              {address.source}{' '}
-                            </Typography>
-                            <Typography display="inline">
-                              {dateFormatShort(
-                                DateTime.fromISO(address.createdAt),
-                                locale,
-                              )}
-                            </Typography>
-                          </Box>
-                          <Typography>
-                            {address.primaryMailingAddress ? (
-                              <StarIcon className={classes.hoverHighlight} />
-                            ) : (
-                              <StarOutlineIcon
-                                className={classes.hoverHighlight}
-                              />
-                            )}
-                          </Typography>
-                        </Box>
-                      </Grid>
-                      <Grid item xs={12} md={6} className={classes.paddingB2}>
-                        <Box
-                          display="flex"
-                          justifyContent="flex-start"
-                          className={clsx(
-                            classes.responsiveBorder,
-                            classes.paddingX,
-                            classes.hoverHighlight,
-                          )}
-                        >
-                          <Box
-                            onClick={() => openFunction(address)}
-                            className={classes.address}
-                          >
-                            <Typography>
-                              {`${address.street}, ${address.city} ${
-                                address.state ? address.state : ''
-                              }. ${address.postalCode}`}
-                            </Typography>
-                          </Box>
-
-                          <Icon
-                            path={
-                              address.source === 'MPDX' ? mdiPencil : mdiLock
-                            }
-                            size={1}
-                          />
-                        </Box>
-                      </Grid>
-                    </Fragment>
-                  ))}
-                  <Grid item xs={12} md={6} className={classes.paddingB2}>
-                    <Box
-                      display="flex"
-                      justifyContent="space-between"
-                      className={classes.paddingX}
-                    >
-                      <Box>
-                        <Hidden mdUp>
-                          <Typography display="inline">
-                            <strong>{t('Source')}: </strong>
-                          </Typography>
-                        </Hidden>
-                        <Typography display="inline">MPDX</Typography>
-                      </Box>
-                    </Box>
-                  </Grid>
-                  <Grid item xs={12} md={6} className={classes.paddingB2}>
-                    <Box
-                      display="flex"
-                      justifyContent="flex-start"
-                      className={clsx(
-                        classes.responsiveBorder,
-                        classes.paddingX,
-                        classes.hoverHighlight,
-                      )}
-                    >
-                      <Box
-                        onClick={() => openFunction(newAddress)}
-                        className={classes.address}
-                      />
-                      <Icon path={mdiPlus} size={1} />
+                  </Box>
+                </Grid>
+                <Grid item xs={12} md={7} className={classes.paddingB2}>
+                  <Box
+                    display="flex"
+                    justifyContent="flex-start"
+                    className={clsx(
+                      classes.responsiveBorder,
+                      classes.paddingL2,
+                      classes.hoverHighlight,
+                    )}
+                    onClick={() => openFunction(address)}
+                  >
+                    <Box className={classes.address}>
+                      <Typography>
+                        {`${address.street}, ${address.city} ${
+                          address.state ? address.state : ''
+                        }. ${address.postalCode}`}
+                      </Typography>
                     </Box>
-                  </Grid>
+
+                    <ContactIconContainer aria-label={t('Edit Icon')}>
+                      {address.source === 'MPDX' ? <EditIcon /> : <LockIcon />}
+                    </ContactIconContainer>
+                  </Box>
                 </Grid>
-              </Grid>
+              </Fragment>
+            ))}
+            <Grid item xs={12} md={5} className={classes.paddingB2}>
+              <Box display="flex" justifyContent="space-between">
+                <Box>
+                  <Hidden mdUp>
+                    <Typography display="inline">
+                      <strong>{t('Source')}: </strong>
+                    </Typography>
+                  </Hidden>
+                  <Typography display="inline">MPDX</Typography>
+                </Box>
+              </Box>
             </Grid>
-          </Box>
-        </Grid>
-        <Grid item xs={12} lg={2}>
-          <Box
-            display="flex"
-            flexDirection="column"
-            style={{ paddingLeft: theme.spacing(1) }}
-          >
-            <Box className={classes.buttonTop}>
-              <Button variant="contained">
-                <Icon
-                  path={mdiCheckboxMarkedCircle}
-                  size={0.8}
-                  className={classes.buttonIcon}
+            <Grid item xs={12} md={7} className={classes.paddingB2}>
+              <Box
+                display="flex"
+                justifyContent="flex-start"
+                className={clsx(
+                  classes.responsiveBorder,
+                  classes.paddingX,
+                  classes.hoverHighlight,
+                )}
+              >
+                <Box
+                  onClick={() => openFunction(newAddress)}
+                  className={classes.address}
                 />
-                {t('Confirm')}
-              </Button>
-            </Box>
-          </Box>
+                <Icon path={mdiPlus} size={1} />
+              </Box>
+            </Grid>
+          </Grid>
         </Grid>
-      </Grid>
-    </Grid>
+      </CardContent>
+    </Card>
   );
 };
 
diff --git a/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx b/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx
index 43102d14a..b466681c4 100644
--- a/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx
+++ b/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx
@@ -7,14 +7,15 @@ import {
   CircularProgress,
   Divider,
   Grid,
-  NativeSelect,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
   Typography,
 } from '@mui/material';
 import { Trans, useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 import theme from '../../../theme';
 import NoData from '../NoData';
-import { StyledInput } from '../StyledInput';
 import AddressModal from './AddressModal';
 import Contact from './Contact';
 import {
@@ -49,15 +50,15 @@ const useStyles = makeStyles()(() => ({
     display: 'flex',
     justifyContent: 'center',
   },
-  buttonBlue: {
-    backgroundColor: theme.palette.mpdxBlue.main,
-    paddingRight: theme.spacing(1.5),
-    color: 'white',
-    [theme.breakpoints.down('xs')]: {
-      marginTop: theme.spacing(1),
-      marginBottom: theme.spacing(2),
+
+  confirmAllButton: {
+    [theme.breakpoints.down('md')]: {
+      width: '100%',
+      maxWidth: '200px',
+      margin: `${theme.spacing(1)} auto 0`,
     },
   },
+
   buttonIcon: {
     marginRight: theme.spacing(1),
   },
@@ -67,21 +68,23 @@ const useStyles = makeStyles()(() => ({
     alignItems: 'center',
     flexWrap: 'wrap',
     marginTop: theme.spacing(1),
+    [theme.breakpoints.down('sm')]: {
+      justifyContent: 'center',
+    },
     [theme.breakpoints.down('xs')]: {
       flexDirection: 'column',
       alignItems: 'start',
     },
   },
-  nativeSelect: {
+  select: {
     minWidth: theme.spacing(20),
-    width: '10%',
     marginLeft: theme.spacing(2),
     marginRight: theme.spacing(2),
-    [theme.breakpoints.down('xs')]: {
-      marginLeft: theme.spacing(0),
-      marginRight: theme.spacing(0),
-      marginTop: theme.spacing(1),
-      marginBottom: theme.spacing(1),
+
+    [theme.breakpoints.down('md')]: {
+      width: '100%',
+      maxWidth: '200px',
+      margin: `${theme.spacing(1)} auto 0`,
     },
   },
 }));
@@ -104,6 +107,8 @@ interface Props {
   accountListId: string;
 }
 
+const sourceOptions = ['MPDX', 'DataServer'];
+
 const FixSendNewsletter: React.FC<Props> = ({ accountListId }: Props) => {
   const { classes } = useStyles();
   const [modalState, setModalState] = useState({
@@ -143,98 +148,109 @@ const FixSendNewsletter: React.FC<Props> = ({ accountListId }: Props) => {
     }));
   };
 
-  const handleSourceChange = (
-    event: React.ChangeEvent<HTMLSelectElement>,
-  ): void => {
+  const handleSourceChange = (event: SelectChangeEvent<string>): void => {
     setDefaultSource(event.target.value);
   };
 
+  const totalContacts = data?.contacts?.nodes?.length || 0;
+
   //TODO: Make navbar selectId = "fixSendNewsletter" when other branch gets merged
 
   return (
     <Box className={classes.outer} data-testid="Home">
-      {!loading && data ? (
-        <Grid container className={classes.container}>
-          <Grid item xs={12}>
-            <Typography variant="h4">{t('Fix Mailing Addresses')}</Typography>
-            <Divider className={classes.divider} />
-          </Grid>
-          {data.contacts?.nodes.length > 0 ? (
-            <>
-              <Grid item xs={12}>
-                <Box className={classes.descriptionBox}>
-                  <Typography>
-                    <strong>
-                      {t('You have {{amount}} mailing addresses to confirm.', {
-                        amount: data?.contacts.nodes.length,
-                      })}
-                    </strong>
-                  </Typography>
-                  <Typography>
-                    {t(
-                      'Choose below which mailing address will be set as primary. Primary mailing addresses will be used for Newsletter exports.',
-                    )}
-                  </Typography>
-                  <Box className={classes.defaultBox}>
-                    <Typography>{t('Default Primary Source:')}</Typography>
-
-                    <NativeSelect
-                      input={<StyledInput />}
-                      className={classes.nativeSelect}
-                      value={defaultSource}
-                      onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
-                        handleSourceChange(event)
-                      }
-                    >
-                      <option value="MPDX">MPDX</option>
-                      <option value="DataServer">DataServer</option>
-                    </NativeSelect>
-                    <Button className={classes.buttonBlue}>
-                      <Icon
-                        path={mdiCheckboxMarkedCircle}
-                        size={0.8}
-                        className={classes.buttonIcon}
-                      />
-                      {t('Confirm {{amount}} as {{source}}', {
-                        amount: data?.contacts.nodes.length,
-                        source: defaultSource,
-                      })}
-                    </Button>
+      <Grid container className={classes.container}>
+        <Grid item xs={12}>
+          <Typography variant="h4">{t('Fix Mailing Addresses')}</Typography>
+          <Divider className={classes.divider} />
+        </Grid>
+
+        {loading && !data && (
+          <CircularProgress style={{ marginTop: theme.spacing(3) }} />
+        )}
+
+        {!loading && data && (
+          <React.Fragment>
+            {!totalContacts && <NoData tool="fixMailingAddresses" />}
+            {totalContacts && (
+              <>
+                <Grid item xs={12}>
+                  <Box className={classes.descriptionBox}>
+                    <Typography>
+                      <strong>
+                        {t(
+                          'You have {{amount}} mailing addresses to confirm.',
+                          {
+                            amount: totalContacts,
+                          },
+                        )}
+                      </strong>
+                    </Typography>
+                    <Typography>
+                      {t(
+                        'Choose below which mailing address will be set as primary. Primary mailing addresses will be used for Newsletter exports.',
+                      )}
+                    </Typography>
+                    <Box className={classes.defaultBox}>
+                      <Typography>{t('Default Primary Source:')}</Typography>
+
+                      <Select
+                        className={classes.select}
+                        value={defaultSource}
+                        onChange={handleSourceChange}
+                        size="small"
+                      >
+                        {sourceOptions.map((source) => (
+                          <MenuItem key={source} value={source}>
+                            {source}
+                          </MenuItem>
+                        ))}
+                      </Select>
+                      <Button
+                        variant="contained"
+                        className={classes.confirmAllButton}
+                      >
+                        <Icon
+                          path={mdiCheckboxMarkedCircle}
+                          size={0.8}
+                          className={classes.buttonIcon}
+                        />
+                        {t('Confirm {{amount}} as {{source}}', {
+                          amount: totalContacts,
+                          source: defaultSource,
+                        })}
+                      </Button>
+                    </Box>
                   </Box>
-                </Box>
-              </Grid>
-              <Grid item xs={12}>
-                {data.contacts.nodes.map((contact) => (
-                  <Contact
-                    id={contact.id}
-                    name={contact.name}
-                    status={contact.status || ''}
-                    key={contact.id}
-                    addresses={contact.addresses.nodes}
-                    openFunction={handleOpen}
-                  />
-                ))}
-              </Grid>
-              <Grid item xs={12}>
-                <Box className={classes.footer}>
-                  <Typography>
-                    <Trans
-                      defaults="Showing <bold>{{value}}</bold> of <bold>{{value}}</bold>"
-                      shouldUnescape
-                      values={{ value: data?.contacts.nodes.length }}
-                      components={{ bold: <strong /> }}
+                </Grid>
+                <Grid item xs={12}>
+                  {data.contacts.nodes.map((contact) => (
+                    <Contact
+                      id={contact.id}
+                      name={contact.name}
+                      status={contact.status || ''}
+                      key={contact.id}
+                      addresses={contact.addresses.nodes}
+                      openFunction={handleOpen}
                     />
-                  </Typography>
-                </Box>
-              </Grid>
-            </>
-          ) : (
-            <NoData tool="fixMailingAddresses" />
-          )}
-        </Grid>
-      ) : (
-        <CircularProgress style={{ marginTop: theme.spacing(3) }} />
-      )}
+                  ))}
+                </Grid>
+                <Grid item xs={12}>
+                  <Box className={classes.footer}>
+                    <Typography>
+                      <Trans
+                        defaults="Showing <bold>{{value}}</bold> of <bold>{{value}}</bold>"
+                        shouldUnescape
+                        values={{ value: totalContacts }}
+                        components={{ bold: <strong /> }}
+                      />
+                    </Typography>
+                  </Box>
+                </Grid>
+              </>
+            )}
+          </React.Fragment>
+        )}
+      </Grid>
       <AddressModal
         modalState={modalState}
         handleClose={handleClose}