diff --git a/webui/src/components/banner.tsx b/webui/src/components/banner.tsx
index f6696caf5..a83457f1b 100644
--- a/webui/src/components/banner.tsx
+++ b/webui/src/components/banner.tsx
@@ -14,46 +14,44 @@ import { Paper, Grid, Button, Collapse } from '@mui/material';
 export const Banner: FunctionComponent<PropsWithChildren<BannerProps>> = props => {
     const cardColor = props.theme === 'dark' ? '#fff' : '#000';
     const cardBackground = `${props.color}.${props.theme}`;
-    return <>
-        <Collapse in={props.open}>
-            <Paper
-                elevation={0}
-                sx={{
-                    display: 'block',
-                    width: '100%',
-                    mx: 'auto',
-                    pb: 1, pr: 1, pl: 2, pt: 1.25,
+    return <Collapse in={props.open}>
+        <Paper
+            elevation={0}
+            sx={{
+                display: 'block',
+                width: '100%',
+                mx: 'auto',
+                pb: 1, pr: 1, pl: 2, pt: 1.25,
+                color: cardColor,
+                bgcolor: cardBackground,
+                '& a': {
                     color: cardColor,
-                    bgcolor: cardBackground,
-                    '& a': {
-                        color: cardColor,
-                        fontWeight: 'bold'
-                    }
-                }}
+                    fontWeight: 'bold'
+                }
+            }}
+        >
+            <Grid
+                container
+                spacing={2}
             >
-                <Grid
-                    container
-                    spacing={2}
-                >
-                    <Grid item xs={12} sm sx={{ alignSelf: 'center' }}>
-                        {props.children}
-                    </Grid>
-                    {
-                        props.showDismissButton &&
-                            <Grid item xs={12} sm='auto' sx={{ whiteSpace: 'nowrap', alignSelf: 'flex-end', paddingLeft: '90px !important' }}>
-                                <Button
-                                    sx={{ float: 'right' }}
-                                    variant='outlined'
-                                    onClick={props.dismissButtonOnClick}
-                                >
-                                    {props.dismissButtonLabel ?? 'Close'}
-                                </Button>
-                            </Grid>
-                    }
+                <Grid item xs={12} sm sx={{ alignSelf: 'center' }}>
+                    {props.children}
                 </Grid>
-            </Paper>
-        </Collapse>
-    </>;
+                {
+                    props.showDismissButton &&
+                    <Grid item xs={12} sm='auto' sx={{ whiteSpace: 'nowrap', alignSelf: 'flex-end', paddingLeft: '90px !important' }}>
+                        <Button
+                            sx={{ float: 'right' }}
+                            variant='outlined'
+                            onClick={props.dismissButtonOnClick}
+                        >
+                            {props.dismissButtonLabel ?? 'Close'}
+                        </Button>
+                    </Grid>
+                }
+            </Grid>
+        </Paper>
+    </Collapse>;
 };
 
 interface BannerProps {
diff --git a/webui/src/pages/admin-dashboard/extension-version-container.tsx b/webui/src/pages/admin-dashboard/extension-version-container.tsx
index 8cf307b15..6e1951d26 100644
--- a/webui/src/pages/admin-dashboard/extension-version-container.tsx
+++ b/webui/src/pages/admin-dashboard/extension-version-container.tsx
@@ -97,94 +97,92 @@ export const ExtensionVersionContainer: FunctionComponent<ExtensionVersionContai
         setTargetPlatformVersions(newTargetPlatformVersions);
     };
 
-    return <>
-        <Grid container direction='column' sx={{ height: '100%' }}>
-            <Grid item container sx={{ filter: extension.deprecated ? 'grayscale(100%)' : null }}>
-                {
-                    icon ?
-                        <Grid item xs={12} md={4}>
-                            <Box
-                                component='img'
-                                src={icon}
-                                alt={extension.displayName || extension.name}
-                                sx={{
-                                    height: '7.5rem',
-                                    maxWidth: '9rem'
-                                }}
-                            />
-                        </Grid>
-                        : ''
-                }
-                <Grid item container xs={12} md={8}>
-                    <Grid item container direction='column' justifyContent='center'>
-                        <Grid item>
-                            <Typography variant='h5' sx={{ fontWeight: 'bold' }}>
-                                {extension.displayName || extension.name}
-                            </Typography>
-                        </Grid>
-                        { extension.deprecated &&
-                            <Grid item container direction='row'>
-                                <Grid item>
-                                    <WarningIcon fontSize='small' />
-                                </Grid>
-                                <Grid item>
-                                    <Typography>&nbsp;This extension has been deprecated.</Typography>
-                                </Grid>
+    return <Grid container direction='column' sx={{ height: '100%' }}>
+        <Grid item container sx={{ filter: extension.deprecated ? 'grayscale(100%)' : null }}>
+            {
+                icon ?
+                    <Grid item xs={12} md={4}>
+                        <Box
+                            component='img'
+                            src={icon}
+                            alt={extension.displayName || extension.name}
+                            sx={{
+                                height: '7.5rem',
+                                maxWidth: '9rem'
+                            }}
+                        />
+                    </Grid>
+                    : ''
+            }
+            <Grid item container xs={12} md={8}>
+                <Grid item container direction='column' justifyContent='center'>
+                    <Grid item>
+                        <Typography variant='h5' sx={{ fontWeight: 'bold' }}>
+                            {extension.displayName || extension.name}
+                        </Typography>
+                    </Grid>
+                    {extension.deprecated &&
+                        <Grid item container direction='row'>
+                            <Grid item>
+                                <WarningIcon fontSize='small' />
+                            </Grid>
+                            <Grid item>
+                                <Typography>&nbsp;This extension has been deprecated.</Typography>
                             </Grid>
-                        }
-                        <Grid item>
-                            <Typography sx={{ fontFamily: 'Monaco, monospace' }}>{extension.namespace}.{extension.name}</Typography>
-                        </Grid>
-                        <Grid item>
-                            <Typography sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{extension.description}</Typography>
                         </Grid>
+                    }
+                    <Grid item>
+                        <Typography sx={{ fontFamily: 'Monaco, monospace' }}>{extension.namespace}.{extension.name}</Typography>
+                    </Grid>
+                    <Grid item>
+                        <Typography sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{extension.description}</Typography>
                     </Grid>
                 </Grid>
             </Grid>
