diff --git a/.changelog/482.feature.md b/.changelog/482.feature.md
new file mode 100644
index 000000000..688a0a6ce
--- /dev/null
+++ b/.changelog/482.feature.md
@@ -0,0 +1 @@
+Mobile ParaTime picker
diff --git a/src/app/components/PageLayout/Header.tsx b/src/app/components/PageLayout/Header.tsx
index 99270824d..fb9825622 100644
--- a/src/app/components/PageLayout/Header.tsx
+++ b/src/app/components/PageLayout/Header.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useEffect, useRef } from 'react'
 import AppBar from '@mui/material/AppBar'
 import Grid from '@mui/material/Unstable_Grid2'
 import useScrollTrigger from '@mui/material/useScrollTrigger'
@@ -8,18 +8,35 @@ 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 } = useScreenSize()
+  const { isMobile, isTablet } = 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/index.tsx b/src/app/components/PageLayout/index.tsx
index 4e5c7357e..a79024a43 100644
--- a/src/app/components/PageLayout/index.tsx
+++ b/src/app/components/PageLayout/index.tsx
@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, ReactNode } from 'react'
+import { FC, PropsWithChildren, ReactNode, useEffect, useRef } from 'react'
 import { Header } from './Header'
 import { Footer } from './Footer'
 import Box from '@mui/material/Box'
@@ -10,6 +10,7 @@ import { NetworkOfflineBanner, RuntimeOfflineBanner } from '../OfflineBanner'
 import { Search } from '../Search'
 import { useIsApiOffline } from '../OfflineBanner/hook'
 import { Network } from '../../../types/network'
