diff --git a/src/core_modules/capture-core/components/CardList/CardListItem.component.js b/src/core_modules/capture-core/components/CardList/CardListItem.component.js
index a1fe4bc5d1..d411d1a933 100644
--- a/src/core_modules/capture-core/components/CardList/CardListItem.component.js
+++ b/src/core_modules/capture-core/components/CardList/CardListItem.component.js
@@ -3,7 +3,7 @@ import i18n from '@dhis2/d2-i18n';
 import React from 'react';
 import moment from 'moment';
 import type { ComponentType } from 'react';
-import { Grid, withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/core';
 import { colors, Tag, IconCheckmark16, Tooltip } from '@dhis2/ui';
 import { useTimeZoneConversion } from '@dhis2/app-runtime';
 import { CardImage } from '../../../capture-ui/CardImage/CardImage.component';
@@ -18,21 +18,20 @@ import { dataElementTypes, getTrackerProgramThrowIfNotFound } from '../../metaDa
 import { useOrgUnitName } from '../../metadataRetrieval/orgUnitName';
 import type { ListItem, RenderCustomCardActions } from './CardList.types';
 
-
 type OwnProps = $ReadOnly<{|
     item: ListItem,
-    currentSearchScopeName?: string,
-    currentProgramId?: string,
-    currentSearchScopeType?: string,
-    renderCustomCardActions?: RenderCustomCardActions,
-    profileImageDataElement: ?CardProfileImageElementInformation,
-    dataElements: CardDataElementsInformation,
+        currentSearchScopeName ?: string,
+        currentProgramId ?: string,
+        currentSearchScopeType ?: string,
+        renderCustomCardActions ?: RenderCustomCardActions,
+        profileImageDataElement: ?CardProfileImageElementInformation,
+            dataElements: CardDataElementsInformation,
 |}>;
 
 type Props = $ReadOnly<{|
     ...OwnProps,
     ...CssClasses
-|}>;
+    |}>;
 
 const getStyles = (theme: Theme) => ({
     itemContainer: {
@@ -44,6 +43,7 @@ const getStyles = (theme: Theme) => ({
         borderRadius: theme.typography.pxToRem(5),
         border: `1px solid ${colors.grey400}`,
         backgroundColor: colors.grey050,
+        position: 'relative',
     },
     itemDataContainer: {
         display: 'flex',
@@ -52,6 +52,9 @@ const getStyles = (theme: Theme) => ({
         fontSize: theme.typography.pxToRem(12),
         color: colors.grey700,
         paddingBottom: theme.typography.pxToRem(8),
+        position: 'absolute',
+        top: theme.typography.pxToRem(8),
+        right: theme.typography.pxToRem(8),
     },
     enrolled: {
         display: 'flex',
@@ -213,49 +216,39 @@ const CardListItemIndex = ({
     return (
         <div data-test="card-list-item" className={classes.itemContainer}>
             <div className={classes.itemDataContainer}>
-
                 <div className={classes.itemValuesContainer}>
-                    <Grid container >
-                        <Grid item>
-                            {renderImageDataElement(profileImageDataElement)}
-                        </Grid>
-                        <Grid item sm container>
-                            <Grid item xs container direction="column" >
-                                {dataElements
-                                    .map(({ id, name, type }) => (
-                                        <ListEntry
-                                            key={id}
-                                            name={name}
-                                            value={item.values[id]}
-                                            type={type}
-                                        />))
-                                }
-
-                                {renderEnrollmentDetails()}
-                            </Grid>
-                            <Grid item>
-                                {
-                                    item.tei && item.tei.updatedAt &&
-                                    <div className={classes.smallerLetters}>
-                                        { i18n.t('Last updated') } {' '}
-                                        { item.tei && <Tooltip content={fromServerDate(item.tei.updatedAt).toLocaleString()}>
-                                            { moment(fromServerDate(item.tei.updatedAt)).fromNow() }
-                                        </Tooltip>}
-                                    </div>
-                                }
-
-                                <div className={classes.enrolled}>
-                                    {renderTag()}
-                                </div>
-                            </Grid>
-                        </Grid>
-                    </Grid>
+                    {renderImageDataElement(profileImageDataElement)}
+                    <div>
+                        {dataElements
+                            .map(({ id, name, type }) => (
+                                <ListEntry
+                                    key={id}
+                                    name={name}
+                                    value={item.values[id]}
+                                    type={type}
+                                />
+                            ))
+                        }
+                        {renderEnrollmentDetails()}
+                    </div>
+                    <div>
+                        <div className={classes.enrolled}>
+                            {renderTag()}
+                        </div>
+                    </div>
                 </div>
             </div>
-
-            {
-                renderCustomCardActions
-                &&
+            {item.tei && item.tei.updatedAt && (
+                <div className={classes.smallerLetters}>
+                    {i18n.t('Last updated')}{' '}
+                    {item.tei && (
+                        <Tooltip content={fromServerDate(item.tei.updatedAt).toLocaleString()}>
+                            {moment(fromServerDate(item.tei.updatedAt)).fromNow()}
+                        </Tooltip>
+                    )}
+                </div>
+            )}
+            {renderCustomCardActions && (
                 <div className={classes.buttonMargin}>
                     {
                         renderCustomCardActions({
@@ -270,7 +263,7 @@ const CardListItemIndex = ({
                         })
                     }
                 </div>
-            }
+            )}
         </div>
     );
 };
diff --git a/src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js b/src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js
index aac6f17f94..6c206f72b6 100644
--- a/src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js
+++ b/src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import Paper from '@material-ui/core/Paper/Paper';
-import Grid from '@material-ui/core/Grid/Grid';
 import { withStyles } from '@material-ui/core';
 import { colors } from '@dhis2/ui';
 
@@ -15,15 +14,16 @@ const StyledPaper = withStyles({
     },
 })(Paper);
 
-export const IncompleteSelectionsMessage = ({ children, dataTest = 'informative-paper' }) => (
-    <Grid container justify="center">
-        <Grid item>
-            <StyledPaper
-                data-test={dataTest}
-                elevation={0}
-            >
-                {children}
-            </StyledPaper>
-        </Grid>
-    </Grid>);
+const containerStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%',
+};
 
+export const IncompleteSelectionsMessage = ({ children, dataTest = 'informative-paper' }) => (
+    <div style={containerStyle}>
+        <StyledPaper data-test={dataTest} elevation={0}>
+            {children}
+        </StyledPaper>
+    </div>
+);
diff --git a/src/core_modules/capture-core/components/InfoIconText/InfoIconText.js b/src/core_modules/capture-core/components/InfoIconText/InfoIconText.js
index 49b416c249..87be34ef5b 100644
--- a/src/core_modules/capture-core/components/InfoIconText/InfoIconText.js
+++ b/src/core_modules/capture-core/components/InfoIconText/InfoIconText.js
@@ -2,8 +2,6 @@
 import React, { type ComponentType, type Node } from 'react';
 import withStyles from '@material-ui/core/styles/withStyles';
 import { IconInfo16, colors } from '@dhis2/ui';
-import Grid from '@material-ui/core/Grid';
-
 
 type OwnProps = {| children: string | Node |}
 
@@ -15,6 +13,8 @@ const styles = () => ({
     container: {
         marginTop: 12,
         marginBottom: 12,
+        display: 'flex',
+        alignItems: 'center',
     },
     text: {
         fontSize: 14,
@@ -24,18 +24,15 @@ const styles = () => ({
     },
 });
 
-
 const InfoIconTextPlain = ({ classes, children }) => (
-    <Grid container direction="row" alignItems="center" className={classes.container}>
-        <Grid item>
-            <span className={classes.icon}>
-                <IconInfo16 color={colors.grey800} />
-            </span>
-        </Grid>
-        <Grid item className={classes.text}>
+    <div className={classes.container}>
+        <span className={classes.icon}>
+            <IconInfo16 color={colors.grey800} />
+        </span>
+        <span className={classes.text}>
             {children}
-        </Grid>
-    </Grid>
+        </span>
+    </div>
 );
 
 export const InfoIconText: ComponentType<OwnProps> = withStyles(styles)(InfoIconTextPlain);
diff --git a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js
index 511c2da3b7..d2e49fd3b5 100644
--- a/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js
+++ b/src/core_modules/capture-core/components/Pages/New/RegistrationDataEntry/RegistrationDataEntry.component.js
@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router';
 import i18n from '@dhis2/d2-i18n';
 import { Button, colors, spacers } from '@dhis2/ui';
-import { Grid, withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/core';
 import type { Props } from './RegistrationDataEntry.types';
 import { TeiRegistrationEntry, SingleEventRegistrationEntry } from '../../../DataEntries';
 import { scopeTypes } from '../../../../metaData';
@@ -42,6 +42,20 @@ const getStyles = ({ typography }) => ({
     marginBottom: {
         marginBottom: spacers.dp16,
     },
+    flexContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        flexWrap: 'wrap',
+    },
+    flexItem: {
+        flex: 1,
+        minWidth: '500px',
+    },
+    dataEntryReadyItem: {
+        minWidth: '300px',
+    },
 });
 
 const DialogButtons = ({ onCancel, onSave }) => (
@@ -167,8 +181,7 @@ const RegistrationDataEntryPlain = ({
                 </div>
             }
 
-            {
-                scopeType === scopeTypes.TRACKER_PROGRAM &&
+            {scopeType === scopeTypes.TRACKER_PROGRAM && (
                 <div className={classes.container}>
                     <div className={classes.title} >
                         {
@@ -183,45 +196,40 @@ const RegistrationDataEntryPlain = ({
                         }
                     </div>
 
-                    <div className={classes.registrationContainer}>
-                        <Grid container justify="space-between">
-                            <Grid item md sm={9} xs={9} >
-                                <EnrollmentRegistrationEntryWrapper
-                                    id={dataEntryId}
-                                    orgUnitId={currentOrgUnitId}
-                                    teiId={teiId}
-                                    selectedScopeId={selectedScopeId}
-                                    onSave={onSaveWithEnrollment}
-                                    onCancel={onCancel}
-                                    saveButtonText={(trackedEntityTypeNameLC: string) => i18n.t('Save {{trackedEntityTypeName}}', {
+                    <div className={classes.flexContainer}>
+                        <div className={classes.flexItem}>
+                            <EnrollmentRegistrationEntryWrapper
+                                id={dataEntryId}
+                                orgUnitId={currentOrgUnitId}
+                                teiId={teiId}
+                                selectedScopeId={selectedScopeId}
+                                onSave={onSaveWithEnrollment}
+                                onCancel={onCancel}
+                                saveButtonText={(trackedEntityTypeNameLC: string) =>
+                                    i18n.t('Save {{trackedEntityTypeName}}', {
                                         trackedEntityTypeName: trackedEntityTypeNameLC,
                                         interpolation: { escapeValue: false },
-                                    })}
-                                    duplicatesReviewPageSize={resultsPageSize}
-                                    renderDuplicatesDialogActions={renderDuplicatesDialogActions}
-                                    renderDuplicatesCardActions={renderDuplicatesCardActions}
-                                    ExistingUniqueValueDialogActions={ExistingUniqueValueDialogActions}
-                                    trackedEntityInstanceAttributes={trackedEntityInstanceAttributes}
+                                    })
+                                }
+                                duplicatesReviewPageSize={resultsPageSize}
+                                renderDuplicatesDialogActions={renderDuplicatesDialogActions}
+                                renderDuplicatesCardActions={renderDuplicatesCardActions}
+                                ExistingUniqueValueDialogActions={ExistingUniqueValueDialogActions}
+                                trackedEntityInstanceAttributes={trackedEntityInstanceAttributes}
+                            />
+                        </div>
+                        {dataEntryIsReady && (
+                            <div className={classes.dataEntryReadyItem}>
+                                <DataEntryWidgetOutput
+                                    selectedScopeId={selectedScopeId}
+                                    dataEntryId={dataEntryId}
                                 />
-                            </Grid>
-                            {
-                                dataEntryIsReady &&
-                                <Grid item>
-                                    <div className={classes.marginTop}>
-                                        <DataEntryWidgetOutput
-                                            selectedScopeId={selectedScopeId}
-                                            dataEntryId={dataEntryId}
-                                        />
-                                    </div>
-                                </Grid>
-                            }
-                        </Grid>
+                            </div>
+                        )}
                     </div>
                 </div>
-            }
-
-            {
-                scopeType === scopeTypes.TRACKED_ENTITY_TYPE &&
+            )}
+            {scopeType === scopeTypes.TRACKED_ENTITY_TYPE && (
                 <div className={classes.container}>
                     <div className={classes.title} >
                         {i18n.t('New {{titleText}}', {
@@ -238,40 +246,35 @@ const RegistrationDataEntryPlain = ({
                             accessNeeded="write"
                         />
                     </div>
-                    <div className={classes.registrationContainer}>
-                        <Grid container justify="space-between">
-                            <Grid item md sm={9} xs={9} >
-                                <TeiRegistrationEntry
-                                    id={dataEntryId}
+                    <div className={classes.flexContainer}>
+                        <div className={classes.flexItem}>
+                            <TeiRegistrationEntry
+                                id={dataEntryId}
+                                selectedScopeId={selectedScopeId}
+                                orgUnitId={currentOrgUnitId}
+                                onCancel={onCancel}
+                                saveButtonText={i18n.t('Save {{trackedEntityName}}', {
+                                    trackedEntityName,
+                                    interpolation: { escapeValue: false },
+                                })}
+                                onSave={onSaveWithoutEnrollment}
+                                duplicatesReviewPageSize={resultsPageSize}
+                                renderDuplicatesDialogActions={renderDuplicatesDialogActions}
+                                renderDuplicatesCardActions={renderDuplicatesCardActions}
+                                ExistingUniqueValueDialogActions={ExistingUniqueValueDialogActions}
+                            />
+                        </div>
+                        {dataEntryIsReady && (
+                            <div className={classes.dataEntryReadyItem}>
+                                <DataEntryWidgetOutput
                                     selectedScopeId={selectedScopeId}
-                                    orgUnitId={currentOrgUnitId}
-                                    onCancel={onCancel}
-                                    saveButtonText={i18n.t('Save {{trackedEntityName}}', {
-                                        trackedEntityName,
-                                        interpolation: { escapeValue: false },
-                                    })}
-                                    onSave={onSaveWithoutEnrollment}
-                                    duplicatesReviewPageSize={resultsPageSize}
-                                    renderDuplicatesDialogActions={renderDuplicatesDialogActions}
-                                    renderDuplicatesCardActions={renderDuplicatesCardActions}
-                                    ExistingUniqueValueDialogActions={ExistingUniqueValueDialogActions}
+                                    dataEntryId={dataEntryId}
                                 />
-                            </Grid>
-                            {
-                                dataEntryIsReady &&
-                                <Grid item>
-                                    <div className={classes.marginBottom}>
-                                        <DataEntryWidgetOutput
-                                            selectedScopeId={selectedScopeId}
-                                            dataEntryId={dataEntryId}
-                                        />
-                                    </div>
-                                </Grid>
-                            }
-                        </Grid>
+                            </div>
+                        )}
                     </div>
                 </div>
-            }
+            )}
 
             {
                 scopeType === scopeTypes.EVENT_PROGRAM && (