diff --git a/packages/wallets/src/components/Base/Divider/Divider.scss b/packages/wallets/src/components/Base/Divider/Divider.scss
index f3671eea161d..8677fda308df 100644
--- a/packages/wallets/src/components/Base/Divider/Divider.scss
+++ b/packages/wallets/src/components/Base/Divider/Divider.scss
@@ -1,9 +1,11 @@
 .wallets-divider {
-    &__horizontal {
+    width: 100%;
+
+    &--horizontal {
         border-top: 1px solid;
     }
 
-    &__vertical {
+    &--vertical {
         border-right: 1px solid;
     }
 }
diff --git a/packages/wallets/src/components/Base/Divider/Divider.tsx b/packages/wallets/src/components/Base/Divider/Divider.tsx
index f52f88feebf2..ac1326a2da7c 100644
--- a/packages/wallets/src/components/Base/Divider/Divider.tsx
+++ b/packages/wallets/src/components/Base/Divider/Divider.tsx
@@ -8,7 +8,7 @@ type TProps = {
 };
 
 const Divider: React.FC<TProps> = ({ color = '#f2f3f4', margin, variant = 'horizontal' }) => (
-    <div className={`wallets-divider__${variant}`} style={{ borderColor: color, margin }} />
+    <div className={`wallets-divider wallets-divider--${variant}`} style={{ borderColor: color, margin }} />
 );
 
 export default Divider;
diff --git a/packages/wallets/src/components/Dropzone/Dropzone.scss b/packages/wallets/src/components/Dropzone/Dropzone.scss
index 63f6640ad301..973a42206d3a 100644
--- a/packages/wallets/src/components/Dropzone/Dropzone.scss
+++ b/packages/wallets/src/components/Dropzone/Dropzone.scss
@@ -1,16 +1,12 @@
 .wallets-dropzone {
     display: flex;
-    padding: 2.8rem 15.2rem 3.5rem;
     justify-content: center;
     align-items: center;
     border-radius: 0.8rem;
     height: 100%;
     width: 100%;
     border: 0.1rem dashed var(--system-light-5-active-background, #d6dadb);
-
-    @include mobile {
-        padding: 2.4rem 2.5rem 0.4rem;
-    }
+    padding: 2rem;
 
     &--hover,
     &--active {
diff --git a/packages/wallets/src/components/Dropzone/Dropzone.tsx b/packages/wallets/src/components/Dropzone/Dropzone.tsx
index 4c78fdd06658..e2f720134c34 100644
--- a/packages/wallets/src/components/Dropzone/Dropzone.tsx
+++ b/packages/wallets/src/components/Dropzone/Dropzone.tsx
@@ -1,12 +1,4 @@
-import React, {
-    CSSProperties,
-    DetailedHTMLProps,
-    InputHTMLAttributes,
-    ReactNode,
-    RefObject,
-    useCallback,
-    useState,
-} from 'react';
+import React, { DetailedHTMLProps, InputHTMLAttributes, ReactNode, RefObject, useCallback, useState } from 'react';
 import classNames from 'classnames';
 import { useDropzone } from 'react-dropzone';
 import CloseIcon from '../../public/images/close-icon.svg';
@@ -17,26 +9,18 @@ type TProps = {
     buttonText?: ReactNode;
     description?: ReactNode;
     fileFormats?: NonNullable<Parameters<typeof useDropzone>[0]>['accept'];
-    height?: CSSProperties['height'];
     hoverMessage?: ReactNode;
     icon: ReactNode;
     maxSize?: NonNullable<Parameters<typeof useDropzone>[0]>['maxSize'];
-    minHeight?: CSSProperties['minHeight'];
-    minWidth?: CSSProperties['minWidth'];
-    width?: CSSProperties['width'];
 };
 
 const Dropzone: React.FC<TProps> = ({
     buttonText = 'Upload',
     description,
     fileFormats,
-    height,
     hoverMessage = 'Drop file here',
     icon,
     maxSize,
-    minHeight,
-    minWidth,
-    width,
 }) => {
     const [files, setFiles] = useState<
         {
@@ -45,6 +29,7 @@ const Dropzone: React.FC<TProps> = ({
         }[]
     >([]);
     const [showHoverMessage, setShowHoverMessage] = useState(false);
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
     const { getInputProps, getRootProps, open, rootRef } = useDropzone({
         accept: fileFormats,
         maxSize,
@@ -54,7 +39,6 @@ const Dropzone: React.FC<TProps> = ({
         onDragLeave: () => setShowHoverMessage(false),
         onDrop: acceptedFiles => {
             setShowHoverMessage(false);
-
             setFiles(
                 acceptedFiles.map(file =>
                     Object.assign(file, {
@@ -63,6 +47,12 @@ const Dropzone: React.FC<TProps> = ({
                 )
             );
         },
+        onDropAccepted() {
+            setErrorMessage(null);
+        },
+        onDropRejected(fileRejections) {
+            setErrorMessage(fileRejections?.[0]?.errors?.[0].message);
+        },
     });
 
     const removeFile = useCallback(
@@ -73,11 +63,7 @@ const Dropzone: React.FC<TProps> = ({
     );
 
     return (
-        <div
-            {...getRootProps()}
-            ref={rootRef as RefObject<HTMLDivElement>}
-            style={{ height, minHeight, minWidth, width }}
-        >
+        <div {...getRootProps()} className='wallets-dropzone__container' ref={rootRef as RefObject<HTMLDivElement>}>
             <input
                 {...(getInputProps() as DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>)}
             />
@@ -93,27 +79,40 @@ const Dropzone: React.FC<TProps> = ({
                     {!showHoverMessage && !files.length && (
                         <div className='wallets-dropzone__placeholder'>
                             <div className='wallets-dropzone__placeholder-icon'>{icon}</div>
+                            <WalletText align='center' size='md'>
+                                {description}
+                            </WalletText>
                             <div className='wallets-dropzone__placeholder-text'>
                                 <WalletButton onClick={open} text={buttonText} variant='outlined' />
                             </div>
+                            {errorMessage && (
+                                <WalletText align='center' color='red' size='2xs'>
+                                    {errorMessage}
+                                </WalletText>
+                            )}
                         </div>
                     )}
                     {files.length > 0 &&
                         files.map(file => (
-                            <div
-                                className='wallets-dropzone__thumb'
-                                key={file.name}
-                                style={{ backgroundImage: `url(${file.preview})` }}
-                            >
-                                <IconButton
-                                    className='wallets-dropzone__remove-file'
-                                    icon={<CloseIcon width={12} />}
-                                    onClick={removeFile(file)}
-                                    size='sm'
-                                />
-                            </div>
+                            <React.Fragment key={file.name}>
+                                <div
+                                    className='wallets-dropzone__thumb'
+                                    style={{ backgroundImage: `url(${file.preview})` }}
+                                >
+                                    <IconButton
+                                        className='wallets-dropzone__remove-file'
+                                        icon={<CloseIcon width={12} />}
+                                        onClick={removeFile(file)}
+                                        size='sm'
+                                    />
+                                </div>
+                                {description && (
+                                    <WalletText align='center' size='md'>
+                                        {description}
+                                    </WalletText>
+                                )}
+                            </React.Fragment>
                         ))}
-                    {!showHoverMessage && description && <WalletText size='md'>{description}</WalletText>}
                 </div>
             </div>
         </div>
diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHint/DocumentRuleHint.scss b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHint/DocumentRuleHint.scss
similarity index 100%
rename from packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHint/DocumentRuleHint.scss
rename to packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHint/DocumentRuleHint.scss
diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHint/DocumentRuleHint.tsx b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHint/DocumentRuleHint.tsx
similarity index 86%
rename from packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHint/DocumentRuleHint.tsx
rename to packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHint/DocumentRuleHint.tsx
index dfffef6254cb..2b7bb10e8d75 100644
--- a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHint/DocumentRuleHint.tsx
+++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHint/DocumentRuleHint.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { WalletText } from '../../../../../../components/Base';
+import { WalletText } from '../../../../../../../components/Base';
 import './DocumentRuleHint.scss';
 
 type TProps = {
diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHint/index.ts b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHint/index.ts
similarity index 100%
rename from packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHint/index.ts
rename to packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHint/index.ts
diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.scss b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.scss
new file mode 100644
index 000000000000..652e6a885936
--- /dev/null
+++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.scss
@@ -0,0 +1,12 @@
+.wallets-document-rule-hints {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    @include mobile {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        column-gap: 2.4rem;
+        row-gap: 0.8rem;
+    }
+}
diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.tsx b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.tsx
new file mode 100644
index 000000000000..7bbababe92d6
--- /dev/null
+++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/DocumentRuleHints.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import ClearPhoto from '../../../../../../public/images/accounts/clear-photo.svg';
+import ClockIcon from '../../../../../../public/images/accounts/clock-icon.svg';
+import ImageIcon from '../../../../../../public/images/accounts/image-icon.svg';
+import LessThanEightIcon from '../../../../../../public/images/accounts/less-than-eight-icon.svg';
+import { DocumentRuleHint } from './DocumentRuleHint';
+import './DocumentRuleHints.scss';
+
+type TProps = {
+    docType: 'driverLicense' | 'identityCard' | 'nimcSlip' | 'passport';
+};
+
+const DocumentRuleHints: React.FC<TProps> = ({ docType }) => (
+    <div className='wallets-document-rule-hints'>
+        <DocumentRuleHint description='A clear colour photo or scanned image' icon={<ClearPhoto />} />
+        <DocumentRuleHint description='JPEG, JPG, PNG, PDF, or GIF' icon={<ImageIcon />} />
+        <DocumentRuleHint description='Less than 8MB' icon={<LessThanEightIcon />} />
+        {docType !== 'nimcSlip' && (
+            <DocumentRuleHint description='Must be valid for at least 6 months' icon={<ClockIcon />} />
+        )}
+    </div>
+);
+
+export default DocumentRuleHints;
diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/index.ts b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/index.ts
new file mode 100644
index 000000000000..36406d4c44b6
--- /dev/null
+++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentRuleHints/index.ts
@@ -0,0 +1 @@
+export { default as DocumentRuleHints } from './DocumentRuleHints';
diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.scss b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.scss
new file mode 100644
index 000000000000..b018eafd436b
--- /dev/null
+++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.scss
@@ -0,0 +1,86 @@
+.wallets-identity-card-document-upload {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2.4rem;
+    padding: 2.4rem;
+    width: fit-content;
+    background: var(--light-8-primary-background, #fff);
+
+    @include mobile {
+        width: 100%;
+    }
+
+    &__document-section {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1.7rem;
+
+        @include mobile {
+            gap: 1.6rem;
+        }
+    }
+
+    &__dropzones {
+        width: 100%;
+        display: flex;
+        align-items: flex-start;
+        gap: 2.4rem;
+
+        @include mobile {
+            flex-direction: column;
+        }
+
+        &--left {
+            width: 100%;
+
+            & > .wallets-dropzone__container {
+                min-width: 33.5rem;
+            }
+
+            & > .wallets-dropzone {
+                padding: 4rem 4.7rem 4rem 3.9rem;
+            }
+        }
+
+        &--right {
+            width: 100%;
+
+            & > .wallets-dropzone__container {
+                min-width: 31rem;
+            }
+
+            & > .wallets-dropzone {
+                padding: 4rem 2.4rem;
+            }
+        }
+
+        & .wallets-dropzone__container {
+            height: 25rem;
+
+            @include mobile {
+                min-width: 100%;
+            }
+        }
+
+        & .wallets-dropzone {
+            @include mobile {
+                padding: 2rem;
+            }
+        }
+    }
+
+    &__input-group {
+        display: flex;
+        gap: 2.4rem;
+        padding-bottom: 2rem;
+        width: 100%;
+
+        @include mobile {
+            flex-direction: column;
+            gap: 1.6rem;
+        }
+    }
+}
diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.tsx b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.tsx
new file mode 100644
index 000000000000..770ec879ac58
--- /dev/null
+++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/IdentityCardDocumentUpload.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Divider, Dropzone, WalletText, WalletTextField } from '../../../../../../components';
+import IdentityCardBack from '../../../../../../public/images/accounts/document-back.svg';
+import IdentityCardFront from '../../../../../../public/images/accounts/identity-card-front.svg';
+import Calendar from '../../../../../../public/images/calendar.svg';
+import { DocumentRuleHints } from '../DocumentRuleHints';
+import './IdentityCardDocumentUpload.scss';
+
+const IdentityCardDocumentUpload = () => {
+    return (
+        <div className='wallets-identity-card-document-upload' data-testid='dt_passport-document-upload'>
+            <WalletText>First, enter your Identity card number and the expiry date.</WalletText>
+            <div className='wallets-identity-card-document-upload__input-group'>
+                <WalletTextField label='Identity card number*' maxWidth='100%' />
+                <WalletTextField
+                    label='Expiry date*'
+                    maxWidth='100%'
+                    renderRightIcon={() => <Calendar />}
+                    type='date'
+                />
+            </div>
+            <Divider />
+            <div className='wallets-identity-card-document-upload__document-section'>
+                <WalletText>Next, upload the front and back of your identity card.</WalletText>
+                <div className='wallets-identity-card-document-upload__dropzones'>
+                    <div className='wallets-identity-card-document-upload__dropzones--left'>
+                        <Dropzone
+                            buttonText='Drop file or click here to upload'
+                            description='Upload the front of your identity card.'
+                            fileFormats={['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'application/pdf']}
+                            icon={<IdentityCardFront />}
+                            maxSize={8388608}
+                        />
+                    </div>
+                    <div className='wallets-identity-card-document-upload__dropzones--right'>
+                        <Dropzone
+                            buttonText='Drop file or click here to upload'
+                            description='Upload the back of your identity card.'
+                            fileFormats={['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'application/pdf']}
+                            icon={<IdentityCardBack />}
+                            maxSize={8388608}
+                        />
+                    </div>
+                </div>
+                <DocumentRuleHints docType='identityCard' />
+            </div>
+        </div>
+    );
+};
+
+export default IdentityCardDocumentUpload;
diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/index.ts b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/index.ts
new file mode 100644
index 000000000000..e87b4691e064
--- /dev/null
+++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/IdentityCardDocumentUpload/index.ts
@@ -0,0 +1 @@
+export { default as IdentityCardDocumentUpload } from './IdentityCardDocumentUpload';
diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.scss b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.scss
index 8508e6e7563c..d87912f42d26 100644
--- a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.scss
+++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.scss
@@ -3,7 +3,13 @@
     flex-direction: column;
     align-items: flex-start;
     gap: 2.4rem;
+    padding: 2.4rem;
     width: fit-content;
+    background: var(--light-8-primary-background, #fff);
+
+    @include mobile {
+        width: 100%;
+    }
 
     &__document-section {
         display: flex;
@@ -11,6 +17,23 @@
         align-items: flex-start;
         gap: 1.7rem;
 
+        & > .wallets-dropzone__container {
+            height: 25rem;
+            min-width: 72.6rem;
+
+            @include mobile {
+                min-width: 100%;
+            }
+        }
+
+        & > .wallets-dropzone {
+            padding: 2.8rem 15.2rem 3.5rem;
+
+            @include mobile {
+                padding: 2.4rem 2.5rem 0.4rem;
+            }
+        }
+
         @include mobile {
             gap: 1.6rem;
         }
@@ -21,16 +44,10 @@
         gap: 2.4rem;
         padding-bottom: 2rem;
         width: 100%;
-    }
-
-    &__rules {
-        display: flex;
 
         @include mobile {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            column-gap: 2.4rem;
-            row-gap: 0.8rem;
+            flex-direction: column;
+            gap: 1.6rem;
         }
     }
 }
diff --git a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.tsx b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.tsx
index bf717478bd39..bd8d4cb77c91 100644
--- a/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.tsx
+++ b/packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/PassportDocumentUpload/PassportDocumentUpload.tsx
@@ -1,44 +1,23 @@
 import React from 'react';
 import { Dropzone } from '../../../../../../components';
 import { Divider, WalletText, WalletTextField } from '../../../../../../components/Base';
-import useDevice from '../../../../../../hooks/useDevice';
-import ClearPhoto from '../../../../../../public/images/accounts/clear-photo.svg';
-import ClockIcon from '../../../../../../public/images/accounts/clock-icon.svg';
-import ImageIcon from '../../../../../../public/images/accounts/image-icon.svg';
-import LessThanEightIcon from '../../../../../../public/images/accounts/less-than-eight-icon.svg';
 import PassportPlaceholder from '../../../../../../public/images/accounts/passport-placeholder.svg';
 import Calendar from '../../../../../../public/images/calendar.svg';
-import { DocumentRuleHint } from '../DocumentRuleHint';
+import { DocumentRuleHints } from '../DocumentRuleHints';
 import './PassportDocumentUpload.scss';
 
-const documentRules = [
-    {
-        description: 'A clear colour photo or scanned image',
-        icon: <ClearPhoto />,
-    },
-    {
-        description: 'JPEG, JPG, PNG, PDF, or GIF',
-        icon: <ImageIcon />,
-    },
-    {
-        description: 'Less than 8MB',
-        icon: <LessThanEightIcon />,
-    },
-    {
-        description: 'Must be valid for at least 6 months',
-        icon: <ClockIcon />,
-    },
-];
-
 const PassportDocumentUpload = () => {
-    const { isDesktop } = useDevice();
-
     return (
         <div className='wallets-passport-document-upload' data-testid='dt_passport-document-upload'>
             <WalletText>First, enter your Passport number and the expiry date.</WalletText>
             <div className='wallets-passport-document-upload__input-group'>
-                <WalletTextField label='Passport number*' />
-                <WalletTextField label='Expiry date*' renderRightIcon={() => <Calendar />} type='date' />
+                <WalletTextField label='Passport number*' maxWidth='100%' />
+                <WalletTextField
+                    label='Expiry date*'
+                    maxWidth='100%'
+                    renderRightIcon={() => <Calendar />}
+                    type='date'
+                />
             </div>
             <Divider />
             <div className='wallets-passport-document-upload__document-section'>
@@ -47,16 +26,10 @@ const PassportDocumentUpload = () => {
                     buttonText='Drop file or click here to upload'
                     description='Upload the page of your passport that contains your photo.'
                     fileFormats={['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'application/pdf']}
-                    height='25rem'
                     icon={<PassportPlaceholder />}
                     maxSize={8388608}
-                    minWidth={isDesktop ? '72.6rem' : '100%'}
                 />
-                <div className='wallets-passport-document-upload__rules'>
-                    {documentRules.map((rule, idx) => (
-                        <DocumentRuleHint key={`document-rule-hint-${idx}`} {...rule} />
-                    ))}
-                </div>
+                <DocumentRuleHints docType='passport' />
             </div>
         </div>
     );
diff --git a/packages/wallets/src/public/images/accounts/document-back.svg b/packages/wallets/src/public/images/accounts/document-back.svg
new file mode 100644
index 000000000000..0f4258994d0f
--- /dev/null
+++ b/packages/wallets/src/public/images/accounts/document-back.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="130" height="80" viewBox="0 0 130 80" fill="none">
+  <path d="M120.692 1H9.30832C4.71976 1 1 4.13024 1 7.9916V72.0084C1 75.8698 4.71976 79 9.30832 79H120.692C125.28 79 129 75.8698 129 72.0084V7.9916C129 4.13024 125.28 1 120.692 1Z" fill="white" stroke="#F2F2F2" stroke-width="0.5"/>
+  <rect x="1" y="9" width="128" height="17" rx="2" fill="#84ABAE"/>
+  <rect x="66" y="38" width="54" height="6" rx="2" fill="#F2F2F2"/>
+  <rect x="66" y="49" width="54" height="6" rx="2" fill="#F2F2F2"/>
+  <rect x="66" y="60" width="54" height="6" rx="2" fill="#F2F2F2"/>
+  <rect x="10" y="40" width="47" height="27" rx="4" fill="#F2F2F2"/>
+</svg>
\ No newline at end of file
diff --git a/packages/wallets/src/public/images/accounts/identity-card-front.svg b/packages/wallets/src/public/images/accounts/identity-card-front.svg
new file mode 100644
index 000000000000..0721f96c3bf7
--- /dev/null
+++ b/packages/wallets/src/public/images/accounts/identity-card-front.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="130" height="80" viewBox="0 0 130 80" fill="none">
+  <path d="M120.692 1H9.30832C4.71976 1 1 4.13024 1 7.9916V72.0084C1 75.8698 4.71976 79 9.30832 79H120.692C125.28 79 129 75.8698 129 72.0084V7.9916C129 4.13024 125.28 1 120.692 1Z" fill="white" stroke="#F2F2F2" stroke-width="0.5"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M120.171 27.9462V66.9098C120.171 69.484 117.691 71.5709 114.632 71.5709H79.365C76.306 71.5709 73.8262 69.484 73.8262 66.9098V27.9462C73.8262 25.372 76.306 23.2852 79.365 23.2852H114.632C117.691 23.2852 120.171 25.372 120.171 27.9462Z" fill="#F2F2F2"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M88.3922 57.0234H105.606C108.775 57.0234 111.344 59.1021 111.344 61.6663V65.9996H82.6543V61.6663C82.6543 59.1021 85.2233 57.0234 88.3922 57.0234Z" fill="#84ABAE"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M90.7441 57.0234L92.2154 61.9758L95.8936 59.4996L95.1579 57.0234H90.7441Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M103.989 57.0234L102.518 61.9758L98.8398 59.4996L99.5755 57.0234H103.989Z" fill="white"/>
+  <path d="M106.93 46.4996C106.93 49.7119 104.694 52.4846 101.46 53.7752L101.781 57.0234L97.8872 60.3C97.6 60.5417 97.1342 60.5417 96.8469 60.3L92.9533 57.0234L93.2744 53.7752C90.0403 52.4846 87.8039 49.7119 87.8039 46.4996V45.2615H86.3326C85.52 45.2615 84.8613 44.7072 84.8613 44.0234V42.1663C84.8613 41.4825 85.52 40.9282 86.3326 40.9282H87.8039V39.0711C87.8039 34.6265 92.0855 31.0234 97.3671 31.0234C102.649 31.0234 106.93 34.6265 106.93 39.0711V40.9282H108.402C109.214 40.9282 109.873 41.4825 109.873 42.1663V44.0234C109.873 44.7072 109.214 45.2615 108.402 45.2615H106.93V46.4996Z" fill="#C7E5E5"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M105.093 32.8813C107.79 35.3574 108.403 38.4527 106.932 42.167V43.7146C106.932 43.8855 106.767 44.0241 106.564 44.0241C106.361 44.0241 106.196 43.8855 106.196 43.7146L106.195 41.4982C105.117 40.5409 104.631 40.152 103.254 37.8336C100.7 39.0717 97.8799 39.6908 94.7939 39.6908C93.8131 39.6908 92.2192 39.4844 90.0123 39.0717C89.4596 40.1879 88.9693 40.9058 88.5412 41.2253L88.541 43.7146C88.541 43.8855 88.3764 44.0241 88.1732 44.0241C87.9701 44.0241 87.8054 43.8855 87.8054 43.7146L87.806 41.3549C87.6003 41.2475 87.4162 41.0023 87.2537 40.6194C86.3341 38.4527 86.7019 33.8098 90.0123 31.6432C93.3226 29.4765 101.047 29.167 105.093 32.8813Z" fill="#84ABAE"/>
+  <path d="M58.1928 47.4277H12.222C10.8999 47.4277 9.82812 48.3297 9.82812 49.4423V50.9846C9.82812 52.0972 10.8999 52.9992 12.222 52.9992H58.1928C59.5149 52.9992 60.5867 52.0972 60.5867 50.9846V49.4423C60.5867 48.3297 59.5149 47.4277 58.1928 47.4277Z" fill="#E3E4E3"/>
+  <path d="M58.1928 58.5723H12.222C10.8999 58.5723 9.82812 59.4742 9.82812 60.5868V62.1292C9.82812 63.2418 10.8999 64.1437 12.222 64.1437H58.1928C59.515 64.1437 60.5867 63.2418 60.5867 62.1292V60.5868C60.5867 59.4742 59.515 58.5723 58.1928 58.5723Z" fill="#E3E4E3"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.4143 29.7852H13.6902C11.5606 29.7852 9.82812 31.2034 9.82812 32.9467V38.695C9.82812 40.4384 11.5606 41.8566 13.6902 41.8566H21.4143C23.5439 41.8566 25.2764 40.4384 25.2764 38.695V32.9467C25.2764 31.2034 23.5438 29.7852 21.4143 29.7852ZM23.1698 36.6831H21.0632V35.246C21.0632 35.0876 21.2208 34.9586 21.4143 34.9586H23.1698V36.6831ZM23.1698 32.9467V33.2341H21.4143C20.0592 33.2341 18.9567 34.1367 18.9567 35.246V40.1321H16.1479V31.5096H21.4143C22.3824 31.5096 23.1698 32.1543 23.1698 32.9467ZM11.9347 34.9586H14.0413V36.6831H11.9347V34.9586ZM13.6902 31.5096H14.0413V33.2341H11.9347V32.9467C11.9347 32.1543 12.7221 31.5096 13.6902 31.5096ZM11.9347 38.695V38.4076H14.0413V40.1321H13.6902C12.7221 40.1321 11.9347 39.4874 11.9347 38.695ZM21.4143 40.1321H21.0632V38.4076H23.1698V38.695C23.1698 39.4874 22.3824 40.1321 21.4143 40.1321Z" fill="#84ABAE"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.72414 1H121.276C125.542 1 129 3.91015 129 7.5V15.8571H1V7.5C1 3.91015 4.45821 1 8.72414 1Z" fill="#84ABAE"/>
+</svg>
\ No newline at end of file