diff --git a/.changelog/580.trivial.md b/.changelog/580.trivial.md
new file mode 100644
index 000000000..f5221243f
--- /dev/null
+++ b/.changelog/580.trivial.md
@@ -0,0 +1 @@
+Update ParaTime picker based on internal feedback
diff --git a/src/app/components/LayerStatus/index.tsx b/src/app/components/LayerStatus/index.tsx
index cd6480b0e..dcd7bbb5a 100644
--- a/src/app/components/LayerStatus/index.tsx
+++ b/src/app/components/LayerStatus/index.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import ErrorIcon from '@mui/icons-material/Error'
+import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
 import { COLORS } from '../../../styles/theme/colors'
 
@@ -10,6 +11,17 @@ type LayerStatusProps = {
   withLabel?: boolean
 }
 
+type OutOfDateLayerStatusIconProps = {
+  tooltip?: boolean
+}
+
+const OutOfDateLayerStatusIcon: FC<OutOfDateLayerStatusIconProps> = ({ tooltip }) => {
+  const { t } = useTranslation()
+  const errorIcon = <ErrorIcon sx={{ marginLeft: 2 }} color="error" fontSize="small" />
+
+  return tooltip ? <Tooltip title={t('common.paraTimeOutOfDate')}>{errorIcon}</Tooltip> : errorIcon
+}
+
 export const LayerStatus: FC<LayerStatusProps> = ({ isOutOfDate, withLabel = false }) => {
   const { t } = useTranslation()
 
@@ -25,7 +37,7 @@ export const LayerStatus: FC<LayerStatusProps> = ({ isOutOfDate, withLabel = fal
         </Typography>
       )}
       {isOutOfDate ? (
-        <ErrorIcon sx={{ marginLeft: 2 }} color="error" fontSize="small" />
+        <OutOfDateLayerStatusIcon tooltip={!withLabel} />
       ) : (
         <CheckCircleIcon sx={{ marginLeft: 2 }} color="success" fontSize="small" />
       )}
diff --git a/src/app/components/PageLayout/Header.tsx b/src/app/components/PageLayout/Header.tsx
index 714044c07..4a5ecb2e9 100644
--- a/src/app/components/PageLayout/Header.tsx
+++ b/src/app/components/PageLayout/Header.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef } from 'react'
+import { FC } from 'react'
 import AppBar from '@mui/material/AppBar'
 import Grid from '@mui/material/Unstable_Grid2'
 import useScrollTrigger from '@mui/material/useScrollTrigger'
@@ -8,35 +8,18 @@ import { NetworkSelector } from './NetworkSelector'
 import Box from '@mui/material/Box'
 import { useScopeParam } from '../../hooks/useScopeParam'
 import { useScreenSize } from '../../hooks/useScreensize'
