diff --git a/src/components/common/ConnectWallet/ConnectWalletButton.tsx b/src/components/common/ConnectWallet/ConnectWalletButton.tsx
new file mode 100644
index 0000000000..48269a3aad
--- /dev/null
+++ b/src/components/common/ConnectWallet/ConnectWalletButton.tsx
@@ -0,0 +1,26 @@
+import { Button } from '@mui/material'
+import useConnectWallet from '@/components/common/ConnectWallet/useConnectWallet'
+
+const ConnectWalletButton = ({ onConnect }: { onConnect?: () => void }): React.ReactElement => {
+  const connectWallet = useConnectWallet()
+
+  const handleConnect = () => {
+    onConnect?.()
+    connectWallet()
+  }
+
+  return (
+    <Button
+      onClick={handleConnect}
+      variant="contained"
+      size="small"
+      disableElevation
+      fullWidth
+      sx={{ fontSize: ['12px', '13px'] }}
+    >
+      Connect
+    </Button>
+  )
+}
+
+export default ConnectWalletButton
diff --git a/src/components/common/ConnectWallet/ConnectionCenter.tsx b/src/components/common/ConnectWallet/ConnectionCenter.tsx
deleted file mode 100644
index 074f7673b0..0000000000
--- a/src/components/common/ConnectWallet/ConnectionCenter.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Popover, ButtonBase, Typography, Paper, Divider, Box } from '@mui/material'
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import ExpandLessIcon from '@mui/icons-material/ExpandLess'
-import { useState, type MouseEvent, type ReactElement } from 'react'
-
-import KeyholeIcon from '@/components/common/icons/KeyholeIcon'
-import WalletDetails from '@/components/common/ConnectWallet/WalletDetails'
-import PairingDetails from '@/components/common/PairingDetails'
-
-import css from '@/components/common/ConnectWallet/styles.module.css'
-import { useCurrentChain } from '@/hooks/useChains'
-import { isPairingSupported } from '@/services/pairing/utils'
-
-const ConnectionCenter = (): ReactElement => {
-  const chain = useCurrentChain()
-
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
-  const open = !!anchorEl
-
-  const isSupported = isPairingSupported(chain?.disabledWallets)
-
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
-  const ExpandIcon = open ? ExpandLessIcon : ExpandMoreIcon
-
-  return (
-    <>
-      <ButtonBase disableRipple onClick={handleClick} className={css.buttonContainer}>
-        <KeyholeIcon />
-
-        <Typography variant="caption" className={css.notConnected}>
-          <b>Not connected</b>
-          <br />
-          <Typography variant="inherit" sx={{ color: ({ palette }) => palette.error.main }}>
-            Connect wallet
-          </Typography>
-        </Typography>
-
-        <ExpandIcon color="border" />
-      </ButtonBase>
-
-      <Popover
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'center',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'center',
-        }}
-        sx={{ mt: 1 }}
-      >
-        <Paper className={css.popoverContainer}>
-          <WalletDetails onConnect={handleClose} />
-
-          {isSupported && (
-            <Box className={css.pairingDetails}>
-              <Divider flexItem />
-
-              <PairingDetails vertical />
-            </Box>
-          )}
-        </Paper>
-      </Popover>
-    </>
-  )
-}
-
-export default ConnectionCenter
diff --git a/src/components/common/ConnectWallet/WalletDetails.tsx b/src/components/common/ConnectWallet/WalletDetails.tsx
deleted file mode 100644
index e91f11973e..0000000000
--- a/src/components/common/ConnectWallet/WalletDetails.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Button, Typography } from '@mui/material'
-import type { ReactElement } from 'react'
-
-import KeyholeIcon from '@/components/common/icons/KeyholeIcon'
-import useConnectWallet from '@/components/common/ConnectWallet/useConnectWallet'
-
-const WalletDetails = ({ onConnect }: { onConnect?: () => void }): ReactElement => {
-  const connectWallet = useConnectWallet()
-
-  const handleConnect = () => {
-    onConnect?.()
-    connectWallet()
-  }
-
-  return (
-    <>
-      <Typography variant="h5">Connect a wallet</Typography>
-
-      <KeyholeIcon />
-
-      <Button onClick={handleConnect} variant="contained" size="small" disableElevation fullWidth>
-        Connect
-      </Button>
-    </>
-  )
-}
-
-export default WalletDetails
diff --git a/src/components/common/ConnectWallet/index.tsx b/src/components/common/ConnectWallet/index.tsx
index 8059f60eb3..225a875ca9 100644
--- a/src/components/common/ConnectWallet/index.tsx
+++ b/src/components/common/ConnectWallet/index.tsx
@@ -1,12 +1,12 @@
 import type { ReactElement } from 'react'
 import useWallet from '@/hooks/wallets/useWallet'
 import AccountCenter from '@/components/common/ConnectWallet/AccountCenter'