+import useResizeObserver from 'use-resize-observer'
 
 interface PageLayoutProps {
   mobileFooterAction?: ReactNode
@@ -24,12 +25,29 @@ export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, m
   const { isMobile, isTablet } = useScreenSize()
   const scope = useScopeParam()
   const isApiOffline = useIsApiOffline(scope?.network || Network.mainnet)
+  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 (
     <>
-      <BuildBanner />
-      <NetworkOfflineBanner />
-      {scope && <RuntimeOfflineBanner />}
+      <Box ref={bannersRef}>
+        <BuildBanner />
+        <NetworkOfflineBanner />
+        {scope && <RuntimeOfflineBanner />}
+      </Box>
       <Box
         sx={{
           minHeight: '100vh',
diff --git a/src/app/components/ParaTimePicker/LayerDetails.tsx b/src/app/components/ParaTimePicker/LayerDetails.tsx
index b89fb4f49..1b079fea1 100644
--- a/src/app/components/ParaTimePicker/LayerDetails.tsx
+++ b/src/app/components/ParaTimePicker/LayerDetails.tsx
@@ -17,6 +17,7 @@ import { getLayerLabels, getNetworkIcons } from '../../utils/content'
 import { getNameForScope } from '../../../types/searchScope'
 import { useRuntimeFreshness } from '../OfflineBanner/hook'
 import { LayerStatus } from '../LayerStatus'
+import { useScreenSize } from '../../hooks/useScreensize'
 
 type LayerDetailsContent = {
   description: string
@@ -80,6 +81,7 @@ const contentMinHeight = '270px'
 export const LayerDetails: FC<LayerDetailsProps> = ({ network, selectedLayer }) => {
   const { t } = useTranslation()
   const theme = useTheme()
+  const { isTablet } = useScreenSize()
   const labels = getNetworkNames(t)
   const layerLabels = getLayerLabels(t)
   const icons = getNetworkIcons()
@@ -92,7 +94,7 @@ export const LayerDetails: FC<LayerDetailsProps> = ({ network, selectedLayer })
   }
 
   return (
-    <Box sx={{ px: 5, py: 4, display: 'flex', minHeight: contentMinHeight }}>
+    <Box sx={{ px: isTablet ? 2 : 5, py: 4, display: 'flex', minHeight: contentMinHeight }}>
       <Box sx={{ pt: 1, pr: 4, color: COLORS.brandDark }}>
         <Circle
           color={COLORS.white}
diff --git a/src/app/components/ParaTimePicker/LayerMenu.tsx b/src/app/components/ParaTimePicker/LayerMenu.tsx
index f6484590b..e14cbf26b 100644
--- a/src/app/components/ParaTimePicker/LayerMenu.tsx
+++ b/src/app/components/ParaTimePicker/LayerMenu.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, PropsWithChildren, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Typography from '@mui/material/Typography'
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
@@ -12,13 +12,24 @@ import { getLayerLabels } from '../../utils/content'
 import { RouteUtils } from '../../utils/route-utils'
 import { Network } from '../../../types/network'
 import { orderByLayer } from '../../../types/layers'
+import { useScreenSize } from '../../hooks/useScreensize'
 
 type BaseLayerMenuItemProps = {
   divider: boolean
   layer: Layer
 }
 
+const LayerMenuItemCaption: FC<PropsWithChildren> = ({ children }) => (
+  <Typography
+    component="span"
+    sx={{ fontSize: '10px', fontStyle: 'italic', color: COLORS.grayMedium, ml: 2 }}
+  >
+    {children}
+  </Typography>
+)
+
 export const DisabledLayerMenuItem: FC<BaseLayerMenuItemProps> = ({ divider, layer }) => {
+  const { isTablet } = useScreenSize()
   const { t } = useTranslation()
   const labels = getLayerLabels(t)
 
@@ -27,7 +38,10 @@ export const DisabledLayerMenuItem: FC<BaseLayerMenuItemProps> = ({ divider, lay
       {/* Div is needed because we need an element with enabled pointer-events to make Tooltip work */}
       <div>
         <MenuItem disabled divider={divider}>
-          <ListItemText>{labels[layer]}</ListItemText>
+          <ListItemText>
+            {labels[layer]}
+            {isTablet && <LayerMenuItemCaption>{t('paraTimePicker.comingSoon')}</LayerMenuItemCaption>}
+          </ListItemText>
         </MenuItem>
       </div>
     </Tooltip>
@@ -70,12 +84,9 @@ export const LayerMenuItem: FC<LayerMenuItemProps> = ({
     >
       <ListItemText>
         {labels[layer]}
-        <Typography
-          component="span"
-          sx={{ fontSize: '10px', fontStyle: 'italic', color: COLORS.grayMedium, ml: 2 }}
-        >
-          {selectedNetwork === network && activeLayer === layer && t('paraTimePicker.selected')}
-        </Typography>
+        {selectedNetwork === network && activeLayer === layer && (
+          <LayerMenuItemCaption>{t('paraTimePicker.selected')}</LayerMenuItemCaption>
+        )}
       </ListItemText>
       {layer === selectedLayer && <KeyboardArrowRightIcon />}
     </MenuItem>
@@ -105,7 +116,7 @@ export const LayerMenu: FC<LayerMenuProps> = ({
     .sort(orderByLayer)
 
   return (
-    <MenuList>
+    <MenuList sx={{ pt: 0 }}>
       {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 8d609ec84..29505531d 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>
+      <MenuList sx={{ pt: 0 }}>
         {stableOptions.map((network, index) => (
           <NetworkMenuItem
             activeNetwork={activeNetwork}
diff --git a/src/app/components/ParaTimePicker/index.tsx b/src/app/components/ParaTimePicker/index.tsx
index ed5339258..44e7da6b4 100644
--- a/src/app/components/ParaTimePicker/index.tsx
+++ b/src/app/components/ParaTimePicker/index.tsx
@@ -2,13 +2,13 @@ import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
-import Drawer from '@mui/material/Drawer'
+import Drawer, { drawerClasses } from '@mui/material/Drawer'
 import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight'
 import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft'
 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 { Logotype } from '../PageLayout/Logotype'
 import { COLORS } from '../../../styles/theme/colors'
 import { Network } from '../../../types/network'
 import { Layer } from '../../../oasis-indexer/api'
@@ -18,6 +18,9 @@ import { NetworkMenu } from './NetworkMenu'
 import { LayerMenu } from './LayerMenu'
 import { LayerDetails } from './LayerDetails'
 import { RouteUtils } from '../../utils/route-utils'
+import { styled } from '@mui/material/styles'
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
+import { useScreenSize } from '../../hooks/useScreensize'
 
 type ParaTimePickerProps = {
   onClose: () => void
@@ -25,73 +28,176 @@ type ParaTimePickerProps = {
   open: boolean
 }
 
+const ParaTimePickerDrawer = styled(Drawer)(() => ({
+  [`.${drawerClasses.root}`]: {
+    height: '100vh',
+  },
+}))
+
 export const ParaTimePicker: FC<ParaTimePickerProps> = ({ onClose, onConfirm, open }) => (
-  <Drawer anchor="top" open={open} onClose={onClose}>
+  <ParaTimePickerDrawer anchor="top" open={open} onClose={onClose}>
     <ParaTimePickerContent onClose={onClose} onConfirm={onConfirm} />
-  </Drawer>
+  </ParaTimePickerDrawer>
 )
 
+const StyledParaTimePickerContent = styled(Box)(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    flex: 1,
+  },
+}))
+
+const StyledContent = styled(Box)(({ theme }) => ({
+  flex: 1,
+  [theme.breakpoints.down('md')]: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+}))
+
+const TabletBackButton = styled(Button)({
+  color: COLORS.brandDark,
+  width: 'fit-content',
+  textTransform: 'capitalize',
+  textDecoration: 'none',
+})
+
+const TabletActionBar = styled(Box)(() => ({
+  minHeight: '50px',
+}))
+
+const ActionBar = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-around',
+  [theme.breakpoints.up('md')]: {
+    justifyContent: 'flex-end',
+    gap: theme.spacing(4),
+  },
+}))
+
 type ParaTimePickerContentProps = Omit<ParaTimePickerProps, 'open'>
 
+enum ParaTimePickerTabletStep {
+  Network,
+  ParaTime,
+  ParaTimeDetails,
+}
+
 const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConfirm }) => {
+  const { isTablet } = useScreenSize()
   const { t } = useTranslation()
   const { network, layer } = useRequiredScopeParam()
-  const [showNetworkMenu, setShowNetworkMenu] = useState(network !== Network.mainnet)
+  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>(
+    ParaTimePickerTabletStep.ParaTimeDetails,
+  )
   const selectNetwork = (newNetwork: Network) => {
     setSelectedNetwork(newNetwork)
     setSelectedLayer(RouteUtils.getEnabledLayersForNetwork(newNetwork)[0])
   }
 
   return (
-    <Box>
-      <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>
+    <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>
+        </>
+      )}
+      {isTablet && (
+        <>
+          <TabletActionBar>
+            {tabletStep === ParaTimePickerTabletStep.ParaTime && (
+              <TabletBackButton
+                variant="text"
+                startIcon={<KeyboardArrowLeft />}
+                onClick={() => {
+                  setTabletStep(ParaTimePickerTabletStep.Network)
+                }}
+              >
+                {t('paraTimePicker.viewNetworks')}
+              </TabletBackButton>
+            )}
+            {tabletStep === ParaTimePickerTabletStep.ParaTimeDetails && (
+              <TabletBackButton
+                variant="text"
+                startIcon={<KeyboardArrowLeft />}
+                onClick={() => {
+                  setTabletStep(ParaTimePickerTabletStep.ParaTime)
+                }}
+              >
+                {t('paraTimePicker.viewParaTimes')}
+              </TabletBackButton>
+            )}
+          </TabletActionBar>
+        </>
+      )}
       <Divider />
-      <Box>
+      <StyledContent>
         <Grid container>
-          {!showNetworkMenu && (
+          {!showNetworkMenu && !isTablet && (
             <Grid xs={1} sx={{ maxWidth: '40px' }}>
               <NetworkMenuIcon network={selectedNetwork} />
             </Grid>
           )}
-          {showNetworkMenu && (
-            <Grid xs={4} md={3}>
+          {((!isTablet && showNetworkMenu) ||
+            (isTablet && tabletStep === ParaTimePickerTabletStep.Network)) && (
+            <Grid xs={12} md={3}>
               <NetworkMenu
                 activeNetwork={network}
                 selectedNetwork={selectedNetwork}
-                setSelectedNetwork={selectNetwork}
+                setSelectedNetwork={network => {
+                  selectNetwork(network)
+                  setTabletStep(ParaTimePickerTabletStep.ParaTime)
+                }}
+              />
+            </Grid>
+          )}
+          {(!isTablet || (isTablet && tabletStep === ParaTimePickerTabletStep.ParaTime)) && (
+            <Grid xs={12} md={3}>
+              <LayerMenu
+                activeLayer={layer}
+                network={network}
+                selectedLayer={selectedLayer}
+                selectedNetwork={selectedNetwork}
+                setSelectedLayer={layer => {
+                  setSelectedLayer(layer)
+                  setTabletStep(ParaTimePickerTabletStep.ParaTimeDetails)
+                }}
               />
             </Grid>
           )}
-          <Grid xs={4} md={3}>
-            <LayerMenu
-              activeLayer={layer}
-              network={network}
-              selectedLayer={selectedLayer}
-              selectedNetwork={selectedNetwork}
-              setSelectedLayer={setSelectedLayer}
-            />
-          </Grid>
-          <Grid xs={showNetworkMenu ? 4 : 7} md={6}>
-            <LayerDetails activeLayer={layer} selectedLayer={selectedLayer} network={selectedNetwork} />
-          </Grid>
+          {(!isTablet || (isTablet && tabletStep === ParaTimePickerTabletStep.ParaTimeDetails)) && (
+            <Grid xs={12} md={showNetworkMenu ? 4 : 7} lg={6}>
+              <LayerDetails activeLayer={layer} selectedLayer={selectedLayer} network={selectedNetwork} />
+            </Grid>
+          )}
         </Grid>
 
-        <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 4 }}>
-          <Button onClick={onClose} color="secondary" variant="outlined" sx={{ textTransform: 'capitalize' }}>
+        <ActionBar>
+          <Button
+            onClick={onClose}
+            color="secondary"
+            variant="outlined"
+            sx={{ textTransform: 'capitalize' }}
+            size="large"
+          >
             {t('common.cancel')}
           </Button>
 
@@ -100,11 +206,12 @@ const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConf
             disabled={selectedNetwork === network && selectedLayer === layer}
             color="primary"
             variant="contained"
+            size="large"
           >
             {t('common.select')}
           </Button>
-        </Box>
-      </Box>
-    </Box>
+        </ActionBar>
+      </StyledContent>
+    </StyledParaTimePickerContent>
   )
 }
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index fbd5aa530..fdab148df 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -244,6 +244,7 @@
   "paraTimePicker": {
     "chainId": "Chain ID:",
     "decimal": "Decimal: {{ id }}",
+    "comingSoon": "(coming soon)",
     "hex": "Hex: {{ id }}",
     "less": "Show Less",
     "more": "Show More",
@@ -252,6 +253,8 @@
     "rpcWebSockets": "RPC WebSockets endpoint: {{ endpoint }}",
     "selected": "(currently active)",
     "toggleNetworkMenu": "Toggle networks menu",
+    "viewNetworks": "View Networks",
+    "viewParaTimes": "View ParaTimes",
     "mainnet": {
       "emerald": "The Emerald ParaTime is our official EVM Compatible ParaTime providing smart contract environment with full EVM compatibility.",
       "sapphire": "The Sapphire ParaTime is our official confidential EVM Compatible ParaTime providing a smart contract development environment with EVM compatibility."
diff --git a/src/styles/index.css b/src/styles/index.css
index 920b6c69e..1b4753f03 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,6 +1,11 @@
 @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;
 }
diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts
index 984fa4fbe..18381fb39 100644
--- a/src/styles/theme/defaultTheme.ts
+++ b/src/styles/theme/defaultTheme.ts
@@ -6,6 +6,7 @@ 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 {
@@ -503,6 +504,19 @@ 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))`,
+          },
+        }),
       },
     },
     MuiLink: {