-import useResizeObserver from 'use-resize-observer'
 
 export const Header: FC = () => {
   const theme = useTheme()
-  const { isMobile, isTablet } = useScreenSize()
+  const { isMobile } = useScreenSize()
   const scope = useScopeParam()
   const scrollTrigger = useScrollTrigger({
     disableHysteresis: true,
     threshold: 0,
   })
-  const headerRef = useRef<HTMLDivElement | null>(null)
-
-  const { height: headerHeight } = useResizeObserver<Element>({
-    ref: headerRef,
-  })
-
-  useEffect(() => {
-    if (!isTablet) {
-      return
-    }
-
-    if (headerRef.current !== null) {
-      document.body.style.setProperty('--app-header-height', `${headerHeight?.toFixed(2) || 0}px`)
-    }
-  }, [isTablet, headerHeight])
 
   return (
     <AppBar
-      ref={headerRef}
       position="sticky"
       sx={{
         transitionProperty: 'background-color',
diff --git a/src/app/components/PageLayout/NetworkButton.tsx b/src/app/components/PageLayout/NetworkButton.tsx
index 6c51fed9a..60b4edbd3 100644
--- a/src/app/components/PageLayout/NetworkButton.tsx
+++ b/src/app/components/PageLayout/NetworkButton.tsx
@@ -29,20 +29,24 @@ export const StyledNetworkButton = styled(Button)(({ theme }) => ({
     transitionProperty: 'background-color, color',
     transitionDuration: `${theme.transitions.duration.standard}ms`,
     transitionTimingFunction: theme.transitions.easing.easeInOut,
-    height: '47px',
-    display: 'flex',
-    alignItems: 'center',
     padding: `0 ${theme.spacing(4)}`,
-    borderTopLeftRadius: '12px',
-    borderBottomLeftRadius: '12px',
-    borderRightWidth: theme.spacing(1),
-    borderRightStyle: 'solid',
-    borderRightColor: theme.palette.layout.secondary,
-    backgroundColor: COLORS.white,
+    margin: 0,
   },
 
   [`& .${buttonClasses.endIcon}`]: {
+    transitionProperty: 'background-color, color',
+    transitionDuration: `${theme.transitions.duration.standard}ms`,
+    transitionTimingFunction: theme.transitions.easing.easeInOut,
+    height: '47px',
+    display: 'flex',
+    alignItems: 'center',
     padding: `0 ${theme.spacing(4)}`,
+    borderTopRightRadius: '12px',
+    borderBottomRightRadius: '12px',
+    borderLeftWidth: theme.spacing(1),
+    borderLeftStyle: 'solid',
+    borderLeftColor: theme.palette.layout.secondary,
+    backgroundColor: COLORS.white,
   },
 
   '&:hover, &:focus-visible': {
@@ -50,7 +54,7 @@ export const StyledNetworkButton = styled(Button)(({ theme }) => ({
     color: COLORS.white,
     borderColor: theme.palette.layout.hoverBorder,
 
-    [`& .${buttonClasses.startIcon}`]: {
+    [`& .${buttonClasses.endIcon}`]: {
       color: COLORS.brandDark,
       backgroundColor: theme.palette.layout.secondaryBackground,
       borderColor: theme.palette.layout.hoverBorder,
@@ -63,7 +67,6 @@ export const StyledBox = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(3),
-  paddingLeft: theme.spacing(3),
 }))
 
 type NetworkButtonProps = {
diff --git a/src/app/components/PageLayout/index.tsx b/src/app/components/PageLayout/index.tsx
index 38587daf9..3253e6d05 100644
--- a/src/app/components/PageLayout/index.tsx
+++ b/src/app/components/PageLayout/index.tsx
@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactNode, useEffect, useRef } from 'react'
+import { FC, PropsWithChildren, ReactNode } from 'react'
 import { Header } from './Header'
 import { Footer } from './Footer'
 import Box from '@mui/material/Box'
@@ -10,7 +10,6 @@ import { NetworkOfflineBanner, RuntimeOfflineBanner } from '../OfflineBanner'
 import { Search } from '../Search'
 import { useIsApiReachable } from '../OfflineBanner/hook'
 import { Network } from '../../../types/network'
-import useResizeObserver from 'use-resize-observer'
 
 interface PageLayoutProps {
   mobileFooterAction?: ReactNode
@@ -25,29 +24,12 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, m
   const { isMobile, isTablet } = useScreenSize()
   const scope = useScopeParam()
   const isApiReachable = useIsApiReachable(scope?.network || Network.mainnet).reachable
-  const bannersRef = useRef<HTMLDivElement | null>(null)
-
-  const { height: bannersHeight } = useResizeObserver<Element>({
-    ref: bannersRef,
-  })
-
-  useEffect(() => {
-    if (!isTablet) {
-      return
-    }
-
-    if (bannersRef.current !== null) {
-      document.body.style.setProperty('--app-banners-height', `${bannersHeight?.toFixed(2) || 0}px`)
-    }
-  }, [isTablet, bannersHeight])
 
   return (
     <>
-      <Box ref={bannersRef}>
-        <BuildBanner />
-        <NetworkOfflineBanner />
-        {scope?.valid && <RuntimeOfflineBanner />}
-      </Box>
+      <BuildBanner />
+      <NetworkOfflineBanner />
+      {scope?.valid && <RuntimeOfflineBanner />}
       <Box
         sx={{
           minHeight: '100vh',
diff --git a/src/app/components/ParaTimePicker/LayerDetails.tsx b/src/app/components/ParaTimePicker/LayerDetails.tsx
index 1b079fea1..2b0b456e2 100644
--- a/src/app/components/ParaTimePicker/LayerDetails.tsx
+++ b/src/app/components/ParaTimePicker/LayerDetails.tsx
@@ -2,10 +2,12 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { TFunction } from 'i18next'
 import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
 import { useTheme } from '@mui/material/styles'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import Link from '@mui/material/Link'
+import { styled } from '@mui/material/styles'
 import { Circle } from '../Circle'
 import { COLORS } from '../../../styles/theme/colors'
 import { Network, getNetworkNames } from '../../../types/network'
@@ -69,8 +71,21 @@ const getDetails = (t: TFunction): Details => ({
   },
 })
 
+export const StyledButton = styled(Button)(({ theme }) => ({
+  height: 30,
+  paddingLeft: 0,
+  marginRight: theme.spacing(3),
+  fontSize: 24,
+  color: COLORS.brandDark,
+  fontWeight: 700,
+  '&&:hover, &&:active': {
+    color: COLORS.brandDark,
+    textDecoration: 'none',
+  },
+}))
+
 type LayerDetailsProps = {
-  activeLayer: Layer
+  handleConfirm: () => void
   network: Network
   selectedLayer: Layer
 }
@@ -78,10 +93,10 @@ type LayerDetailsProps = {
 // Prevent modal height from changing height when switching between layers
 const contentMinHeight = '270px'
 
-export const LayerDetails: FC<LayerDetailsProps> = ({ network, selectedLayer }) => {
+export const LayerDetails: FC<LayerDetailsProps> = ({ handleConfirm, network, selectedLayer }) => {
   const { t } = useTranslation()
   const theme = useTheme()
-  const { isTablet } = useScreenSize()
+  const { isMobile, isTablet } = useScreenSize()
   const labels = getNetworkNames(t)
   const layerLabels = getLayerLabels(t)
   const icons = getNetworkIcons()
@@ -113,15 +128,15 @@ export const LayerDetails: FC<LayerDetailsProps> = ({ network, selectedLayer })
           sx={{
             display: 'flex',
             alignItems: 'center',
-            pb: 2,
+            pb: 3,
           }}
         >
-          <Typography sx={{ fontSize: 24, color: COLORS.brandDark, fontWeight: 700, mr: 3 }} component="span">
+          <StyledButton variant="text" onClick={handleConfirm}>
             {getNameForScope(t, { network, layer })}
-          </Typography>
-          <LayerStatus isOutOfDate={isOutOfDate} withLabel />
+          </StyledButton>
+          <LayerStatus isOutOfDate={isOutOfDate} withLabel={!isMobile} />
         </Box>
-        <Typography sx={{ fontSize: '12px', color: COLORS.brandExtraDark, pb: 2 }}>
+        <Typography sx={{ fontSize: '14px', color: COLORS.brandExtraDark, pb: 4 }}>
           {details.description}
         </Typography>
 
@@ -161,7 +176,7 @@ export const LayerDetails: FC<LayerDetailsProps> = ({ network, selectedLayer })
             display: 'flex',
             alignItems: 'center',
             gap: 2,
-            fontSize: '12px',
+            fontSize: '14px',
             fontWeight: 400,
           }}
         >
diff --git a/src/app/components/ParaTimePicker/LayerMenu.tsx b/src/app/components/ParaTimePicker/LayerMenu.tsx
index e14cbf26b..889fd73ec 100644
--- a/src/app/components/ParaTimePicker/LayerMenu.tsx
+++ b/src/app/components/ParaTimePicker/LayerMenu.tsx
@@ -116,7 +116,7 @@ export const LayerMenu: FC<LayerMenuProps> = ({
     .sort(orderByLayer)
 
   return (
-    <MenuList sx={{ pt: 0 }}>
+    <MenuList>
       {options.map((option, index) => {
         if (!option.enabled) {
           return (
diff --git a/src/app/components/ParaTimePicker/NetworkMenu.tsx b/src/app/components/ParaTimePicker/NetworkMenu.tsx
index 29505531d..8d609ec84 100644
--- a/src/app/components/ParaTimePicker/NetworkMenu.tsx
+++ b/src/app/components/ParaTimePicker/NetworkMenu.tsx
@@ -85,7 +85,7 @@ export const NetworkMenu: FC<NetworkMenuProps> = ({ activeNetwork, selectedNetwo
 
   return (
     <>
-      <MenuList sx={{ pt: 0 }}>
+      <MenuList>
         {stableOptions.map((network, index) => (
           <NetworkMenuItem
             activeNetwork={activeNetwork}
diff --git a/src/app/components/ParaTimePicker/NetworkMenuIcon.tsx b/src/app/components/ParaTimePicker/NetworkMenuIcon.tsx
deleted file mode 100644
index ac526a03f..000000000
--- a/src/app/components/ParaTimePicker/NetworkMenuIcon.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FC } from 'react'
-import { Network } from '../../../types/network'
-import MenuList from '@mui/material/MenuList'
-import MenuItem from '@mui/material/MenuItem'
-import ListItemIcon from '@mui/material/ListItemIcon'
-import { COLORS } from '../../../styles/theme/colors'
-import { getNetworkIcons } from '../../utils/content'
-
-type NetworkMenuIconProps = {
-  network: Network
-}
-
-export const NetworkMenuIcon: FC<NetworkMenuIconProps> = ({ network }) => {
-  const icons = getNetworkIcons()
-
-  return (
-    <MenuList>
-      <MenuItem divider sx={{ pointerEvents: 'none', color: COLORS.brandDark }}>
-        <ListItemIcon>{icons[network]}</ListItemIcon>
-      </MenuItem>
-    </MenuList>
-  )
-}
diff --git a/src/app/components/ParaTimePicker/index.tsx b/src/app/components/ParaTimePicker/index.tsx
index 44e7da6b4..c9e893a80 100644
--- a/src/app/components/ParaTimePicker/index.tsx
+++ b/src/app/components/ParaTimePicker/index.tsx
@@ -2,18 +2,14 @@ import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
-import Drawer, { drawerClasses } from '@mui/material/Drawer'
-import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight'
-import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft'
+import Drawer from '@mui/material/Drawer'
 import Divider from '@mui/material/Divider'
-import IconButton from '@mui/material/IconButton'
 import Grid from '@mui/material/Unstable_Grid2'
 import { Logotype } from '../PageLayout/Logotype'
 import { COLORS } from '../../../styles/theme/colors'
 import { Network } from '../../../types/network'
 import { Layer } from '../../../oasis-indexer/api'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
-import { NetworkMenuIcon } from './NetworkMenuIcon'
 import { NetworkMenu } from './NetworkMenu'
 import { LayerMenu } from './LayerMenu'
 import { LayerDetails } from './LayerDetails'
@@ -21,6 +17,8 @@ import { RouteUtils } from '../../utils/route-utils'
 import { styled } from '@mui/material/styles'
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
 import { useScreenSize } from '../../hooks/useScreensize'
+import { MobileNetworkButton } from '../PageLayout/NetworkButton'
+import { useRuntimeFreshness } from '../OfflineBanner/hook'
 
 type ParaTimePickerProps = {
   onClose: () => void
@@ -28,16 +26,10 @@ type ParaTimePickerProps = {
   open: boolean
 }
 
-const ParaTimePickerDrawer = styled(Drawer)(() => ({
-  [`.${drawerClasses.root}`]: {
-    height: '100vh',
-  },
-}))
-
 export const ParaTimePicker: FC<ParaTimePickerProps> = ({ onClose, onConfirm, open }) => (
-  <ParaTimePickerDrawer anchor="top" open={open} onClose={onClose}>
+  <Drawer anchor="top" open={open} onClose={onClose}>
     <ParaTimePickerContent onClose={onClose} onConfirm={onConfirm} />
-  </ParaTimePickerDrawer>
+  </Drawer>
 )
 
 const StyledParaTimePickerContent = styled(Box)(({ theme }) => ({
@@ -65,8 +57,12 @@ const TabletBackButton = styled(Button)({
   textDecoration: 'none',
 })
 
-const TabletActionBar = styled(Box)(() => ({
-  minHeight: '50px',
+const TabletActionBar = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  minHeight: '55px',
+  paddingBottom: theme.spacing(3),
 }))
 
 const ActionBar = styled(Box)(({ theme }) => ({
@@ -87,10 +83,9 @@ enum ParaTimePickerTabletStep {
 }
 
 const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConfirm }) => {
-  const { isTablet } = useScreenSize()
+  const { isMobile, isTablet } = useScreenSize()
   const { t } = useTranslation()
   const { network, layer } = useRequiredScopeParam()
-  const [showNetworkMenu, setShowNetworkMenu] = useState(isTablet || network !== Network.mainnet)
   const [selectedLayer, setSelectedLayer] = useState<Layer>(layer)
   const [selectedNetwork, setSelectedNetwork] = useState<Network>(network)
   const [tabletStep, setTabletStep] = useState<ParaTimePickerTabletStep>(
@@ -100,29 +95,17 @@ const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConf
     setSelectedNetwork(newNetwork)
     setSelectedLayer(RouteUtils.getEnabledLayersForNetwork(newNetwork)[0])
   }
+  const handleConfirm = () => onConfirm(selectedNetwork, selectedLayer)
+  const { outOfDate } = useRuntimeFreshness({ network, layer })
 
   return (
     <StyledParaTimePickerContent>
-      {!isTablet && (
-        <>
-          <Box sx={{ mb: 5, color: 'red', position: 'relative' }}>
-            <Logotype color={COLORS.brandExtraDark} showText={true} />
-          </Box>
-          <IconButton
-            aria-label={t('paraTimePicker.toggleNetworkMenu')}
-            onClick={() => setShowNetworkMenu(!showNetworkMenu)}
-            sx={{
-              color: COLORS.brandDark,
-              ml: 3,
-            }}
-          >
-            {showNetworkMenu ? <KeyboardDoubleArrowLeftIcon /> : <KeyboardDoubleArrowRightIcon />}
-          </IconButton>
-        </>
-      )}
+      <Box sx={{ mb: isTablet ? 0 : 5, color: 'red', position: 'relative' }}>
+        <Logotype color={COLORS.brandExtraDark} showText={!isMobile} />
+      </Box>
       {isTablet && (
-        <>
-          <TabletActionBar>
+        <TabletActionBar>
+          <div>
             {tabletStep === ParaTimePickerTabletStep.ParaTime && (
               <TabletBackButton
                 variant="text"
@@ -145,19 +128,19 @@ const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConf
                 {t('paraTimePicker.viewParaTimes')}
               </TabletBackButton>
             )}
-          </TabletActionBar>
-        </>
+          </div>
+          <MobileNetworkButton
+            isOutOfDate={outOfDate}
+            network={network}
+            layer={layer}
+            onClick={handleConfirm}
+          />
+        </TabletActionBar>
       )}
       <Divider />
       <StyledContent>
         <Grid container>
-          {!showNetworkMenu && !isTablet && (
-            <Grid xs={1} sx={{ maxWidth: '40px' }}>
-              <NetworkMenuIcon network={selectedNetwork} />
-            </Grid>
-          )}
-          {((!isTablet && showNetworkMenu) ||
-            (isTablet && tabletStep === ParaTimePickerTabletStep.Network)) && (
+          {(!isTablet || (isTablet && tabletStep === ParaTimePickerTabletStep.Network)) && (
             <Grid xs={12} md={3}>
               <NetworkMenu
                 activeNetwork={network}
@@ -184,8 +167,12 @@ const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConf
             </Grid>
           )}
           {(!isTablet || (isTablet && tabletStep === ParaTimePickerTabletStep.ParaTimeDetails)) && (
-            <Grid xs={12} md={showNetworkMenu ? 4 : 7} lg={6}>
-              <LayerDetails activeLayer={layer} selectedLayer={selectedLayer} network={selectedNetwork} />
+            <Grid xs={12} md={6}>
+              <LayerDetails
+                handleConfirm={handleConfirm}
+                selectedLayer={selectedLayer}
+                network={selectedNetwork}
+              />
             </Grid>
           )}
         </Grid>
@@ -201,14 +188,10 @@ const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConf
             {t('common.cancel')}
           </Button>
 
-          <Button
-            onClick={() => onConfirm(selectedNetwork!, selectedLayer!)}
-            disabled={selectedNetwork === network && selectedLayer === layer}
-            color="primary"
-            variant="contained"
-            size="large"
-          >
-            {t('common.select')}
+          <Button onClick={handleConfirm} color="primary" variant="contained" size="large">
+            {selectedNetwork === network && selectedLayer === layer
+              ? t('paraTimePicker.goToDashboard')
+              : t('common.select')}
           </Button>
         </ActionBar>
       </StyledContent>
diff --git a/src/app/components/TextList/index.tsx b/src/app/components/TextList/index.tsx
index bb721cd32..999427b1f 100644
--- a/src/app/components/TextList/index.tsx
+++ b/src/app/components/TextList/index.tsx
@@ -8,13 +8,15 @@ type TextListProps = {
   children: ReactNode
 }
 
-const StyledList = styled(List)(() => ({
+const StyledList = styled(List)(({ theme }) => ({
   listStyleType: 'disc',
-  listStylePosition: 'inside',
+  listStylePosition: 'outside',
   color: COLORS.brandExtraDark,
-  fontSize: '12px',
+  fontSize: '14px',
+  paddingLeft: theme.spacing(4),
   '& ul': {
     paddingTop: 0,
+    paddingBottom: 0,
   },
 }))
 
@@ -22,7 +24,7 @@ export const TextList: FC<TextListProps> = ({ children }) => <StyledList>{childr
 
 const StyledListItem = styled(ListItem)(({ theme }) => ({
   display: 'list-item',
-  paddingTop: 0,
+  padding: 0,
   paddingBottom: theme.spacing(1),
 }))
 
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index ed4c48e7f..5ba1a01cb 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -256,14 +256,14 @@
     "chainId": "Chain ID:",
     "decimal": "Decimal: {{ id }}",
     "comingSoon": "(coming soon)",
+    "goToDashboard": "Go to dashboard",
     "hex": "Hex: {{ id }}",
     "less": "Show Less",
     "more": "Show More",
     "readMore": "Read more about {{ layer }} on {{ network }} in Oasis Docs",
     "rpcHttp": "RPC HTTP endpoint: {{ endpoint }}",
     "rpcWebSockets": "RPC WebSockets endpoint: {{ endpoint }}",
-    "selected": "(currently active)",
-    "toggleNetworkMenu": "Toggle networks menu",
+    "selected": "(active)",
     "viewNetworks": "View Networks",
     "viewParaTimes": "View ParaTimes",
     "mainnet": {
diff --git a/src/styles/index.css b/src/styles/index.css
index 1b4753f03..ea67cc3b1 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,11 +1,6 @@
 @import '../../node_modules/@fontsource-variable/figtree/index.css';
 @import '../../node_modules/@fontsource-variable/roboto-mono/index.css';
 
-:root {
-  --app-header-height: 0px;
-  --app-banners-height: 0px;
-}
-
 html {
   scroll-behavior: smooth;
 }
@@ -16,7 +11,8 @@ html {
   font-style: normal;
   font-display: swap;
   font-weight: 100 700;
-  src: url('../../node_modules/@fontsource-variable/figtree/files/figtree-latin-wght-normal.woff2') format('woff2');
+  src: url('../../node_modules/@fontsource-variable/figtree/files/figtree-latin-wght-normal.woff2')
+    format('woff2');
   unicode-range: U+2026;
 }
 
diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts
index 18381fb39..547b8b3af 100644
--- a/src/styles/theme/defaultTheme.ts
+++ b/src/styles/theme/defaultTheme.ts
@@ -6,7 +6,6 @@ import { inputBaseClasses } from '@mui/material/InputBase'
 import { inputAdornmentClasses } from '@mui/material/InputAdornment'
 import { tabClasses } from '@mui/material/Tab'
 import { menuItemClasses } from '@mui/material/MenuItem'
-import { modalClasses } from '@mui/material/Modal'
 
 declare module '@mui/material/styles' {
   interface Palette {
@@ -504,17 +503,9 @@ export const defaultTheme = createTheme({
           borderRadius: '0 0 12px 12px',
           padding: `${theme.spacing(4)} 5%`,
         }),
-        modal: ({ theme }) => ({
-          [theme.breakpoints.down('md')]: {
-            [`& .${modalClasses.backdrop}`]: {
-              background: 'transparent',
-            },
-          },
-        }),
         paper: ({ theme }) => ({
           [theme.breakpoints.down('md')]: {
-            height: `calc(100vh - var(--app-header-height) - var(--app-banners-height))`,
-            top: `calc(var(--app-header-height) + var(--app-banners-height))`,
+            height: '100vh',
           },
         }),
       },
@@ -847,6 +838,13 @@ export const defaultTheme = createTheme({
         },
       },
     },
+    MuiList: {
+      styleOverrides: {
+        padding: {
+          paddingTop: 0,
+        },
+      },
+    },
     MuiListItemIcon: {
       styleOverrides: {
         root: {