-import ConnectionCenter from '@/components/common/ConnectWallet/ConnectionCenter'
+import ConnectWalletButton from './ConnectWalletButton'
 
 const ConnectWallet = (): ReactElement => {
   const wallet = useWallet()
 
-  return wallet ? <AccountCenter wallet={wallet} /> : <ConnectionCenter />
+  return wallet ? <AccountCenter wallet={wallet} /> : <ConnectWalletButton />
 }
 
 export default ConnectWallet
diff --git a/src/components/common/ConnectWallet/styles.module.css b/src/components/common/ConnectWallet/styles.module.css
index e6ec039da1..fe3bad0514 100644
--- a/src/components/common/ConnectWallet/styles.module.css
+++ b/src/components/common/ConnectWallet/styles.module.css
@@ -1,8 +1,3 @@
-.connectedContainer {
-  display: flex;
-  align-items: center;
-}
-
 .buttonContainer {
   display: flex;
   align-items: center;
@@ -46,21 +41,3 @@
 .row:last-of-type {
   border-bottom: 1px solid var(--color-border-light);
 }
-
-.pairingDetails {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-@media (max-width: 599.95px) {
-  .buttonContainer {
-    transform: scale(0.8);
-  }
-
-  .notConnected,
-  .pairingDetails {
-    display: none;
-  }
-}
diff --git a/src/components/common/PairingDetails/PairingDeprecationWarning.tsx b/src/components/common/PairingDetails/PairingDeprecationWarning.tsx
new file mode 100644
index 0000000000..dd720461e0
--- /dev/null
+++ b/src/components/common/PairingDetails/PairingDeprecationWarning.tsx
@@ -0,0 +1,12 @@
+import { Alert } from '@mui/material'
+
+const PairingDeprecationWarning = (): React.ReactElement => {
+  return (
+    <Alert severity="warning" sx={{ mb: 4 }}>
+      The {'Safe{Wallet}'} web-mobile pairing feature will be discontinued from 15th November 2023. Please migrate to a
+      different signer wallet before this date.
+    </Alert>
+  )
+}
+
+export default PairingDeprecationWarning
diff --git a/src/components/common/PairingDetails/index.tsx b/src/components/common/PairingDetails/index.tsx
deleted file mode 100644
index 4ae6e82de8..0000000000
--- a/src/components/common/PairingDetails/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Typography } from '@mui/material'
-import type { ReactElement } from 'react'
-
-import PairingQRCode from './PairingQRCode'
-import PairingDescription from './PairingDescription'
-
-const PairingDetails = ({ vertical = false }: { vertical?: boolean }): ReactElement => {
-  const title = <Typography variant="h5">Connect to mobile</Typography>
-
-  const description = <PairingDescription />
-
-  const qr = <PairingQRCode />
-
-  return (
-    <>
-      {vertical ? (
-        <>
-          {title}
-          {qr}
-          {description}
-        </>
-      ) : (
-        <>
-          {qr}
-          <div>
-            {title}
-            {description}
-          </div>
-        </>
-      )}
-    </>
-  )
-}
-
-export default PairingDetails
diff --git a/src/components/new-safe/create/steps/ConnectWalletStep/index.tsx b/src/components/new-safe/create/steps/ConnectWalletStep/index.tsx
index a955d2cb4d..c8bc71fa5a 100644
--- a/src/components/new-safe/create/steps/ConnectWalletStep/index.tsx
+++ b/src/components/new-safe/create/steps/ConnectWalletStep/index.tsx
@@ -1,8 +1,6 @@
 import { useEffect, useState } from 'react'
-import { Box, Button, Grid, Typography } from '@mui/material'
+import { Box, Button } from '@mui/material'
 import useWallet from '@/hooks/wallets/useWallet'
-import { useCurrentChain } from '@/hooks/useChains'
-import { isPairingSupported } from '@/services/pairing/utils'
 
 import type { NewSafeFormData } from '@/components/new-safe/create'
 import type { StepRenderProps } from '@/components/new-safe/CardStepper/useCardStepper'
@@ -10,15 +8,11 @@ import useSyncSafeCreationStep from '@/components/new-safe/create/useSyncSafeCre
 import layoutCss from '@/components/new-safe/create/styles.module.css'
 import useConnectWallet from '@/components/common/ConnectWallet/useConnectWallet'
 import KeyholeIcon from '@/components/common/icons/KeyholeIcon'
-import PairingDescription from '@/components/common/PairingDetails/PairingDescription'
-import PairingQRCode from '@/components/common/PairingDetails/PairingQRCode'
 import { usePendingSafe } from '../StatusStep/usePendingSafe'
 
 const ConnectWalletStep = ({ onSubmit, setStep }: StepRenderProps<NewSafeFormData>) => {
   const [pendingSafe] = usePendingSafe()
   const wallet = useWallet()
-  const chain = useCurrentChain()
-  const isSupported = isPairingSupported(chain?.disabledWallets)
   const handleConnect = useConnectWallet()
   const [, setSubmitted] = useState(false)
   useSyncSafeCreationStep(setStep)
@@ -34,31 +28,12 @@ const ConnectWalletStep = ({ onSubmit, setStep }: StepRenderProps<NewSafeFormDat
   }, [onSubmit, wallet, pendingSafe])
 
   return (
-    <>
-      <Box className={layoutCss.row}>
-        <Grid container spacing={3}>
-          <Grid item xs={12} md={6} display="flex" flexDirection="column" alignItems="center" gap={2}>
-            <Box width={100} height={100} display="flex" alignItems="center" justifyContent="center">
-              <KeyholeIcon />
-            </Box>
-
-            <Button onClick={handleConnect} variant="contained" size="stretched" disableElevation>
-              Connect
-            </Button>
-          </Grid>
-
-          {isSupported && (
-            <Grid item xs={12} md={6} display="flex" flexDirection="column" alignItems="center" gap={2}>
-              <PairingQRCode />
-              <Typography variant="h6" fontWeight="700">
-                Connect to {'Safe{Wallet}'} mobile
-              </Typography>
-              <PairingDescription />
-            </Grid>
-          )}
-        </Grid>
-      </Box>
-    </>
+    <Box className={layoutCss.row} display="flex" alignItems="center" gap={3}>
+      <KeyholeIcon />
+      <Button onClick={handleConnect} variant="contained" size="stretched" disableElevation>
+        Connect wallet
+      </Button>
+    </Box>
   )
 }
 
diff --git a/src/services/pairing/QRModal.tsx b/src/services/pairing/QRModal.tsx
index df2e3285eb..b363838046 100644
--- a/src/services/pairing/QRModal.tsx
+++ b/src/services/pairing/QRModal.tsx
@@ -8,6 +8,7 @@ import { StoreHydrator } from '@/store'
 import { AppProviders } from '@/pages/_app'
 import { PAIRING_MODULE_LABEL } from '@/services/pairing/module'
 import css from './styles.module.css'
+import PairingDeprecationWarning from '@/components/common/PairingDetails/PairingDeprecationWarning'
 
 const WRAPPER_ID = 'safe-mobile-qr-modal'
 const QR_CODE_SIZE = 200
@@ -75,6 +76,7 @@ const Modal = ({ uri, cb }: { uri: string; cb: () => void }) => {
             </IconButton>
           </DialogTitle>
           <DialogContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
+            <PairingDeprecationWarning />
             <PairingQRCode size={QR_CODE_SIZE} />
             <br />
             <PairingDescription />