diff --git a/src/components/Divider/divider.stories.tsx b/src/components/Divider/divider.stories.tsx
new file mode 100644
index 00000000..2c904e27
--- /dev/null
+++ b/src/components/Divider/divider.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+import Divider from './index'
+
+export default {
+  title: 'Data Display/Divider',
+  component: Divider,
+  parameters: {
+    componentSubtitle: 'Used to separate content.',
+  },
+}
+
+export const Horizontal = (): React.ReactElement => (
+  <>
+    <div>Some content</div>
+    <Divider />
+    <div>Some content2</div>
+  </>
+)
+
+export const Arrow = (): React.ReactElement => (
+  <>
+    <div>Some content</div>
+    <Divider withArrow />
+    <div>Some content2</div>
+  </>
+)
diff --git a/src/components/Divider/index.tsx b/src/components/Divider/index.tsx
new file mode 100644
index 00000000..5fda4fd6
--- /dev/null
+++ b/src/components/Divider/index.tsx
@@ -0,0 +1,29 @@
+import React, { ReactElement } from 'react'
+import styled from 'styled-components'
+import { Icon, Divider as DividerSRC } from '@gnosis.pm/safe-react-components'
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+
+  svg {
+    margin: 0 12px 0 4px;
+  }
+`
+const StyledDivider = styled(DividerSRC)`
+  width: 100%;
+`
+
+type Props = {
+  withArrow?: boolean
+}
+
+const Divider = ({ withArrow }: Props): ReactElement => (
+  <Wrapper>
+    {withArrow && <Icon type="arrowDown" size="md" />}
+    <StyledDivider />
+  </Wrapper>
+)
+
+export default Divider
diff --git a/src/components/DividerLine/arrow-down.svg b/src/components/DividerLine/arrow-down.svg
deleted file mode 100644
index d2a75cf6..00000000
--- a/src/components/DividerLine/arrow-down.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="13" height="21" viewBox="0 0 13 21">
-    <path fill="#B2B5B2" fill-rule="evenodd" d="M8.7 11.266V0H4.27v11.266H0l6.484 9.172 6.493-9.172z"/>
-</svg>
diff --git a/src/components/DividerLine/index.tsx b/src/components/DividerLine/index.tsx
deleted file mode 100644
index f193cbd2..00000000
--- a/src/components/DividerLine/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import ArrowDown from './arrow-down.svg'
-
-import Hairline from 'src/components/layout/Hairline'
-import { md, sm } from 'src/theme/variables'
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin: ${md} 0;
-
-  img {
-    margin: 0 ${sm};
-  }
-`
-
-type Props = {
-  withArrow: boolean
-}
-
-const DividerLine = ({ withArrow }: Props) => (
-  <Wrapper>
-    {withArrow && <img alt="Arrow Down" src={ArrowDown} />}
-    <Hairline />
-  </Wrapper>
-)
-
-export default DividerLine
diff --git a/src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx b/src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx
index 06e4fcc4..56712d83 100644
--- a/src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx
+++ b/src/routes/safe/components/Apps/components/ConfirmTxModal/ReviewConfirm.tsx
@@ -3,10 +3,8 @@ import { Text, EthHashInfo, ModalFooterConfirmation } from '@gnosis.pm/safe-reac
 import styled from 'styled-components'
 import { useDispatch } from 'react-redux'
 
-import DividerLine from 'src/components/DividerLine'
 import TextBox from 'src/components/TextBox'
 import ModalTitle from 'src/components/ModalTitle'
-import Hairline from 'src/components/layout/Hairline'
 import Heading from 'src/components/layout/Heading'
 import { createTransaction } from 'src/logic/safe/store/actions/createTransaction'
 import { MULTI_SEND_ADDRESS } from 'src/logic/contracts/safeContracts'
