diff --git a/projects/mercury/src/App.theme.js b/projects/mercury/src/App.theme.js
index 4d2fbbeef..1f4d4b25b 100644
--- a/projects/mercury/src/App.theme.js
+++ b/projects/mercury/src/App.theme.js
@@ -13,11 +13,18 @@ const globalTheme = createTheme({
         primary: {
             main: COLORS.fsBlueMedium,
             light: COLORS.fsBlueLight,
-            dark: COLORS.fsBlueDark
+            dark: COLORS.fsBlueDark,
+            contrastText: 'white'
+        },
+        secondary: {
+            main: '#758bfd'
+        },
+        error: pink,
+        success: {
+            main: '#08a045'
         },
-        secondary: pink,
         background: {
-            default: '#d9d9d9'
+            default: '#eef0eb'
         }
     }
 });
@@ -25,6 +32,7 @@ const globalTheme = createTheme({
 export default createTheme({
     ...globalTheme,
     typography: {
+        fontFamily: ['Sora', 'Palanquin'].join(','),
         button: {
             textTransform: 'none'
         }
@@ -115,20 +123,43 @@ export default createTheme({
             styleOverrides: {
                 root: {
                     background: globalTheme.palette.primary.dark,
+                    '&:hover': {
+                        background: globalTheme.palette.primary.light
+                    },
                     borderRadius: 15,
                     borderColor: globalTheme.palette.primary.light,
                     paddingBottom: 0,
                     paddingTop: 0,
                     minHeight: 35
+                },
+                text: {
+                    color: globalTheme.palette.primary.contrastText
                 }
             }
         },
         MuiCardHeader: {
             styleOverrides: {
                 root: {
-                    backgroundColor: 'whitesmoke',
+                    backgroundColor: globalTheme.palette.primary.dark,
                     marginBottom: 0,
-                    padding: 5
+                    padding: 5,
+                    borderRadius: 15
+                },
+                title: {
+                    color: globalTheme.palette.primary.contrastText
+                },
+                avatar: {
+                    color: globalTheme.palette.primary.contrastText
+                },
+                subheader: {
+                    color: globalTheme.palette.primary.contrastText
+                }
+            }
+        },
+        MuiCardContent: {
+            styleOverrides: {
+                root: {
+                    borderRadius: 15
                 }
             }
         },
@@ -157,15 +188,10 @@ export default createTheme({
             styleOverrides: {
                 root: {
                     backgroundColor: globalTheme.palette.background.default,
-                    // borderRadius: 15,
                     border: '1px solid',
                     borderColor: globalTheme.palette.primary.dark
-                }
-            }
-        },
-        MuiBox: {
-            styleOverrides: {
-                root: {
+                },
+                rounded: {
                     borderRadius: 15
                 }
             }
diff --git a/projects/mercury/src/collections/CollectionsPage.js b/projects/mercury/src/collections/CollectionsPage.js
index 9e24b965b..de65b70dc 100644
--- a/projects/mercury/src/collections/CollectionsPage.js
+++ b/projects/mercury/src/collections/CollectionsPage.js
@@ -98,7 +98,7 @@ const CollectionsPage = (props: CollectionsPageProperties) => {
                         </Grid>
                         {showMetadataSearchButton && (
                             <Grid item container xs={4} justifyContent="flex-end">
-                                <Grid item>
+                                <Grid item className={classes.metadataButton}>
                                     <Button variant="text" color="primary" href={getMetadataViewsPath(RESOURCES_VIEW)}>
                                         Collection metadata search
                                     </Button>
diff --git a/projects/mercury/src/collections/CollectionsPage.styles.js b/projects/mercury/src/collections/CollectionsPage.styles.js
index e3c5d50b7..3e8cf9c57 100644
--- a/projects/mercury/src/collections/CollectionsPage.styles.js
+++ b/projects/mercury/src/collections/CollectionsPage.styles.js
@@ -6,9 +6,13 @@ const styles = () => ({
         width: consts.MAIN_CONTENT_WIDTH
     },
     topBarSwitch: {
+        paddingLeft: 8,
         textAlign: 'right',
         whiteSpace: 'nowrap'
     },
+    metadataButton: {
+        paddingRight: 8
+    },
     centralPanel: {
         width: consts.MAIN_CONTENT_WIDTH,
         maxHeight: consts.MAIN_CONTENT_MAX_HEIGHT
diff --git a/projects/mercury/src/dashboard/DomainInfo.styles.js b/projects/mercury/src/dashboard/DomainInfo.styles.js
index 7865f0813..996eb64a0 100644
--- a/projects/mercury/src/dashboard/DomainInfo.styles.js
+++ b/projects/mercury/src/dashboard/DomainInfo.styles.js
@@ -4,6 +4,7 @@ const styles = theme => ({
         height: '100px',
         borderStyle: 'solid',
         borderColor: theme.palette.primary.light,
+        background: theme.palette.primary.dark,
         borderWidth: 2,
         textAlign: 'center'
     },
@@ -25,7 +26,7 @@ const styles = theme => ({
         width: 'inherit'
     },
     domainText: {
-        color: theme.palette.grey[700]
+        color: theme.palette.primary.contrastText
     },
     link: {
         textDecoration: 'none'
diff --git a/projects/mercury/src/file/FilesPage.js b/projects/mercury/src/file/FilesPage.js
index e38035e24..af84427ee 100644
--- a/projects/mercury/src/file/FilesPage.js
+++ b/projects/mercury/src/file/FilesPage.js
@@ -150,7 +150,7 @@ export const FilesPage = (props: FilesPageProperties) => {
                         </Grid>
                         {showMetadataSearchButton && (
                             <Grid item container xs={4} justifyContent="flex-end">
-                                <Grid item>
+                                <Grid item className={classes.metadataButton}>
                                     <Button
                                         variant="text"
                                         color="primary"
diff --git a/projects/mercury/src/file/FilesPage.styles.js b/projects/mercury/src/file/FilesPage.styles.js
index 116de9185..59e7d7545 100644
--- a/projects/mercury/src/file/FilesPage.styles.js
+++ b/projects/mercury/src/file/FilesPage.styles.js
@@ -10,9 +10,13 @@ const styles = () => ({
         width: consts.MAIN_CONTENT_WIDTH
     },
     topBarSwitch: {
+        paddingLeft: 8,
         textAlign: 'right',
         whiteSpace: 'nowrap'
     },
+    metadataButton: {
+        paddingRight: 8
+    },
     centralPanel: {
         width: consts.MAIN_CONTENT_WIDTH,
         maxHeight: consts.MAIN_CONTENT_MAX_HEIGHT
diff --git a/projects/mercury/src/index.css b/projects/mercury/src/index.css
index 389d5e40a..e42206eb3 100644
--- a/projects/mercury/src/index.css
+++ b/projects/mercury/src/index.css
@@ -1,3 +1,6 @@
+@import url('https://fonts.googleapis.com/css?family=Sora&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Palanquin&display=swap');
+
 body {
     margin: 0;
     padding: 0;
diff --git a/projects/mercury/src/layout/MainMenu.js b/projects/mercury/src/layout/MainMenu.js
index cf2fc5de8..43b8d51fe 100644
--- a/projects/mercury/src/layout/MainMenu.js
+++ b/projects/mercury/src/layout/MainMenu.js
@@ -14,8 +14,9 @@ import ExternalMetadataSourceContext from '../metadata/metadata-sources/External
 import {getExternalStoragePathPrefix} from '../external-storage/externalStorageUtils';
 import {getExternalMetadataSourcePathPrefix} from '../metadata/external-views/externalMetadataSourceUtils';
 import InternalMetadataSourceContext from '../metadata/metadata-sources/InternalMetadataSourceContext';
+import {COLORS} from '../App.theme';
 
-const styles = {
+const styles = theme => ({
     buttonStack: {
         paddingLeft: 20,
         paddingRight: 20
@@ -28,7 +29,7 @@ const styles = {
         paddingTop: 15,
         paddingBottom: 15,
         textAlign: 'center',
-        color: 'white',
+        color: theme.palette.primary.contrastText,
         height: 40
     },
     mainMenuButtonSmall: {
@@ -40,6 +41,9 @@ const styles = {
             marginLeft: 0
         }
     },
+    mainMenuButtonSelected: {
+        backgroundColor: COLORS.fsBlueLightTransp25
+    },
     imageIcon: {
         display: 'flex',
         height: 'inherit',
@@ -48,7 +52,7 @@ const styles = {
     iconRoot: {
         textAlign: 'center'
     }
-};
+});
 const MainMenu = ({open, classes}) => {
     const {pathname} = window.location;
     const {services} = useContext(ServicesContext);
@@ -65,10 +69,13 @@ const MainMenu = ({open, classes}) => {
                 <Button
                     variant="outlined"
                     size="small"
-                    className={classNames(classes.mainMenuButton, !open && classes.mainMenuButtonSmall)}
+                    className={classNames(
+                        classes.mainMenuButton,
+                        !open && classes.mainMenuButtonSmall,
+                        pathname.startsWith('/dashboard') && classes.mainMenuButtonSelected
+                    )}
                     component={NavLink}
                     to="/dashboard"
-                    selected={pathname.startsWith('/dashboard')}
                     startIcon={<HomeIcon />}
                 >
                     {open && 'Home'}
@@ -76,10 +83,13 @@ const MainMenu = ({open, classes}) => {
                 <Button
                     variant="outlined"
                     size="small"
-                    className={classNames(classes.mainMenuButton, !open && classes.mainMenuButtonSmall)}
+                    className={classNames(
+                        classes.mainMenuButton,
+                        !open && classes.mainMenuButtonSmall,
+                        pathname.startsWith('/workspace') && classes.mainMenuButtonSelected
+                    )}
                     component={NavLink}
                     to="/workspaces"
-                    selected={pathname.startsWith('/workspace')}
                     startIcon={<Widgets />}
                 >
                     {open ? 'Workspaces' : null}
@@ -87,11 +97,14 @@ const MainMenu = ({open, classes}) => {
                 <Button
                     variant="outlined"
                     size="small"
-                    className={classNames(classes.mainMenuButton, !open && classes.mainMenuButtonSmall)}
+                    className={classNames(
+                        classes.mainMenuButton,
+                        !open && classes.mainMenuButtonSmall,
+                        pathname.startsWith('/collections') && classes.mainMenuButtonSelected
+                    )}
                     key="collections"
                     component={NavLink}
                     to="/collections"
-                    selected={pathname.startsWith('/collections')}
                     startIcon={<Folder />}
                 >
                     {open && 'Collections'}
@@ -101,11 +114,15 @@ const MainMenu = ({open, classes}) => {
                         <Button
                             variant="outlined"
                             size="small"
-                            className={classNames(classes.mainMenuButton, !open && classes.mainMenuButtonSmall)}
+                            className={classNames(
+                                classes.mainMenuButton,
+                                !open && classes.mainMenuButtonSmall,
+                                pathname.startsWith(getExternalStoragePathPrefix(storage.name)) &&
+                                    classes.mainMenuButtonSelected
+                            )}
                             key={getExternalStoragePathPrefix(storage.name)}
                             component={NavLink}
                             to={getExternalStoragePathPrefix(storage.name)}
-                            selected={pathname.startsWith(getExternalStoragePathPrefix(storage.name))}
                             startIcon={<FolderSpecial />}
                         >
                             {open && storage.label}
@@ -115,11 +132,14 @@ const MainMenu = ({open, classes}) => {
                     <Button
                         variant="outlined"
                         size="small"
-                        className={classNames(classes.mainMenuButton, !open && classes.mainMenuButtonSmall)}
+                        className={classNames(
+                            classes.mainMenuButton,
+                            !open && classes.mainMenuButtonSmall,
+                            pathname.startsWith('/metadata-views') && classes.mainMenuButtonSelected
+                        )}
                         key="metadata-views"
                         component={NavLink}
                         to="/metadata-views"
-                        selected={pathname.startsWith('/metadata-views')}
                         startIcon={
                             internalMetadataIcon ? (
                                 <Icon classes={{root: classes.iconRoot}}>
@@ -139,11 +159,15 @@ const MainMenu = ({open, classes}) => {
                         <Button
                             variant="outlined"
                             size="small"
-                            className={classNames(classes.mainMenuButton, !open && classes.mainMenuButtonSmall)}
+                            className={classNames(
+                                classes.mainMenuButton,
+                                !open && classes.mainMenuButtonSmall,
+                                pathname.startsWith(getExternalMetadataSourcePathPrefix(source.name)) &&
+                                    classes.mainMenuButtonSelected
+                            )}
                             key={getExternalMetadataSourcePathPrefix(source.name)}
                             component={NavLink}
                             to={getExternalMetadataSourcePathPrefix(source.name)}
-                            selected={pathname.startsWith(getExternalMetadataSourcePathPrefix(source.name))}
                             startIcon={
                                 source.icon ? (
                                     <Icon classes={{root: classes.iconRoot}}>
@@ -165,11 +189,14 @@ const MainMenu = ({open, classes}) => {
                     <Button
                         variant="outlined"
                         size="small"
-                        className={classNames(classes.mainMenuButton, !open && classes.mainMenuButtonSmall)}
+                        className={classNames(
+                            classes.mainMenuButton,
+                            !open && classes.mainMenuButtonSmall,
+                            pathname.startsWith('/users') && classes.mainMenuButtonSelected
+                        )}
                         key="users"
                         component={NavLink}
                         to="/users"
-                        selected={pathname.startsWith('/users')}
                         startIcon={<VerifiedUser />}
                     >
                         {open && 'Users'}
diff --git a/projects/mercury/src/layout/MenuDrawer.js b/projects/mercury/src/layout/MenuDrawer.js
index 814269bdb..75c6b324e 100644
--- a/projects/mercury/src/layout/MenuDrawer.js
+++ b/projects/mercury/src/layout/MenuDrawer.js
@@ -7,6 +7,7 @@ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 
 import styles from './MenuDrawer.styles';
+import UserMenu from './UserMenu';
 
 const MenuDrawer = ({open, renderMenu, toggleMenuExpansion, onMouseEnter, onMouseLeave, classes}) => (
     <Drawer
@@ -25,7 +26,8 @@ const MenuDrawer = ({open, renderMenu, toggleMenuExpansion, onMouseEnter, onMous
         <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
             {renderMenu(open)}
         </div>
-        <div className={classes.toolbar}>
+        <div className={open ? classes.toolbar : classes.toolbarCollapsed}>
+            <UserMenu menuOpen={open} />
             <IconButton onClick={toggleMenuExpansion} size="medium" className={classes.toolbarIcon}>
                 {open ? <ChevronLeftIcon /> : <ChevronRightIcon />}
             </IconButton>
diff --git a/projects/mercury/src/layout/MenuDrawer.styles.js b/projects/mercury/src/layout/MenuDrawer.styles.js
index c8812a8bf..db63068c3 100644
--- a/projects/mercury/src/layout/MenuDrawer.styles.js
+++ b/projects/mercury/src/layout/MenuDrawer.styles.js
@@ -27,13 +27,24 @@ const styles = theme => ({
     },
     toolbar: {
         display: 'flex',
-        alignItems: 'center',
         justifyContent: 'flex-end',
+        alignItems: 'center',
+        padding: '0 8px',
+        marginTop: 20,
+        ...theme.mixins.toolbar
+    },
+    toolbarCollapsed: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: 80,
+        alignItems: 'center',
         padding: '0 8px',
+        marginTop: 20,
         ...theme.mixins.toolbar
     },
     toolbarIcon: {
-        color: 'white'
+        color: 'white',
+        marginLeft: 'auto'
     },
     mainLogo: {
         flexGrow: 1,
diff --git a/projects/mercury/src/layout/TopBar.js b/projects/mercury/src/layout/TopBar.js
index 81626f3b0..1f2b5f38d 100644
--- a/projects/mercury/src/layout/TopBar.js
+++ b/projects/mercury/src/layout/TopBar.js
@@ -4,8 +4,6 @@ import {AppBar, Toolbar} from '@mui/material';
 
 import withStyles from '@mui/styles/withStyles';
 
-import UserMenu from './UserMenu';
-
 const styles = theme => ({
     root: {
         zIndex: theme.zIndex.drawer + 1
@@ -24,7 +22,6 @@ const TopBar = ({classes, children}) => (
                 <img src="/images/icon_white.png" alt="Fairspace" height="60" />
             </div>
             {children}
-            <UserMenu />
         </Toolbar>
     </AppBar>
 );
diff --git a/projects/mercury/src/layout/UserMenu.js b/projects/mercury/src/layout/UserMenu.js
index 071aa7d9d..9fd7e8f6e 100644
--- a/projects/mercury/src/layout/UserMenu.js
+++ b/projects/mercury/src/layout/UserMenu.js
@@ -7,6 +7,7 @@ import {
     CardContent,
     ClickAwayListener,
     Grow,
+    IconButton,
     MenuItem,
     MenuList,
     Paper,
@@ -16,16 +17,22 @@ import {
 import withStyles from '@mui/styles/withStyles';
 
 import {ErrorOutline} from '@mui/icons-material';
+import ExitToApp from '@mui/icons-material/ExitToApp';
 import UserContext from '../users/UserContext';
 import LogoutContext from '../users/LogoutContext';
 import {getDisplayName} from '../users/userUtils';
 import versionInfo from '../common/VersionInfo';
 import {APPLICATION_NAME} from '../constants';
+import {COLORS} from '../App.theme';
 
-const styles = {
+const styles = theme => ({
     row: {
         display: 'flex',
-        justifyContent: 'center',
+        justifyContent: 'flex-start'
+    },
+    button: {
+        display: 'flex',
+        justifyContent: 'flex-start',
         paddingTop: 0,
         paddingBottom: 0
     },
@@ -34,22 +41,29 @@ const styles = {
         width: 28,
         height: 28
     },
+    username: {
+        color: theme.palette.primary.contrastText,
+        fontSize: 12
+    },
     logout: {
         width: 50
     },
+    logoutIcon: {
+        color: theme.palette.primary.contrastText
+    },
     menu: {
         paddingTop: 0
     },
     userMenu: {
-        backgroundColor: 'lightgrey',
+        backgroundColor: COLORS.fsBlueLightTransp25,
         cursor: 'default'
     },
     customFont: {
         fontFamily: 'sans-serif'
     }
-};
+});
 
-const UserMenu = ({classes}) => {
+const UserMenu = ({menuOpen, classes}) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const {currentUser, currentUserLoading, currentUserError} = useContext(UserContext);
     const logout = useContext(LogoutContext);
@@ -72,20 +86,30 @@ const UserMenu = ({classes}) => {
     }
 
     if (currentUserError || !currentUser) {
-        return <ErrorOutline style={{fontSize: '2em'}} color="inherit" />;
+        return <ErrorOutline style={{fontSize: '2em'}} color="primary.contrastText" />;
+    }
+
+    if (!menuOpen) {
+        return (
+            <IconButton onClick={handleLogout} size="medium" title="Logout" className={classes.logoutIcon}>
+                <ExitToApp />
+            </IconButton>
+        );
     }
 
     return (
-        <>
+        <div className={classes.row}>
             <Button
                 aria-owns={anchorEl ? 'user-menu' : null}
                 aria-haspopup="true"
                 color="inherit"
                 onClick={handleClick}
-                className={classes.row}
+                className={classes.button}
             >
-                <Avatar alt={currentUser.name} src="/public/images/avatar.png" className={classes.avatar} />
-                <span>{getDisplayName(currentUser)}</span>
+                <Avatar className={classes.avatar}>
+                    {getDisplayName(currentUser) && getDisplayName(currentUser).charAt(0)}
+                </Avatar>
+                <span className={classes.username}>{getDisplayName(currentUser)}</span>
             </Button>
             <Popper open={Boolean(anchorEl)} anchorEl={anchorEl} transition disablePortal>
                 {({TransitionProps, placement}) => (
@@ -130,7 +154,7 @@ const UserMenu = ({classes}) => {
                     </Grow>
                 )}
             </Popper>
-        </>
+        </div>
     );
 };
 
diff --git a/projects/mercury/src/metadata/views/MetadataView.styles.js b/projects/mercury/src/metadata/views/MetadataView.styles.js
index d8ac4b112..ed8ca0cbe 100644
--- a/projects/mercury/src/metadata/views/MetadataView.styles.js
+++ b/projects/mercury/src/metadata/views/MetadataView.styles.js
@@ -27,7 +27,8 @@ const styles = theme => ({
         textAlign: 'end'
     },
     clearAllButton: {
-        color: theme.palette.error.main
+        color: theme.palette.primary.contrastText,
+        background: theme.palette.primary.main
     },
     activeFilters: {
         marginBottom: 10
diff --git a/projects/mercury/src/metadata/views/MetadataViewFacetFactory.js b/projects/mercury/src/metadata/views/MetadataViewFacetFactory.js
index 20c1bb60a..a68ed0b7d 100644
--- a/projects/mercury/src/metadata/views/MetadataViewFacetFactory.js
+++ b/projects/mercury/src/metadata/views/MetadataViewFacetFactory.js
@@ -71,7 +71,7 @@ const Facet = (props: MetadataViewFacetProperties) => {
 
     const clearFiltersAction = activeFilterValues.length > 0 && (
         <IconButton onClick={clearFilter} aria-label="Clear" className={classes.headerIcon} size="medium">
-            <Clear fontSize="small" color="primary" />
+            <Clear fontSize="small" color="primary.contrastText" />
         </IconButton>
     );
 
diff --git a/projects/mercury/src/metadata/views/MetadataViewFacets.js b/projects/mercury/src/metadata/views/MetadataViewFacets.js
index fa316d4e3..8b8e024f2 100644
--- a/projects/mercury/src/metadata/views/MetadataViewFacets.js
+++ b/projects/mercury/src/metadata/views/MetadataViewFacets.js
@@ -25,7 +25,8 @@ const styles = theme => ({
         width: 265
     },
     confirmFiltersButton: {
-        width: '100%'
+        width: '100%',
+        background: theme.palette.primary.main
     },
     facetsContainer: {
         maxHeight: 'calc(100vh - 212px)',
@@ -47,7 +48,7 @@ const styles = theme => ({
     facet: {
         borderColor: theme.palette.primary.light,
         borderWidth: 1.8,
-        borderRadius: 6,
+        borderRadius: 15,
         marginLeft: 8,
         marginTop: 6
     }
diff --git a/projects/mercury/src/metadata/views/MetadataViewTableContainer.js b/projects/mercury/src/metadata/views/MetadataViewTableContainer.js
index f133a76fd..72b08d2be 100644
--- a/projects/mercury/src/metadata/views/MetadataViewTableContainer.js
+++ b/projects/mercury/src/metadata/views/MetadataViewTableContainer.js
@@ -3,7 +3,7 @@ import {
     CircularProgress,
     FormControlLabel,
     IconButton,
-    Paper,
+    Box,
     TableContainer,
     TablePagination,
     Tooltip,
@@ -20,6 +20,7 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import GetAppIcon from '@mui/icons-material/GetApp';
 import FormGroup from '@mui/material/FormGroup';
 import useDeepCompareEffect from 'use-deep-compare-effect';
+import {useTheme} from '@mui/material/styles';
 
 import type {MetadataViewColumn, MetadataViewFilter} from './MetadataViewAPI';
 import MessageDisplay from '../../common/components/MessageDisplay';
@@ -105,6 +106,7 @@ export const MetadataViewTableContainer = (props: MetadataViewTableContainerProp
     const exportToAnalysisEnabled = isFeatureEnabled('ExtraStorage');
     const [exportToAnalysisLoading, setExportToAnalysisLoading] = useState(false);
     const [currentSelectionExported, setCurrentSelectionExported] = useState(false);
+    const theme = useTheme();
 
     const [page, setPage] = useState(0);
     const [visibleColumnNames, setVisibleColumnNames] = useStateWithLocalStorage(
@@ -357,7 +359,14 @@ export const MetadataViewTableContainer = (props: MetadataViewTableContainerProp
         : 0;
 
     return (
-        <Paper>
+        <Box
+            border="1px solid"
+            borderColor={theme.palette.primary.dark}
+            borderRadius={5}
+            sx={{
+                boxShadow: 5
+            }}
+        >
             {renderTableSettings()}
             <LoadingOverlayWrapper loading={!data || loading}>
                 <MetadataViewActiveTextFilters
@@ -425,7 +434,7 @@ export const MetadataViewTableContainer = (props: MetadataViewTableContainerProp
                     />
                 </div>
             </LoadingOverlayWrapper>
-        </Paper>
+        </Box>
     );
 };