-            <Grid item container sx={{ flex: 1 }}>
-                <Grid item xs={12} md={4}></Grid>
-                <Grid item container xs={12} md={8} direction='column'>
-                    <FormControl component='fieldset'>
-                        <FormGroup>
-                            {
-                                targetPlatformVersions.map((targetPlatformVersion, index) => {
-                                        let label: string;
-                                        let indent: number;
-                                        if (targetPlatformVersion.version === WILDCARD && targetPlatformVersion.targetPlatform === WILDCARD) {
-                                            label = 'All Versions';
-                                            indent = 0;
-                                        } else if (targetPlatformVersion.targetPlatform === WILDCARD) {
-                                            label = targetPlatformVersion.version;
-                                            indent = 4;
-                                        } else {
-                                            label = getTargetPlatformDisplayName(targetPlatformVersion.targetPlatform);
-                                            indent = 8;
-                                        }
-
-                                        const name = `${targetPlatformVersion.targetPlatform}/${targetPlatformVersion.version}`;
-                                        return <FormControlLabel
-                                            sx={{ pl: indent }}
-                                            key={`${name}_${index}`}
-                                            control={<Checkbox checked={targetPlatformVersion.checked} onChange={handleChange} name={name} />}
-                                            label={label} />;
-                                    })
-                            }
-                        </FormGroup>
-                    </FormControl>
-                </Grid>
+        </Grid>
+        <Grid item container sx={{ flex: 1 }}>
+            <Grid item xs={12} md={4}></Grid>
+            <Grid item container xs={12} md={8} direction='column'>
+                <FormControl component='fieldset'>
+                    <FormGroup>
+                        {
+                            targetPlatformVersions.map((targetPlatformVersion, index) => {
+                                let label: string;
+                                let indent: number;
+                                if (targetPlatformVersion.version === WILDCARD && targetPlatformVersion.targetPlatform === WILDCARD) {
+                                    label = 'All Versions';
+                                    indent = 0;
+                                } else if (targetPlatformVersion.targetPlatform === WILDCARD) {
+                                    label = targetPlatformVersion.version;
+                                    indent = 4;
+                                } else {
+                                    label = getTargetPlatformDisplayName(targetPlatformVersion.targetPlatform);
+                                    indent = 8;
+                                }
+
+                                const name = `${targetPlatformVersion.targetPlatform}/${targetPlatformVersion.version}`;
+                                return <FormControlLabel
+                                    sx={{ pl: indent }}
+                                    key={`${name}_${index}`}
+                                    control={<Checkbox checked={targetPlatformVersion.checked} onChange={handleChange} name={name} />}
+                                    label={label} />;
+                            })
+                        }
+                    </FormGroup>
+                </FormControl>
             </Grid>
-            <Grid item container>
-                <Grid item xs={12} md={4}>
-                </Grid>
-                <Grid item container xs={12} md={8}>
-                    <ExtensionRemoveDialog
-                        onUpdate={props.onUpdate}
-                        extension={extension}
-                        targetPlatformVersions={targetPlatformVersions.filter((targetPlatformVersion) => targetPlatformVersion.checked)} />
-                </Grid>
+        </Grid>
+        <Grid item container>
+            <Grid item xs={12} md={4}>
+            </Grid>
+            <Grid item container xs={12} md={8}>
+                <ExtensionRemoveDialog
+                    onUpdate={props.onUpdate}
+                    extension={extension}
+                    targetPlatformVersions={targetPlatformVersions.filter((targetPlatformVersion) => targetPlatformVersion.checked)} />
             </Grid>
         </Grid>