@@ -26,9 +24,11 @@ import { DecodedData } from 'src/types/transactions/decode.d'
 import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { getExplorerInfo } from 'src/config'
 import Block from 'src/components/layout/Block'
+import Divider from 'src/components/Divider'
 
 import GasEstimationInfo from '../GasEstimationInfo'
 import { ConfirmTxModalProps, DecodedTxDetail } from '.'
+import Hairline from 'src/components/layout/Hairline'
 
 const { nativeCoin } = getNetworkInfo()
 
@@ -225,7 +225,7 @@ export const ReviewConfirm = ({
               <Text size="md" strong>{`${ethBalance} ${nativeCoin.symbol}`}</Text>
             </StyledBlock>
 
-            <DividerLine withArrow />
+            <Divider withArrow />
 
             {/* Txs decoded */}
             <BasicTxInfo
@@ -237,7 +237,7 @@ export const ReviewConfirm = ({
             <DecodeTxsWrapper>
               <DecodeTxs txs={txs} decodedData={decodedData} onTxItemClick={showDecodedTxData} />
             </DecodeTxsWrapper>
-            {!isMultiSend && <DividerLine withArrow={false} />}
+            {!isMultiSend && <Divider />}
             {/* Warning gas estimation */}
             {params?.safeTxGas && (
               <div className="section">
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/FormDivisor/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/FormDivisor/index.tsx
deleted file mode 100644
index 4922e4cf..00000000
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/FormDivisor/index.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-
-import Col from 'src/components/layout/Col'
-import Hairline from 'src/components/layout/Hairline'
-import Row from 'src/components/layout/Row'
-import ArrowDown from 'src/routes/safe/components/Balances/SendModal/screens/assets/arrow-down.svg'
-import { sm } from 'src/theme/variables'
-
-const FormDivisor = () => (
-  <Row margin="md">
-    <Col xs={1}>
-      <img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
-    </Col>
-    <Col center="xs" layout="column" xs={11}>
-      <Hairline />
-    </Col>
-  </Row>
-)
-
-export default FormDivisor
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
index 49aad9f7..7a9ae87f 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/ReviewCustomTx/index.tsx
@@ -7,6 +7,7 @@ import { EthHashInfo } from '@gnosis.pm/safe-react-components'
 
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
 import { toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
+import Divider from 'src/components/Divider'
 import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'
 import Col from 'src/components/layout/Col'
@@ -20,13 +21,11 @@ import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import { getEthAsToken } from 'src/logic/tokens/utils/tokenHelpers'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
-import { sm } from 'src/theme/variables'
 import { TxParametersDetail } from 'src/routes/safe/components/Transactions/helpers/TxParametersDetail'
 import { useEstimateTransactionGas, EstimationStatus } from 'src/logic/hooks/useEstimateTransactionGas'
 import { TransactionFees } from 'src/components/TransactionsFees'
 import { EditableTxParameters } from 'src/routes/safe/components/Transactions/helpers/EditableTxParameters'
 
-import ArrowDown from '../../assets/arrow-down.svg'
 import { styles } from './style'
 import { TxParameters } from 'src/routes/safe/container/hooks/useTransactionParameters'
 
@@ -113,14 +112,7 @@ const ReviewCustomTx = ({ onClose, onPrev, tx }: Props): React.ReactElement => {
           <Hairline />
           <Block className={classes.container}>
             <SafeInfo />
-            <Row margin="md">
-              <Col xs={1}>
-                <img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
-              </Col>
-              <Col center="xs" layout="column" xs={11}>
-                <Hairline />
-              </Col>
-            </Row>
+            <Divider withArrow />
             <Row margin="xs">
               <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
                 Recipient
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
index 0e1cade8..996e91da 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx
@@ -6,6 +6,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import Switch from '@material-ui/core/Switch'
 import Close from '@material-ui/icons/Close'
 
+import Divider from 'src/components/Divider'
 import QRIcon from 'src/assets/icons/qrcode.svg'
 import Field from 'src/components/forms/Field'
 import GnoForm from 'src/components/forms/GnoForm'
@@ -24,11 +25,8 @@ import { ScanQRModal } from 'src/components/ScanQRModal'
 import { safeSelector } from 'src/logic/safe/store/selectors'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
 import { ContractsAddressBookInput } from 'src/routes/safe/components/Balances/SendModal/screens/AddressBookInput'
-import { sm } from 'src/theme/variables'
 import { sameString } from 'src/utils/strings'
 
-import ArrowDown from '../../assets/arrow-down.svg'
-
 import { styles } from './style'
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
 import { EthHashInfo } from '@gnosis.pm/safe-react-components'
@@ -135,14 +133,7 @@ const SendCustomTx: React.FC<Props> = ({ initialValues, onClose, onNext, contrac
             <>
               <Block className={classes.formContainer}>
                 <SafeInfo />
-                <Row margin="md">
-                  <Col xs={1}>
-                    <img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
-                  </Col>
-                  <Col center="xs" layout="column" xs={11}>
-                    <Hairline />
-                  </Col>
-                </Row>
+                <Divider withArrow />
                 {selectedEntry && selectedEntry.address ? (
                   <div
                     onKeyDown={(e) => {
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
index 571ad054..98bdeb10 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import { useSelector } from 'react-redux'
 import Switch from '@material-ui/core/Switch'
 import { styles } from './style'
+import Divider from 'src/components/Divider'
 import GnoForm from 'src/components/forms/GnoForm'
 import Block from 'src/components/layout/Block'
 import Hairline from 'src/components/layout/Hairline'
@@ -12,7 +13,6 @@ import Paragraph from 'src/components/layout/Paragraph'
 import Buttons from './Buttons'
 import ContractABI from './ContractABI'
 import { EthAddressInput } from './EthAddressInput'
-import FormDivisor from './FormDivisor'
 import FormErrorMessage from './FormErrorMessage'
 import { Header } from './Header'
 import { MethodsDropdown } from './MethodsDropdown'
@@ -108,7 +108,7 @@ const ContractInteraction: React.FC<ContractInteractionProps> = ({
             <>
               <Block className={classes.formContainer}>
                 <SafeInfo />
-                <FormDivisor />
+                <Divider withArrow />
                 <EthAddressInput
                   name="contractAddress"
                   onScannedValue={mutators.setContractAddress}
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
index 193ad2d4..ecff3e8e 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewCollectible/index.tsx
@@ -4,6 +4,7 @@ import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
 import { getExplorerInfo } from 'src/config'
+import Divider from 'src/components/Divider'
 import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'
 import Col from 'src/components/layout/Col'
@@ -17,12 +18,9 @@ import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selector
 import { TX_NOTIFICATION_TYPES } from 'src/logic/safe/transactions'
 import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
-import { sm } from 'src/theme/variables'
 import { textShortener } from 'src/utils/strings'
 import { generateERC721TransferTxData } from 'src/logic/collectibles/utils'
 
-import ArrowDown from '../assets/arrow-down.svg'
-
 import { styles } from './style'
 import { EthHashInfo } from '@gnosis.pm/safe-react-components'
 import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
@@ -165,14 +163,7 @@ const ReviewCollectible = ({ onClose, onPrev, tx }: Props): React.ReactElement =
           <Hairline />
           <Block className={classes.container}>
             <SafeInfo />
-            <Row margin="md">
-              <Col xs={1}>
-                <img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
-              </Col>
-              <Col center="xs" layout="column" xs={11}>
-                <Hairline />
-              </Col>
-            </Row>
+            <Divider withArrow />
             <Row margin="xs">
               <Paragraph color="disabled" noMargin size="md" style={{ letterSpacing: '-0.5px' }}>
                 Recipient
diff --git a/src/routes/safe/components/Balances/SendModal/screens/ReviewSendFundsTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ReviewSendFundsTx/index.tsx
index 20a9cffd..9faccdfa 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/ReviewSendFundsTx/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/ReviewSendFundsTx/index.tsx
@@ -7,6 +7,7 @@ import { Button, EthHashInfo } from '@gnosis.pm/safe-react-components'
 
 import { toTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { getExplorerInfo, getNetworkInfo } from 'src/config'
+import Divider from 'src/components/Divider'
 import Block from 'src/components/layout/Block'
 import Col from 'src/components/layout/Col'
 import Hairline from 'src/components/layout/Hairline'
@@ -24,14 +25,12 @@ import SafeInfo from 'src/routes/safe/components/Balances/SendModal/SafeInfo'
 import { setImageToPlaceholder } from 'src/routes/safe/components/Balances/utils'
 import { extendedSafeTokensSelector } from 'src/routes/safe/container/selector'
 import { SpendingLimit } from 'src/logic/safe/store/models/safe'
-import { sm } from 'src/theme/variables'
 import { sameString } from 'src/utils/strings'
 import { TokenProps } from 'src/logic/tokens/store/model/token'
 import { RecordOf } from 'immutable'
 import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
 import { TransactionFees } from 'src/components/TransactionsFees'
 
-import ArrowDown from '../assets/arrow-down.svg'
 import { styles } from './style'
 import { EditableTxParameters } from 'src/routes/safe/components/Transactions/helpers/EditableTxParameters'
 import { TxParametersDetail } from 'src/routes/safe/components/Transactions/helpers/TxParametersDetail'
@@ -207,14 +206,7 @@ const ReviewSendFundsTx = ({ onClose, onPrev, tx }: ReviewTxProps): React.ReactE
           <Block className={classes.container}>
             {/* SafeInfo */}
             <SafeInfo />
-            <Row margin="md">
-              <Col xs={1}>
-                <img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
-              </Col>
-              <Col center="xs" layout="column" xs={11}>
-                <Hairline />
-              </Col>
-            </Row>
+            <Divider withArrow />
 
             {/* Recipient */}
             <Row margin="xs">
diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx
index a96b289e..616b023b 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendCollectible/index.tsx
@@ -5,6 +5,7 @@ import Close from '@material-ui/icons/Close'
 import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 
+import Divider from 'src/components/Divider'
 import GnoForm from 'src/components/forms/GnoForm'
 import Block from 'src/components/layout/Block'
 import Button from 'src/components/layout/Button'
@@ -23,11 +24,8 @@ import { AddressBookInput } from 'src/routes/safe/components/Balances/SendModal/
 import { NFTToken } from 'src/logic/collectibles/sources/collectibles.d'
 import { getExplorerInfo } from 'src/config'
 import { sameAddress } from 'src/logic/wallets/ethAddresses'
-import { sm } from 'src/theme/variables'
 import { sameString } from 'src/utils/strings'
 
-import ArrowDown from 'src/routes/safe/components/Balances/SendModal/screens/assets/arrow-down.svg'
-
 import { CollectibleSelectField } from './CollectibleSelectField'
 import { styles } from './style'
 import TokenSelectField from './TokenSelectField'
@@ -159,14 +157,7 @@ const SendCollectible = ({
               <WhenFieldChanges field="assetAddress" set="nftTokenId" to={''} />
               <Block className={classes.formContainer}>
                 <SafeInfo />
-                <Row margin="md">
-                  <Col xs={1}>
-                    <img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
-                  </Col>
-                  <Col center="xs" layout="column" xs={11}>
-                    <Hairline />
-                  </Col>
-                </Row>
+                <Divider withArrow />
                 {selectedEntry && selectedEntry.address ? (
                   <div
                     onKeyDown={(e) => {
diff --git a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
index 8e5524d3..4c12179e 100644
--- a/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
+++ b/src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.tsx
@@ -32,15 +32,13 @@ import TokenSelectField from 'src/routes/safe/components/Balances/SendModal/scre
 import { fromTokenUnit } from 'src/logic/tokens/utils/humanReadableValue'
 import { extendedSafeTokensSelector } from 'src/routes/safe/container/selector'
 import { safeSpendingLimitsSelector } from 'src/logic/safe/store/selectors'
-import { sm } from 'src/theme/variables'
 import { sameString } from 'src/utils/strings'
 
-import ArrowDown from '../assets/arrow-down.svg'
-
 import { styles } from './style'
 import { EthHashInfo } from '@gnosis.pm/safe-react-components'
 import { spendingLimitAllowedBalance, getSpendingLimitByTokenAddress } from 'src/logic/safe/utils/spendingLimits'
 import { getBalanceAndDecimalsFromToken } from 'src/logic/tokens/utils/tokenHelpers'
+import Divider from 'src/components/Divider'
 
 const formMutators = {
   setMax: (args, state, utils) => {
@@ -234,14 +232,7 @@ const SendFunds = ({
             <>
               <Block className={classes.formContainer}>
                 <SafeInfo />
-                <Row margin="md">
-                  <Col xs={1}>
-                    <img alt="Arrow Down" src={ArrowDown} style={{ marginLeft: sm }} />
-                  </Col>
-                  <Col center="xs" layout="column" xs={11}>
-                    <Hairline />
-                  </Col>
-                </Row>
+                <Divider withArrow />
                 {selectedEntry && selectedEntry.address ? (
                   <div
                     onKeyDown={(e) => {
diff --git a/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx b/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx
index 2d21fcab..090f4326 100644
--- a/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx
+++ b/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/index.tsx
@@ -18,7 +18,7 @@ import { minValue } from 'src/components/forms/validator'
 import { ParametersStatus, areSafeParamsEnabled, areEthereumParamsVisible, ethereumTxParametersTitle } from '../utils'
 
 const StyledDivider = styled(Divider)`
-  margin: 16px 0;
+  margin: 0px;
 `
 
 const SafeOptions = styled.div`
@@ -46,9 +46,6 @@ const StyledLink = styled(Link)`
     margin-right: 5px;
   }
 `
-const StyledIconButton = styled(IconButton)`
-  margin: 10px 0 0 0;
-`
 const StyledText = styled(Text)`
   margin: 0 0 4px 0;
 `
@@ -111,9 +108,9 @@ export const EditTxParametersForm = ({
         <Title size="sm" withoutMargin>
           Advanced options
         </Title>
-        <StyledIconButton disableRipple onClick={onCloseFormHandler}>
+        <IconButton disableRipple onClick={onCloseFormHandler}>
           <Close className={classes.closeIcon} />
-        </StyledIconButton>
+        </IconButton>
       </Row>
 
       <StyledDivider />
@@ -207,7 +204,7 @@ export const EditTxParametersForm = ({
                 </>
               )}
 
-              <StyledDivider />
+              <Divider />
 
               {/* Footer */}
               <Row align="center" className={classes.buttonRow}>
diff --git a/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/style.ts b/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/style.ts
index e76197f4..330fb0e4 100644
--- a/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/style.ts
+++ b/src/routes/safe/components/Transactions/helpers/EditTxParametersForm/style.ts
@@ -6,7 +6,7 @@ export const styles = createStyles({
     padding: `${md} ${lg}`,
     justifyContent: 'space-between',
     boxSizing: 'border-box',
-    maxHeight: '75px',
+    height: '75px',
   },
   annotation: {
     letterSpacing: '-1px',
@@ -31,8 +31,9 @@ export const styles = createStyles({
     marginRight: sm,
   },
   buttonRow: {
-    height: '84px',
+    height: '52px',
     justifyContent: 'center',
+    alignItems: 'center',
     '& > button': {
       fontFamily: 'Averta',
       fontSize: md,