diff --git a/src/components/common/PageLayout/index.tsx b/src/components/common/PageLayout/index.tsx
index 223800c653..317150384b 100644
--- a/src/components/common/PageLayout/index.tsx
+++ b/src/components/common/PageLayout/index.tsx
@@ -17,7 +17,6 @@ const isNoSidebarRoute = (pathname: string): boolean => {
     AppRoutes.share.safeApp,
     AppRoutes.newSafe.create,
     AppRoutes.newSafe.load,
-    AppRoutes.welcome,
     AppRoutes.index,
     AppRoutes.imprint,
     AppRoutes.privacy,
diff --git a/src/components/welcome/NewSafe.tsx b/src/components/welcome/NewSafe.tsx
index 02994badc6..2ef93fc43c 100644
--- a/src/components/welcome/NewSafe.tsx
+++ b/src/components/welcome/NewSafe.tsx
@@ -1,84 +1,87 @@
 import React, { useState } from 'react'
-import { Accordion, AccordionDetails, AccordionSummary, Box, Grid, SvgIcon, Typography } from '@mui/material'
+import { Accordion, AccordionSummary, Box, Drawer, Grid, IconButton, SvgIcon, Typography } from '@mui/material'
 import SafeList from '@/components/sidebar/SafeList'
 import css from './styles.module.css'
 import CheckFilled from '@/public/images/common/check-filled.svg'
 
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 import { DataWidget } from '@/components/welcome/DataWidget'
 import WelcomeLogin from './WelcomeLogin'
 import { useAppSelector } from '@/store'
 import { selectTotalAdded } from '@/store/addedSafesSlice'
 
-const NewSafe = () => {
-  const [expanded, setExpanded] = useState(false)
+import drawerCSS from '@/components/sidebar/Sidebar/styles.module.css'
+
+const BulletListItem = ({ text }: { text: string }) => (
+  <li>
+    <SvgIcon className={css.checkIcon} component={CheckFilled} inheritViewBox />
+    <Typography color="static.main" fontWeight={700}>
+      {text}
+    </Typography>
+  </li>
+)
 
+const NewSafe = () => {
   const addedSafes = useAppSelector(selectTotalAdded)
 
-  const toggleSafeList = () => {
-    return setExpanded((prev) => !prev)
-  }
+  const [showSidebar, setShowSidebar] = useState(false)
+
+  const closeSidebar = () => setShowSidebar(false)
 
   return (
-    <Grid container spacing={3} p={3} pb={0} flex={1} direction="row-reverse">
-      <Grid item xs={12} lg={6}>
-        <WelcomeLogin />
-      </Grid>
-      <Grid item xs={12} lg={6} flex={1}>
-        <div className={css.content}>
-          {addedSafes > 0 && (
-            <Box minWidth={{ md: 480 }} className={css.sidebar}>
-              <Box display="flex" flexDirection="column" height="100%">
-                <Box flex={1}>
-                  <Accordion className={css.accordion} onClick={toggleSafeList} expanded={expanded}>
-                    <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                      <Typography variant="h4" display="inline" fontWeight={700}>
-                        My Safe Accounts ({addedSafes})
-                      </Typography>
-                    </AccordionSummary>
+    <>
+      <Drawer variant="temporary" anchor="left" open={showSidebar} onClose={closeSidebar}>
+        <div className={drawerCSS.drawer}>
+          <SafeList closeDrawer={closeSidebar} />
 
-                    <AccordionDetails sx={{ padding: 0 }} onClick={(event) => event.stopPropagation()}>
-                      <SafeList />
-                      <Box mt={2} display={{ xs: 'none', md: 'block' }}>
-                        <DataWidget />
-                      </Box>
-                    </AccordionDetails>
-                  </Accordion>
+          <div className={drawerCSS.dataWidget}>
+            <DataWidget />
+          </div>
+        </div>
+      </Drawer>
+      <Grid container spacing={3} p={3} pb={0} flex={1} direction="row-reverse">
+        <Grid item xs={12} lg={6}>
+          <WelcomeLogin />
+        </Grid>
+        <Grid item xs={12} lg={6} flex={1}>
+          <div className={css.content}>
+            {addedSafes > 0 && (
+              <Box minWidth={{ md: 480 }} className={css.sidebar}>
+                <Box display="flex" flexDirection="column">
+                  <Box flex={1}>
+                    <Accordion className={css.accordion} onClick={() => setShowSidebar(true)} expanded={false}>
+                      <AccordionSummary>
+                        <Box display="flex" flexDirection="row" alignItems="center" width="100%" gap={2}>
+                          <IconButton sx={{ mr: 'auto', padding: '4px' }}>
+                            <ChevronRightIcon />
+                          </IconButton>
+                          <Typography sx={{ mr: 'auto' }} variant="h4" display="inline" fontWeight={700}>
+                            My Safe Accounts ({addedSafes})
+                          </Typography>
+                        </Box>
+                      </AccordionSummary>
+                    </Accordion>
+                  </Box>
                 </Box>
               </Box>
-            </Box>
-          )}
-          <Typography variant="h1" fontSize={[44, null, 52]} lineHeight={1} letterSpacing={-1.5} color="static.main">
-            Unlock a new way of ownership
-          </Typography>
+            )}
+            <Typography variant="h1" fontSize={[44, null, 52]} lineHeight={1} letterSpacing={-1.5} color="static.main">
+              Unlock a new way of ownership
+            </Typography>
 
-          <Typography mb={1} color="static.main">
-            The most trusted decentralized custody protocol and collective asset management platform.
-          </Typography>
+            <Typography mb={1} color="static.main">
+              The most trusted decentralized custody protocol and collective asset management platform.
+            </Typography>
 
-          <Grid container spacing={2} mb="auto">
-            <Grid item xs={12} display="flex" flexDirection="row" gap={1} alignItems="center">
-              <SvgIcon className={css.checkIcon} component={CheckFilled} inheritViewBox />
-              <Typography color="static.main" fontWeight={700}>
-                Stealth security with multiple owners
-              </Typography>
-            </Grid>
-            <Grid item xs={12} display="flex" flexDirection="row" gap={1} alignItems="center">
-              <SvgIcon className={css.checkIcon} component={CheckFilled} inheritViewBox />
-              <Typography color="static.main" fontWeight={700}>
-                Make it yours with modules and guards
-              </Typography>
-            </Grid>
-            <Grid item xs={12} display="flex" flexDirection="row" gap={1} alignItems="center">
-              <SvgIcon className={css.checkIcon} component={CheckFilled} inheritViewBox />
-              <Typography color="static.main" fontWeight={700}>
-                Access 130+ ecosystem apps
-              </Typography>
-            </Grid>
-          </Grid>
-        </div>
+            <ul className={css.bulletList}>
+              <BulletListItem text="Stealth security with multiple owners" />
+              <BulletListItem text="Make it yours with modules and guards" />
+              <BulletListItem text="Access 130+ ecosystem apps" />
+            </ul>
+          </div>
+        </Grid>
       </Grid>
-    </Grid>
+    </>
   )
 }
 
diff --git a/src/components/welcome/WelcomeLogin/styles.module.css b/src/components/welcome/WelcomeLogin/styles.module.css
index e9c586e392..ba47057527 100644
--- a/src/components/welcome/WelcomeLogin/styles.module.css
+++ b/src/components/welcome/WelcomeLogin/styles.module.css
@@ -5,6 +5,7 @@
   border-radius: 6px;
   justify-content: center;
   align-items: center;
+  padding: var(--space-2);
 }
 
 .loginContent {
diff --git a/src/components/welcome/styles.module.css b/src/components/welcome/styles.module.css
index dedc5f6fcf..cb91034710 100644
--- a/src/components/welcome/styles.module.css
+++ b/src/components/welcome/styles.module.css
@@ -9,9 +9,8 @@
 
 .accordion :global .MuiAccordionSummary-root {
   background: transparent !important;
-  padding: var(--space-3);
+  padding: var(--space-2);
   border-bottom: 1px solid var(--color-border-light);
-  pointer-events: none;
 }
 
 .accordion :global .MuiAccordionSummary-content {
@@ -22,17 +21,29 @@
   max-height: calc(100vh - var(--header-height) - var(--footer-height) - 8px);
   overflow-y: auto;
   align-self: flex-start;
-  margin-top: -24px;
   margin-bottom: auto;
   width: 100%;
 }
 
+.bulletList {
+  list-style: none;
+  margin-bottom: auto;
+}
+
+.bulletList li {
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-1);
+  align-items: center;
+  margin-bottom: var(--space-2);
+}
+
 .content {
   background: linear-gradient(-90deg, #10ff84, #5fddff);
   background-size: 200% 200%;
   animation: gradient 15s ease infinite;
   border-radius: 6px;
-  padding: var(--space-8);
+  padding: var(--space-3);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -84,10 +95,6 @@
     height: auto;
   }
 
-  .accordion :global .MuiAccordionSummary-root {
-    pointer-events: auto;
-  }
-
   .accordion :global .MuiAccordionSummary-expandIconWrapper {
     display: block;
   }