diff --git a/.eslintrc.js b/.eslintrc.js
index 9d3a3d331..b767014c6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -34,6 +34,7 @@ module.exports = {
     'jsx-a11y/no-noninteractive-element-interactions': 'off',
     'react/require-default-props': 'off',
     'arrow-body-style': ['error', 'as-needed'],
+    'react/react-in-jsx-scope': 'off',
   },
   overrides: [
     {
@@ -42,7 +43,6 @@ module.exports = {
         '@typescript-eslint/explicit-module-boundary-types': 0, // should only be used once file is renamed to actual typescript
         'no-shadow': 'off', // https://stackoverflow.com/questions/63961803/eslint-says-all-enums-in-typescript-app-are-already-declared-in-the-upper-scope
         '@typescript-eslint/no-shadow': ['error'],
-        'react/react-in-jsx-scope': 'off',
       },
     },
     {
diff --git a/src/components/_variables.scss b/src/components/_variables.scss
index a14c90ffe..d63c32a7b 100644
--- a/src/components/_variables.scss
+++ b/src/components/_variables.scss
@@ -22,12 +22,12 @@ $blue: #0081ee;
 $navy-blue: #002f63;
 $blue-light: #00aeea;
 $very-light-blue: #edf7fe;
-$blue-washed: #ebf7ff;
+$blue-washed: #ebf6fe;
 $orange: #ff4800;
 $yellow: #fce228;
 $yellow-dark: #ffc107;
 $green: #078c28;
-$red: #DC3545;
+$red: #dc3545;
 $gray-mid: #d8d8d8;
 $gray-washed: #fafafa;
 $very-light-gray: rgba(48, 48, 48, 0.32);
diff --git a/src/components/flows/partner/PartnerSecondPillarFlow.test.tsx b/src/components/flows/partner/PartnerSecondPillarFlow.test.tsx
index a5fc90716..843332cb3 100644
--- a/src/components/flows/partner/PartnerSecondPillarFlow.test.tsx
+++ b/src/components/flows/partner/PartnerSecondPillarFlow.test.tsx
@@ -82,9 +82,7 @@ describe('partner 2nd pillar flow', () => {
 
     userEvent.click(nextButton());
 
-    const selectionSentence = await screen.findByText(
-      /I wish to transfer future fund payments to:/i,
-    );
+    const selectionSentence = await screen.findByText(/I transfer future fund payments to:/i);
     expect(
       within(selectionSentence).getByText('Tuleva World Stocks Pension Fund'),
     ).toBeInTheDocument();
@@ -122,9 +120,7 @@ describe('partner 2nd pillar flow', () => {
 
     userEvent.click(nextButton());
 
-    const selectionSentence = await screen.findByText(
-      /I wish to transfer future fund payments to:/i,
-    );
+    const selectionSentence = await screen.findByText(/I transfer future fund payments to:/i);
     expect(
       within(selectionSentence).getByText('Tuleva World Bonds Pension Fund'),
     ).toBeInTheDocument();
@@ -193,9 +189,7 @@ describe('partner 2nd pillar flow', () => {
 
     userEvent.click(nextButton());
 
-    const selectionSentence = await screen.findByText(
-      /I wish to transfer future fund payments to:/i,
-    );
+    const selectionSentence = await screen.findByText(/I transfer future fund payments to:/i);
     expect(
       within(selectionSentence).getByText('Tuleva World Stocks Pension Fund'),
     ).toBeInTheDocument();
diff --git a/src/components/flows/secondPillar/SecondPillarFlow.test.tsx b/src/components/flows/secondPillar/SecondPillarFlow.test.tsx
index 0d1d3f077..d1b721780 100644
--- a/src/components/flows/secondPillar/SecondPillarFlow.test.tsx
+++ b/src/components/flows/secondPillar/SecondPillarFlow.test.tsx
@@ -60,9 +60,7 @@ describe('2nd pillar flow', () => {
 
     userEvent.click(nextButton());
 
-    const selectionSentence = await screen.findByText(
-      /I wish to transfer future fund payments to:/i,
-    );
+    const selectionSentence = await screen.findByText(/I transfer future fund payments to/i);
     expect(
       within(selectionSentence).getByText('Tuleva World Stocks Pension Fund'),
     ).toBeInTheDocument();
@@ -100,9 +98,7 @@ describe('2nd pillar flow', () => {
 
     userEvent.click(nextButton());
 
-    const selectionSentence = await screen.findByText(
-      /I wish to transfer future fund payments to:/i,
-    );
+    const selectionSentence = await screen.findByText(/I transfer future fund payments to/i);
     expect(
       within(selectionSentence).getByText('Tuleva World Bonds Pension Fund'),
     ).toBeInTheDocument();
@@ -171,9 +167,7 @@ describe('2nd pillar flow', () => {
 
     userEvent.click(nextButton());
 
-    const selectionSentence = await screen.findByText(
-      /I wish to transfer future fund payments to:/i,
-    );
+    const selectionSentence = await screen.findByText(/I transfer future fund payments to/i);
     expect(
       within(selectionSentence).getByText('Tuleva World Stocks Pension Fund'),
     ).toBeInTheDocument();
diff --git a/src/components/flows/secondPillar/confirmMandate/ConfirmMandate.js b/src/components/flows/secondPillar/confirmMandate/ConfirmMandate.js
index 17e30f4c3..a8236c789 100644
--- a/src/components/flows/secondPillar/confirmMandate/ConfirmMandate.js
+++ b/src/components/flows/secondPillar/confirmMandate/ConfirmMandate.js
@@ -16,7 +16,7 @@ import {
 } from '../../../exchange/actions';
 
 import MandateNotFilledAlert from './mandateNotFilledAlert';
-import FundTransferTable from './fundTransferTable';
+import { FundTransferTable } from './fundTransferTable/FundTransferTable';
 import './ConfirmMandate.scss';
 import { hasAddress as isAddressFilled } from '../../../common/user/address';
 
@@ -155,24 +155,24 @@ export const ConfirmMandate = ({
       )}
 
       <FormattedMessage id="confirm.mandate.intro" />
-      {selectedFutureContributionsFund ? (
+      {aggregatedSelections.length ? (
         <div className="mt-4">
-          <FormattedMessage id="confirm.mandate.future.contribution" />
-          <b className="highlight">{selectedFutureContributionsFund.name}</b>
+          <FundTransferTable selections={aggregatedSelectionsWithNames} />
         </div>
       ) : (
         ''
       )}
-      {aggregatedSelections.length ? (
-        <div className="mt-4">
-          <FormattedMessage id="confirm.mandate.switch.sources" />
-          <div className="mt-4">
-            <FundTransferTable selections={aggregatedSelectionsWithNames} />
-          </div>
+      {selectedFutureContributionsFund ? (
+        <div className="mt-2 p-3 fund-selections-container d-flex flex-column justify-content-between">
+          <FormattedMessage id="confirm.mandate.future.contribution" />
+          <b>
+            <span className="highlight">{selectedFutureContributionsFund.name}</span>
+          </b>
         </div>
       ) : (
         ''
       )}
+
       <div className="mt-5">
         <div className="custom-control custom-checkbox">
           <input
diff --git a/src/components/flows/secondPillar/confirmMandate/ConfirmMandate.spec.js b/src/components/flows/secondPillar/confirmMandate/ConfirmMandate.spec.js
index 69c9ff262..074df9dc0 100644
--- a/src/components/flows/secondPillar/confirmMandate/ConfirmMandate.spec.js
+++ b/src/components/flows/secondPillar/confirmMandate/ConfirmMandate.spec.js
@@ -4,7 +4,7 @@ import { shallow } from 'enzyme';
 import { Link, Redirect } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { ConfirmMandate } from './ConfirmMandate';
-import FundTransferTable from './fundTransferTable';
+import { FundTransferTable } from './fundTransferTable/FundTransferTable';
 import MandateNotFilledAlert from './mandateNotFilledAlert';
 import { Loader, AuthenticationLoader, ErrorMessage } from '../../../common';
 
@@ -68,14 +68,7 @@ describe('Confirm mandate step', () => {
     };
     const selectedFutureContributionsFund = { name: 'test name' };
     component.setProps({ exchange, selectedFutureContributionsFund });
-    expect(
-      component.contains(
-        <div className="mt-4">
-          <FormattedMessage id="confirm.mandate.future.contribution" />
-          <b className="highlight">test name</b>
-        </div>,
-      ),
-    ).toBe(true);
+    expect(component.contains('test name')).toBe(true);
     exchange.selectedFutureContributionsFundIsin = null;
     component.setProps({ exchange, selectedFutureContributionsFund: null });
     expect(component.contains(<FormattedMessage id="confirm.mandate.future.contribution" />)).toBe(
@@ -152,7 +145,6 @@ describe('Confirm mandate step', () => {
         targetFundName: 'd',
       },
     ]);
-    expect(component.contains(<FormattedMessage id="confirm.mandate.switch.sources" />)).toBe(true);
   });
 
   it('aggregates selections for showing funds', () => {
diff --git a/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.js b/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.js
deleted file mode 100644
index 0a7097c0f..000000000
--- a/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/* eslint-disable react/no-array-index-key */
-import React from 'react';
-import { PropTypes as Types } from 'prop-types';
-import './FundTransferTable.scss';
-
-import { FormattedMessage } from 'react-intl';
-
-const FundTransferTable = ({ selections }) => (
-  <div>
-    <div className="row tv-table__header py-2">
-      <div className="col-12 col-sm">
-        <FormattedMessage id="confirm.mandate.current.fund" />
-      </div>
-      <div className="col-12 col-sm">
-        <FormattedMessage id="confirm.mandate.future.fund" />
-      </div>
-      <div className="col-12 col-sm-2">
-        <FormattedMessage id="confirm.mandate.percentage" />
-      </div>
-    </div>
-    {selections.map((selection, index) => (
-      <div className="row tv-table__row py-2" key={index}>
-        <div className="col-12 col-sm">{selection.sourceFundName}</div>
-        <div className="col-12 col-sm">
-          <b className="highlight">{selection.targetFundName}</b>
-        </div>
-        <div className="col-12 col-sm-2">{selection.percentage * 100}%</div>
-      </div>
-    ))}
-  </div>
-);
-
-FundTransferTable.defaultProps = {
-  selections: [],
-};
-
-FundTransferTable.propTypes = {
-  selections: Types.arrayOf(
-    Types.shape({
-      sourceFundIsin: Types.string,
-      sourceFundName: Types.string,
-      targetFundIsin: Types.string,
-      percentage: Types.number,
-    }),
-  ),
-};
-
-export default FundTransferTable;
diff --git a/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.scss b/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.scss
index 89a65c1b7..575209662 100644
--- a/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.scss
+++ b/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.scss
@@ -15,3 +15,18 @@
   border-bottom-style: solid;
   border-color: $gray-mid;
 }
+
+.fund-selections-container {
+  background-color: $blue-washed;
+  border-radius: 8px;
+}
+
+.fund-selections-current-fund {
+  flex-basis: 40%;
+  flex-shrink: 0;
+}
+
+.fund-selection-divider {
+  width: calc(100% - 2rem);
+  border-bottom: 1px solid #cae0f1;
+}
diff --git a/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.spec.js b/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.spec.js
deleted file mode 100644
index 3b747defb..000000000
--- a/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.spec.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { FormattedMessage } from 'react-intl';
-import FundTransferTable from './FundTransferTable';
-
-describe('Fund transfer table', () => {
-  let component;
-
-  beforeEach(() => {
-    component = shallow(<FundTransferTable />);
-  });
-
-  it('renders a header', () => {
-    expect(
-      component.contains(
-        <div className="row tv-table__header py-2">
-          <div className="col-12 col-sm">
-            <FormattedMessage id="confirm.mandate.current.fund" />
-          </div>
-          <div className="col-12 col-sm">
-            <FormattedMessage id="confirm.mandate.future.fund" />
-          </div>
-          <div className="col-12 col-sm-2">
-            <FormattedMessage id="confirm.mandate.percentage" />
-          </div>
-        </div>,
-      ),
-    ).toBe(true);
-  });
-
-  it('renders an exchange row for every selection', () => {
-    const selections = [
-      {
-        percentage: 0.5,
-        sourceFundIsin: 'source 1',
-        targetFundIsin: 'target 1',
-        sourceFundName: 'a',
-        targetFundName: 'c',
-      },
-      {
-        percentage: 1,
-        sourceFundIsin: 'source 2',
-        targetFundIsin: 'target 2',
-        sourceFundName: 'b',
-        targetFundName: 'd',
-      },
-    ];
-    component.setProps({ selections });
-    selections.forEach((selection) =>
-      expect(
-        component.contains(
-          <div className="row tv-table__row py-2">
-            <div className="col-12 col-sm">{selection.sourceFundName}</div>
-            <div className="col-12 col-sm">
-              <b className="highlight">{selection.targetFundName}</b>
-            </div>
-            <div className="col-12 col-sm-2">{selection.percentage * 100}%</div>
-          </div>,
-        ),
-      ).toBe(true),
-    );
-  });
-});
diff --git a/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.tsx b/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.tsx
new file mode 100644
index 000000000..90a572946
--- /dev/null
+++ b/src/components/flows/secondPillar/confirmMandate/fundTransferTable/FundTransferTable.tsx
@@ -0,0 +1,49 @@
+import './FundTransferTable.scss';
+import { PropsWithChildren } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+type Props = {
+  selections: {
+    sourceFundIsin: string;
+    sourceFundName: string;
+    targetFundName: string;
+    targetFundIsin: string;
+    percentage: number;
+  }[];
+};
+
+export const FundTransferTable = ({ selections = [] }: Props) => (
+  <div className="fund-selections-container">
+    <div className="pt-3 px-3">
+      <FormattedMessage id="confirm.mandate.transferExisting" />
+    </div>
+    {selections.map((selection, index) => (
+      <div key={index}>
+        <div className="px-3 pb-3 d-flex flex-column flex-md-row justify-content-between">
+          <TransferDataPoint className="flex-grow-0 flex-shrink-0 fund-selections-current-fund">
+            <FormattedMessage id="confirm.mandate.current.fund" />
+            <b>{selection.sourceFundName}</b>
+          </TransferDataPoint>
+          <TransferDataPoint className="flex-grow-1">
+            <FormattedMessage id="confirm.mandate.future.fund" />
+            <b>
+              <span className="highlight">{selection.targetFundName}</span>
+            </b>
+          </TransferDataPoint>
+          <TransferDataPoint className="flex-grow-0 flex-shrink-0">
+            <FormattedMessage id="confirm.mandate.percentage" />
+            <b>{selection.percentage * 100}%</b>
+          </TransferDataPoint>
+        </div>
+
+        {selections.length > 1 && index !== selections.length - 1 && (
+          <div className="fund-selection-divider ml-3" />
+        )}
+      </div>
+    ))}
+  </div>
+);
+
+const TransferDataPoint = ({ children, className }: PropsWithChildren<{ className?: string }>) => (
+  <div className={`pt-3 d-flex flex-column justify-start ${className ?? ''}`}>{children}</div>
+);
diff --git a/src/components/flows/secondPillar/confirmMandate/fundTransferTable/index.js b/src/components/flows/secondPillar/confirmMandate/fundTransferTable/index.js
deleted file mode 100644
index 021e4a3b0..000000000
--- a/src/components/flows/secondPillar/confirmMandate/fundTransferTable/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import FundTransferTable from './FundTransferTable';
-
-export default FundTransferTable;
diff --git a/src/components/flows/thirdPillar/ConfirmThirdPillarMandate/ConfirmThirdPillarMandate.js b/src/components/flows/thirdPillar/ConfirmThirdPillarMandate/ConfirmThirdPillarMandate.js
index d031fca21..08deb0b7e 100644
--- a/src/components/flows/thirdPillar/ConfirmThirdPillarMandate/ConfirmThirdPillarMandate.js
+++ b/src/components/flows/thirdPillar/ConfirmThirdPillarMandate/ConfirmThirdPillarMandate.js
@@ -9,7 +9,7 @@ import { FormattedMessage } from 'react-intl';
 import ThirdPillarTermsAgreement from './ThirdPillarTermsAgreement';
 import PoliticallyExposedPersonAgreement from '../../../aml/PoliticallyExposedPersonAgreement';
 import { actions as exchangeActions } from '../../../exchange';
-import FundTransferTable from '../../secondPillar/confirmMandate/fundTransferTable';
+import { FundTransferTable } from '../../secondPillar/confirmMandate/fundTransferTable/FundTransferTable';
 import ResidencyAgreement from '../../../aml/ResidencyAgreement';
 import { AuthenticationLoader, ErrorMessage, Loader } from '../../../common';
 import { hasAddress as isAddressFilled } from '../../../common/user/address';
diff --git a/src/components/flows/thirdPillar/ConfirmThirdPillarMandate/ConfirmThirdPillarMandate.spec.js b/src/components/flows/thirdPillar/ConfirmThirdPillarMandate/ConfirmThirdPillarMandate.spec.js
index a2d3e62df..b6b88b9c5 100644
--- a/src/components/flows/thirdPillar/ConfirmThirdPillarMandate/ConfirmThirdPillarMandate.spec.js
+++ b/src/components/flows/thirdPillar/ConfirmThirdPillarMandate/ConfirmThirdPillarMandate.spec.js
@@ -4,7 +4,7 @@ import { shallow } from 'enzyme';
 
 import { FormattedMessage } from 'react-intl';
 import { ConfirmThirdPillarMandate } from './ConfirmThirdPillarMandate';
-import FundTransferTable from '../../secondPillar/confirmMandate/fundTransferTable';
+import { FundTransferTable } from '../../secondPillar/confirmMandate/fundTransferTable/FundTransferTable';
 import { AuthenticationLoader, Loader } from '../../../common';
 
 describe('ConfirmThirdPillarMandate', () => {
diff --git a/src/components/translations/translations.en.json b/src/components/translations/translations.en.json
index 6c3f96156..e70f66505 100644
--- a/src/components/translations/translations.en.json
+++ b/src/components/translations/translations.en.json
@@ -134,11 +134,12 @@
   "transfer.future.capital.no.subtitle": "Your pension fund contributions will continue to be directed into  {currentFundName} pension fund, with a management fee of {currentFundManagementFee}% per year. If you wish to save money on fees, you can direct your contributions to Tuleva at a later date.",
   "transfer.future.capital.no.already.converted.subtitle": "Your pension fund contributions will continue to be directed into  {currentFundName} pension fund, with a management fee of {currentFundManagementFee}% per year.",
   "confirm.mandate.intro": "By signing I confirm that:",
-  "confirm.mandate.future.contribution": " I wish to transfer future fund payments to: ",
+  "confirm.mandate.transferExisting": "I transfer my existing fund units:",
+  "confirm.mandate.future.contribution": " I transfer future fund payments to: ",
   "confirm.mandate.switch.sources": "I wish to exchange current fund units for:",
-  "confirm.mandate.current.fund": "Current pension fund",
+  "confirm.mandate.current.fund": "Current fund",
   "confirm.mandate.percentage": "Percent",
-  "confirm.mandate.future.fund": "New pension fund",
+  "confirm.mandate.future.fund": "New fund",
   "confirm.mandate.sign": "Sign and send mandate",
   "confirm.mandate.preview": "Preview",
   "confirm.mandate.back": "Go back",
diff --git a/src/components/translations/translations.et.json b/src/components/translations/translations.et.json
index 8e9092824..084d1e53b 100644
--- a/src/components/translations/translations.et.json
+++ b/src/components/translations/translations.et.json
@@ -131,12 +131,15 @@
   "transfer.future.capital.no": "Ei soovi muuta",
   "transfer.future.capital.no.subtitle": "Sinu pensionimaksed lähevad ka edaspidi {currentFundName} pensionifondi, mille valitsemistasu on {currentFundManagementFee}% aastas. Kui soovid teenustasudelt säästa, saad oma maksed ka hiljem Tulevasse ümber suunata.",
   "transfer.future.capital.no.already.converted.subtitle": "Sinu pensionimaksed lähevad ka edaspidi {currentFundName}.",
-  "confirm.mandate.intro": "Avaldust allkirjastades kinnitad, et:",
-  "confirm.mandate.future.contribution": "sinu edasised sissemaksed hakkavad laekuma fondi: ",
+  "confirm.mandate.intro": "Avaldust allkirjastades kinnitan:",
+
+  "confirm.mandate.transferExisting": "Toon üle seni kogutud vara:",
+
+  "confirm.mandate.future.contribution": "Suunan edasised sissemaksed fondi: ",
   "confirm.mandate.switch.sources": "ning soovid vahetada olemasolevad osakud järgmiselt:",
-  "confirm.mandate.current.fund": "Praegune pensionifond",
+  "confirm.mandate.current.fund": "Praegune fond",
   "confirm.mandate.percentage": "Ületoodav osa",
-  "confirm.mandate.future.fund": "Uus pensionifond",
+  "confirm.mandate.future.fund": "Uus fond",
   "confirm.mandate.sign": "Allkirjasta ja saada",
   "confirm.mandate.preview": "Eelvaade",
   "confirm.mandate.back": "Algusesse tagasi",