-    </>;
+    </Grid>;
 };
 
 export interface ExtensionVersionContainerProps {
diff --git a/webui/src/pages/admin-dashboard/search-list-container.tsx b/webui/src/pages/admin-dashboard/search-list-container.tsx
index 6e31ef131..c7543ec96 100644
--- a/webui/src/pages/admin-dashboard/search-list-container.tsx
+++ b/webui/src/pages/admin-dashboard/search-list-container.tsx
@@ -13,25 +13,23 @@ import { Grid } from '@mui/material';
 import { DelayedLoadIndicator } from '../../components/delayed-load-indicator';
 
 export const SearchListContainer: FunctionComponent<SearchListContainerProps> = props => {
-    return (<>
-        <Grid container direction='column' spacing={2} sx={{ flexWrap: 'nowrap', mb: 4 }}>
-            <Grid style={{ flex: 1 }} item container direction='column' spacing={1} justifyContent='flex-end'>
-                {props.searchContainer.map((searchField, key) => {
-                    return <Grid key={key} container item justifyContent='center'>
-                        <Grid item xs={8}>
-                            {searchField}
-                        </Grid>
-                    </Grid>;
-                })}
-            </Grid>
-            <Grid style={{ flex: 4, overflow: 'hidden' }} item container justifyContent='center'>
-                <Grid style={{ height: '100%' }} item xs={8}>
-                    <DelayedLoadIndicator loading={props.loading} />
-                    {props.listContainer}
-                </Grid>
+    return <Grid container direction='column' spacing={2} sx={{ flexWrap: 'nowrap', mb: 4 }}>
+        <Grid style={{ flex: 1 }} item container direction='column' spacing={1} justifyContent='flex-end'>
+            {props.searchContainer.map((searchField, key) => {
+                return <Grid key={key} container item justifyContent='center'>
+                    <Grid item xs={8}>
+                        {searchField}
+                    </Grid>
+                </Grid>;
+            })}
+        </Grid>
+        <Grid style={{ flex: 4, overflow: 'hidden' }} item container justifyContent='center'>
+            <Grid style={{ height: '100%' }} item xs={8}>
+                <DelayedLoadIndicator loading={props.loading} />
+                {props.listContainer}
             </Grid>
         </Grid>
-    </>);
+    </Grid>;
 };
 
 export interface SearchListContainerProps {
diff --git a/webui/src/pages/admin-dashboard/welcome.tsx b/webui/src/pages/admin-dashboard/welcome.tsx
index d100eefd7..1ab0d42ed 100644
--- a/webui/src/pages/admin-dashboard/welcome.tsx
+++ b/webui/src/pages/admin-dashboard/welcome.tsx
@@ -15,24 +15,22 @@ import { Link } from 'react-router-dom';
 import { AdminDashboardRoutes } from './admin-dashboard';
 
 export const Welcome: FunctionComponent = props => {
-    return <>
-        <Grid container direction='column' spacing={2} sx={{ height: '100%' }}>
-            <Grid item container direction='column' alignItems='center' justifyContent='flex-end'>
-                <Paper elevation={3} sx={{ p: 4 }}>
-                    <Typography sx={{ mb: 2 }} align='center' variant='h5'>Welcome to the Admin Dashboard!</Typography>
-                    <Typography align='center'>You can switch pages in the sidepanel menu on the left side.</Typography>
-                    <Typography align='center'>
-                        Choose between administration for
-                    </Typography>
-                    <Grid container justifyContent='center' alignItems='center' sx={{ mt: 2 }}>
-                        <WelcomeLinkItem route={AdminDashboardRoutes.NAMESPACE_ADMIN} label='Namespaces' description='Manage user roles, create new namespaces' />
-                        <WelcomeLinkItem route={AdminDashboardRoutes.EXTENSION_ADMIN} label='Extensions' description='Search for extensions and remove certain versions' />
-                        <WelcomeLinkItem route={AdminDashboardRoutes.PUBLISHER_ADMIN} label='Publishers' description='Search for publishers and revoke their contributions' />
-                    </Grid>
-                </Paper>
-            </Grid>
+    return <Grid container direction='column' spacing={2} sx={{ height: '100%' }}>
+        <Grid item container direction='column' alignItems='center' justifyContent='flex-end'>
+            <Paper elevation={3} sx={{ p: 4 }}>
+                <Typography sx={{ mb: 2 }} align='center' variant='h5'>Welcome to the Admin Dashboard!</Typography>
+                <Typography align='center'>You can switch pages in the sidepanel menu on the left side.</Typography>
+                <Typography align='center'>
+                    Choose between administration for
+                </Typography>
+                <Grid container justifyContent='center' alignItems='center' sx={{ mt: 2 }}>
+                    <WelcomeLinkItem route={AdminDashboardRoutes.NAMESPACE_ADMIN} label='Namespaces' description='Manage user roles, create new namespaces' />
+                    <WelcomeLinkItem route={AdminDashboardRoutes.EXTENSION_ADMIN} label='Extensions' description='Search for extensions and remove certain versions' />
+                    <WelcomeLinkItem route={AdminDashboardRoutes.PUBLISHER_ADMIN} label='Publishers' description='Search for publishers and revoke their contributions' />
+                </Grid>
+            </Paper>
         </Grid>
-    </>;
+    </Grid>;
 };
 
 const StyledLink = styled(Link)(({ theme }: { theme: Theme }) => ({
@@ -44,18 +42,16 @@ const StyledLink = styled(Link)(({ theme }: { theme: Theme }) => ({
 }));
 
 const WelcomeLinkItem: FunctionComponent<{ route: string, label: string, description: string }> = props => {
-    return <>
-        <Grid container item xs={8} sx={{ mb: 2 }}>
-            <Grid container alignItems='center' item xs={12} md={4}>
-                <Typography>
-                    <StyledLink to={props.route}>
-                        {props.label}
-                    </StyledLink>
-                </Typography>
-            </Grid>
-            <Grid item xs={12} md={8}>
-                <Typography variant='body1' style={{ lineHeight: 1.5 }}>{props.description}</Typography>
-            </Grid>
+    return <Grid container item xs={8} sx={{ mb: 2 }}>
+        <Grid container alignItems='center' item xs={12} md={4}>
+            <Typography>
+                <StyledLink to={props.route}>
+                    {props.label}
+                </StyledLink>
+            </Typography>
+        </Grid>
+        <Grid item xs={12} md={8}>
+            <Typography variant='body1' style={{ lineHeight: 1.5 }}>{props.description}</Typography>
         </Grid>
-    </>;
+    </Grid>;
 };
\ No newline at end of file
diff --git a/webui/src/pages/extension-detail/extension-detail-changes.tsx b/webui/src/pages/extension-detail/extension-detail-changes.tsx
index 620e2787a..4967f9bc8 100644
--- a/webui/src/pages/extension-detail/extension-detail-changes.tsx
+++ b/webui/src/pages/extension-detail/extension-detail-changes.tsx
@@ -78,25 +78,23 @@ export const ExtensionDetailChanges: FunctionComponent<ExtensionDetailChangesPro
             </Box>
         </>;
     }
-    return <>
-        <Box
-            sx={{
-                display: 'flex',
-                mt: 2,
-                flexDirection: {
-                    xs: 'column-reverse',
-                    sm: 'column-reverse',
-                    md: 'column-reverse',
-                    lg: 'column-reverse',
-                    xl: 'row'
-                }
-            }}
-        >
-            <Box flex={5} overflow='auto'>
-                <SanitizedMarkdown content={changelog} />
-            </Box>
+    return <Box
+        sx={{
+            display: 'flex',
+            mt: 2,
+            flexDirection: {
+                xs: 'column-reverse',
+                sm: 'column-reverse',
+                md: 'column-reverse',
+                lg: 'column-reverse',
+                xl: 'row'
+            }
+        }}
+    >
+        <Box flex={5} overflow='auto'>
+            <SanitizedMarkdown content={changelog} />
         </Box>
-    </>;
+    </Box>;
 };
 
 export interface ExtensionDetailChangesProps {
diff --git a/webui/src/pages/extension-detail/extension-detail-overview.tsx b/webui/src/pages/extension-detail/extension-detail-overview.tsx
index eca5efef6..17b952e04 100644
--- a/webui/src/pages/extension-detail/extension-detail-overview.tsx
+++ b/webui/src/pages/extension-detail/extension-detail-overview.tsx
@@ -71,17 +71,17 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
             <Typography variant='h6'>Version</Typography>
             {
                 allVersions.length === 1 ?
-                <Typography variant='body1' display='inline'>{allVersions[0]}</Typography>
-                :
-                <NativeSelect
-                    name='Version'
-                    value={extension.version}
-                    onChange={event => props.selectVersion(event.target.value)}
-                    inputProps={{ 'aria-label': 'Version' }} >
-                    {
-                        allVersions.map(version => <option key={version}>{version}</option>)
-                    }
-                </NativeSelect>
+                    <Typography variant='body1' display='inline'>{allVersions[0]}</Typography>
+                    :
+                    <NativeSelect
+                        name='Version'
+                        value={extension.version}
+                        onChange={event => props.selectVersion(event.target.value)}
+                        inputProps={{ 'aria-label': 'Version' }} >
+                        {
+                            allVersions.map(version => <option key={version}>{version}</option>)
+                        }
+                    </NativeSelect>
             }
             {
                 extension.preRelease ?
@@ -90,10 +90,10 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
             }
             {
                 extension.timestamp ?
-                <Box mt={1} mb={1}>
-                    Published <Timestamp value={extension.timestamp} />
-                </Box>
-                : null
+                    <Box mt={1} mb={1}>
+                        Published <Timestamp value={extension.timestamp} />
+                    </Box>
+                    : null
             }
         </>;
     };
@@ -150,8 +150,8 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
                         key={buttonLabel}
                         title={
                             kind === 'category'
-                            ? `Search for extensions in "${buttonLabel}" category`
-                            : `Search for extensions containing "${buttonLabel}"`
+                                ? `Search for extensions in "${buttonLabel}" category`
+                                : `Search for extensions containing "${buttonLabel}"`
                         }
                         onClick={() => {
                             const route = addQuery(ExtensionListRoutes.MAIN, [{ key: kind, value: buttonLabel }]);
@@ -163,7 +163,7 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
         </>;
     };
 
-    const renderWorksWithList = (downloads: {[targetPlatform: string]: UrlString}): ReactNode => {
+    const renderWorksWithList = (downloads: { [targetPlatform: string]: UrlString }): ReactNode => {
         return Object.keys(downloads).map((targetPlatform, index) => {
             const displayName = getTargetPlatformDisplayName(targetPlatform);
             return displayName ? <span key={targetPlatform}>{index > 0 ? ', ' : ''}{displayName}</span> : null;
@@ -238,60 +238,59 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
         .filter(version => extension.versionAlias.indexOf(version) < 0 && VERSION_ALIASES.indexOf(version) >= 0);
     // filter internal tags
     const tags = extension.tags?.filter(t => !t.startsWith('__'));
-    return <>
+    return <Box
+        sx={{
+            display: 'flex',
+            mt: 2,
+            flexDirection: {
+                xs: 'column-reverse',
+                sm: 'column-reverse',
+                md: 'column-reverse',
+                lg: 'column-reverse',
+                xl: 'row'
+            }
+        }}
+    >
+        <Box flex={5} overflow='auto'>
+            <SanitizedMarkdown content={readme} />
+        </Box>
         <Box
             sx={{
+                flex: 1,
                 display: 'flex',
-                mt: 2,
-                flexDirection: {
-                    xs: 'column-reverse',
-                    sm: 'column-reverse',
-                    md: 'column-reverse',
-                    lg: 'column-reverse',
-                    xl: 'row'
-                }
+                width: '100%',
+                minWidth: '290px',
+                mb: { xs: 2, sm: 2, md: 2, lg: 2, xl: 0 },
+                ml: { xs: 0, sm: 0, md: 0, lg: 0, xl: '4.8rem' },
+                flexDirection: { xs: 'column', sm: 'column', md: 'row', lg: 'row', xl: 'column' }
             }}
         >
-            <Box flex={5} overflow='auto'>
-                <SanitizedMarkdown content={readme} />
-            </Box>
-            <Box
-                sx={{
-                    flex: 1,
-                    display: 'flex',
-                    width: '100%',
-                    minWidth: '290px',
-                    mb: { xs: 2, sm: 2, md: 2, lg: 2, xl: 0 },
-                    ml: { xs: 0, sm: 0, md: 0, lg: 0, xl: '4.8rem' },
-                    flexDirection: { xs: 'column', sm: 'column', md: 'row', lg: 'row', xl: 'column' }
-                }}
-            >
-                <Box sx={resourcesGroup}>
-                    <Box>
-                        {renderVersionSection()}
-                    </Box>
-                    {
-                        (otherAliases.length || extension.versionAlias.length) ? <Box>{renderAliasesSection(otherAliases, tagButton)}</Box> : ''
-                    }
+            <Box sx={resourcesGroup}>
+                <Box>
+                    {renderVersionSection()}
                 </Box>
-                <Box sx={resourcesGroup}>
-                    {
-                        extension.categories && extension.categories.length > 0 ?
+                {
+                    (otherAliases.length || extension.versionAlias.length) ? <Box>{renderAliasesSection(otherAliases, tagButton)}</Box> : ''
+                }
+            </Box>
+            <Box sx={resourcesGroup}>
+                {
+                    extension.categories && extension.categories.length > 0 ?
                         <Box>
                             {renderButtonList('category', 'Categories', extension.categories, tagButton)}
                         </Box>
                         : null
-                    }
-                    {
-                        tags && tags.length > 0 ?
+                }
+                {
+                    tags && tags.length > 0 ?
                         <Box mt={2}>
                             {renderButtonList('search', 'Tags', tags, tagButton)}
                         </Box>
                         : null
-                    }
-                </Box>
-                {
-                    extension.downloads ?
+                }
+            </Box>
+            {
+                extension.downloads ?
                     <Box sx={resourcesGroup}>
                         <Box>
                             <Typography variant='h6'>Works With</Typography>
@@ -299,55 +298,54 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
                         </Box>
                     </Box>
                     : null
-                }
-                <Box sx={resourcesGroup}>
-                    <Box>
-                        <Typography variant='h6'>Resources</Typography>
-                        {renderResourceLink('Homepage', resourceLink, extension.homepage)}
-                        {renderResourceLink('Repository', resourceLink, extension.repository)}
-                        {renderResourceLink('Bugs', resourceLink, extension.bugs)}
-                        {renderResourceLink('Q\'n\'A', resourceLink, extension.qna)}
-                        {
-                            extension.downloadable && extension.downloads && Object.keys(extension.downloads).length > 1 ?
-                            <ExtensionDetailDownloadsMenu downloads={extension.downloads}/>
+            }
+            <Box sx={resourcesGroup}>
+                <Box>
+                    <Typography variant='h6'>Resources</Typography>
+                    {renderResourceLink('Homepage', resourceLink, extension.homepage)}
+                    {renderResourceLink('Repository', resourceLink, extension.repository)}
+                    {renderResourceLink('Bugs', resourceLink, extension.bugs)}
+                    {renderResourceLink('Q\'n\'A', resourceLink, extension.qna)}
+                    {
+                        extension.downloadable && extension.downloads && Object.keys(extension.downloads).length > 1 ?
+                            <ExtensionDetailDownloadsMenu downloads={extension.downloads} />
                             : extension.downloadable && extension.downloads && Object.keys(extension.downloads).length == 1 ?
-                            <Button variant='contained' color='secondary' sx={{ mt: 2 }}
-                                href={extension.downloads[Object.keys(extension.downloads)[0]]}
-                            >
-                                Download
-                            </Button>
-                            : null
-                        }
-                        {
-                            DownloadTerms && extension.downloadable && extension.downloads && Object.keys(extension.downloads).length > 0
-                            ? <DownloadTerms/>
-                            : null
-                        }
-                    </Box>
+                                <Button variant='contained' color='secondary' sx={{ mt: 2 }}
+                                    href={extension.downloads[Object.keys(extension.downloads)[0]]}
+                                >
+                                    Download
+                                </Button>
+                                : null
+                    }
                     {
-                        extension.bundledExtensions !== undefined && extension.bundledExtensions.length > 0 ?
+                        DownloadTerms && extension.downloadable && extension.downloads && Object.keys(extension.downloads).length > 0
+                            ? <DownloadTerms />
+                            : null
+                    }
+                </Box>
+                {
+                    extension.bundledExtensions !== undefined && extension.bundledExtensions.length > 0 ?
                         <Box mt={2}>
                             <Typography variant='h6'>Bundled Extensions</Typography>
                             {extension.bundledExtensions!.map(ref => renderExtensionRef(ref))}
                         </Box>
                         : null
-                    }
-                    {
-                        extension.dependencies !== undefined && extension.dependencies.length > 0 ?
+                }
+                {
+                    extension.dependencies !== undefined && extension.dependencies.length > 0 ?
                         <Box mt={2}>
                             <Typography variant='h6'>Dependencies</Typography>
                             {extension.dependencies!.map(ref => renderExtensionRef(ref))}
                         </Box>
                         : null
-                    }
-                    <Box mt={2}>
-                        {ClaimNamespace ? <ClaimNamespace extension={extension} sx={resourceLink} /> : ''}
-                        {ReportAbuse ? <ReportAbuse extension={extension} sx={resourceLink} /> : ''}
-                    </Box>
+                }
+                <Box mt={2}>
+                    {ClaimNamespace ? <ClaimNamespace extension={extension} sx={resourceLink} /> : ''}
+                    {ReportAbuse ? <ReportAbuse extension={extension} sx={resourceLink} /> : ''}
                 </Box>
             </Box>
         </Box>
-    </>;
+    </Box>;
 };
 
 export interface ExtensionDetailOverviewProps {
diff --git a/webui/src/pages/extension-detail/extension-rating-star-setter.tsx b/webui/src/pages/extension-detail/extension-rating-star-setter.tsx
index 7da9f20d1..ea95fb484 100644
--- a/webui/src/pages/extension-detail/extension-rating-star-setter.tsx
+++ b/webui/src/pages/extension-detail/extension-rating-star-setter.tsx
@@ -36,11 +36,7 @@ export const ExtensionRatingStarSetter: FunctionComponent<ExtensionRatingStarSet
         return stars;
     };
 
-    return <>
-        <Box>
-            {renderStars()}
-        </Box>
-    </>;
+    return <Box>{renderStars()}</Box>;
 };
 
 export interface ExtensionRatingStarSetterProps {
diff --git a/webui/src/pages/extension-list/extension-list-header.tsx b/webui/src/pages/extension-list/extension-list-header.tsx
index 2c475d41a..670d75305 100644
--- a/webui/src/pages/extension-list/extension-list-header.tsx
+++ b/webui/src/pages/extension-list/extension-list-header.tsx
@@ -80,121 +80,119 @@ export const ExtensionListHeader: FunctionComponent<ExtensionListHeaderProps> =
     };
 
     const SearchHeader = context.pageSettings.elements.searchHeader;
-    return <>
-        <Container>
-            <Box display='flex' flexDirection='column' alignItems='center' py={6}>
-                {SearchHeader ? <SearchHeader /> : ''}
+    return <Container>
+        <Box display='flex' flexDirection='column' alignItems='center' py={6}>
+            {SearchHeader ? <SearchHeader /> : ''}
+            <Box
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: { xs: '100%', sm: '100%', md: '70%', lg: '70%', xl: '70%' },
+                    maxWidth: { xs: 500, sm: 500, md: 500, lg: 'none', xl: 'none' }
+                }}
+            >
                 <Box
                     sx={{
                         display: 'flex',
-                        flexDirection: 'column',
-                        width: { xs: '100%', sm: '100%', md: '70%', lg: '70%', xl: '70%' },
-                        maxWidth: { xs: 500, sm: 500, md: 500, lg: 'none', xl: 'none' }
+                        width: '100%',
+                        flexDirection: { xs: 'column', sm: 'column', md: 'row', lg: 'row', xl: 'row' }
                     }}
                 >
-                    <Box
-                        sx={{
-                            display: 'flex',
-                            width: '100%',
-                            flexDirection: { xs: 'column', sm: 'column', md: 'row', lg: 'row', xl: 'row' }
-                        }}
-                    >
-                        <ExtensionListSearchfield
-                            onSearchChanged={handleSearchChange}
-                            onSearchSubmit={handleSearchSubmit}
-                            searchQuery={props.searchQuery}
-                            placeholder='Search by Name, Tag, or Description' />
-                        <Paper sx={{ flex: 1, display: 'flex' }}>
+                    <ExtensionListSearchfield
+                        onSearchChanged={handleSearchChange}
+                        onSearchSubmit={handleSearchSubmit}
+                        searchQuery={props.searchQuery}
+                        placeholder='Search by Name, Tag, or Description' />
+                    <Paper sx={{ flex: 1, display: 'flex' }}>
+                        <Select
+                            value={category}
+                            onChange={handleCategoryChange}
+                            renderValue={renderValue}
+                            displayEmpty
+                            input={<InputBase sx={{ flex: 1, pl: 1 }} />}>
+                            <MenuItem value=''>All Categories</MenuItem>
+                            {categories.map(c => {
+                                return <MenuItem value={c} key={c}>{c}</MenuItem>;
+                            })}
+                        </Select>
+                    </Paper>
+                </Box>
+                <Box
+                    sx={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        fontSize: '0.75rem',
+                        mt: 1
+                    }}
+                >
+                    <Box sx={{ color: 'text.secondary' }} >{`${props.resultNumber} Result${props.resultNumber !== 1 ? 's' : ''}`}</Box>
+                    <Box sx={{ color: 'text.secondary', display: 'flex' }}>
+                        <Box>
+                            Sort by
                             <Select
-                                value={category}
-                                onChange={handleCategoryChange}
-                                renderValue={renderValue}
-                                displayEmpty
-                                input={<InputBase sx={{ flex: 1, pl: 1 }} />}>
-                                <MenuItem value=''>All Categories</MenuItem>
-                                {categories.map(c => {
-                                    return <MenuItem value={c} key={c}>{c}</MenuItem>;
-                                })}
-                            </Select>
-                        </Paper>
-                    </Box>
-                    <Box
-                        sx={{
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            fontSize: '0.75rem',
-                            mt: 1
-                        }}
-                    >
-                        <Box sx={{ color: 'text.secondary' }} >{`${props.resultNumber} Result${props.resultNumber !== 1 ? 's' : ''}`}</Box>
-                        <Box sx={{ color: 'text.secondary', display: 'flex' }}>
-                            <Box>
-                                Sort by
-                                <Select
-                                    sx={{
-                                        ml: '4px',
-                                        fontSize: '0.75rem',
-                                        height: '1.1rem',
-                                        '& .MuiSelect-select': {
-                                            padding: '0px !important',
-                                            '&:hover': {
-                                                color: 'secondary.main'
-                                            }
-                                        },
-                                        '& .MuiSelect-icon': {
-                                            display: 'none'
-                                        },
-                                        '&.Mui-focused': {
-                                            '& .MuiOutlinedInput-notchedOutline': {
-                                                border: 0
-                                            }
-                                        },
+                                sx={{
+                                    ml: '4px',
+                                    fontSize: '0.75rem',
+                                    height: '1.1rem',
+                                    '& .MuiSelect-select': {
+                                        padding: '0px !important',
+                                        '&:hover': {
+                                            color: 'secondary.main'
+                                        }
+                                    },
+                                    '& .MuiSelect-icon': {
+                                        display: 'none'
+                                    },
+                                    '&.Mui-focused': {
                                         '& .MuiOutlinedInput-notchedOutline': {
                                             border: 0
                                         }
-                                    }}
-                                    IconComponent={() => <span />}
-                                    value={sortBy}
-                                    onChange={handleSortByChange}
-                                >
-                                    <MenuItem value={'relevance'}>Relevance</MenuItem>
-                                    <MenuItem value={'timestamp'}>Date</MenuItem>
-                                    <MenuItem value={'downloadCount'}>Downloads</MenuItem>
-                                    <MenuItem value={'rating'}>Rating</MenuItem>
-                                </Select>
-                            </Box>
-                            <Box
-                                sx={{
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    alignItems: 'center',
-                                    ml: 0.75,
-                                    '&:hover': {
-                                        cursor: 'pointer',
-                                        color: 'secondary.main'
-                                    }
-                                }}
-                                title={sortOrder === 'asc' ? 'Ascending' : 'Descending'}
-                                tabIndex={0}
-                                onKeyDown={(e: KeyboardEvent) => {
-                                    if (e.key === 'Enter') {
-                                        e.preventDefault();
-                                        handleSortOrderChange();
+                                    },
+                                    '& .MuiOutlinedInput-notchedOutline': {
+                                        border: 0
                                     }
                                 }}
-                                onClick={handleSortOrderChange}>
-                                {
-                                    sortOrder === 'asc'
-                                        ? <ArrowUpwardIcon fontSize='small' />
-                                        : <ArrowDownwardIcon fontSize='small' />
+                                IconComponent={() => <span />}
+                                value={sortBy}
+                                onChange={handleSortByChange}
+                            >
+                                <MenuItem value={'relevance'}>Relevance</MenuItem>
+                                <MenuItem value={'timestamp'}>Date</MenuItem>
+                                <MenuItem value={'downloadCount'}>Downloads</MenuItem>
+                                <MenuItem value={'rating'}>Rating</MenuItem>
+                            </Select>
+                        </Box>
+                        <Box
+                            sx={{
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                ml: 0.75,
+                                '&:hover': {
+                                    cursor: 'pointer',
+                                    color: 'secondary.main'
+                                }
+                            }}
+                            title={sortOrder === 'asc' ? 'Ascending' : 'Descending'}
+                            tabIndex={0}
+                            onKeyDown={(e: KeyboardEvent) => {
+                                if (e.key === 'Enter') {
+                                    e.preventDefault();
+                                    handleSortOrderChange();
                                 }
-                            </Box>
+                            }}
+                            onClick={handleSortOrderChange}>
+                            {
+                                sortOrder === 'asc'
+                                    ? <ArrowUpwardIcon fontSize='small' />
+                                    : <ArrowDownwardIcon fontSize='small' />
+                            }
                         </Box>
                     </Box>
                 </Box>
             </Box>
-        </Container>
-    </>;
+        </Box>
+    </Container>;
 };
 
 export interface ExtensionListHeaderProps {
diff --git a/webui/src/pages/extension-list/extension-list-item.tsx b/webui/src/pages/extension-list/extension-list-item.tsx
index 5382a93f5..5daf8a03f 100644
--- a/webui/src/pages/extension-list/extension-list-item.tsx
+++ b/webui/src/pages/extension-list/extension-list-item.tsx
@@ -53,55 +53,53 @@ export const ExtensionListItem: FunctionComponent<ExtensionListItemProps> = prop
     const route = createRoute([ExtensionDetailRoutes.ROOT, extension.namespace, extension.name]);
     const numberFormat = new Intl.NumberFormat(undefined, { notation: 'compact', compactDisplay: 'short' } as any);
     const downloadCountFormatted = numberFormat.format(extension.downloadCount || 0);
-    return <>
-        <Fade in={true} timeout={{ enter: ((filterSize + idx) % filterSize) * 200 }}>
-            <Grid item xs={12} sm={3} md={2} title={extension.displayName || extension.name} sx={{ maxWidth: '14.875rem', minWidth: '11.875rem' }}>
-                <RouteLink to={route} style={{ textDecoration: 'none' }}>
-                    <Paper
-                        elevation={3}
-                        sx={{
-                            py: 3,
-                            px: 2,
-                            '& > *': {
-                                '&:not(:last-child)': {
-                                    marginBottom: '.5rem',
-                                }
-                            },
-                            opacity: extension.deprecated ? 0.5 : undefined,
-                            filter: extension.deprecated ? 'grayscale(100%)' : undefined
-                        }}
-                    >
-                        <Box display='flex' justifyContent='center' alignItems='center' width='100%' height={80}>
-                            <Box
-                                component='img'
-                                src={ icon || context.pageSettings.urls.extensionDefaultIcon }
-                                alt={extension.displayName || extension.name}
-                                sx={{ width: '4.5rem', maxHeight: '5.4rem' }}
-                            />
-                        </Box>
-                        <Box display='flex' justifyContent='center'>
-                            <Typography variant='h6' noWrap style={{ fontSize: '1.15rem' }}>
-                                {extension.displayName || extension.name}
-                            </Typography>
-                        </Box>
-                        <Box display='flex' justifyContent='space-between'>
-                            <Typography component='div' variant='caption' noWrap={true} align='left'>
-                                {extension.namespace}
-                            </Typography>
-                            <Typography component='div' variant='caption' noWrap={true} align='right'>
-                                {extension.version}
-                            </Typography>
-                        </Box>
-                        <Box display='flex' justifyContent='center'>
-                            <ExportRatingStars number={extension.averageRating || 0} fontSize='small'/>
-                            &nbsp;
-                            {downloadCountFormatted != "0" && <><SaveAltIcon/> {downloadCountFormatted}</>}
-                        </Box>
-                    </Paper>
-                </RouteLink>
-            </Grid>
-        </Fade>
-    </>;
+    return <Fade in={true} timeout={{ enter: ((filterSize + idx) % filterSize) * 200 }}>
+        <Grid item xs={12} sm={3} md={2} title={extension.displayName || extension.name} sx={{ maxWidth: '14.875rem', minWidth: '11.875rem' }}>
+            <RouteLink to={route} style={{ textDecoration: 'none' }}>
+                <Paper
+                    elevation={3}
+                    sx={{
+                        py: 3,
+                        px: 2,
+                        '& > *': {
+                            '&:not(:last-child)': {
+                                marginBottom: '.5rem',
+                            }
+                        },
+                        opacity: extension.deprecated ? 0.5 : undefined,
+                        filter: extension.deprecated ? 'grayscale(100%)' : undefined
+                    }}
+                >
+                    <Box display='flex' justifyContent='center' alignItems='center' width='100%' height={80}>
+                        <Box
+                            component='img'
+                            src={icon || context.pageSettings.urls.extensionDefaultIcon}
+                            alt={extension.displayName || extension.name}
+                            sx={{ width: '4.5rem', maxHeight: '5.4rem' }}
+                        />
+                    </Box>
+                    <Box display='flex' justifyContent='center'>
+                        <Typography variant='h6' noWrap style={{ fontSize: '1.15rem' }}>
+                            {extension.displayName || extension.name}
+                        </Typography>
+                    </Box>
+                    <Box display='flex' justifyContent='space-between'>
+                        <Typography component='div' variant='caption' noWrap={true} align='left'>
+                            {extension.namespace}
+                        </Typography>
+                        <Typography component='div' variant='caption' noWrap={true} align='right'>
+                            {extension.version}
+                        </Typography>
+                    </Box>
+                    <Box display='flex' justifyContent='center'>
+                        <ExportRatingStars number={extension.averageRating || 0} fontSize='small' />
+                        &nbsp;
+                        {downloadCountFormatted != "0" && <><SaveAltIcon /> {downloadCountFormatted}</>}
+                    </Box>
+                </Paper>
+            </RouteLink>
+        </Grid>
+    </Fade>;
 };
 
 export interface ExtensionListItemProps {
diff --git a/webui/src/pages/extension-list/extension-list-searchfield.tsx b/webui/src/pages/extension-list/extension-list-searchfield.tsx
index a959d6e01..d80ad2cb6 100644
--- a/webui/src/pages/extension-list/extension-list-searchfield.tsx
+++ b/webui/src/pages/extension-list/extension-list-searchfield.tsx
@@ -38,56 +38,54 @@ export const ExtensionListSearchfield: FunctionComponent<ExtensionListSearchfiel
     };
 
     const searchIconColor = pageSettings?.themeType === 'dark' ? '#111111' : '#ffffff';
-    return (<>
-        <Paper
-            sx={{
-                flex: 2,
-                display: 'flex',
-                mr: { xs: 0, sm: 0, md: 1, lg: 1, xl: 1 },
-                mb: { xs: 2, sm: 2, md: 0, lg: 0, xl: 0 },
-                border: (props.error ? 2 : 0),
-                borderColor: 'error.main'
+    return <Paper
+        sx={{
+            flex: 2,
+            display: 'flex',
+            mr: { xs: 0, sm: 0, md: 1, lg: 1, xl: 1 },
+            mb: { xs: 2, sm: 2, md: 0, lg: 0, xl: 0 },
+            border: (props.error ? 2 : 0),
+            borderColor: 'error.main'
+        }}
+    >
+        <InputBase
+            autoFocus={props.autoFocus !== undefined ? props.autoFocus : true}
+            value={props.searchQuery}
+            onChange={handleSearchChange}
+            sx={{ flex: 1, pl: 1 }}
+            placeholder={props.placeholder}
+            id='search-input'
+            type='search'
+            inputMode='search'
+            onKeyDown={(e: KeyboardEvent) => {
+                if (e.key === 'Enter' && props.onSearchSubmit) {
+                    props.onSearchSubmit(props.searchQuery || '');
+                }
             }}
-        >
-            <InputBase
-                autoFocus={props.autoFocus !== undefined ? props.autoFocus : true}
-                value={props.searchQuery}
-                onChange={handleSearchChange}
-                sx={{ flex: 1, pl: 1 }}
-                placeholder={props.placeholder}
-                id='search-input'
-                type='search'
-                inputMode='search'
-                onKeyDown={(e: KeyboardEvent) => {
-                    if (e.key === 'Enter' && props.onSearchSubmit) {
-                        props.onSearchSubmit(props.searchQuery || '');
-                    }
-                }}
-            />
-            <label
-                htmlFor='search-input'
-                className='visually-hidden' >
-                Search for Name, Tags or Description
-            </label>
-            {
-                props.hideIconButton ? '' :
-                    <IconButton
-                        color='primary'
-                        aria-label='Search'
-                        onClick={handleSearchButtonClick}
-                        sx={{
-                            bgcolor: 'secondary.main',
-                            borderRadius: '0 4px 4px 0',
-                            p: 1,
-                            transition: 'all 0s',
-                            '&:hover': {
-                                filter: 'invert(100%)'
-                            }
-                        }}
-                    >
-                        <SearchIcon sx={{ color: searchIconColor }} />
-                    </IconButton>
-            }
-        </Paper>
-    </>);
+        />
+        <label
+            htmlFor='search-input'
+            className='visually-hidden' >
+            Search for Name, Tags or Description
+        </label>
+        {
+            props.hideIconButton ? '' :
+                <IconButton
+                    color='primary'
+                    aria-label='Search'
+                    onClick={handleSearchButtonClick}
+                    sx={{
+                        bgcolor: 'secondary.main',
+                        borderRadius: '0 4px 4px 0',
+                        p: 1,
+                        transition: 'all 0s',
+                        '&:hover': {
+                            filter: 'invert(100%)'
+                        }
+                    }}
+                >
+                    <SearchIcon sx={{ color: searchIconColor }} />
+                </IconButton>
+        }
+    </Paper>;
 };
\ No newline at end of file