diff --git a/package.json b/package.json
index e518c335b2..8ea6efacd3 100644
--- a/package.json
+++ b/package.json
@@ -168,7 +168,7 @@
     "@gnosis.pm/safe-apps-sdk": "1.0.0-beta.4",
     "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#ff29c3c",
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#3afc7cbb6914081036b4cbf10bacfe6270a9e198",
     "@gnosis.pm/util-contracts": "2.0.6",
     "@ledgerhq/hw-transport-node-hid-singleton": "5.34.0",
     "@material-ui/core": "^4.11.0",
diff --git a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
index ee1503d499..2946cfd644 100644
--- a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
+++ b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
@@ -44,6 +44,7 @@ const IconContainer = styled.div`
   justify-content: space-evenly;
 `
 const StyledButton = styled(Button)`
+  padding: 0 18px;
   *:first-child {
     margin: 0 4px 0 0;
   }
diff --git a/src/components/ConnectButton/index.tsx b/src/components/ConnectButton/index.tsx
index a3a2d3a4cf..4d3c23dd97 100644
--- a/src/components/ConnectButton/index.tsx
+++ b/src/components/ConnectButton/index.tsx
@@ -63,21 +63,17 @@ export const onboardUser = async (): Promise<boolean> => {
   return walletSelected && onboard.walletCheck()
 }
 
-const ConnectButton = (props): React.ReactElement => (
-  <Button
-    color="primary"
-    minWidth={140}
-    onClick={async () => {
-      const walletSelected = await onboard.walletSelect()
+export const onConnectButtonClick = async () => {
+  const walletSelected = await onboard.walletSelect()
 
-      // perform wallet checks only if user selected a wallet
-      if (walletSelected) {
-        await onboard.walletCheck()
-      }
-    }}
-    variant="contained"
-    {...props}
-  >
+  // perform wallet checks only if user selected a wallet
+  if (walletSelected) {
+    await onboard.walletCheck()
+  }
+}
+
+const ConnectButton = (props): React.ReactElement => (
+  <Button color="primary" minWidth={140} onClick={onConnectButtonClick} variant="contained" {...props}>
     Connect
   </Button>
 )
diff --git a/src/components/NoSafe/index.tsx b/src/components/NoSafe/index.tsx
deleted file mode 100644
index 34a2246038..0000000000
--- a/src/components/NoSafe/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react'
-
-import Bold from 'src/components/layout/Bold'
-import Col from 'src/components/layout/Col'
-import Paragraph from 'src/components/layout/Paragraph/index'
-import Row from 'src/components/layout/Row'
-import { CreateSafe } from 'src/routes/welcome/components/Layout'
-
-const NoSafe = ({ provider, text }) => (
-  <Row>
-    <Col center="xs" margin="md" sm={10} smOffset={2} start="sm" xs={12}>
-      <Paragraph size="lg">
-        <Bold>{text}</Bold>
-      </Paragraph>
-    </Col>
-    <Col center="xs" margin="md" sm={10} smOffset={2} start="sm" xs={12}>
-      <CreateSafe provider={provider} />
-    </Col>
-  </Row>
-)
-
-export default NoSafe
diff --git a/src/components/layout/Page/index.module.scss b/src/components/layout/Page/index.module.scss
index 4e875b5de6..a04cdd49c8 100644
--- a/src/components/layout/Page/index.module.scss
+++ b/src/components/layout/Page/index.module.scss
@@ -7,19 +7,6 @@
   padding: 12px 0 0 0;
 }
 
-@media only screen and (max-width: #{$screenLg}px) {
-  .page {
-    padding: 72px $lg 0 $lg;
-  }
-}
-
-@media only screen and (min-width: #{$screenLg}px) and (max-width: 1360px) {
-  .page {
-    padding: 96px 120px 0 120px;
-  }
-}
-
-
 .center {
   align-self: center;
 }
diff --git a/src/routes/safe/container/index.tsx b/src/routes/safe/container/index.tsx
index 7149a74406..b6cb67def0 100644
--- a/src/routes/safe/container/index.tsx
+++ b/src/routes/safe/container/index.tsx
@@ -3,9 +3,7 @@ import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 
-import NoSafe from 'src/components/NoSafe'
-import { providerNameSelector } from 'src/logic/wallets/store/selectors'
-import { safeFeaturesEnabledSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
+import { safeFeaturesEnabledSelector } from 'src/logic/safe/store/selectors'
 import { wrapInSuspense } from 'src/utils/wrapInSuspense'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 import { FEATURES } from 'src/config/networks/network.d'
@@ -35,14 +33,8 @@ const Container = (): React.ReactElement => {
     onClose: () => {},
   })
 
-  const safeAddress = useSelector(safeParamAddressFromStateSelector)
-  const provider = useSelector(providerNameSelector)
   const matchSafeWithAddress = useRouteMatch({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
 
-  if (!safeAddress) {
-    return <NoSafe provider={provider} text="Safe not found" />
-  }
-
   if (!featuresEnabled) {
     return (
       <LoadingContainer>
diff --git a/src/routes/welcome/components/Layout.module.scss b/src/routes/welcome/components/Layout.module.scss
deleted file mode 100644
index 54a047655a..0000000000
--- a/src/routes/welcome/components/Layout.module.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@import "src/theme/variables.scss";
-
-.safe {
-  justify-content: center;
-  justify-items: center;
-  margin-top: $xl;
-}
-
-.summary {
-  display: flex;
-  justify-content: space-around;
-}
-
-.safeActions {
-  display: flex;
-  justify-content: center;
-}
-
-.learnMoreLink {
-  color: $secondary;
-}
-
-.connectWallet {
-  text-align: center;
-}
\ No newline at end of file
diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/Layout.tsx
index a312e67861..84d2b652e9 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/Layout.tsx
@@ -1,118 +1,189 @@
-import OpenInNew from '@material-ui/icons/OpenInNew'
 import React from 'react'
+import styled from 'styled-components'
+import {
+  Card,
+  Button,
+  Title,
+  Text,
+  Divider,
+  ButtonLink,
+  Dot,
+  Icon,
+  Link as LinkSRC,
+} from '@gnosis.pm/safe-react-components'
 
-import styles from './Layout.module.scss'
-
-import ConnectButton from 'src/components/ConnectButton'
-import Block from 'src/components/layout/Block'
-import Button from 'src/components/layout/Button'
-import Heading from 'src/components/layout/Heading'
-import Img from 'src/components/layout/Img'
 import Link from 'src/components/layout/Link'
+import Block from 'src/components/layout/Block'
 import { LOAD_ADDRESS, OPEN_ADDRESS } from 'src/routes/routes'
-import { marginButtonImg, secondary } from 'src/theme/variables'
+import { onConnectButtonClick } from 'src/components/ConnectButton'
 
-import PlusIcon from '../assets/new.svg'
-import SafeIcon from '../assets/safe.svg'
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin: 24px 0 0 0;
+`
+const StyledCardDouble = styled(Card)`
+  display: flex;
+  padding: 0;
+`
+const StyledCard = styled(Card)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 0 20px 0 0;
+  max-width: 27%;
+  height: 276px;
+`
+const CardsCol = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 24px;
+  width: 50%;
+`
+const StyledButton = styled(Button)`
+  margin-top: auto;
+  text-decoration: none;
+`
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0 0 16px 0;
 
