diff --git a/app/src/components/attachments/list/AttachmentsList.test.tsx b/app/src/components/attachments/list/AttachmentsList.test.tsx
index a61432efb8..55de4d84d2 100644
--- a/app/src/components/attachments/list/AttachmentsList.test.tsx
+++ b/app/src/components/attachments/list/AttachmentsList.test.tsx
@@ -118,7 +118,7 @@ describe('AttachmentsList', () => {
                 handleDelete={jest.fn()}
                 handleViewDetails={jest.fn()}
                 handleRemoveOrResubmit={jest.fn()}
-                emptyStateText="No Shared Files"
+                emptyStateText="No shared files found"
               />
             </SurveyContext.Provider>
           </ProjectContext.Provider>
@@ -126,7 +126,7 @@ describe('AttachmentsList', () => {
       </AuthStateContext.Provider>
     );
 
-    expect(getByText('No Shared Files')).toBeInTheDocument();
+    expect(getByText('No shared files found')).toBeInTheDocument();
   });
 
   it('renders correctly with attachments (of various sizes)', async () => {
diff --git a/app/src/components/attachments/list/AttachmentsList.tsx b/app/src/components/attachments/list/AttachmentsList.tsx
index b62588f6bd..81956fe33b 100644
--- a/app/src/components/attachments/list/AttachmentsList.tsx
+++ b/app/src/components/attachments/list/AttachmentsList.tsx
@@ -1,18 +1,14 @@
 import { mdiFileOutline, mdiLockOutline } from '@mdi/js';
 import Icon from '@mdi/react';
-import { Theme } from '@mui/material';
-import Box from '@mui/material/Box';
-import { grey } from '@mui/material/colors';
 import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
-import { makeStyles } from '@mui/styles';
-import { SubmitStatusChip } from 'components/chips/SubmitStatusChip';
-import { ProjectRoleGuard, SystemRoleGuard } from 'components/security/Guards';
+import { ProjectRoleGuard } from 'components/security/Guards';
 import { PublishStatus } from 'constants/attachments';
 import { PROJECT_PERMISSION, SYSTEM_ROLE } from 'constants/roles';
 import NoSurveySectionData from 'features/surveys/components/NoSurveySectionData';
@@ -23,30 +19,6 @@ import AttachmentsListItemMenuButton from './AttachmentsListItemMenuButton';
 
 //TODO: PRODUCTION_BANDAGE: Remove <SystemRoleGuard validSystemRoles={[SYSTEM_ROLE.DATA_ADMINISTRATOR, SYSTEM_ROLE.SYSTEM_ADMIN]}>
 
-const useStyles = makeStyles((theme: Theme) => ({
-  attachmentsTable: {
-    tableLayout: 'fixed'
-  },
-  attachmentsTableLockIcon: {
-    marginTop: '3px',
-    color: grey[600]
-  },
-  attachmentNameCol: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  },
-  fileIcon: {
-    marginRight: theme.spacing(2),
-    marginLeft: theme.spacing(3),
-    color: '#1a5a96'
-  },
-  noDocuments: {
-    height: '66px',
-    color: theme.palette.text.secondary,
-    fontWeight: 700
-  }
-}));
-
 export interface IAttachmentsListProps<T extends IGetProjectAttachment | IGetSurveyAttachment> {
   attachments: T[];
   handleDownload: (attachment: T) => void;
@@ -57,8 +29,6 @@ export interface IAttachmentsListProps<T extends IGetProjectAttachment | IGetSur
 }
 
 const AttachmentsList = <T extends IGetProjectAttachment | IGetSurveyAttachment>(props: IAttachmentsListProps<T>) => {
-  const classes = useStyles();
-
   const { attachments, handleDownload, handleDelete, handleViewDetails, handleRemoveOrResubmit } = props;
 
   const [rowsPerPage] = useState(10);
@@ -70,14 +40,15 @@ const AttachmentsList = <T extends IGetProjectAttachment | IGetSurveyAttachment>
 
   return (
     <TableContainer>
-      <Table className={classes.attachmentsTable} aria-label="attachments-list-table">
+      <Table
+        aria-label="attachments-list-table"
+        sx={{
+          tableLayout: 'fixed'
+        }}>
         <TableHead>
           <TableRow>
             <TableCell>Name</TableCell>
-            <TableCell width="130">Type</TableCell>
-            <SystemRoleGuard validSystemRoles={[SYSTEM_ROLE.DATA_ADMINISTRATOR, SYSTEM_ROLE.SYSTEM_ADMIN]}>
-              <TableCell width="150">Status</TableCell>
-            </SystemRoleGuard>
+            <TableCell>Type</TableCell>
             <TableCell width="75"></TableCell>
           </TableRow>
         </TableHead>
@@ -90,30 +61,32 @@ const AttachmentsList = <T extends IGetProjectAttachment | IGetSurveyAttachment>
             const icon: string = attachmentStatus === PublishStatus.SUBMITTED ? mdiLockOutline : mdiFileOutline;
 
             return (
-              <TableRow key={`${attachment.fileName}-${attachment.id}`}>
-                <TableCell scope="row" className={classes.attachmentNameCol}>
-                  <Box display="flex" alignItems="center">
-                    <Icon
-                      path={icon}
-                      size={1}
-                      className={classes.fileIcon}
-                      style={{ marginRight: '16px', marginLeft: '4px' }}
-                    />
-                    <Link
-                      style={{ fontWeight: 'bold' }}
-                      underline="always"
-                      onClick={() => handleDownload(attachment)}
-                      tabIndex={0}>
+              <TableRow hover={false} key={`${attachment.fileName}-${attachment.id}`}>
+                <TableCell
+                  scope="row"
+                  sx={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis'
+                  }}>
+                  <Stack
+                    flexDirection="row"
+                    alignItems="center"
+                    gap={2}
+                    sx={{
+                      '& svg': {
+                        color: '#1a5a96'
+                      },
+                      '& a': {
+                        fontWeight: 700
+                      }
+                    }}>
+                    <Icon path={icon} size={1} />
+                    <Link underline="always" onClick={() => handleDownload(attachment)} tabIndex={0}>
                       {attachment.fileName}
                     </Link>
-                  </Box>
+                  </Stack>
                 </TableCell>
                 <TableCell>{attachment.fileType}</TableCell>
-                <SystemRoleGuard validSystemRoles={[SYSTEM_ROLE.DATA_ADMINISTRATOR, SYSTEM_ROLE.SYSTEM_ADMIN]}>
-                  <TableCell>
-                    <SubmitStatusChip status={attachmentStatus} />
-                  </TableCell>
-                </SystemRoleGuard>
                 <ProjectRoleGuard
                   validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
                   validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
diff --git a/app/src/components/data-grid/StyledDataGrid.tsx b/app/src/components/data-grid/StyledDataGrid.tsx
index 95b378a4e1..5040309d88 100644
--- a/app/src/components/data-grid/StyledDataGrid.tsx
+++ b/app/src/components/data-grid/StyledDataGrid.tsx
@@ -25,17 +25,26 @@ export const StyledDataGrid = (props: StyledDataGridProps) => {
         '& *:focus-within': {
           outline: 'none !important'
         },
+        '& .MuiDataGrid-columnHeaders': {
+          background: grey[50]
+        },
         '& .MuiDataGrid-columnHeaderTitle': {
           textTransform: 'uppercase',
           fontWeight: 700
         },
-        '& .MuiDataGrid-row:nth-of-type(odd)': {
-          backgroundColor: grey[50]
-        },
         '& .MuiDataGrid-row:last-of-type': {
           '& .MuiDataGrid-cell': {
             borderBottom: 'none'
           }
+        },
+        '& .MuiDataGrid-row:hover': {
+          backgroundColor: 'transparent'
+        },
+        '& .MuiDataGrid-columnHeader:first-of-type, .MuiDataGrid-cell:first-of-type': {
+          pl: 2
+        },
+        '& .MuiDataGrid-columnHeader:last-of-type, .MuiDataGrid-cell:last-of-type': {
+          pr: 2
         }
       }}
     />
diff --git a/app/src/components/data-grid/StyledDataGridOverlay.tsx b/app/src/components/data-grid/StyledDataGridOverlay.tsx
index a18f6a3a60..96f0d63422 100644
--- a/app/src/components/data-grid/StyledDataGridOverlay.tsx
+++ b/app/src/components/data-grid/StyledDataGridOverlay.tsx
@@ -2,7 +2,7 @@ import Typography from '@mui/material/Typography';
 import { GridOverlay } from '@mui/x-data-grid';
 
 const StyledDataGridOverlay = (props: { message?: string }) => (
-  <GridOverlay>
+  <GridOverlay sx={{ background: '#fff' }}>
     <Typography variant="body2" color="textSecondary" data-testid="data-grid-table-empty">
       {props.message ?? 'No records found'}
     </Typography>
diff --git a/app/src/components/publish/PublishSurveyDialog.tsx b/app/src/components/publish/PublishSurveyDialog.tsx
index 2286a71081..1488a7ac90 100644
--- a/app/src/components/publish/PublishSurveyDialog.tsx
+++ b/app/src/components/publish/PublishSurveyDialog.tsx
@@ -146,11 +146,18 @@ const PublishSurveyDialog = (props: IPublishSurveyIdDialogProps) => {
                 <PublishSurveyIdContent />
               </DialogContent>
               <DialogActions>
-                <Typography component="span" variant="subtitle2" fontWeight="700" sx={{ mr: 2 }}>
+                <Typography component="span" variant="subtitle2" sx={{ mr: 2 }}>
                   <Typography component="span" color="textSecondary" variant="inherit">
-                    Last Published:
-                  </Typography>{' '}
-                  {publishDate}
+                    {publishDate ? (
+                      <span>
+                        Status:&nbsp;&nbsp;<b>Published ({publishDate})</b>
+                      </span>
+                    ) : (
+                      <span>
+                        Status:&nbsp;&nbsp;<b>Unpublished</b>
+                      </span>
+                    )}
+                  </Typography>
                 </Typography>
                 <LoadingButton
                   onClick={formikProps.submitForm}
diff --git a/app/src/features/admin/users/AccessRequestList.tsx b/app/src/features/admin/users/AccessRequestList.tsx
index a0733fe958..d0cce09a20 100644
--- a/app/src/features/admin/users/AccessRequestList.tsx
+++ b/app/src/features/admin/users/AccessRequestList.tsx
@@ -222,7 +222,7 @@ const AccessRequestList: React.FC<IAccessRequestListProps> = (props) => {
           </Typography>
         </Toolbar>
         <Divider></Divider>
-        <Box p={1}>
+        <Box p={2}>
           <TableContainer>
             <Table
               sx={{
diff --git a/app/src/features/admin/users/ActiveUsersList.tsx b/app/src/features/admin/users/ActiveUsersList.tsx
index 90b5277226..68a6751657 100644
--- a/app/src/features/admin/users/ActiveUsersList.tsx
+++ b/app/src/features/admin/users/ActiveUsersList.tsx
@@ -272,7 +272,7 @@ const ActiveUsersList: React.FC<IActiveUsersListProps> = (props) => {
           </Button>
         </Toolbar>
         <Divider></Divider>
-        <Box p={1}>
+        <Box p={2}>
           <TableContainer>
             <Table
               sx={{
@@ -296,7 +296,12 @@ const ActiveUsersList: React.FC<IActiveUsersListProps> = (props) => {
                 {activeUsers.length > 0 &&
                   activeUsers.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => (
                     <TableRow data-testid={`active-user-row-${index}`} key={row.system_user_id}>
-                      <TableCell>
+                      <TableCell
+                        sx={{
+                          '& a': {
+                            fontWeight: 700
+                          }
+                        }}>
                         <Link underline="always" to={`/admin/users/${row.system_user_id}`} component={RouterLink}>
                           {row.user_identifier || 'No identifier'}
                         </Link>
diff --git a/app/src/features/admin/users/UsersDetailProjects.tsx b/app/src/features/admin/users/UsersDetailProjects.tsx
index e5cf5c4c95..0687584948 100644
--- a/app/src/features/admin/users/UsersDetailProjects.tsx
+++ b/app/src/features/admin/users/UsersDetailProjects.tsx
@@ -187,7 +187,7 @@ const UsersDetailProjects: React.FC<IProjectDetailsProps> = (props) => {
         </Typography>
       </Toolbar>
       <Divider></Divider>
-      <Box p={1}>
+      <Box p={2}>
         <Table className={classes.projectMembersTable}>
           <TableHead>
             <TableRow>
diff --git a/app/src/features/funding-sources/list/FundingSourcesListPage.tsx b/app/src/features/funding-sources/list/FundingSourcesListPage.tsx
index aa77ba1c54..886a01cb1e 100644
--- a/app/src/features/funding-sources/list/FundingSourcesListPage.tsx
+++ b/app/src/features/funding-sources/list/FundingSourcesListPage.tsx
@@ -127,7 +127,7 @@ const FundingSourcesListPage: React.FC = () => {
               </Typography>
             </Toolbar>
             <Divider></Divider>
-            <Box pt={0} pb={1} px={3}>
+            <Box p={2}>
               <FundingSourcesTable
                 fundingSources={fundingSourceDataLoader.data ?? []}
                 onView={(fundingSourceId) => {
diff --git a/app/src/features/funding-sources/list/FundingSourcesTable.test.tsx b/app/src/features/funding-sources/list/FundingSourcesTable.test.tsx
index 1c7d673c9e..987507aebb 100644
--- a/app/src/features/funding-sources/list/FundingSourcesTable.test.tsx
+++ b/app/src/features/funding-sources/list/FundingSourcesTable.test.tsx
@@ -18,7 +18,7 @@ describe('FundingSourcesTable', () => {
     );
 
     await waitFor(() => {
-      expect(getByText('No Funding Sources available')).toBeVisible();
+      expect(getByText('No funding sources found')).toBeVisible();
     });
   });
 
diff --git a/app/src/features/funding-sources/list/FundingSourcesTable.tsx b/app/src/features/funding-sources/list/FundingSourcesTable.tsx
index 3f87dc5520..b5891c99f9 100644
--- a/app/src/features/funding-sources/list/FundingSourcesTable.tsx
+++ b/app/src/features/funding-sources/list/FundingSourcesTable.tsx
@@ -63,7 +63,7 @@ const FundingSourcesTable = (props: IFundingSourcesTableTableProps) => {
 
   return (
     <StyledDataGrid
-      noRowsMessage={'No Funding Sources available'}
+      noRowsMessage={'No funding sources found'}
       autoHeight
       rows={props.fundingSources}
       getRowId={(row) => `funding-source-${row.funding_source_id}`}
diff --git a/app/src/features/projects/list/ProjectsListPage.tsx b/app/src/features/projects/list/ProjectsListPage.tsx
index ec2449e937..7d155f8b6c 100644
--- a/app/src/features/projects/list/ProjectsListPage.tsx
+++ b/app/src/features/projects/list/ProjectsListPage.tsx
@@ -1,17 +1,15 @@
 import { mdiFilterOutline, mdiPlus } from '@mdi/js';
 import Icon from '@mdi/react';
-import { Theme } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import { grey } from '@mui/material/colors';
 import Container from '@mui/material/Container';
 import Divider from '@mui/material/Divider';
 import Link from '@mui/material/Link';
 import Paper from '@mui/material/Paper';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
-import { makeStyles } from '@mui/styles';
-import { DataGrid, GridColDef, GridOverlay, GridPaginationModel, GridSortModel } from '@mui/x-data-grid';
+import { GridColDef, GridPaginationModel, GridSortModel } from '@mui/x-data-grid';
+import { StyledDataGrid } from 'components/data-grid/StyledDataGrid';
 import PageHeader from 'components/layout/PageHeader';
 import { IProjectAdvancedFilters } from 'components/search-filter/ProjectAdvancedFilters';
 import { SystemRoleGuard } from 'components/security/Guards';
@@ -21,56 +19,16 @@ import { CodesContext } from 'contexts/codesContext';
 import { useBiohubApi } from 'hooks/useBioHubApi';
 import useDataLoader from 'hooks/useDataLoader';
 import { IProjectsListItemData } from 'interfaces/useProjectApi.interface';
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { ApiPaginationRequestOptions } from 'types/misc';
 import { firstOrNull, getFormattedDate } from 'utils/Utils';
 import ProjectsListFilterForm from './ProjectsListFilterForm';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  projectsTable: {
-    tableLayout: 'fixed'
-  },
-  linkButton: {
-    textAlign: 'left',
-    fontWeight: 700
-  },
-  noDataText: {
-    fontFamily: 'inherit !important',
-    fontSize: '0.875rem',
-    fontWeight: 700
-  },
-  dataGrid: {
-    border: 'none !important',
-    fontFamily: 'inherit !important',
-    '& .MuiDataGrid-columnHeaderTitle': {
-      textTransform: 'uppercase',
-      fontSize: '0.875rem',
-      fontWeight: 700,
-      color: grey[600]
-    },
-    '& .MuiDataGrid-cell:focus-within, & .MuiDataGrid-cellCheckbox:focus-within, & .MuiDataGrid-columnHeader:focus-within':
-      {
-        outline: 'none !important'
-      },
-    '& .MuiDataGrid-row:hover': {
-      backgroundColor: 'transparent !important'
-    }
-  }
-}));
-
 interface IProjectsListTableRow extends Omit<IProjectsListItemData, 'project_programs'> {
   project_programs: string;
 }
 
-const NoRowsOverlay = (props: { className: string }) => (
-  <GridOverlay>
-    <Typography className={props.className} color="textSecondary">
-      No projects found
-    </Typography>
-  </GridOverlay>
-);
-
 const pageSizeOptions = [10, 25, 50];
 
 /**
@@ -79,7 +37,6 @@ const pageSizeOptions = [10, 25, 50];
  * @return {*}
  */
 const ProjectsListPage = () => {
-  const classes = useStyles();
   const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
     page: 0,
     pageSize: pageSizeOptions[0]
@@ -135,7 +92,7 @@ const ProjectsListPage = () => {
       disableColumnMenu: true,
       renderCell: (params) => (
         <Link
-          style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
+          style={{ overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: 700 }}
           data-testid={params.row.name}
           underline="always"
           title={params.row.name}
@@ -171,8 +128,6 @@ const ProjectsListPage = () => {
     }
   ];
 
-  const NoRowsOverlayStyled = useCallback(() => <NoRowsOverlay className={classes.noDataText} />, [classes.noDataText]);
-
   // Refresh projects when pagination or sort changes
   useEffect(() => {
     refreshProjectsList();
@@ -230,9 +185,9 @@ const ProjectsListPage = () => {
                 handleReset={() => refreshProjectsList()}
               />
             )}
-            <Box py={1} pb={2} px={3}>
-              <DataGrid
-                className={classes.dataGrid}
+            <Box p={2}>
+              <StyledDataGrid
+                noRowsMessage="No projects found"
                 autoHeight
                 rows={projectRows}
                 rowCount={projectsDataLoader.data?.pagination.total ?? 0}
@@ -252,9 +207,6 @@ const ProjectsListPage = () => {
                 disableColumnFilter
                 disableColumnMenu
                 sortingOrder={['asc', 'desc']}
-                slots={{
-                  noRowsOverlay: NoRowsOverlayStyled
-                }}
               />
             </Box>
           </Paper>
diff --git a/app/src/features/projects/view/ProjectAttachments.test.tsx b/app/src/features/projects/view/ProjectAttachments.test.tsx
index f6accc5977..ad7fca0140 100644
--- a/app/src/features/projects/view/ProjectAttachments.test.tsx
+++ b/app/src/features/projects/view/ProjectAttachments.test.tsx
@@ -128,7 +128,7 @@ describe('ProjectAttachments', () => {
       </AuthStateContext.Provider>
     );
     await waitFor(() => {
-      expect(getByText('No Shared Files')).toBeInTheDocument();
+      expect(getByText('No shared files found')).toBeInTheDocument();
     });
   });
 
diff --git a/app/src/features/projects/view/ProjectAttachments.tsx b/app/src/features/projects/view/ProjectAttachments.tsx
index b73f2ea371..92526dbd85 100644
--- a/app/src/features/projects/view/ProjectAttachments.tsx
+++ b/app/src/features/projects/view/ProjectAttachments.tsx
@@ -3,7 +3,6 @@ import Icon from '@mdi/react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
-import Paper from '@mui/material/Paper';
 import { IReportMetaForm } from 'components/attachments/ReportMetaForm';
 import FileUploadWithMetaDialog from 'components/dialog/attachments/FileUploadWithMetaDialog';
 import { IUploadHandler } from 'components/file-upload/FileUploadItem';
@@ -108,10 +107,8 @@ const ProjectAttachments = () => {
         )}
       />
       <Divider></Divider>
-      <Box p={3}>
-        <Paper variant="outlined">
-          <ProjectAttachmentsList />
-        </Paper>
+      <Box p={2}>
+        <ProjectAttachmentsList />
       </Box>
     </>
   );
diff --git a/app/src/features/projects/view/ProjectAttachmentsList.tsx b/app/src/features/projects/view/ProjectAttachmentsList.tsx
index cbc11b61a1..687bb17795 100644
--- a/app/src/features/projects/view/ProjectAttachmentsList.tsx
+++ b/app/src/features/projects/view/ProjectAttachmentsList.tsx
@@ -146,7 +146,7 @@ const ProjectAttachmentsList = () => {
         handleDelete={handleDelete}
         handleViewDetails={handleViewDetailsOpen}
         handleRemoveOrResubmit={handleRemoveOrResubmit}
-        emptyStateText="No Shared Files"
+        emptyStateText="No shared files found"
       />
     </>
   );
diff --git a/app/src/features/projects/view/ProjectDetails.tsx b/app/src/features/projects/view/ProjectDetails.tsx
index e67bc231c0..0957a6a13d 100644
--- a/app/src/features/projects/view/ProjectDetails.tsx
+++ b/app/src/features/projects/view/ProjectDetails.tsx
@@ -1,6 +1,5 @@
 import { Theme } from '@mui/material';
 import Box from '@mui/material/Box';
-import { grey } from '@mui/material/colors';
 import Divider from '@mui/material/Divider';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
@@ -38,7 +37,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontWeight: 700,
     letterSpacing: '0.02rem',
     textTransform: 'uppercase',
-    color: grey[600],
     '& + hr': {
       marginTop: theme.spacing(1.5),
       marginBottom: theme.spacing(1.5)
diff --git a/app/src/features/surveys/components/NoSurveySectionData.tsx b/app/src/features/surveys/components/NoSurveySectionData.tsx
index a727d7e71b..5df756ae0f 100644
--- a/app/src/features/surveys/components/NoSurveySectionData.tsx
+++ b/app/src/features/surveys/components/NoSurveySectionData.tsx
@@ -1,29 +1,17 @@
-import Paper, { PaperProps } from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
 interface NoSurveySectionDataProps {
   text: string;
-  paperVariant?: PaperProps['variant'];
 }
 
-const NoSurveySectionData = ({ text, paperVariant }: NoSurveySectionDataProps) => {
+const NoSurveySectionData = ({ text }: NoSurveySectionDataProps) => {
   return (
-    <>
-      <Paper
-        variant={paperVariant}
-        elevation={0}
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          minHeight: '66px',
-          p: 2
-        }}>
-        <Typography component="span" color="textSecondary" variant="body2" data-testid="no-summary-section-data">
-          {text}
-        </Typography>
-      </Paper>
-    </>
+    <Stack alignItems="center" justifyContent="center" p={2} minHeight="66px">
+      <Typography component="span" color="textSecondary" variant="body2" data-testid="no-summary-section-data">
+        {text}
+      </Typography>
+    </Stack>
   );
 };
 
diff --git a/app/src/features/surveys/list/SurveysListPage.tsx b/app/src/features/surveys/list/SurveysListPage.tsx
index 94221bc1d9..c7e188cd50 100644
--- a/app/src/features/surveys/list/SurveysListPage.tsx
+++ b/app/src/features/surveys/list/SurveysListPage.tsx
@@ -3,68 +3,26 @@ import Icon from '@mdi/react';
 import { Link, Toolbar, Typography } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import { grey } from '@mui/material/colors';
 import Divider from '@mui/material/Divider';
-import { makeStyles } from '@mui/styles';
-import { DataGrid, GridColDef, GridOverlay, GridPaginationModel, GridSortModel } from '@mui/x-data-grid';
+import { GridColDef, GridPaginationModel, GridSortModel } from '@mui/x-data-grid';
+import { StyledDataGrid } from 'components/data-grid/StyledDataGrid';
 import { ProjectRoleGuard } from 'components/security/Guards';
 import { PROJECT_PERMISSION, SYSTEM_ROLE } from 'constants/roles';
 import { ProjectContext } from 'contexts/projectContext';
 import { SurveyBasicFieldsObject } from 'interfaces/useSurveyApi.interface';
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { ApiPaginationRequestOptions } from 'types/misc';
 import { firstOrNull } from 'utils/Utils';
 
 const pageSizeOptions = [10, 25, 50];
 
-const useStyles = makeStyles(() => ({
-  projectsTable: {
-    tableLayout: 'fixed'
-  },
-  linkButton: {
-    textAlign: 'left',
-    fontWeight: 700
-  },
-  noDataText: {
-    fontFamily: 'inherit !important',
-    fontSize: '0.875rem',
-    fontWeight: 700
-  },
-  dataGrid: {
-    border: 'none !important',
-    fontFamily: 'inherit !important',
-    '& .MuiDataGrid-columnHeaderTitle': {
-      textTransform: 'uppercase',
-      fontSize: '0.875rem',
-      fontWeight: 700,
-      color: grey[600]
-    },
-    '& .MuiDataGrid-cell:focus-within, & .MuiDataGrid-cellCheckbox:focus-within, & .MuiDataGrid-columnHeader:focus-within':
-      {
-        outline: 'none !important'
-      },
-    '& .MuiDataGrid-row:hover': {
-      backgroundColor: 'transparent !important'
-    }
-  }
-}));
-
-const NoRowsOverlay = (props: { className: string }) => (
-  <GridOverlay>
-    <Typography className={props.className} color="textSecondary">
-      No surveys found
-    </Typography>
-  </GridOverlay>
-);
-
 /**
  * List of Surveys belonging to a Project.
  *
  * @return {*}
  */
 const SurveysListPage = () => {
-  const classes = useStyles();
   const projectContext = useContext(ProjectContext);
   const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
     page: 0,
@@ -99,7 +57,7 @@ const SurveysListPage = () => {
       disableColumnMenu: true,
       renderCell: (params) => (
         <Link
-          style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
+          style={{ overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: 700 }}
           data-testid={params.row.name}
           underline="always"
           title={params.row.name}
@@ -115,12 +73,10 @@ const SurveysListPage = () => {
       flex: 1,
       disableColumnMenu: true,
       sortable: false,
-      renderCell: (params) => <Typography>{params.value.join(', ')}</Typography>
+      renderCell: (params) => <span>{params.value.join(', ')}</span>
     }
   ];
 
-  const NoRowsOverlayStyled = useCallback(() => <NoRowsOverlay className={classes.noDataText} />, [classes.noDataText]);
-
   return (
     <>
       <Toolbar style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -146,9 +102,9 @@ const SurveysListPage = () => {
         </ProjectRoleGuard>
       </Toolbar>
       <Divider></Divider>
-      <Box py={1} pb={2} px={3}>
-        <DataGrid
-          className={classes.dataGrid}
+      <Box p={2}>
+        <StyledDataGrid
+          noRowsMessage="No surveys found"
           columns={columns}
           autoHeight
           rows={projectContext.surveysListDataLoader.data?.surveys ?? []}
@@ -168,9 +124,6 @@ const SurveysListPage = () => {
           disableColumnFilter
           disableColumnMenu
           sortingOrder={['asc', 'desc']}
-          slots={{
-            noRowsOverlay: NoRowsOverlayStyled
-          }}
         />
       </Box>
     </>
diff --git a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx
index e0268dbf10..f6fb4fef81 100644
--- a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx
+++ b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx
@@ -561,7 +561,8 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => {
             borderLeft: '1px solid' + grey[300]
           },
           '& .MuiDataGrid-columnHeaders': {
-            position: 'relative'
+            position: 'relative',
+            background: grey[50]
           },
           '& .MuiDataGrid-columnHeader:focus-within': {
             outline: 'none',
diff --git a/app/src/features/surveys/telemetry/ManualTelemetrySection.tsx b/app/src/features/surveys/telemetry/ManualTelemetrySection.tsx
index 8eca559ae7..38a1548bc8 100644
--- a/app/src/features/surveys/telemetry/ManualTelemetrySection.tsx
+++ b/app/src/features/surveys/telemetry/ManualTelemetrySection.tsx
@@ -23,8 +23,8 @@ const ManualTelemetrySection = () => {
         </Button>
       </Toolbar>
       <Divider></Divider>
-      <Box p={3}>
-        <NoSurveySectionData text="No telemetry data available" paperVariant="outlined" />
+      <Box p={2}>
+        <NoSurveySectionData text="No telemetry data available" />
       </Box>
     </Box>
   );
diff --git a/app/src/features/surveys/telemetry/telemetry-table/ManualTelemetryTable.tsx b/app/src/features/surveys/telemetry/telemetry-table/ManualTelemetryTable.tsx
index 0cbf4cb110..f25153e983 100644
--- a/app/src/features/surveys/telemetry/telemetry-table/ManualTelemetryTable.tsx
+++ b/app/src/features/surveys/telemetry/telemetry-table/ManualTelemetryTable.tsx
@@ -336,7 +336,8 @@ const ManualTelemetryTable = (props: IManualTelemetryTableProps) => {
         border: 'none',
         borderRadius: 0,
         '& .MuiDataGrid-columnHeaders': {
-          position: 'relative'
+          position: 'relative',
+          background: grey[50]
         },
         '& .MuiDataGrid-columnHeader:focus-within': {
           outline: 'none',
diff --git a/app/src/features/surveys/view/SurveyAnimals.tsx b/app/src/features/surveys/view/SurveyAnimals.tsx
index 26f048e514..1bc513ccee 100644
--- a/app/src/features/surveys/view/SurveyAnimals.tsx
+++ b/app/src/features/surveys/view/SurveyAnimals.tsx
@@ -129,14 +129,14 @@ const SurveyAnimals: React.FC = () => {
             variant="contained"
             startIcon={<Icon path={mdiCog} size={0.75} />}
             sx={{
-              m: -1
+              my: -1
             }}>
             Manage Animals
           </Button>
         </ProjectRoleGuard>
       </Toolbar>
       <Divider flexItem></Divider>
-      <Box py={1} px={2}>
+      <Box p={2}>
         {critterData?.length ? (
           <SurveyAnimalsTable
             animalData={critterData}
@@ -153,7 +153,7 @@ const SurveyAnimals: React.FC = () => {
             }}
           />
         ) : (
-          <NoSurveySectionData text={'No Marked or Known Animals'} paperVariant={'outlined'} />
+          <NoSurveySectionData text={'No Marked or Known Animals'} />
         )}
       </Box>
       <ComponentDialog
diff --git a/app/src/features/surveys/view/SurveyAttachments.test.tsx b/app/src/features/surveys/view/SurveyAttachments.test.tsx
index 2876b3c922..667ff91e65 100644
--- a/app/src/features/surveys/view/SurveyAttachments.test.tsx
+++ b/app/src/features/surveys/view/SurveyAttachments.test.tsx
@@ -164,7 +164,7 @@ describe('SurveyAttachments', () => {
       </AuthStateContext.Provider>
     );
     await waitFor(() => {
-      expect(getByText('No Documents')).toBeInTheDocument();
+      expect(getByText('No documents found')).toBeInTheDocument();
     });
   });
 
diff --git a/app/src/features/surveys/view/SurveyAttachments.tsx b/app/src/features/surveys/view/SurveyAttachments.tsx
index c5d369e1f5..8c7960594f 100644
--- a/app/src/features/surveys/view/SurveyAttachments.tsx
+++ b/app/src/features/surveys/view/SurveyAttachments.tsx
@@ -3,7 +3,6 @@ import Icon from '@mdi/react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
-import Paper from '@mui/material/Paper';
 import { IReportMetaForm } from 'components/attachments/ReportMetaForm';
 import FileUploadWithMetaDialog from 'components/dialog/attachments/FileUploadWithMetaDialog';
 import { IUploadHandler } from 'components/file-upload/FileUploadItem';
@@ -120,10 +119,8 @@ const SurveyAttachments: React.FC = () => {
           )}
         />
         <Divider></Divider>
-        <Box p={3}>
-          <Paper variant="outlined">
-            <SurveyAttachmentsList />
-          </Paper>
+        <Box p={2}>
+          <SurveyAttachmentsList />
         </Box>
       </Box>
     </>
diff --git a/app/src/features/surveys/view/SurveyAttachmentsList.tsx b/app/src/features/surveys/view/SurveyAttachmentsList.tsx
index bf36cf9005..029ef01d7d 100644
--- a/app/src/features/surveys/view/SurveyAttachmentsList.tsx
+++ b/app/src/features/surveys/view/SurveyAttachmentsList.tsx
@@ -135,6 +135,7 @@ const SurveyAttachmentsList: React.FC = () => {
         handleDelete={handleDelete}
         handleViewDetails={handleViewDetails}
         handleRemoveOrResubmit={handleRemoveOrResubmit}
+        emptyStateText="No documents found"
       />
     </>
   );
diff --git a/app/src/features/surveys/view/SurveyHeader.tsx b/app/src/features/surveys/view/SurveyHeader.tsx
index 7c2fe0f7a5..c642ea8238 100644
--- a/app/src/features/surveys/view/SurveyHeader.tsx
+++ b/app/src/features/surveys/view/SurveyHeader.tsx
@@ -1,4 +1,4 @@
-import { mdiChevronDown, mdiCog, mdiPencil, mdiTrashCanOutline } from '@mdi/js';
+import { mdiChevronDown, mdiCogOutline, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
 import Icon from '@mdi/react';
 import Breadcrumbs from '@mui/material/Breadcrumbs';
 import Button from '@mui/material/Button';
@@ -156,33 +156,28 @@ const SurveyHeader = () => {
           <ProjectRoleGuard
             validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
             validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
-            <Stack flexDirection="row" alignItems="center" gap={1}>
+            <Stack flexDirection="row" alignItems="center" gap={2}>
               {BIOHUB_FEATURE_FLAG && (
                 <ProjectRoleGuard
                   validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR]}
                   validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
                   <Typography
                     component="span"
-                    variant="subtitle2"
-                    fontSize="0.9rem"
+                    variant="body2"
+                    color="textSecondary"
                     sx={{
                       flex: '0 0 auto',
                       mr: { sm: 0, md: 0.5 },
                       order: { sm: 3, md: 0 }
                     }}>
                     {publishDate ? (
-                      <>
-                        <Typography component="span" color="textSecondary" variant="inherit" sx={{ mr: 0.5 }}>
-                          Published:
-                        </Typography>
-                        <Typography component="span" variant="inherit">
-                          {publishDate}
-                        </Typography>
-                      </>
+                      <span>
+                        Status:&nbsp;&nbsp;<b>Published ({publishDate})</b>
+                      </span>
                     ) : (
-                      <Typography component="span" color="textSecondary" variant="inherit" sx={{ mr: 0.5 }}>
-                        Never Published
-                      </Typography>
+                      <span>
+                        Status:&nbsp;&nbsp;<b>Unpublished</b>
+                      </span>
                     )}
                   </Typography>
                   <Button
@@ -205,8 +200,8 @@ const SurveyHeader = () => {
               variant="outlined"
               color="primary"
               data-testid="settings-survey-button"
-              startIcon={<Icon path={mdiCog} size={1} />}
-              endIcon={<Icon path={mdiChevronDown} size={1} />}
+              startIcon={<Icon path={mdiCogOutline} size={0.75} />}
+              endIcon={<Icon path={mdiChevronDown} size={0.75} />}
               onClick={(event: React.MouseEvent<HTMLButtonElement>) => setMenuAnchorEl(event.currentTarget)}>
               Settings
             </Button>
@@ -229,7 +224,7 @@ const SurveyHeader = () => {
               onClose={() => setMenuAnchorEl(null)}>
               <MenuItem onClick={() => history.push('edit')}>
                 <ListItemIcon>
-                  <Icon path={mdiPencil} size={1} />
+                  <Icon path={mdiPencilOutline} size={1} />
                 </ListItemIcon>
                 <Typography variant="inherit">Edit Survey Details</Typography>
               </MenuItem>
diff --git a/app/src/features/surveys/view/components/spatial-data/SurveySpatialData.tsx b/app/src/features/surveys/view/components/spatial-data/SurveySpatialData.tsx
index 875b3c6d6d..8bb2f94428 100644
--- a/app/src/features/surveys/view/components/spatial-data/SurveySpatialData.tsx
+++ b/app/src/features/surveys/view/components/spatial-data/SurveySpatialData.tsx
@@ -223,7 +223,7 @@ const SurveySpatialData = () => {
       <Box height={{ sm: 300, md: 500 }} position="relative">
         <SurveyMap supplementaryLayers={supplementaryLayers} isLoading={isLoading} />
       </Box>
-      <Box py={1} px={2} position="relative">
+      <Box p={2} position="relative">
         {activeView === SurveySpatialDatasetViewEnum.OBSERVATIONS && (
           <SurveySpatialObservationDataTable isLoading={isLoading} />
         )}
diff --git a/app/src/features/surveys/view/components/spatial-data/SurveySpatialToolbar.tsx b/app/src/features/surveys/view/components/spatial-data/SurveySpatialToolbar.tsx
index 7fda0209a8..9715144008 100644
--- a/app/src/features/surveys/view/components/spatial-data/SurveySpatialToolbar.tsx
+++ b/app/src/features/surveys/view/components/spatial-data/SurveySpatialToolbar.tsx
@@ -116,7 +116,7 @@ const SurveySpatialToolbar = (props: ISurveySptialToolbarProps) => {
               startIcon={<Icon path={mdiCog} size={0.75}></Icon>}
               endIcon={<Icon path={mdiChevronDown} size={0.75}></Icon>}
               sx={{
-                m: -1
+                my: -1
               }}>
               Manage
             </Button>
diff --git a/app/src/themes/appTheme.ts b/app/src/themes/appTheme.ts
index 89c8c68480..43e592eb03 100644
--- a/app/src/themes/appTheme.ts
+++ b/app/src/themes/appTheme.ts
@@ -1,4 +1,4 @@
-import { grey } from '@mui/material/colors';
+import grey from '@mui/material/colors/grey';
 import { createTheme } from '@mui/material/styles';
 import 'styles.scss';
 import 'styles/fonts.scss';
@@ -300,29 +300,41 @@ const appTheme = createTheme({
     MuiTable: {
       styleOverrides: {
         root: {
-          fontSize: '0.9rem',
+          fontSize: '0.875rem',
+          '& tr:last-of-type td': {
+            borderBottom: 'none'
+          },
+          '& thead': {
+            background: grey[50]
+          },
           '& th': {
             letterSpacing: '0.02rem',
             textTransform: 'uppercase',
             paddingTop: '12px',
-            paddingBottom: '12px'
+            paddingBottom: '12px',
+            height: '52px'
           },
-          '& tr:last-of-type td': {
-            borderBottom: 'none'
+          '& td': {
+            height: '52px'
+          },
+          '& th:first-of-type, td:first-of-type': {
+            paddingLeft: '16px'
           },
-          '& .MuiLink-root': {
-            fontFamily: 'inherit',
-            fontSize: 'inherit'
+          '& th:last-of-type, td:last-of-type': {
+            paddingRight: '16px'
           }
         }
       }
     },
     MuiTableCell: {
       styleOverrides: {
+        root: {
+          paddingRight: '8px',
+          paddingLeft: '8px'
+        },
         head: {
           fontSize: '0.875rem',
-          fontWeight: 700,
-          color: grey[600]
+          fontWeight: 700
         }
       }
     },