diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index c1db2c4..55d0ebf 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -42,7 +42,9 @@ module.exports = {
   plugins: ['react-refresh', '@typescript-eslint', 'react', 'prettier'],
   rules: {
     'react-refresh/only-export-components': 'warn',
+    'import/order': 'warn',
     'react/react-in-jsx-scope': 'off',
+    'react/jsx-curly-brace-presence': 'off',
     'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
     'import/extensions': [
       'error',
diff --git a/Dockerfile b/Dockerfile
index fa17e4d..3cddbb3 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -6,6 +6,7 @@ RUN yarn install
 RUN yarn build
 
 FROM nginx:1.25.1-alpine
+ARG client_max_body_size
 COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=build /app/dist /usr/share/nginx/html
 EXPOSE 80
diff --git a/docker-compose.yml b/docker-compose.yml
index f824401..f971586 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,6 +1,9 @@
 services:
   frontend:
-    build: ./credere-frontend/
+    build:
+      context: ./credere-frontend/
+      args:
+        VITE_MAX_FILE_SIZE_MB: ${VITE_MAX_FILE_SIZE_MB}
     environment:
       - VITE_APP_VERSION=${VITE_APP_VERSION}
       - VITE_API_URL=${VITE_API_URL}
@@ -32,9 +35,10 @@ services:
       - HASH_KEY=${HASH_KEY}
       - TEST_MAIL_RECEIVER=${TEST_MAIL_RECEIVER}
       - IMAGES_BASE_URL=${IMAGES_BASE_URL}
-      - IMAGES_LANG_SUBPATH=${IMAGES_LANG_SUBPATH}
+      - EMAIL_TEMPLATE_LANG=${EMAIL_TEMPLATE_LANG}
       - FACEBOOK_LINK=${FACEBOOK_LINK}
       - TWITTER_LINK=${TWITTER_LINK}
+      - SENTRY_DSN=${SENTRY_DSN}
       - LINK_LINK=${LINK_LINK}
       - OCP_EMAIL_GROUP=${OCP_EMAIL_GROUP}
       - APPLICATION_EXPIRATION_DAYS=${APPLICATION_EXPIRATION_DAYS}
@@ -44,6 +48,8 @@ services:
       - REMINDER_DAYS_BEFORE_EXPIRATION=${REMINDER_DAYS_BEFORE_EXPIRATION}
       - PROGRESS_TO_REMIND_STARTED_APPLICATIONS=${PROGRESS_TO_REMIND_STARTED_APPLICATIONS}
       - ENVIRONMENT=${ENVIRONMENT}
+      - TRANSIFEX_TOKEN=${TRANSIFEX_TOKEN}
+      - TRANSIFEX_SECRET=${TRANSIFEX_SECRET}
 
     extra_hosts:
       - 'host.docker.internal:host-gateway'
diff --git a/nginx/nginx.conf b/nginx/nginx.conf
index f65b1c0..ea84f61 100644
--- a/nginx/nginx.conf
+++ b/nginx/nginx.conf
@@ -1,6 +1,7 @@
 server {
   listen                          80;
   server_name                     frontend;
+  client_max_body_size            10M;
   location / {
     #                             This would be the directory where your React app's static files are stored at
     root                          /usr/share/nginx/html;
diff --git a/public/images/es/set_password.png b/public/images/es/set_password.png
new file mode 100644
index 0000000..659672c
Binary files /dev/null and b/public/images/es/set_password.png differ
diff --git a/src/api/private.ts b/src/api/private.ts
index fc982a1..614416c 100644
--- a/src/api/private.ts
+++ b/src/api/private.ts
@@ -132,6 +132,14 @@ export const downloadDocumentFn = async (id: number) => {
   return response.data;
 };
 
+export const downloadApplicationFn = async (id: number, lang: string) => {
+  const response = await authApi.get(`applications/${id}/download-application/${lang}`, {
+    responseType: 'blob',
+  });
+
+  return response.data;
+};
+
 export const emailToSME = async (emailToSMEPayload: EmailToSMEInput) => {
   const { application_id, ...payload } = emailToSMEPayload;
   const response = await authApi.post<IApplication>(`applications/email-sme/${application_id}`, payload);
diff --git a/src/components/ApplicationAwardTable.tsx b/src/components/ApplicationAwardTable.tsx
index 7b44ba7..0bab364 100644
--- a/src/components/ApplicationAwardTable.tsx
+++ b/src/components/ApplicationAwardTable.tsx
@@ -3,9 +3,10 @@ import { Paper, Table, TableBody, TableContainer, TableHead, TableRow } from '@m
 import { useT } from '@transifex/react';
 
 import useGetPreviousAwards from '../hooks/useGetPreviousAwards';
+import useLocalizedDateFormatter from '../hooks/useLocalizedDateFormatter';
 import useUpdateAward from '../hooks/useUpdateAward';
 import { IApplication, IUpdateAward } from '../schemas/application';
-import { formatCurrency, formatDateFromString, formatPaymentMethod } from '../util';
+import { formatCurrency, formatPaymentMethod } from '../util';
 import ApplicationTableDataAwardRow from './ApplicationTableDataAwardRow';
 import ApplicationTableDataPreviousAwardRow from './ApplicationTableDataPreviousAwardRow';
 import { DataTableHeadCell, DataTableHeadLabel } from './DataTable';
@@ -18,6 +19,7 @@ export interface ApplicationAwardTableProps {
 
 export function ApplicationAwardTable({ application, readonly = false, className }: ApplicationAwardTableProps) {
   const t = useT();
+  const { formatDateFromString } = useLocalizedDateFormatter();
   const { updateAwardMutation, isLoading } = useUpdateAward();
   const { data: previousAwards, isLoading: isLoadingPreviousAwards } = useGetPreviousAwards(application.id);
 
@@ -58,6 +60,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               name="title"
               label={t('Award Title')}
               award={award}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               isLoading={isLoading}
@@ -67,6 +70,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               name="contracting_process_id"
               label={t('Contracting Process ID')}
               award={award}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               isLoading={isLoading}
@@ -76,6 +80,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               name="description"
               label={t('Award Description')}
               award={award}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               type="date-field"
@@ -87,6 +92,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               label={t('Award Date')}
               award={award}
               formatter={formatDateFromString}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               type="currency"
@@ -99,6 +105,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               formLabel={t('Award Amount')}
               award={award}
               formatter={(value) => `${award.award_currency} ${formatCurrency(value, award.award_currency)}`}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               type="date-field"
@@ -110,6 +117,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               label={t('Contract Start Date')}
               award={award}
               formatter={formatDateFromString}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               type="date-field"
@@ -121,6 +129,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               label={t('Contract End Date')}
               award={award}
               formatter={formatDateFromString}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               preWhitespace
@@ -132,6 +141,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               label={t('Payment Method')}
               award={award}
               formatter={formatPaymentMethod}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               isLoading={isLoading}
@@ -141,6 +151,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               name="buyer_name"
               label={t('Buyer Name')}
               award={award}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               isLoading={isLoading}
@@ -150,6 +161,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               name="procurement_method"
               label={t('Procurement Method')}
               award={award}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataAwardRow
               isLoading={isLoading}
@@ -159,6 +171,7 @@ export function ApplicationAwardTable({ application, readonly = false, className
               name="procurement_category"
               label={t('Contract Type')}
               award={award}
+              modifiedFields={application.modified_data_fields?.award_updates}
             />
             <ApplicationTableDataPreviousAwardRow
               label={t('Previous Public Sector Contracts')}
diff --git a/src/components/ApplicationBorrowerTable.tsx b/src/components/ApplicationBorrowerTable.tsx
index c4ddba1..acf9804 100644
--- a/src/components/ApplicationBorrowerTable.tsx
+++ b/src/components/ApplicationBorrowerTable.tsx
@@ -76,6 +76,7 @@ export function ApplicationBorrowerTable({
               name="legal_name"
               label={t('Legal Name')}
               borrower={borrower}
+              modifiedFields={application.modified_data_fields?.borrower_updates}
             />
             <ApplicationTableDataBorrowerRow
               preWhitespace
@@ -88,6 +89,7 @@ export function ApplicationBorrowerTable({
               name="address"
               label={t('Address')}
               borrower={borrower}
+              modifiedFields={application.modified_data_fields?.borrower_updates}
             />
             <ApplicationTableDataBorrowerRow
               isLoading={isLoading || isLoadingVerifyDataField}
@@ -99,6 +101,7 @@ export function ApplicationBorrowerTable({
               name="legal_identifier"
               label={t('National Tax ID')}
               borrower={borrower}
+              modifiedFields={application.modified_data_fields?.borrower_updates}
             />
             <ApplicationTableDataBorrowerRow
               isLoading={isLoading || isLoadingVerifyDataField}
@@ -110,6 +113,7 @@ export function ApplicationBorrowerTable({
               name="type"
               label={t('Registration Type')}
               borrower={borrower}
+              modifiedFields={application.modified_data_fields?.borrower_updates}
             />
             <ApplicationTableDataBorrowerRow
               isLoading={isLoading || isLoadingVerifyDataField}
@@ -121,6 +125,7 @@ export function ApplicationBorrowerTable({
               verifiedData={application.secop_data_verification}
               borrower={borrower}
               formatter={renderSize}
+              modifiedFields={application.modified_data_fields?.borrower_updates}
             />
             <ApplicationTableDataBorrowerRow
               isLoading={isLoading || isLoadingVerifyDataField}
@@ -132,6 +137,7 @@ export function ApplicationBorrowerTable({
               verifiedData={application.secop_data_verification}
               borrower={borrower}
               formatter={renderSector}
+              modifiedFields={application.modified_data_fields?.borrower_updates}
             />
             <ApplicationTableDataBorrowerRow
               isLoading={isLoading || isLoadingVerifyDataField}
@@ -143,6 +149,7 @@ export function ApplicationBorrowerTable({
               name="email"
               label={t('Business Email')}
               borrower={borrower}
+              modifiedFields={application.modified_data_fields?.borrower_updates}
             />
           </TableBody>
         </Table>
diff --git a/src/components/ApplicationTableDataAwardRow.tsx b/src/components/ApplicationTableDataAwardRow.tsx
index 445196f..5895f7f 100644
--- a/src/components/ApplicationTableDataAwardRow.tsx
+++ b/src/components/ApplicationTableDataAwardRow.tsx
@@ -19,6 +19,7 @@ export function ApplicationTableDataAwardRow({
   updateValue,
   isLoading,
   readonly,
+  modifiedFields,
 }: ApplicationTableAwardDataRowProps) {
   const value = award[name];
   const missing = missingData[name];
@@ -28,7 +29,13 @@ export function ApplicationTableDataAwardRow({
     <TableRow>
       <DataTableCell>{label}</DataTableCell>
       <DataTableCell>
-        <DataAvailability available={!missing} name={label} readonly={readonly} />
+        <DataAvailability
+          available={!missing}
+          name={name}
+          label={label}
+          readonly={readonly}
+          modifiedFields={modifiedFields}
+        />
       </DataTableCell>
       {!missing && <DataTableCell className={preWhitespace ? 'whitespace-pre' : ''}>{formattedValue}</DataTableCell>}
       {missing && updateValue && (
@@ -54,6 +61,7 @@ ApplicationTableDataAwardRow.defaultProps = {
   preWhitespace: false,
   type: undefined,
   formLabel: undefined,
+  modifiedFields: undefined,
 };
 
 export default ApplicationTableDataAwardRow;
diff --git a/src/components/ApplicationTableDataBorrowerRow.tsx b/src/components/ApplicationTableDataBorrowerRow.tsx
index 74fbfd6..4329d6f 100644
--- a/src/components/ApplicationTableDataBorrowerRow.tsx
+++ b/src/components/ApplicationTableDataBorrowerRow.tsx
@@ -25,6 +25,7 @@ export function ApplicationTableDataBorrowerRow({
   withoutVerify,
   isLoading,
   readonly,
+  modifiedFields,
 }: ApplicationTableBorrowerDataRowProps) {
   const t = useT();
 
@@ -46,8 +47,10 @@ export function ApplicationTableDataBorrowerRow({
       <DataTableCell>
         <DataAvailability
           available={DATA_REQUESTED_FROM_MSME.includes(name) || !missing}
-          name={label}
+          name={name}
+          label={label}
           readonly={readonly}
+          modifiedFields={modifiedFields}
         />
       </DataTableCell>
       {(!missing || withoutVerify) && (
@@ -87,6 +90,7 @@ ApplicationTableDataBorrowerRow.defaultProps = {
   type: undefined,
   formLabel: undefined,
   withoutVerify: false,
+  modifiedFields: undefined,
 };
 
 export default ApplicationTableDataBorrowerRow;
diff --git a/src/components/ApplicationTableDataDocumentRow.tsx b/src/components/ApplicationTableDataDocumentRow.tsx
index 7958411..f8bd25d 100644
--- a/src/components/ApplicationTableDataDocumentRow.tsx
+++ b/src/components/ApplicationTableDataDocumentRow.tsx
@@ -1,5 +1,5 @@
- 
 import { TableRow } from '@mui/material';
+import { useT } from '@transifex/react';
 import DocumentIcon from 'src/assets/icons/document.svg';
 
 import { DOCUMENT_TYPES_NAMES } from '../constants';
@@ -18,6 +18,7 @@ export function ApplicationTableDataDocumentRow({
   isLoading = false,
   readonly = false,
 }: ApplicationTableDocumentDataRowProps) {
+  const t = useT();
   const value = document.name;
   const missing = false;
 
@@ -30,9 +31,9 @@ export function ApplicationTableDataDocumentRow({
 
   return (
     <TableRow>
-      <DataTableCell>{DOCUMENT_TYPES_NAMES[document.type]}</DataTableCell>
+      <DataTableCell>{t(DOCUMENT_TYPES_NAMES[document.type])}</DataTableCell>
       <DataTableCell>
-        <DataAvailability available={!missing} name={document.type} readonly={readonly} />
+        <DataAvailability available={!missing} label={document.type} readonly={readonly} />
       </DataTableCell>
       {!downloadDocument && (
         <DataTableCell className={preWhitespace ? 'whitespace-pre' : ''}>{formattedValue}</DataTableCell>
diff --git a/src/components/ApplicationTableDataPreviousAwardRow.tsx b/src/components/ApplicationTableDataPreviousAwardRow.tsx
index dc1a898..365b832 100644
--- a/src/components/ApplicationTableDataPreviousAwardRow.tsx
+++ b/src/components/ApplicationTableDataPreviousAwardRow.tsx
@@ -1,13 +1,13 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Box, Paper, Table, TableBody, TableContainer, TableHead, TableRow } from '@mui/material';
 import { useT } from '@transifex/react';
 import { useState } from 'react';
 import Minus from 'src/assets/icons/minus.svg';
 import Plus from 'src/assets/icons/plus.svg';
 
+import useLocalizedDateFormatter from '../hooks/useLocalizedDateFormatter';
 import { IAward } from '../schemas/application';
 import Loader from '../stories/loader/Loader';
-import { formatCurrency, formatDateFromString } from '../util';
+import { formatCurrency } from '../util';
 import { ApplicationTableAwardDataRowProps } from './ApplicationTableDataRow';
 import DataAvailability from './DataAvailability';
 import { DataTableCell, DataTableHeadCell, DataTableHeadLabel } from './DataTable';
@@ -36,6 +36,7 @@ export function ApplicationTableDataPreviousAwardRow({
   preWhitespace,
 }: ApplicationTableDataPreviousAwardRowProps) {
   const t = useT();
+  const { formatDateFromString } = useLocalizedDateFormatter();
 
   const [open, setOpen] = useState(false);
 
@@ -49,7 +50,7 @@ export function ApplicationTableDataPreviousAwardRow({
       <TableRow>
         <DataTableCell>{label}</DataTableCell>
         <DataTableCell>
-          <DataAvailability available={!missing} name={label} readonly />
+          <DataAvailability available={!missing} label={label} readonly />
         </DataTableCell>
         {!missing && (
           <DataTableCell className={preWhitespace ? 'whitespace-pre' : ''}>
diff --git a/src/components/ApplicationTableDataRow.tsx b/src/components/ApplicationTableDataRow.tsx
index a0f153b..4533569 100644
--- a/src/components/ApplicationTableDataRow.tsx
+++ b/src/components/ApplicationTableDataRow.tsx
@@ -1,5 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { IAward, IBorrower, IBorrowerDocument, IUpdateAward, IUpdateBorrower } from '../schemas/application';
+import {
+  IAward,
+  IBorrower,
+  IBorrowerDocument,
+  IModifiedDataFields,
+  IUpdateAward,
+  IUpdateBorrower,
+} from '../schemas/application';
 
 export interface ApplicationTableDataRowProps {
   label: string;
@@ -10,6 +17,7 @@ export interface ApplicationTableDataRowProps {
   formatter?: (value: any) => string;
   isLoading: boolean;
   readonly: boolean;
+  modifiedFields?: { [key: string]: IModifiedDataFields };
 }
 
 export interface ApplicationTableAwardDataRowProps extends ApplicationTableDataRowProps {
diff --git a/src/components/ApplicationsList.tsx b/src/components/ApplicationsList.tsx
index a3a6202..01375d0 100644
--- a/src/components/ApplicationsList.tsx
+++ b/src/components/ApplicationsList.tsx
@@ -17,6 +17,7 @@ import {
   STARTED_STATUS,
   USER_TYPES,
 } from '../constants';
+import useDownloadApplication from '../hooks/useDownloadApplication';
 import useStartApplication from '../hooks/useStartApplication';
 import {
   EXTENDED_APPLICATION_FROM,
@@ -26,6 +27,7 @@ import {
   PaginationInput,
 } from '../schemas/application';
 import LinkButton from '../stories/link-button/LinkButton';
+import Loader from '../stories/loader/Loader';
 import { renderApplicationStatus } from '../util';
 import { DataTable, HeadCell, Order } from './DataTable';
 
@@ -55,9 +57,8 @@ const headCellsBase: HeadCell<IApplication & IExtendedApplication>[] = [
     disablePadding: false,
     label: t('Stage'),
     sortable: true,
-    render: (row: IApplication & IExtendedApplication, headCell: HeadCell<IApplication & IExtendedApplication>) => (
-      <>{renderApplicationStatus(String(row[headCell.id]))}</>
-    ),
+    render: (row: IApplication & IExtendedApplication, headCell: HeadCell<IApplication & IExtendedApplication>) =>
+      renderApplicationStatus(String(row[headCell.id])),
   },
 ];
 
@@ -74,12 +75,18 @@ const headCellsOCP: HeadCell<IApplication & IExtendedApplication>[] = [
 type ExtendendApplication = IApplication & IExtendedApplication;
 const ApplicationDataTable = DataTable<ExtendendApplication>;
 
-const actionsFIBase = (row: ExtendendApplication, onStartApplicationHandler: (id: number) => void) => (
+const actionsFIBase = (
+  row: ExtendendApplication,
+  isLoading: boolean,
+  onStartApplicationHandler: (id: number) => void,
+  onDownloadApplicationHandler: (id: number) => void,
+) => (
   <Box className="flex flex-row">
     {STARTED_STATUS.includes(row.status) && (
       <LinkButton
         className="p-1 justify-start"
         component={Link}
+        disabled={isLoading}
         to={`/applications/${row.id}/stage-one`}
         label={t('Continue')}
         size="small"
@@ -91,6 +98,7 @@ const actionsFIBase = (row: ExtendendApplication, onStartApplicationHandler: (id
         className="p-1 justify-start"
         onClick={() => onStartApplicationHandler(row.id)}
         label={t('Start')}
+        disabled={isLoading}
         size="small"
         noIcon
       />
@@ -101,6 +109,7 @@ const actionsFIBase = (row: ExtendendApplication, onStartApplicationHandler: (id
         component={Link}
         to={`/applications/${row.id}/complete-application`}
         label={t('Review')}
+        disabled={isLoading}
         size="small"
         noIcon
       />
@@ -111,15 +120,16 @@ const actionsFIBase = (row: ExtendendApplication, onStartApplicationHandler: (id
         component={Link}
         to={`/applications/${row.id}/view`}
         label={t('View')}
+        disabled={isLoading}
         size="small"
         noIcon
       />
     )}
     <LinkButton
       className="p-1 justify-start"
-      component={Link}
-      to={`/applications/${row.id}/download`}
+      onClick={() => onDownloadApplicationHandler(row.id)}
       label={t('Download')}
+      disabled={isLoading}
       size="small"
       noIcon
     />
@@ -156,6 +166,10 @@ interface ApplicationListProps {
 export function ApplicationList({ type }: ApplicationListProps) {
   const { enqueueSnackbar } = useSnackbar();
   const { startApplicationMutation } = useStartApplication();
+  const [idToDownload, setIdToDownload] = useState<number | undefined>();
+
+  const { downloadedApplication, isLoading } = useDownloadApplication(idToDownload);
+
   const [payload, setPayload] = useState<PaginationInput>({
     page: 0,
     page_size: PAGE_SIZES[0],
@@ -235,20 +249,59 @@ export function ApplicationList({ type }: ApplicationListProps) {
     [startApplicationMutation],
   );
 
-  const actionsFI = (row: ExtendendApplication) => actionsFIBase(row, onStartApplicationHandler);
+  useEffect(() => {
+    if (downloadedApplication) {
+      const href = window.URL.createObjectURL(downloadedApplication);
+
+      const anchorElement = document.createElement('a');
+
+      anchorElement.href = href;
+      const filename = `${t('application')}-${idToDownload}.zip`;
+      anchorElement.download = filename;
+
+      document.body.appendChild(anchorElement);
+      anchorElement.click();
+
+      document.body.removeChild(anchorElement);
+      window.URL.revokeObjectURL(href);
+      setIdToDownload(undefined);
+    }
+  }, [downloadedApplication, idToDownload]);
+
+  const onDownloadApplicationHandler = useCallback(
+    (id: number) => {
+      setIdToDownload(id);
+    },
+    [setIdToDownload],
+  );
+
+  // eslint-disable-next-line no-shadow
+  const actionsFI = (row: ExtendendApplication, isLoading?: boolean) =>
+    actionsFIBase(
+      row,
+      isLoading !== undefined ? isLoading : false,
+      onStartApplicationHandler,
+      onDownloadApplicationHandler,
+    );
 
   return (
-    <ApplicationDataTable
-      rows={rows}
-      useEmptyRows
-      handleRequestSort={handleRequestSort}
-      headCells={headCells}
-      pagination={{
-        totalCount,
-        handleChangePage,
-      }}
-      actions={type === USER_TYPES.OCP ? actionsOCP : actionsFI}
-    />
+    <>
+      {isLoading && <Loader />}
+      {!isLoading && (
+        <ApplicationDataTable
+          rows={rows}
+          useEmptyRows
+          handleRequestSort={handleRequestSort}
+          headCells={headCells}
+          pagination={{
+            totalCount,
+            handleChangePage,
+          }}
+          isLoading={isLoading}
+          actions={type === USER_TYPES.OCP ? actionsOCP : actionsFI}
+        />
+      )}
+    </>
   );
 }
 
diff --git a/src/components/Charts.tsx b/src/components/Charts.tsx
index a32e9fd..b512a86 100644
--- a/src/components/Charts.tsx
+++ b/src/components/Charts.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable react/require-default-props */
+ 
 
 /* eslint-disable react/no-array-index-key */
 
@@ -32,7 +32,7 @@ export function ChartPie({ data }: ChartsProps) {
       <PieChart width={400} height={400}>
         <Pie data={data} cx="50%" cy="50%" labelLine={false} outerRadius={80} fill="#8884d8" dataKey="value">
           {data.map((_entry, index) => (
-            // eslint-disable-next-line react/no-array-index-key
+             
             <Cell key={`cell-${index}`} fill={COLORS_TO_FILL[index % COLORS_TO_FILL.length]} />
           ))}
         </Pie>
diff --git a/src/components/CreditProductConfirmation.tsx b/src/components/CreditProductConfirmation.tsx
index 91386c9..159ac70 100644
--- a/src/components/CreditProductConfirmation.tsx
+++ b/src/components/CreditProductConfirmation.tsx
@@ -2,9 +2,10 @@ import { Paper, Table, TableBody, TableContainer, TableHead, TableRow } from '@m
 import { useT } from '@transifex/react';
 
 import { CREDIT_PRODUCT_TYPE } from '../constants';
+import useLocalizedDateFormatter from '../hooks/useLocalizedDateFormatter';
 import { IApplication, ICreditProduct } from '../schemas/application';
 import Title from '../stories/title/Title';
-import { formatCurrency, formatDateFromString } from '../util';
+import { formatCurrency } from '../util';
 import { DataTableCell, DataTableHeadCell, DataTableHeadLabel } from './DataTable';
 
 export interface CreditProductConfirmationProps {
@@ -14,6 +15,7 @@ export interface CreditProductConfirmationProps {
 
 export function CreditProductConfirmation({ creditProduct, application }: CreditProductConfirmationProps) {
   const t = useT();
+  const { formatDateFromString } = useLocalizedDateFormatter();
 
   const isLoan = creditProduct.type === CREDIT_PRODUCT_TYPE.LOAN;
 
diff --git a/src/components/CreditProductList.tsx b/src/components/CreditProductList.tsx
index a3846d8..7ec1308 100644
--- a/src/components/CreditProductList.tsx
+++ b/src/components/CreditProductList.tsx
@@ -1,4 +1,3 @@
- 
 import { t } from '@transifex/native';
 import { Link } from 'react-router-dom';
 
@@ -13,7 +12,7 @@ const headCells: HeadCell<ICreditProduct>[] = [
     disablePadding: false,
     label: t('Borrower size'),
     sortable: false,
-    render: (row: ICreditProduct) => <>{renderBorrowerSizeType(row.borrower_size)}</>,
+    render: (row: ICreditProduct) => renderBorrowerSizeType(row.borrower_size),
   },
   {
     id: 'lower_limit',
@@ -41,7 +40,7 @@ const headCells: HeadCell<ICreditProduct>[] = [
     disablePadding: false,
     label: t('Type'),
     sortable: false,
-    render: (row: ICreditProduct) => <>{renderCreditProductType(row.type)}</>,
+    render: (row: ICreditProduct) => renderCreditProductType(row.type),
   },
 ];
 
diff --git a/src/components/CreditProductReview.tsx b/src/components/CreditProductReview.tsx
index e4c81fa..b6d9e44 100644
--- a/src/components/CreditProductReview.tsx
+++ b/src/components/CreditProductReview.tsx
@@ -2,9 +2,10 @@ import { Paper, Table, TableBody, TableContainer, TableHead, TableRow } from '@m
 import { useT } from '@transifex/react';
 
 import { CREDIT_PRODUCT_TYPE } from '../constants';
+import useLocalizedDateFormatter from '../hooks/useLocalizedDateFormatter';
 import { IApplication } from '../schemas/application';
 import Title from '../stories/title/Title';
-import { formatCurrency, formatDateFromString } from '../util';
+import { formatCurrency } from '../util';
 import { DataTableCell, DataTableHeadCell, DataTableHeadLabel } from './DataTable';
 
 export interface CreditProductReviewProps {
@@ -14,6 +15,8 @@ export interface CreditProductReviewProps {
 
 export function CreditProductReview({ application, className }: CreditProductReviewProps) {
   const t = useT();
+  const { formatDateFromString } = useLocalizedDateFormatter();
+
   const creditProduct = application.credit_product;
 
   if (!creditProduct) return null;
diff --git a/src/components/DataAvailability.tsx b/src/components/DataAvailability.tsx
index ba18e88..65a4bb9 100644
--- a/src/components/DataAvailability.tsx
+++ b/src/components/DataAvailability.tsx
@@ -4,6 +4,8 @@ import { useState } from 'react';
 
 import CheckGreen from '../assets/icons/check-green.svg';
 import WarnRed from '../assets/icons/warn-red.svg';
+import useLocalizedDateFormatter from '../hooks/useLocalizedDateFormatter';
+import { IModifiedDataFields } from '../schemas/application';
 import Text from '../stories/text/Text';
 
 const getIcon = (available: boolean, name: string) => {
@@ -18,22 +20,27 @@ const getIcon = (available: boolean, name: string) => {
 
 interface DataAvailabilityProps {
   available: boolean;
-  name: string;
+  name?: string;
+  label: string;
   readonly: boolean;
+  modifiedFields?: { [key: string]: IModifiedDataFields };
 }
 
-export function DataAvailability({ available, name, readonly }: DataAvailabilityProps) {
+export function DataAvailability({ available, name, label, readonly, modifiedFields }: DataAvailabilityProps) {
   const t = useT();
+  const { formatDateFromString } = useLocalizedDateFormatter();
   const [open, setOpen] = useState(false);
 
   const handleToggle = () => {
     setOpen(!open);
   };
 
+  const modified = modifiedFields && name ? modifiedFields[name] : undefined;
+
   if (available || readonly) {
     return (
       <Box className="py-2 flex flex-row">
-        {getIcon(available, name)}
+        {getIcon(available, label)}
 
         <Text fontVariant className="ml-3 mb-0 text-sm">
           {available ? t('Yes') : t('Data missing')}
@@ -49,7 +56,7 @@ export function DataAvailability({ available, name, readonly }: DataAvailability
           sx={{
             pt: '2px',
           }}>
-          {getIcon(available, name)}
+          {getIcon(available, label)}
         </Box>
         <Box className="flex flex-col">
           <Text fontVariant className="ml-3 mb-0 text-sm">
@@ -63,10 +70,20 @@ export function DataAvailability({ available, name, readonly }: DataAvailability
             </Text>
             <Collapse in={open}>
               <Text fontVariant className="ml-3 mt-4 text-sm">
-                {t(
-                  'Data for the {fieldName} for the SME is not available. Confirm manually through SECOP or alternative source.',
-                  { fieldName: name },
-                )}
+                {!modified
+                  ? t(
+                      'Data for the {fieldName} for the SME is not available. Confirm manually through SECOP or alternative source.',
+                      { fieldName: label },
+                    )
+                  : t(
+                      'Data for the {fieldName} was not available, but completed by {userType} user {userName} on {modifiedDate}.',
+                      {
+                        fieldName: label,
+                        userType: modified.user_type,
+                        userName: modified.user,
+                        modifiedDate: formatDateFromString(modified.modified_at),
+                      },
+                    )}
               </Text>
             </Collapse>
           </Box>
@@ -76,4 +93,9 @@ export function DataAvailability({ available, name, readonly }: DataAvailability
   );
 }
 
+DataAvailability.defaultProps = {
+  modifiedFields: undefined,
+  name: undefined,
+};
+
 export default DataAvailability;
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index b066324..e154ba6 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -18,7 +18,8 @@ import SorterIcon from 'src/assets/icons/sorter.svg';
 import { twMerge } from 'tailwind-merge';
 
 import { PAGE_SIZES } from '../constants';
-import { formatCurrency, formatDateFromString } from '../util';
+import useLocalizedDateFormatter from '../hooks/useLocalizedDateFormatter';
+import { formatCurrency } from '../util';
 
 function Sorter() {
   return <img className="pl-2" src={SorterIcon} alt="sorter-icon" />;
@@ -70,7 +71,7 @@ export interface HeadCell<T> {
   id: Extract<keyof T, string>;
   label: string;
   type?: DataCellType;
-  render?: (row: T, headCell: HeadCell<T>) => JSX.Element;
+  render?: (row: T, headCell: HeadCell<T>) => JSX.Element | string;
   sortable?: boolean;
   width?: number;
 }
@@ -155,7 +156,7 @@ function DataTableHead<T>({
                 className="flex flex-row justify-between text-moodyBlue text-sm font-normal"
                 IconComponent={orderBy === headCell.id ? SorterDirection : Sorter}
                 onClick={createSortHandler(headCell.id)}>
-                {headCell.label}
+                {t(headCell.label)}
               </TableSortLabel>
             )}
             {!headCell.sortable && <DataTableHeadLabel label={headCell.label} />}
@@ -186,7 +187,8 @@ export interface DataTableProps<T> {
   useEmptyRows?: boolean;
   handleRequestSort?: (property: Extract<keyof T, string>, sortOrder: Order) => void;
   pagination?: HandlePagination;
-  actions?: (row: T) => JSX.Element;
+  actions?: (row: T, isLoading?: boolean) => JSX.Element;
+  isLoading?: boolean;
 }
 
 function renderValue<T>(row: T, headCell: HeadCell<T>) {
@@ -194,10 +196,6 @@ function renderValue<T>(row: T, headCell: HeadCell<T>) {
     return headCell.render(row, headCell);
   }
 
-  if (headCell.type === 'date') {
-    return formatDateFromString(String(row[headCell.id]));
-  }
-
   if (headCell.type === 'currency') {
     return formatCurrency(Number(row[headCell.id]));
   }
@@ -211,8 +209,10 @@ export function DataTable<T>({
   handleRequestSort,
   pagination,
   actions,
+  isLoading,
 }: DataTableProps<T>) {
   const t = useT();
+  const { formatDateFromString } = useLocalizedDateFormatter();
   const [visibleRows, setVisibleRows] = React.useState<T[]>(rows);
   const [order, setOrder] = React.useState<Order>('asc');
   const [orderBy, setOrderBy] = React.useState<Extract<keyof T, string> | undefined>();
@@ -276,10 +276,11 @@ export function DataTable<T>({
                 <TableRow tabIndex={-1} key={`${String(index)}`}>
                   {headCells.map((headCell) => (
                     <DataTableCell key={`${String(`${row[headCell.id]}-${index}-${headCell.id}`)}`}>
-                      {renderValue(row, headCell)}
+                      {headCell.type !== 'date' && t(renderValue(row, headCell))}
+                      {headCell.type === 'date' && formatDateFromString(String(row[headCell.id]))}
                     </DataTableCell>
                   ))}
-                  {actions && <DataTableCell>{actions(row)}</DataTableCell>}
+                  {actions && <DataTableCell>{actions(row, isLoading)}</DataTableCell>}
                 </TableRow>
               ))}
 
@@ -327,6 +328,7 @@ DataTable.defaultProps = {
   pagination: undefined,
   useEmptyRows: true,
   actions: undefined,
+  isLoading: false,
 };
 
 export default DataTable;
diff --git a/src/components/DocumentField.tsx b/src/components/DocumentField.tsx
index b8dd9ed..d8c03a0 100644
--- a/src/components/DocumentField.tsx
+++ b/src/components/DocumentField.tsx
@@ -31,6 +31,7 @@ export function DocumentField({ label, documentType, secure = false, className,
   const { enqueueSnackbar } = useSnackbar();
   const [current, setCurrent] = useState<IBorrowerDocument | undefined>();
   const [showUploader, setShowUploader] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
 
   const applicationContext = useApplicationContext();
   const secureApplicationContext = useSecureApplicationContext();
@@ -68,6 +69,7 @@ export function DocumentField({ label, documentType, secure = false, className,
       if (!application) return;
 
       try {
+        setLoading(true);
         if (documentType === DOCUMENTS_TYPE.COMPLIANCE_REPORT) {
           const payload: UploadComplianceInput = {
             file,
@@ -94,7 +96,7 @@ export function DocumentField({ label, documentType, secure = false, className,
           const uploaded = await uploadFileFn(payload);
           setCurrent(uploaded);
         }
-
+        setLoading(false);
         setShowUploader(false);
         if (setUploadState) setUploadState((prev) => ({ ...prev, [documentType]: true }));
       } catch (error) {
@@ -139,7 +141,7 @@ export function DocumentField({ label, documentType, secure = false, className,
           />
         </Box>
       )}
-      {showUploader && <FileUploader className={className} onAcceptedFile={onAcceptedFile} />}
+      {showUploader && <FileUploader loading={loading} className={className} onAcceptedFile={onAcceptedFile} />}
     </Box>
   );
 }
diff --git a/src/components/FAQComponent.tsx b/src/components/FAQComponent.tsx
index 96e10ce..8550472 100644
--- a/src/components/FAQComponent.tsx
+++ b/src/components/FAQComponent.tsx
@@ -12,7 +12,7 @@ interface FAQComponentProps {
 export function FAQComponent({ className }: FAQComponentProps) {
   const t = useT();
   return (
-    <FAQContainer className={className}>
+    <FAQContainer title={t('Frequently Asked Questions')} className={className}>
       <FAQSection title={t('What is the MSME credit scheme?')}>
         {t(
           'Guaranteed loans give high-risk borrowers a way to access financing, and provide protection for the lender.',
diff --git a/src/components/FileUploader.tsx b/src/components/FileUploader.tsx
index 98c6b54..ff417e9 100644
--- a/src/components/FileUploader.tsx
+++ b/src/components/FileUploader.tsx
@@ -14,8 +14,11 @@ import Cloud from 'src/assets/icons/cloud.svg';
 import Button from 'src/stories/button/Button';
 import Text from 'src/stories/text/Text';
 
+import { Progress } from '../stories/loader/Loader';
+
 interface FileUploaderProps {
   className?: string;
+  loading: boolean;
   onAcceptedFile: (file: File) => void;
 }
 
@@ -27,7 +30,7 @@ const errorsMap = {
   [ErrorCode.FileTooLarge]: tNative('File is larger than {maxSizeMB} MB', { maxSizeMB }),
 };
 
-export function FileUploader({ className, onAcceptedFile }: FileUploaderProps) {
+export function FileUploader({ className, loading, onAcceptedFile }: FileUploaderProps) {
   const t = useT();
   const { enqueueSnackbar } = useSnackbar();
 
@@ -67,29 +70,32 @@ export function FileUploader({ className, onAcceptedFile }: FileUploaderProps) {
       <div
         {...getRootProps({ className: `dropzone flex items-center justify-center ${className}` })}
         onClick={(e) => e.stopPropagation()}>
-        <label
-          htmlFor="dropzone-file"
-          onClick={(e) => e.stopPropagation()}
-          className="flex flex-col items-center justify-center w-full h-64 border-1 border-fieldBorder border-dashed rounded-lg cursor-pointer bg-white dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100">
-          <div className="flex flex-col items-center justify-center pt-5 pb-6">
-            <div className="flex flex-row items-center justify-center">
-              <img src={Cloud} alt="cloud-icon" />
-              <Text className="text-sm font-light mb-0 ml-2">
-                {!isDragActive && t('Drag and drop or click here')}
-                {isDragAccept && t('File will be accepted')}
-                {isDragReject && t('File will be rejected')}
-              </Text>
+        {!loading && (
+          <label
+            htmlFor="dropzone-file"
+            onClick={(e) => e.stopPropagation()}
+            className="flex flex-col items-center justify-center w-full h-64 border-1 border-fieldBorder border-dashed rounded-lg cursor-pointer bg-white dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100">
+            <div className="flex flex-col items-center justify-center pt-5 pb-6">
+              <div className="flex flex-row items-center justify-center">
+                <img src={Cloud} alt="cloud-icon" />
+                <Text className="text-sm font-light mb-0 ml-2">
+                  {!isDragActive && t('Drag and drop or click here')}
+                  {isDragAccept && t('File will be accepted')}
+                  {isDragReject && t('File will be rejected')}
+                </Text>
+              </div>
+              <Button
+                noIcon
+                primary={false}
+                className="mt-4 border border-solid border-fieldBorder"
+                label={t('Browse file')}
+                onClick={open}
+              />
             </div>
-            <Button
-              noIcon
-              primary={false}
-              className="mt-4 border border-solid border-fieldBorder"
-              label={t('Browse file')}
-              onClick={open}
-            />
-          </div>
-          <input id="dropzone-file" type="file" className="hidden" {...getInputProps({ multiple: true })} />
-        </label>
+            <input id="dropzone-file" type="file" className="hidden" {...getInputProps({ multiple: true })} />
+          </label>
+        )}
+        {loading && <Progress />}
       </div>
       <Text className="text-sm font-light mt-4">
         {t('Accepted formats are PDF, JPEG and PNG. The maximum file size permitted is {maxSizeMB}MB.', { maxSizeMB })}
diff --git a/src/components/LenderList.tsx b/src/components/LenderList.tsx
index 6fa3dca..6f1572d 100644
--- a/src/components/LenderList.tsx
+++ b/src/components/LenderList.tsx
@@ -1,6 +1,3 @@
- 
-
- 
 import { useQuery } from '@tanstack/react-query';
 import { t } from '@transifex/native';
 import axios from 'axios';
@@ -34,7 +31,7 @@ const headCells: HeadCell<ILender>[] = [
     disablePadding: false,
     label: t('Type'),
     sortable: false,
-    render: (row: ILender) => <>{renderLenderType(row.type)}</>,
+    render: (row: ILender) => renderLenderType(row.type),
   },
 ];
 
diff --git a/src/components/LendersButtonGroup.tsx b/src/components/LendersButtonGroup.tsx
index edf0f06..0aba652 100644
--- a/src/components/LendersButtonGroup.tsx
+++ b/src/components/LendersButtonGroup.tsx
@@ -38,7 +38,7 @@ export function LendersButtonGroup({ onLenderSelected }: LendersButtonGroupProps
 
   return (
     <Box className="py-2 flex flex-col">
-      <ButtonGroup variant="outlined" aria-label="lender selector">
+      <ButtonGroup className="rounded-none" variant="outlined" aria-label="lender selector">
         <Button
           className="bg-white text-moodyBlue font-medium"
           label={t('All FIs')}
diff --git a/src/components/UserList.tsx b/src/components/UserList.tsx
index cedbe55..f2182e6 100644
--- a/src/components/UserList.tsx
+++ b/src/components/UserList.tsx
@@ -35,7 +35,7 @@ const headCells: HeadCell<ExtendendUser>[] = [
     disablePadding: false,
     label: t('Type'),
     sortable: true,
-    render: (row: ExtendendUser) => <>{renderUserType(row.type)}</>,
+    render: (row: ExtendendUser) => renderUserType(row.type),
   },
   {
     id: 'lender_name',
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 79e5a4f..2cbfeee 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -32,6 +32,7 @@ export enum QUERY_KEYS {
   users = 'users',
   credit_product = 'credit_product',
   downloadDocument = 'downloadDocument',
+  downloadApplication = 'downloadApplication',
   awards = 'awards',
   statistics_fi = 'statistics_fi',
   statistics_ocp = 'statistics_ocp',
@@ -117,6 +118,28 @@ export const CREDIT_PRODUCT_OPTIONS: FormSelectOption[] = [
   },
 ];
 
+// eslint-disable-next-line no-shadow
+export enum STATISTICS_DATE_FILTER {
+  CUSTOM_RANGE = 'CUSTOM_RANGE',
+  LAST_WEEK = 'LAST_WEEK',
+  LAST_MONTH = 'LAST_MONTH',
+}
+
+export const STATISTICS_DATE_FILTER_OPTIONS: FormSelectOption[] = [
+  {
+    value: STATISTICS_DATE_FILTER.CUSTOM_RANGE,
+    label: t('Custom range'),
+  },
+  {
+    value: STATISTICS_DATE_FILTER.LAST_WEEK,
+    label: t('Last week'),
+  },
+  {
+    value: STATISTICS_DATE_FILTER.LAST_MONTH,
+    label: t('Last month'),
+  },
+];
+
 // eslint-disable-next-line no-shadow
 export enum DOCUMENTS_TYPE {
   INCORPORATION_DOCUMENT = 'INCORPORATION_DOCUMENT',
@@ -128,6 +151,17 @@ export enum DOCUMENTS_TYPE {
   COMPLIANCE_REPORT = 'COMPLIANCE_REPORT',
 }
 
+// eslint-disable-next-line no-shadow
+export enum BORROWER_TYPE {
+  NATURAL_PERSON = 'NATURAL_PERSON',
+  LEGAL_PERSON = 'LEGAL_PERSON',
+}
+
+export const BORROWER_TYPES_NAMES: { [key: string]: string } = {
+  [BORROWER_TYPE.NATURAL_PERSON]: t('Natural Person'),
+  [BORROWER_TYPE.LEGAL_PERSON]: t('Legal Person'),
+};
+
 // eslint-disable-next-line no-shadow
 export enum MSME_TYPES {
   NOT_INFORMED = 'NOT_INFORMED',
diff --git a/src/hooks/useDownloadApplication.ts b/src/hooks/useDownloadApplication.ts
new file mode 100644
index 0000000..82be062
--- /dev/null
+++ b/src/hooks/useDownloadApplication.ts
@@ -0,0 +1,42 @@
+import { useQuery } from '@tanstack/react-query';
+import { useT } from '@transifex/react';
+import axios from 'axios';
+import { useSnackbar } from 'notistack';
+
+import { downloadApplicationFn } from '../api/private';
+import { QUERY_KEYS } from '../constants';
+import useLangContext from './useLangContext';
+
+type IUseDownloadApplication = {
+  downloadedApplication?: Blob;
+  isLoading: boolean;
+};
+
+export default function useDownloadApplication(id?: number): IUseDownloadApplication {
+  const t = useT();
+  const langContext = useLangContext();
+  const { enqueueSnackbar } = useSnackbar();
+  const lang = langContext.state.selected.split('_')[0];
+
+  const { data: downloadedApplication, isLoading } = useQuery<Blob>({
+    queryKey: [QUERY_KEYS.downloadApplication, `${id}-${lang}`],
+    queryFn: () => downloadApplicationFn(Number(id), lang),
+    enabled: Boolean(id),
+    onSuccess: (data) => data,
+    onError: (error) => {
+      if (axios.isAxiosError(error) && error.response) {
+        if (error.response.data && error.response.data.detail) {
+          enqueueSnackbar(t('Error: {error}', { error: error.response.data.detail }), {
+            variant: 'error',
+          });
+        }
+      } else {
+        enqueueSnackbar(t('Error downloading Application. {error}', { error }), {
+          variant: 'error',
+        });
+      }
+    },
+  });
+
+  return { downloadedApplication, isLoading: id ? isLoading : false };
+}
diff --git a/src/hooks/useGetStatisticsOCP.ts b/src/hooks/useGetStatisticsOCP.ts
index 13b0569..de5ec66 100644
--- a/src/hooks/useGetStatisticsOCP.ts
+++ b/src/hooks/useGetStatisticsOCP.ts
@@ -13,6 +13,7 @@ type IUseGetStatisticsOCP = {
 };
 
 export default function useGetStatisticsOCP(
+  customRange: string,
   initialDate: string | null,
   finalDate: string | null,
   lenderId: number | null,
@@ -21,9 +22,11 @@ export default function useGetStatisticsOCP(
   const { enqueueSnackbar } = useSnackbar();
 
   const { data, isLoading } = useQuery<StatisticsFI>({
-    queryKey: [QUERY_KEYS.statistics_ocp, `${initialDate}-${finalDate}-${lenderId}`],
+    queryKey: [QUERY_KEYS.statistics_ocp, `${customRange}-${initialDate}-${finalDate}-${lenderId}`],
     queryFn: () => {
-      const params: StatisticsParmsInput = {};
+      const params: StatisticsParmsInput = {
+        custom_range: customRange,
+      };
       if (initialDate !== null) {
         params.initial_date = initialDate;
       }
diff --git a/src/hooks/useLocalizedDateFormatter.ts b/src/hooks/useLocalizedDateFormatter.ts
new file mode 100644
index 0000000..b9d9e0f
--- /dev/null
+++ b/src/hooks/useLocalizedDateFormatter.ts
@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+
+import { formatLocalizedDate, formatLocalizedDateFromString } from '../util';
+import useLangContext from './useLangContext';
+
+const useLocalizedDateFormatter = () => {
+  const langContext = useLangContext();
+
+  const formatDate = useCallback(
+    (date: Date) => formatLocalizedDate(langContext.state.selected.replace('_', '-'), date),
+    [langContext.state.selected],
+  );
+
+  const formatDateFromString = useCallback(
+    (date: string | null | undefined) =>
+      formatLocalizedDateFromString(langContext.state.selected.replace('_', '-'), date),
+    [langContext.state.selected],
+  );
+
+  return {
+    formatDate,
+    formatDateFromString,
+  };
+};
+
+export default useLocalizedDateFormatter;
diff --git a/src/layout/PublicApplicationLayout.tsx b/src/layout/PublicApplicationLayout.tsx
index 02226ad..1d21933 100644
--- a/src/layout/PublicApplicationLayout.tsx
+++ b/src/layout/PublicApplicationLayout.tsx
@@ -33,7 +33,9 @@ export default function PublicApplicationLayout() {
       const { pathname } = location;
       const lastSegment = pathname.substring(pathname.lastIndexOf('/') + 1);
       if (lastSegment === 'change-primary-email') return;
-      if (application.status === APPLICATION_STATUS.REJECTED) {
+      if (application.status === APPLICATION_STATUS.COMPLETED) {
+        if (lastSegment !== 'application-completed') navigate('./application-completed');
+      } else if (application.status === APPLICATION_STATUS.REJECTED) {
         if (lastSegment !== 'find-alternative-credit' && lastSegment !== 'rejected') navigate('./rejected');
       } else if (application.status === APPLICATION_STATUS.CONTRACT_UPLOADED) {
         if (lastSegment !== 'upload-contract-completed') {
@@ -51,7 +53,7 @@ export default function PublicApplicationLayout() {
       ) {
         if (lastSegment !== 'submission-completed') navigate('./submission-completed');
       } else if (application.pending_documents || application.status === APPLICATION_STATUS.INFORMATION_REQUESTED) {
-        if (lastSegment !== 'documents') navigate('./documents');
+        if (lastSegment !== 'documents' && lastSegment !== 'confirm-submission') navigate('./documents');
       } else if (application.credit_product_id && !application.lender_id) {
         if (lastSegment !== 'confirm-credit-product' && lastSegment !== 'submission-completed')
           navigate('./confirm-credit-product');
diff --git a/src/layout/SecureApplicationLayout.tsx b/src/layout/SecureApplicationLayout.tsx
index ff7786b..5694a2e 100644
--- a/src/layout/SecureApplicationLayout.tsx
+++ b/src/layout/SecureApplicationLayout.tsx
@@ -1,4 +1,3 @@
- 
 import { useQuery } from '@tanstack/react-query';
 import { useT } from '@transifex/react';
 import axios from 'axios';
@@ -7,10 +6,11 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { z } from 'zod';
 
 import { getApplicationFn } from '../api/private';
-import { APPLICATION_STATUS, DISPATCH_ACTIONS, QUERY_KEYS } from '../constants';
+import { APPLICATION_STATUS, DISPATCH_ACTIONS, QUERY_KEYS, USER_TYPES } from '../constants';
 import { useParamsTypeSafe } from '../hooks/useParamsTypeSafe';
 import useApplicationContext from '../hooks/useSecureApplicationContext';
 import ApplicationErrorPage from '../pages/msme/ApplicationErrorPage';
+import ProtectedRoute from '../routes/ProtectedRoute';
 import { IApplication } from '../schemas/application';
 import Loader from '../stories/loader/Loader';
 import PageLayout from './PageLayout';
@@ -28,23 +28,7 @@ export default function SecureApplicationLayout() {
     }),
   );
 
-  useEffect(() => {
-    if (applicationContext.state.data) {
-      const application = applicationContext.state.data;
-      const { pathname } = location;
-      const lastSegment = pathname.substring(pathname.lastIndexOf('/') + 1);
-
-      if (lastSegment !== 'view') {
-        if (application.status === APPLICATION_STATUS.APPROVED) {
-          if (lastSegment !== 'stage-five-approved') navigate('./stage-five-approved');
-        } else if (application.status === APPLICATION_STATUS.REJECTED) {
-          if (lastSegment !== 'stage-five-rejected') navigate('./stage-five-rejected');
-        }
-      }
-    }
-  }, [applicationContext.state.data, navigate, location]);
-
-  const { isLoading } = useQuery({
+  const { isLoading, data, refetch } = useQuery({
     queryKey: [QUERY_KEYS.applications, `${id}`],
     queryFn: async (): Promise<IApplication | null> => {
       const application = await getApplicationFn(id);
@@ -62,11 +46,34 @@ export default function SecureApplicationLayout() {
     },
   });
 
+  useEffect(() => {
+    if (data) {
+      const application = data;
+      const { pathname } = location;
+      const lastSegment = pathname.substring(pathname.lastIndexOf('/') + 1);
+
+      if (lastSegment !== 'view') {
+        if (application.status === APPLICATION_STATUS.LAPSED) {
+          navigate('./view');
+        } else if (application.status === APPLICATION_STATUS.COMPLETED) {
+          if (lastSegment !== 'application-completed') navigate('./application-completed');
+        } else if (application.status === APPLICATION_STATUS.APPROVED) {
+          if (lastSegment !== 'stage-five-approved') navigate('./stage-five-approved');
+        } else if (application.status === APPLICATION_STATUS.REJECTED) {
+          if (lastSegment !== 'stage-five-rejected') navigate('./stage-five-rejected');
+        }
+        if (lastSegment === 'stage-four') refetch();
+      }
+    }
+  }, [data, navigate, location, refetch]);
+
   return (
-    <PageLayout>
-      {isLoading && <Loader />}
-      {!isLoading && !queryError && <Outlet />}
-      {queryError && <ApplicationErrorPage message={queryError} />}
-    </PageLayout>
+    <ProtectedRoute requiredUserType={USER_TYPES.FI}>
+      <PageLayout>
+        {isLoading && <Loader />}
+        {!isLoading && !queryError && <Outlet />}
+        {queryError && <ApplicationErrorPage message={queryError} />}
+      </PageLayout>
+    </ProtectedRoute>
   );
 }
diff --git a/src/pages/fi/ApplicationCompleted.tsx b/src/pages/fi/ApplicationCompleted.tsx
index f820f68..7c19f03 100644
--- a/src/pages/fi/ApplicationCompleted.tsx
+++ b/src/pages/fi/ApplicationCompleted.tsx
@@ -1,9 +1,11 @@
 import { useT } from '@transifex/react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from 'src/stories/button/Button';
 import Text from 'src/stories/text/Text';
 import Title from 'src/stories/title/Title';
 
+import useDownloadApplication from '../../hooks/useDownloadApplication';
 import useApplicationContext from '../../hooks/useSecureApplicationContext';
 
 function ApplicationCompleted() {
@@ -11,16 +13,37 @@ function ApplicationCompleted() {
   const navigate = useNavigate();
   const applicationContext = useApplicationContext();
   const application = applicationContext.state.data;
+  const [idToDownload, setIdToDownload] = useState<number | undefined>();
+
+  const { downloadedApplication, isLoading } = useDownloadApplication(idToDownload);
 
   const onGoHomeHandler = () => {
     navigate('/');
   };
 
-  const onDownloadApplication = () => {
-    // eslint-disable-next-line no-console
-    console.log('download application');
+  const onDownloadApplication = async () => {
+    setIdToDownload(application?.id);
   };
 
+  useEffect(() => {
+    if (downloadedApplication) {
+      const href = window.URL.createObjectURL(downloadedApplication);
+
+      const anchorElement = document.createElement('a');
+
+      anchorElement.href = href;
+      const filename = `${t('application')}-${application?.borrower.legal_identifier}.zip`;
+      anchorElement.download = filename;
+
+      document.body.appendChild(anchorElement);
+      anchorElement.click();
+
+      document.body.removeChild(anchorElement);
+      window.URL.revokeObjectURL(href);
+      setIdToDownload(undefined);
+    }
+  }, [application?.borrower.legal_identifier, downloadedApplication, t]);
+
   return (
     <div className="xl:w-4/5">
       <Title type="page" label={t('Application Completed')} className="mb-4" />
@@ -33,7 +56,7 @@ function ApplicationCompleted() {
           <Button primary={false} className="md:mr-4" label={t('Back to home')} onClick={onGoHomeHandler} />
         </div>
         <div>
-          <Button disabled label={t('Download application')} onClick={onDownloadApplication} />
+          <Button label={t('Download application')} onClick={onDownloadApplication} disabled={isLoading} />
         </div>
       </div>
       <Text className="mb-10 text-sm font-light">
diff --git a/src/pages/fi/ReviewContract.tsx b/src/pages/fi/ReviewContract.tsx
index 8b201d5..c7eb0b0 100644
--- a/src/pages/fi/ReviewContract.tsx
+++ b/src/pages/fi/ReviewContract.tsx
@@ -4,7 +4,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Box, Link as MUILink } from '@mui/material';
 import { useT } from '@transifex/react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import Text from 'src/stories/text/Text';
@@ -12,6 +12,7 @@ import Title from 'src/stories/title/Title';
 
 import { DOCUMENTS_TYPE } from '../../constants';
 import useCompleteApplication from '../../hooks/useCompleteApplication';
+import useDownloadApplication from '../../hooks/useDownloadApplication';
 import useDownloadDocument from '../../hooks/useDownloadDocument';
 import useApplicationContext from '../../hooks/useSecureApplicationContext';
 import { FormCompleteApplicationInput, IBorrowerDocument, completeApplicationSchema } from '../../schemas/application';
@@ -24,13 +25,20 @@ function ReviewContract() {
   const navigate = useNavigate();
   const { isLoading, completeApplicationMutation } = useCompleteApplication();
   const applicationContext = useApplicationContext();
+  const application = applicationContext.state.data;
+  const [idToDownloadApplication, setIdToDownloadApplication] = useState<number | undefined>();
+
+  const { downloadedApplication, isLoading: isLoadingDownload } = useDownloadApplication(idToDownloadApplication);
+
+  const onDownloadApplicationHandler = useCallback(() => {
+    setIdToDownloadApplication(application?.id);
+  }, [setIdToDownloadApplication, application?.id]);
 
   const [idToDownload, setIdToDownload] = useState<number | undefined>();
   const [contract, setContract] = useState<IBorrowerDocument | undefined>();
 
   const { downloadedDocument, isLoading: isLoadingDocument } = useDownloadDocument(idToDownload);
 
-  const application = applicationContext.state.data;
   const borrower_documents = application?.borrower_documents;
 
   const onDownloadContract = () => {
@@ -64,15 +72,29 @@ function ReviewContract() {
     }
   }, [downloadedDocument, contract]);
 
+  useEffect(() => {
+    if (downloadedApplication) {
+      const href = window.URL.createObjectURL(downloadedApplication);
+
+      const anchorElement = document.createElement('a');
+
+      anchorElement.href = href;
+      const filename = `${t('application')}-${application?.borrower.legal_identifier}.zip`;
+      anchorElement.download = filename;
+
+      document.body.appendChild(anchorElement);
+      anchorElement.click();
+
+      document.body.removeChild(anchorElement);
+      window.URL.revokeObjectURL(href);
+      setIdToDownloadApplication(undefined);
+    }
+  }, [application?.borrower.legal_identifier, downloadedApplication, t]);
+
   const onGoHomeHandler = () => {
     navigate('/');
   };
 
-  const onDownloadApplication = () => {
-    // eslint-disable-next-line no-console
-    console.log('download application');
-  };
-
   const methods = useForm<FormCompleteApplicationInput>({
     resolver: zodResolver(completeApplicationSchema),
   });
@@ -152,10 +174,19 @@ function ReviewContract() {
               <Button primary={false} className="md:mr-4" label={t('Back to home')} onClick={onGoHomeHandler} />
             </div>
             <div>
-              <Button className="md:mr-4" label={t('Credit ready')} type="submit" disabled={isLoading} />
+              <Button
+                className="md:mr-4"
+                label={t('Credit ready')}
+                type="submit"
+                disabled={isLoading || isLoadingDocument || isLoadingDownload}
+              />
             </div>
             <div>
-              <Button disabled label={t('Download application')} onClick={onDownloadApplication} />
+              <Button
+                disabled={isLoadingDownload}
+                label={t('Download application')}
+                onClick={onDownloadApplicationHandler}
+              />
             </div>
           </div>
           <Text className="mb-10 text-sm font-light">
diff --git a/src/pages/fi/StageFiveApproved.tsx b/src/pages/fi/StageFiveApproved.tsx
index 27e9c32..3a55bbf 100644
--- a/src/pages/fi/StageFiveApproved.tsx
+++ b/src/pages/fi/StageFiveApproved.tsx
@@ -1,5 +1,5 @@
- 
 import { useT } from '@transifex/react';
+import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import StepImage from 'src/assets/pages/stage-five.svg';
 import useApplicationContext from 'src/hooks/useSecureApplicationContext';
@@ -7,16 +7,39 @@ import Button from 'src/stories/button/Button';
 import Text from 'src/stories/text/Text';
 import Title from 'src/stories/title/Title';
 
+import useDownloadApplication from '../../hooks/useDownloadApplication';
+
 export function StageFiveApproved() {
   const t = useT();
   const navigate = useNavigate();
   const applicationContext = useApplicationContext();
   const application = applicationContext.state.data;
+  const [idToDownload, setIdToDownload] = useState<number | undefined>();
 
-  const onDownloadApplication = () => {
-    // eslint-disable-next-line no-console
-    console.log('download application');
-  };
+  const { downloadedApplication, isLoading } = useDownloadApplication(idToDownload);
+
+  const onDownloadApplicationHandler = useCallback(() => {
+    setIdToDownload(application?.id);
+  }, [setIdToDownload, application?.id]);
+
+  useEffect(() => {
+    if (downloadedApplication) {
+      const href = window.URL.createObjectURL(downloadedApplication);
+
+      const anchorElement = document.createElement('a');
+
+      anchorElement.href = href;
+      const filename = `${t('application')}-${application?.borrower.legal_identifier}.zip`;
+      anchorElement.download = filename;
+
+      document.body.appendChild(anchorElement);
+      anchorElement.click();
+
+      document.body.removeChild(anchorElement);
+      window.URL.revokeObjectURL(href);
+      setIdToDownload(undefined);
+    }
+  }, [application?.borrower.legal_identifier, downloadedApplication, t]);
 
   const onGoHomeHandler = () => {
     navigate('/');
@@ -42,7 +65,7 @@ export function StageFiveApproved() {
           <Button primary={false} className="md:mr-4" label={t('Back to home')} onClick={onGoHomeHandler} />
         </div>
         <div>
-          <Button disabled label={t('Download application')} onClick={onDownloadApplication} />
+          <Button disabled={isLoading} label={t('Download application')} onClick={onDownloadApplicationHandler} />
         </div>
       </div>
     </>
diff --git a/src/pages/fi/ViewApplication.tsx b/src/pages/fi/ViewApplication.tsx
index 756b6dc..41117e0 100644
--- a/src/pages/fi/ViewApplication.tsx
+++ b/src/pages/fi/ViewApplication.tsx
@@ -30,7 +30,7 @@ export function ViewApplication() {
         <>
           <Box className="flex flex-row items-center mb-2">
             <Text className="text-lg mr-2">{t('Status:')}</Text>
-            <Text className="text-lg font-light">{renderApplicationStatus(application.status)}</Text>
+            <Text className="text-lg font-light">{t(renderApplicationStatus(application.status))}</Text>
           </Box>
 
           {application.status === APPLICATION_STATUS.APPROVED && (
diff --git a/src/pages/msme/ApplicationMSMECompleted.tsx b/src/pages/msme/ApplicationMSMECompleted.tsx
new file mode 100644
index 0000000..188a731
--- /dev/null
+++ b/src/pages/msme/ApplicationMSMECompleted.tsx
@@ -0,0 +1,51 @@
+import { Link as MUILink } from '@mui/material';
+import { useT } from '@transifex/react';
+import { Button } from 'src/stories/button/Button';
+import Text from 'src/stories/text/Text';
+import Title from 'src/stories/title/Title';
+
+import useApplicationContext from '../../hooks/useApplicationContext';
+
+function ApplicationMSMECompleted() {
+  const t = useT();
+  const applicationContext = useApplicationContext();
+
+  return (
+    <>
+      <Title type="page" label={t('Application Completed')} className="mb-8" />
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="col-span-1 md:col-span-2 md:mr-10">
+          <Text className="mb-8">
+            {t(
+              'Thank you for using Credere. This application has been mark as completed with funds disbursed by {fi_name}.',
+              {
+                fi_name: applicationContext.state.data?.lender.name,
+              },
+            )}
+          </Text>
+          <Text className="mb-8">
+            {t(
+              'If you have any questions, you can reach out to member of the Open Contracting Partnership team at: credere@open-contracting.org.',
+            )}
+          </Text>
+
+          <div className="mt-5 mb-10 grid grid-cols-1 gap-4 md:flex md:gap-0">
+            <div>
+              <Button
+                className="md:mr-4"
+                label={t('Learn more about OCP')}
+                target="_blank"
+                rel="noreferrer"
+                component={MUILink}
+                href={`${import.meta.env.VITE_MORE_INFO_OCP_URL || 'https://www.open-contracting.org/es/'}`}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="my-6 md:my-0 md:ml-10" />
+      </div>
+    </>
+  );
+}
+
+export default ApplicationMSMECompleted;
diff --git a/src/pages/msme/ConfirmSubmission.tsx b/src/pages/msme/ConfirmSubmission.tsx
new file mode 100644
index 0000000..b862126
--- /dev/null
+++ b/src/pages/msme/ConfirmSubmission.tsx
@@ -0,0 +1,124 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Box } from '@mui/material';
+import { useT } from '@transifex/react';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import Text from 'src/stories/text/Text';
+import Title from 'src/stories/title/Title';
+
+import CreditProductConfirmation from '../../components/CreditProductConfirmation';
+import FAQComponent from '../../components/FAQComponent';
+import NeedHelpComponent from '../../components/NeedHelpComponent';
+import { DOCUMENT_TYPES_NAMES } from '../../constants';
+import useApplicationContext from '../../hooks/useApplicationContext';
+import useSubmitApplication from '../../hooks/useSubmitApplication';
+import { SubmitInput, submitSchema } from '../../schemas/application';
+import Button from '../../stories/button/Button';
+import Checkbox from '../../stories/checkbox/Checkbox';
+
+function ConfirmSubmission() {
+  const t = useT();
+  const navigate = useNavigate();
+  const { isLoading, submitApplicationMutation } = useSubmitApplication();
+  const applicationContext = useApplicationContext();
+
+  const onSubmitHandler: SubmitHandler<SubmitInput> = () => {
+    submitApplicationMutation({ uuid: applicationContext.state.data?.application.uuid });
+  };
+
+  const methods = useForm<SubmitInput>({
+    resolver: zodResolver(submitSchema),
+  });
+
+  const onBackHandler = () => {
+    navigate('../documents');
+  };
+
+  const { handleSubmit } = methods;
+
+  return (
+    <>
+      <Title type="page" label={t('Confirm Submission')} className="mb-10" />
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="col-span-1 md:col-span-2 md:mr-10">
+          <Text className="mb-2">
+            {t('Please, confirm the data you will submit to Credere and {fi_name}.', {
+              fi_name: applicationContext.state.data?.lender.name,
+            })}
+          </Text>
+
+          <Text className="mb-8">{t('You have selected the following financing option:')}</Text>
+
+          {applicationContext.state.data?.creditProduct && applicationContext.state.data?.application && (
+            <CreditProductConfirmation
+              creditProduct={{
+                ...applicationContext.state.data?.creditProduct,
+                lender: applicationContext.state.data?.lender,
+              }}
+              application={applicationContext.state.data?.application}
+            />
+          )}
+
+          <Title
+            type="subsection"
+            className="mb-2 mt-8"
+            label={t('Documents to share with  {fi_name}.', {
+              fi_name: applicationContext.state.data?.lender.name,
+            })}
+          />
+          <ul>
+            {applicationContext.state.data?.creditProduct.required_document_types &&
+              Object.keys(applicationContext.state.data?.creditProduct.required_document_types)
+                .filter(
+                  (documentTypeKey: string) =>
+                    applicationContext.state.data?.creditProduct.required_document_types[documentTypeKey],
+                )
+                .map((documentTypeKey: string) => (
+                  <li key={documentTypeKey} className="text-darkest">
+                    <Text className="mb-2">{DOCUMENT_TYPES_NAMES[documentTypeKey]}</Text>
+                  </li>
+                ))}
+          </ul>
+          <FormProvider {...methods}>
+            <Box
+              component="form"
+              onSubmit={handleSubmit(onSubmitHandler)}
+              noValidate
+              autoComplete="off"
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+              }}>
+              <Checkbox
+                name="agree_topass_info_to_banking_partner"
+                defaultValue={false}
+                label={t(
+                  'I agree for these documents, the information entered in my application and the information about my award to be passed to {fi_name}.',
+                  {
+                    fi_name: applicationContext.state.data?.lender.name,
+                  },
+                )}
+              />
+
+              <div className="mt-6 md:mb-8 grid grid-cols-1 gap-4 md:flex md:gap-0">
+                <div>
+                  <Button className="md:mr-4" label={t('Back')} onClick={onBackHandler} disabled={isLoading} />
+                </div>
+                <div>
+                  <Button label={t('Submit Application')} type="submit" disabled={isLoading} />
+                </div>
+              </div>
+            </Box>
+          </FormProvider>
+        </div>
+        <div className="my-6 md:my-0 md:ml-10">
+          <NeedHelpComponent />
+          <FAQComponent className="my-8" />
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default ConfirmSubmission;
diff --git a/src/pages/msme/IntroMsme.tsx b/src/pages/msme/IntroMsme.tsx
index 264b1b8..8812fc7 100644
--- a/src/pages/msme/IntroMsme.tsx
+++ b/src/pages/msme/IntroMsme.tsx
@@ -97,11 +97,6 @@ function IntroMsme() {
                 display: 'flex',
                 flexDirection: 'column',
               }}>
-              <Checkbox
-                name="agree_topass_info_to_banking_partner"
-                defaultValue={false}
-                label={t('I agree for my details to be passed onto the banking partner.')}
-              />
               <Checkbox
                 name="accept_terms_and_conditions"
                 defaultValue={false}
diff --git a/src/pages/msme/TermsAndConditions.tsx b/src/pages/msme/TermsAndConditions.tsx
index fbe506d..f39ddd2 100644
--- a/src/pages/msme/TermsAndConditions.tsx
+++ b/src/pages/msme/TermsAndConditions.tsx
@@ -6,12 +6,13 @@ import Text from 'src/stories/text/Text';
 import Title from 'src/stories/title/Title';
 
 import FAQComponent from '../../components/FAQComponent';
-import { formatDate } from '../../util';
+import useLocalizedDateFormatter from '../../hooks/useLocalizedDateFormatter';
 
 function TermsAndConditions() {
   const t = useT();
   const navigate = useNavigate();
   const dateUpdate = new Date();
+  const { formatDate } = useLocalizedDateFormatter();
 
   return (
     <>
diff --git a/src/pages/msme/UploadDocuments.tsx b/src/pages/msme/UploadDocuments.tsx
index 491b0e3..0035803 100644
--- a/src/pages/msme/UploadDocuments.tsx
+++ b/src/pages/msme/UploadDocuments.tsx
@@ -4,6 +4,7 @@ import { Box } from '@mui/material';
 import { useT } from '@transifex/react';
 import { useEffect, useMemo, useState } from 'react';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
 import ConfirmIcon from 'src/assets/icons/confirm.svg';
 import EditIcon from 'src/assets/icons/edit.svg';
 import Text from 'src/stories/text/Text';
@@ -16,7 +17,6 @@ import { APPLICATION_STATUS, DOCUMENTS_TYPE } from '../../constants';
 import useApplicationContext from '../../hooks/useApplicationContext';
 import useChangeEmail from '../../hooks/useChangeEmail';
 import useSubmitAdditionalData from '../../hooks/useSubmitAdditionalData';
-import useSubmitApplication from '../../hooks/useSubmitApplication';
 import { FormChangeEmailInput, changeEmailSchema } from '../../schemas/application';
 import Button from '../../stories/button/Button';
 import FormInput from '../../stories/form-input/FormInput';
@@ -24,9 +24,9 @@ import LinkButton from '../../stories/link-button/LinkButton';
 
 function UploadDocuments() {
   const t = useT();
+  const navigate = useNavigate();
   const [editEmail, setEditEmail] = useState<boolean>(false);
   const { isLoading: isLoadingChangeEmail, changeEmailMutation, data } = useChangeEmail();
-  const { isLoading, submitApplicationMutation } = useSubmitApplication();
   const { isLoading: isLoadingAdditionalData, submitAdditionalDataMutation } = useSubmitAdditionalData();
   const applicationContext = useApplicationContext();
   const application = applicationContext.state.data?.application;
@@ -47,7 +47,7 @@ function UploadDocuments() {
     if (applicationContext.state.data?.application.status === APPLICATION_STATUS.INFORMATION_REQUESTED) {
       submitAdditionalDataMutation({ uuid: applicationContext.state.data?.application.uuid });
     } else {
-      submitApplicationMutation({ uuid: applicationContext.state.data?.application.uuid });
+      navigate('../confirm-submission');
     }
   };
 
@@ -176,9 +176,13 @@ function UploadDocuments() {
 
             <div>
               <Button
-                label={t('Submit Application')}
+                label={
+                  applicationContext.state.data?.application.status === APPLICATION_STATUS.INFORMATION_REQUESTED
+                    ? t('Submit Additional Data')
+                    : t('Continue')
+                }
                 onClick={submitApplicationHandler}
-                disabled={!allUploaded || isLoading || isLoadingAdditionalData}
+                disabled={!allUploaded || isLoadingAdditionalData}
               />
             </div>
           </div>
diff --git a/src/pages/msme/ViewCreditOptions.tsx b/src/pages/msme/ViewCreditOptions.tsx
index 1c650a8..dbd7c43 100644
--- a/src/pages/msme/ViewCreditOptions.tsx
+++ b/src/pages/msme/ViewCreditOptions.tsx
@@ -14,6 +14,7 @@ import LoansTable from '../../components/LoansTable';
 import { MSME_TYPES, MSME_TYPES_OPTIONS, SECTOR_TYPES } from '../../constants';
 import useApplicationContext from '../../hooks/useApplicationContext';
 import useGetCreditProductsOptions from '../../hooks/useGetCreditProductsOptions';
+import useLocalizedDateFormatter from '../../hooks/useLocalizedDateFormatter';
 import useSelectCreditProduct from '../../hooks/useSelectCreditProduct';
 import {
   CreditOptionsInput,
@@ -27,11 +28,12 @@ import {
 import FormInput from '../../stories/form-input/FormInput';
 import FormSelect from '../../stories/form-select/FormSelect';
 import RadioGroup from '../../stories/radio-group/RadioGroup';
-import { addMonthsToDate, formatCurrency, formatDateFromString, isDateBeforeMonths } from '../../util';
+import { addMonthsToDate, formatCurrency, isDateBeforeMonths } from '../../util';
 
 const DEBOUNCE_TIME = 800;
 function ViewCreditOptions() {
   const t = useT();
+  const { formatDateFromString } = useLocalizedDateFormatter();
 
   const applicationContext = useApplicationContext();
   const { data, isLoading: isLoadingOptions, getCreditProductOptionsMutation } = useGetCreditProductsOptions();
@@ -180,7 +182,7 @@ function ViewCreditOptions() {
         : '',
       award_contract_startdate: `${formatDateFromString(applicationContext.state.data.award.contractperiod_startdate)}`,
     };
-  }, [applicationContext.state.data]);
+  }, [applicationContext.state.data, formatDateFromString]);
 
   return (
     <>
diff --git a/src/pages/ocp/ApplicationDetail.tsx b/src/pages/ocp/ApplicationDetail.tsx
index 92ba1d5..22c367b 100644
--- a/src/pages/ocp/ApplicationDetail.tsx
+++ b/src/pages/ocp/ApplicationDetail.tsx
@@ -50,7 +50,7 @@ export function ApplicationDetail({ application, readonly }: ApplicationDetailPr
       </div>
       <Box className="flex flex-row items-center mb-2">
         <Text className="text-lg mr-2">{t('Status:')}</Text>
-        <Text className="text-lg font-light">{renderApplicationStatus(application.status)}</Text>
+        <Text className="text-lg font-light">{t(renderApplicationStatus(application.status))}</Text>
       </Box>
 
       {application.status === APPLICATION_STATUS.APPROVED && <DataDisplay data={application.lender_approved_data} />}
diff --git a/src/pages/ocp/CreditProductForm.tsx b/src/pages/ocp/CreditProductForm.tsx
index b4dd8a4..4797322 100644
--- a/src/pages/ocp/CreditProductForm.tsx
+++ b/src/pages/ocp/CreditProductForm.tsx
@@ -1,7 +1,3 @@
- 
-
- 
-
 /* eslint-disable react/jsx-props-no-spreading */
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Box } from '@mui/material';
@@ -22,6 +18,8 @@ import { z } from 'zod';
 
 import { getCreditProductFn } from '../../api/private';
 import {
+  BORROWER_TYPE,
+  BORROWER_TYPES_NAMES,
   CREDIT_PRODUCT_OPTIONS,
   DOCUMENTS_TYPE,
   DOCUMENT_TYPES_NAMES,
@@ -127,6 +125,25 @@ export function CreditProductForm({ creditProduct, lenderId }: CreditProductForm
             placeholder={t('Type')}
           />
 
+          <Text className="mb-4">
+            {t('Select the legal type of MSMEs the credit provider is willing to offer credit to')}
+          </Text>
+          <Box className="mb-4">
+            <Box className="w-3/5 flex flex-col items-start justify-start gap-2">
+              <Checkbox
+                label={BORROWER_TYPES_NAMES[BORROWER_TYPE.NATURAL_PERSON]}
+                name={`borrower_types.${BORROWER_TYPE.NATURAL_PERSON}`}
+                className={errors.borrower_types ? 'text-red' : ''}
+              />
+              <Checkbox
+                label={BORROWER_TYPES_NAMES[BORROWER_TYPE.LEGAL_PERSON]}
+                name={`borrower_types.${BORROWER_TYPE.LEGAL_PERSON}`}
+                className={errors.borrower_types ? 'text-red' : ''}
+              />
+            </Box>
+            <FormInputError fieldError={errors.borrower_types} />
+          </Box>
+
           <Text className="mb-1">
             {t(
               'Enter the lower and upper limits that the credit provider will be willing to offer for this credit product',
diff --git a/src/pages/ocp/HomeOCP.tsx b/src/pages/ocp/HomeOCP.tsx
index 7321bfe..d652cb9 100644
--- a/src/pages/ocp/HomeOCP.tsx
+++ b/src/pages/ocp/HomeOCP.tsx
@@ -1,4 +1,4 @@
-import { Container } from '@mui/material';
+import { Container, MenuItem, Select, SelectChangeEvent } from '@mui/material';
 import { useT } from '@transifex/react';
 import dayjs, { Dayjs } from 'dayjs';
 import { useEffect, useState } from 'react';
@@ -8,6 +8,7 @@ import Title from 'src/stories/title/Title';
 
 import { ChartBar, ChartPie } from '../../components/Charts';
 import LendersButtonGroup from '../../components/LendersButtonGroup';
+import { STATISTICS_DATE_FILTER, STATISTICS_DATE_FILTER_OPTIONS } from '../../constants';
 import CURRENCY_FORMAT_OPTIONS from '../../constants/intl';
 import useGetStatisticsOCP from '../../hooks/useGetStatisticsOCP';
 import useGetStatisticsOCPoptIn from '../../hooks/useGetStatisticsOCPoptIn';
@@ -15,7 +16,7 @@ import { DECLINE_FEEDBACK_NAMES } from '../../schemas/application';
 import { ChartData } from '../../schemas/statitics';
 import DashboardChartContainer from '../../stories/dashboard/DashboardChartContainer';
 import DashboardItemContainer from '../../stories/dashboard/DashboardItemContainer';
-import { DatePicker } from '../../stories/form-input/FormInput';
+import { DatePicker, Input } from '../../stories/form-input/FormInput';
 import Loader from '../../stories/loader/Loader';
 import { formatCurrency, renderSector } from '../../util';
 
@@ -46,6 +47,7 @@ export function HomeOCP() {
   const [initialDate, setInitialDate] = useState<string | null>(null);
   const [finalDate, setFinalDate] = useState<string | null>(null);
   const [lenderId, setLenderId] = useState<number | null>(null);
+  const [dateFilterRange, setDataFilterRange] = useState<string>(STATISTICS_DATE_FILTER.CUSTOM_RANGE);
 
   const isBeforeInitialDate = (date: unknown) => {
     if (!initialDate) return false;
@@ -57,7 +59,16 @@ export function HomeOCP() {
     return dayjs(date as string).isAfter(dayjs(finalDate));
   };
 
-  const { data: dataKPI, isLoading: isLoadingKPI } = useGetStatisticsOCP(initialDate, finalDate, lenderId);
+  const handleChangeSelectDateFilter = (event: SelectChangeEvent) => {
+    setDataFilterRange(event.target.value as string);
+  };
+
+  const { data: dataKPI, isLoading: isLoadingKPI } = useGetStatisticsOCP(
+    dateFilterRange,
+    initialDate,
+    finalDate,
+    lenderId,
+  );
 
   return (
     <>
@@ -116,9 +127,24 @@ export function HomeOCP() {
       <LendersButtonGroup onLenderSelected={(id: number | null) => setLenderId(id)} />
       <Title type="subsection" label={t('Data Range')} className="mb-6 mt-10" />
       <div className="mt-6 md:mb-8 grid grid-cols-1 gap-4 md:flex md:gap-0">
+        <div className="md:mr-4">
+          <Select
+            displayEmpty
+            disableUnderline
+            input={<Input />}
+            value={dateFilterRange}
+            onChange={handleChangeSelectDateFilter}>
+            {STATISTICS_DATE_FILTER_OPTIONS.map((option) => (
+              <MenuItem key={`key-${option.value}`} value={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </div>
         <div className="md:mr-4">
           <DatePicker
             shouldDisableDate={isAfterFinalDate}
+            disabled={dateFilterRange !== STATISTICS_DATE_FILTER.CUSTOM_RANGE}
             onChange={(value: unknown) => {
               const date = value as Dayjs;
               if (date.isValid()) {
@@ -139,6 +165,7 @@ export function HomeOCP() {
         <div>
           <DatePicker
             shouldDisableDate={isBeforeInitialDate}
+            disabled={dateFilterRange !== STATISTICS_DATE_FILTER.CUSTOM_RANGE}
             onChange={(value: unknown) => {
               const date = value as Dayjs;
               if (date.isValid()) {
@@ -255,7 +282,7 @@ export function HomeOCP() {
         <div className="grid lg:gap-10 grid-cols-1 lg:grid-cols-2 md:grid-cols-1 sm:grid-cols-1">
           <div className="col-span-1">
             <DashboardChartContainer label={t('Breakdown of FIs chosen by MSME')}>
-              <ChartBar data={data.fis_choosen_by_msme} />
+              <ChartBar data={data.opt_in_stat.fis_choosen_by_msme} />
             </DashboardChartContainer>
           </div>
         </div>
diff --git a/src/routes/AppRouter.tsx b/src/routes/AppRouter.tsx
index 29485bd..8762762 100644
--- a/src/routes/AppRouter.tsx
+++ b/src/routes/AppRouter.tsx
@@ -31,6 +31,7 @@ import SecureApplicationContextProvider from 'src/providers/SecureApplicationCon
 import StateContextProvider from 'src/providers/StateContextProvider';
 import ProtectedRoute from 'src/routes/ProtectedRoute';
 
+import { USER_TYPES } from '../constants';
 import PageLayout from '../layout/PageLayout';
 import SecureApplicationLayout from '../layout/SecureApplicationLayout';
 import ApplicationCompleted from '../pages/fi/ApplicationCompleted';
@@ -38,9 +39,11 @@ import ReviewContract from '../pages/fi/ReviewContract';
 import StageFiveApproved from '../pages/fi/StageFiveApproved';
 import StageFiveRejected from '../pages/fi/StageFiveRejected';
 import ViewApplication from '../pages/fi/ViewApplication';
+import ApplicationMSMECompleted from '../pages/msme/ApplicationMSMECompleted';
 import ChangePrimaryEmail from '../pages/msme/ChangePrimaryEmail';
 import ConfirmCreditProduct from '../pages/msme/ConfirmCreditProduct';
 import ConfirmFindAlternativeCredit from '../pages/msme/ConfirmFindAlternativeCredit';
+import ConfirmSubmission from '../pages/msme/ConfirmSubmission';
 import Rejected from '../pages/msme/Rejected';
 import TermsAndConditions from '../pages/msme/TermsAndConditions';
 import UploadContract from '../pages/msme/UploadContract';
@@ -76,7 +79,7 @@ const router = createBrowserRouter([
   {
     path: '/admin/applications',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <Applications />
         </PageLayout>
@@ -87,7 +90,7 @@ const router = createBrowserRouter([
   {
     path: '/admin/applications/:id/view',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <LoadApplication readonly />
         </PageLayout>
@@ -98,7 +101,7 @@ const router = createBrowserRouter([
   {
     path: '/admin/applications/:id/update',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <LoadApplication />
         </PageLayout>
@@ -109,7 +112,7 @@ const router = createBrowserRouter([
   {
     path: '/settings',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <Settings />
         </PageLayout>
@@ -120,7 +123,7 @@ const router = createBrowserRouter([
   {
     path: '/settings/lender/new',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <LenderForm />
         </PageLayout>
@@ -131,7 +134,7 @@ const router = createBrowserRouter([
   {
     path: '/settings/lender/:id/edit',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <LoadLender />
         </PageLayout>
@@ -142,7 +145,7 @@ const router = createBrowserRouter([
   {
     path: '/settings/user/new',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <UserForm />
         </PageLayout>
@@ -153,7 +156,7 @@ const router = createBrowserRouter([
   {
     path: '/settings/user/:id/edit',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <LoadUser />
         </PageLayout>
@@ -164,7 +167,7 @@ const router = createBrowserRouter([
   {
     path: '/settings/lender/:lenderId/credit-product/new',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <LoadCreditProduct />
         </PageLayout>
@@ -175,7 +178,7 @@ const router = createBrowserRouter([
   {
     path: '/settings/lender/:lenderId/credit-product/:id/edit',
     element: (
-      <ProtectedRoute>
+      <ProtectedRoute requiredUserType={USER_TYPES.OCP}>
         <PageLayout>
           <LoadCreditProduct />
         </PageLayout>
@@ -283,6 +286,14 @@ const router = createBrowserRouter([
         path: 'upload-contract-completed',
         element: <UploadContractCompleted />,
       },
+      {
+        path: 'application-completed',
+        element: <ApplicationMSMECompleted />,
+      },
+      {
+        path: 'confirm-submission',
+        element: <ConfirmSubmission />,
+      },
       {
         path: 'submission-completed',
         element: <SubmissionCompleted />,
diff --git a/src/routes/ProtectedRoute.tsx b/src/routes/ProtectedRoute.tsx
index 8561c6b..cd94ff6 100644
--- a/src/routes/ProtectedRoute.tsx
+++ b/src/routes/ProtectedRoute.tsx
@@ -1,13 +1,27 @@
+import { useT } from '@transifex/react';
 import { PropsWithChildren } from 'react';
 import { Navigate } from 'react-router-dom';
 
+import { USER_TYPES } from '../constants';
 import useUser from '../hooks/useUser';
 
-export default function ProtectedRoute({ children }: PropsWithChildren) {
+export interface ProtectedRouteProps extends PropsWithChildren {
+  requiredUserType?: USER_TYPES;
+}
+
+export default function ProtectedRoute({ children, requiredUserType }: ProtectedRouteProps) {
   const user = useUser();
+  const t = useT();
 
   if (!user) return <Navigate to="/login" replace />;
+  if (requiredUserType && requiredUserType !== user.type) {
+    throw new Error(t('Not authorized to access this page'));
+  }
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{children}</>;
 }
+
+ProtectedRoute.defaultProps = {
+  requiredUserType: undefined,
+};
diff --git a/src/schemas/OCPsettings.ts b/src/schemas/OCPsettings.ts
index 1145fed..1fe1494 100644
--- a/src/schemas/OCPsettings.ts
+++ b/src/schemas/OCPsettings.ts
@@ -1,7 +1,7 @@
 import { t } from '@transifex/native';
 import { TypeOf, boolean, coerce, nativeEnum, object, preprocess, string } from 'zod';
 
-import { CREDIT_PRODUCT_TYPE, DOCUMENTS_TYPE, MSME_TYPES } from '../constants';
+import { BORROWER_TYPE, CREDIT_PRODUCT_TYPE, DOCUMENTS_TYPE, MSME_TYPES } from '../constants';
 
 const creditProviderNameSchema = string().min(1, t('Provider name is required'));
 const creditProviderTypeSchema = string().nonempty(t('Provider type is required'));
@@ -80,6 +80,13 @@ export const creditProductSchema = object({
       message: t('You need to check at least one option'),
     },
   ),
+  borrower_types: object({
+    [BORROWER_TYPE.NATURAL_PERSON]: boolean(),
+    [BORROWER_TYPE.LEGAL_PERSON]: boolean(),
+  }).refine((data) => data[BORROWER_TYPE.NATURAL_PERSON] || data[BORROWER_TYPE.LEGAL_PERSON], {
+    path: [''],
+    message: t('You need to check at least one option'),
+  }),
   other_fees_total_amount: preprocess(
     (args) => (args === '' ? undefined : args),
     coerce
diff --git a/src/schemas/application.ts b/src/schemas/application.ts
index 4160c80..3cf381d 100644
--- a/src/schemas/application.ts
+++ b/src/schemas/application.ts
@@ -2,21 +2,26 @@
 import { t } from '@transifex/native';
 import { TypeOf, boolean, coerce, nativeEnum, object, string } from 'zod';
 
-import { APPLICATION_STATUS, DOCUMENTS_TYPE, MSME_TYPES } from '../constants';
+import { APPLICATION_STATUS, DOCUMENTS_TYPE, MSME_TYPES, USER_TYPES } from '../constants';
 import { isDateAfterCurrentDate } from '../util';
 import { emailSchema } from './auth';
 
-const booleanRequiredSchema = boolean().refine((value) => value === true, {
-  message: t('You need to check this option to Access the Scheme'),
-});
-
 export const introSchema = object({
-  agree_topass_info_to_banking_partner: booleanRequiredSchema,
-  accept_terms_and_conditions: booleanRequiredSchema,
+  accept_terms_and_conditions: boolean().refine((value) => value === true, {
+    message: t('You need to check this option to Access the Scheme'),
+  }),
 });
 
 export type IntroInput = TypeOf<typeof introSchema>;
 
+export const submitSchema = object({
+  agree_topass_info_to_banking_partner: boolean().refine((value) => value === true, {
+    message: t('You need to check this option to submit the application'),
+  }),
+});
+
+export type SubmitInput = TypeOf<typeof submitSchema>;
+
 const UUIDType = string().optional();
 
 export const applicationBaseSchema = object({
@@ -215,6 +220,12 @@ export interface IBorrowerDocument {
   name: string;
 }
 
+export interface IModifiedDataFields {
+  modified_at: string;
+  user: string;
+  user_type: USER_TYPES;
+}
+
 export interface IApplication {
   id: number;
   borrower: IBorrower;
@@ -255,6 +266,10 @@ export interface IApplication {
   credit_product_id?: number;
   credit_product?: ICreditProduct;
   borrower_documents: IBorrowerDocument[];
+  modified_data_fields?: {
+    award_updates: { [key: string]: IModifiedDataFields };
+    borrower_updates: { [key: string]: IModifiedDataFields };
+  };
 }
 
 export interface IExtendedApplication {
diff --git a/src/schemas/statitics.ts b/src/schemas/statitics.ts
index ecfb919..4be3c78 100644
--- a/src/schemas/statitics.ts
+++ b/src/schemas/statitics.ts
@@ -23,6 +23,7 @@ export interface OptInStat {
   opt_in_percentage: number;
   sector_statistics: ChartData[];
   rejected_reasons_count_by_reason: ChartData[];
+  fis_choosen_by_msme: ChartData[];
 }
 
 export interface StatisticsFI {
@@ -31,10 +32,10 @@ export interface StatisticsFI {
 
 export interface StatisticsOCPoptIn {
   opt_in_stat: OptInStat;
-  fis_choosen_by_msme: ChartData[];
 }
 
 export interface StatisticsParmsInput {
+  custom_range?: string;
   initial_date?: string;
   final_date?: string;
   lender_id?: number;
diff --git a/src/stories/faq/FAQSection.tsx b/src/stories/faq/FAQSection.tsx
index 12e11ac..cf6230d 100644
--- a/src/stories/faq/FAQSection.tsx
+++ b/src/stories/faq/FAQSection.tsx
@@ -29,7 +29,7 @@ export function FAQSection({ title, className, children }: FAQSectionProps & Pro
         <Typography variant="h6" className="text-darkest text-base font-normal">
           {title}
         </Typography>
-        <Box className="ml-auto p-2">
+        <Box className="ml-auto py-2 pr-2 pl-5">
           <img
             className={twMerge(`transition-transform duration-300 ease-in-out transform ${open ? '' : 'rotate-180'}`)}
             src={ArrowGreen}
diff --git a/src/stories/form-input/FormInput.tsx b/src/stories/form-input/FormInput.tsx
index 1c352b3..5a8fb53 100644
--- a/src/stories/form-input/FormInput.tsx
+++ b/src/stories/form-input/FormInput.tsx
@@ -135,7 +135,7 @@ export const DatePicker = styled(MUIDatePicker)`
   }
   &.MuiTextField-root {
     background-color: white;
-    padding: 17px 18px;
+    padding: 18px 18px;
     margin-bottom: 0.5rem;
     border-width: 1px;
     border-style: solid;
diff --git a/src/util/index.ts b/src/util/index.ts
index eff504d..0fbedbc 100644
--- a/src/util/index.ts
+++ b/src/util/index.ts
@@ -22,15 +22,15 @@ const dateFormatOptions: Intl.DateTimeFormatOptions = {
   year: 'numeric', // Display full year
 };
 
-export const formatDate = (date: Date) => date.toLocaleDateString('en-US', dateFormatOptions);
+export const formatLocalizedDate = (locale: string, date: Date) => date.toLocaleDateString(locale, dateFormatOptions);
 
-export const formatDateFromString = (date: string | null | undefined) => {
+export const formatLocalizedDateFromString = (locale: string, date: string | null | undefined) => {
   if (!date) {
     return t('No defined');
   }
 
   const dateObj = new Date(date);
-  return dateObj.toLocaleDateString('en-US', dateFormatOptions);
+  return dateObj.toLocaleDateString(locale, dateFormatOptions);
 };
 
 export const formatCurrency = (amount: number, currency?: string) => {
@@ -128,7 +128,7 @@ export const addMonthsToDate = (date: string | undefined, months: number) => {
 
   const addedDate = dayjs(date).add(months, 'month');
 
-  return formatDate(addedDate.toDate());
+  return addedDate.toDate().toLocaleDateString('en-US', dateFormatOptions);
 };
 
 export const isDateAfterCurrentDate = (date: string) => {