-const openIconStyle = {
-  height: '13px',
-  color: secondary,
-  marginBottom: '-2px',
-}
+  h5 {
+    color: white;
+  }
+`
+const StyledTitle = styled(Title)`
+  margin: 0 0 0 16px;
+`
+const StyledTitleOnly = styled(Title)`
+  margin: 0 0 16px 0;
+`
+const StyledButtonLink = styled(ButtonLink)`
+  margin: 16px 0 16px -8px;
+`
 
-const buttonStyle = {
-  marginLeft: marginButtonImg,
+type Props = {
+  isOldMultisigMigration?: boolean
+  provider: any
 }
 
-export const CreateSafe = ({ provider, size }: any) => (
-  <Button
-    color="primary"
-    component={Link}
-    disabled={!provider}
-    minHeight={42}
-    minWidth={240}
-    size={size || 'medium'}
-    to={OPEN_ADDRESS}
-    variant="contained"
-    testId="create-new-safe-btn"
-  >
-    <Img alt="Safe" height={14} src={PlusIcon} />
-    <div style={buttonStyle}>Create new Safe</div>
-  </Button>
-)
+const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElement => {
+  return (
+    <Block>
+      {/* Title */}
+      <Title size="md" strong>
+        Welcome to Gnosis Safe Multisig.
+      </Title>
+
+      {/* Subtitle */}
+      <Title size="xs">
+        {isOldMultisigMigration ? (
+          <>
+            We will replicate the owner structure from your existing Gnosis MultiSig to let you test the new interface.
+            As soon as you feel comfortable, start moving funds to your new Safe.
+          </>
+        ) : (
+          <>
+            Gnosis Safe Multisig is the most trusted platform to manage digital assets. <br /> Here is how to get
+            started:{' '}
+          </>
+        )}
+      </Title>
 
-export const LoadSafe = ({ provider, size }) => (
-  <Button
-    color="primary"
-    component={Link}
-    disabled={!provider}
-    minWidth={240}
-    size={size || 'medium'}
-    to={LOAD_ADDRESS}
-    variant="outlined"
-    testId="load-existing-safe-btn"
-  >
-    <Img alt="Safe" height={14} src={SafeIcon} />
-    <div style={buttonStyle}>Load existing Safe</div>
-  </Button>
-)
+      <>
+        <Wrapper>
+          {/* Connect wallet */}
+          <StyledCard>
+            <TitleWrapper>
+              <Dot color="primary">
+                {!provider ? <Title size="xs">1</Title> : <Icon color="white" type="check" size="md" />}
+              </Dot>
+              <StyledTitle size="sm" strong withoutMargin>
+                Connect wallet
+              </StyledTitle>
+            </TitleWrapper>
+            <Text size="xl">
+              Gnosis Safe Multisig supports a wide range of wallets that you can choose to be one of the authentication
+              factors.
+            </Text>
+            <StyledButtonLink textSize="xl" color="primary" iconType="externalLink" iconSize="sm">
+              <LinkSRC
+                size="xl"
+                href="https://help.gnosis-safe.io/en/articles/4689442-why-do-i-need-to-connect-a-wallet"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="More info about: Why do I need to connect wallet?"
+              >
+                Why do I need to connect wallet?
+              </LinkSRC>
+            </StyledButtonLink>
+            <StyledButton
+              size="lg"
+              color="primary"
+              variant="contained"
+              onClick={onConnectButtonClick}
+              disabled={provider}
+              data-testid="connect-btn"
+            >
+              <Text size="xl" color="white">
+                Connect wallet
+              </Text>
+            </StyledButton>
+          </StyledCard>
 
-const Welcome = ({ isOldMultisigMigration, provider }: any) => {
-  const headingText = isOldMultisigMigration ? (
-    <>
-      We will replicate the owner structure from your existing Gnosis MultiSig
-      <br />
-      to let you test the new interface.
-      <br />
-      As soon as you feel comfortable, start moving funds to your new Safe.
-      <br />{' '}
-    </>
-  ) : (
-    <>
-      Gnosis Safe Multisig is the most secure way to manage crypto funds
-      <br />
-      collectively. It is an improvement of the Gnosis MultiSig, which is used by more than 3000 teams
-      <br /> and stores over $1B USD worth of digital assets. Gnosis Safe Multisig features a modular
-      <br /> design, formally verified smart contracts and vastly improved user experience.{' '}
-    </>
-  )
-  return (
-    <Block className={styles.safe}>
-      <Heading align="center" margin="lg" tag="h1" weight="bold">
-        Welcome to
-        <br />
-        Gnosis Safe Multisig
-      </Heading>
-      <Heading align="center" margin="xl" tag="h3">
-        {headingText}
-        <a
-          className={styles.learnMoreLink}
-          href="https://gnosis-safe.io/teams"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Learn more
-          <OpenInNew style={openIconStyle} />
-        </a>
-      </Heading>
-      {provider ? (
-        <>
-          <Block className={styles.safeActions} margin="md">
-            <CreateSafe provider={provider} size="large" />
-          </Block>
-          <Block className={styles.safeActions} margin="md">
-            <LoadSafe provider={provider} size="large" />
-          </Block>
-        </>
-      ) : (
-        <Block className={styles.connectWallet} margin="md">
-          <Heading align="center" margin="md" tag="h3">
-            Get Started by Connecting a Wallet
-          </Heading>
-          <ConnectButton minHeight={42} minWidth={240} data-testid="connect-btn" />
-        </Block>
-      )}
+          <StyledCardDouble disabled={!provider}>
+            {/* Create safe */}
+            <CardsCol>
+              <TitleWrapper>
+                <Dot color="primary">
+                  <Title size="xs">2</Title>
+                </Dot>
+                <StyledTitle size="sm" strong withoutMargin>
+                  Create Safe
+                </StyledTitle>
+              </TitleWrapper>
+              <Text size="xl">
+                Create a new Safe Multisig that is controlled by one or multiple owners. <br />
+                You will be required to pay a network fee for creating your new Safe.
+              </Text>
+              <StyledButton size="lg" color="primary" variant="contained" component={Link} to={OPEN_ADDRESS}>
+                <Text size="xl" color="white">
+                  + Create new Safe
+                </Text>
+              </StyledButton>
+            </CardsCol>
+
+            <Divider orientation="vertical" />
+
+            {/* Load safe */}
+            <CardsCol>
+              <StyledTitleOnly size="sm" strong withoutMargin>
+                Load existing Safe
+              </StyledTitleOnly>
+              <Text size="xl">
+                Already have a Safe? Do you want to access your Safe Multisig from a different device? Easily load your
+                Safe Multisig using your Safe address.
+              </Text>
+              <StyledButton
+                variant="bordered"
+                iconType="safe"
+                iconSize="sm"
+                size="lg"
+                color="secondary"
+                component={Link}
+                to={LOAD_ADDRESS}
+              >
+                <Text size="xl" color="secondary">
+                  Load existing Safe
+                </Text>
+              </StyledButton>
+            </CardsCol>
+          </StyledCardDouble>
+        </Wrapper>
+      </>
     </Block>
   )
 }
diff --git a/yarn.lock b/yarn.lock
index 780ea9367f..6a6e27c5e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1574,9 +1574,9 @@
     solc "0.5.14"
     truffle "^5.1.21"
 
-"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#ff29c3c":
+"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#3afc7cbb6914081036b4cbf10bacfe6270a9e198":
   version "0.4.0"
-  resolved "https://github.com/gnosis/safe-react-components.git#ff29c3ccfd391142b92edefba0f773aaf16f1799"
+  resolved "https://github.com/gnosis/safe-react-components.git#3afc7cbb6914081036b4cbf10bacfe6270a9e198"
   dependencies:
     classnames "^2.2.6"
     polished "^3.6.7"