diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/ApproveTxModal/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/ApproveTxModal/index.jsx
new file mode 100644
index 00000000..c6d6a159
--- /dev/null
+++ b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/ApproveTxModal/index.jsx
@@ -0,0 +1,80 @@
+// @flow
+import React from 'react'
+import Close from '@material-ui/icons/Close'
+import IconButton from '@material-ui/core/IconButton'
+import { withStyles } from '@material-ui/core/styles'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
+import Checkbox from '@material-ui/core/Checkbox'
+import Modal from '~/components/Modal'
+import Hairline from '~/components/layout/Hairline'
+import Button from '~/components/layout/Button'
+import Row from '~/components/layout/Row'
+import Bold from '~/components/layout/Bold'
+import Block from '~/components/layout/Block'
+import Paragraph from '~/components/layout/Paragraph'
+import { styles } from './style'
+
+type Props = {
+ onClose: () => void,
+ classes: Object,
+ isOpen: boolean,
+ createTransaction: Function,
+ nonce: string,
+}
+
+const ApproveTxModal = ({
+ onClose, isOpen, classes, createTransaction, nonce,
+}: Props) => (
+
+
+
+ Approve transaction
+
+
+
+
+
+
+
+
+
+ This action will approve this transaction. A separate transaction will be performed to submit the approval.
+
+
+ Transaction nonce:
+
+ {nonce}
+
+
+ Approving transaction does not execute it immediately. If you want to approve and execute the transaction
+ right away, click on checkbox below.
+
+ } label="Execute transaction" />
+
+
+
+
+
+
+
+)
+
+export default withStyles(styles)(ApproveTxModal)
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/ApproveTxModal/style.js b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/ApproveTxModal/style.js
new file mode 100644
index 00000000..4e966137
--- /dev/null
+++ b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/ApproveTxModal/style.js
@@ -0,0 +1,35 @@
+// @flow
+import {
+ lg, md, sm, border,
+} from '~/theme/variables'
+
+export const styles = () => ({
+ heading: {
+ padding: `${sm} ${lg}`,
+ justifyContent: 'space-between',
+ boxSizing: 'border-box',
+ maxHeight: '75px',
+ },
+ headingText: {
+ fontSize: '24px',
+ },
+ closeIcon: {
+ height: '35px',
+ width: '35px',
+ },
+ container: {
+ padding: `${md} ${lg}`,
+ },
+ buttonRow: {
+ height: '84px',
+ justifyContent: 'center',
+ position: 'absolute',
+ bottom: 0,
+ width: '100%',
+ borderTop: `1px solid ${border}`,
+ },
+ nonceNumber: {
+ marginTop: sm,
+ fontSize: md,
+ },
+})
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/CancelTxModal/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/CancelTxModal/index.jsx
index 67c616b7..dc0fe004 100644
--- a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/CancelTxModal/index.jsx
+++ b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/CancelTxModal/index.jsx
@@ -25,7 +25,7 @@ const CancelTxModal = ({
}: Props) => (
{tabIndex === 0 && }
{tabIndex === 1 && }
-
+
+
>
)
}