diff --git a/CHANGELOG.md b/CHANGELOG.md
index 473c78708..c9322f3a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+### Feature
+
+- Customer Detail Data Overlay
+  - implement new UI design for customer detail data overlay
+
 ## 2.2.0-RC1
 
 ### Change
diff --git a/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/CompanyDetailsHelper.tsx b/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/CompanyDetailsHelper.tsx
index 3834eda6f..7e5e695f9 100644
--- a/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/CompanyDetailsHelper.tsx
+++ b/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/CompanyDetailsHelper.tsx
@@ -71,7 +71,7 @@ export const getTitle = (
             status: getStatus(),
           }}
         >
-          <Typography variant="h3">
+          <Typography variant="h4">
             {t('content.admin.registration-requests.overlay.tab2SubTitle')}
           </Typography>
         </Trans>
@@ -85,7 +85,7 @@ export const getIntro = (
   selectedCompany: CompanyDetail,
   t: typeof i18next.t
 ) => {
-  if (activeTab === 1) {
+  if (activeTab === 2) {
     return (
       <Trans
         values={{
diff --git a/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/index.tsx b/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/index.tsx
index 0b1862aa9..dd8d0c9f4 100644
--- a/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/index.tsx
+++ b/src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/index.tsx
@@ -46,7 +46,6 @@ import { download } from 'utils/downloadUtils'
 import CheckListFullButtons from '../components/CheckList/CheckListFullButtons'
 import { getIntro, getTitle } from './CompanyDetailsHelper'
 import { useFetchNewDocumentByIdMutation } from 'features/appManagement/apiSlice'
-import { KeyValueView } from 'components/shared/basic/KeyValueView'
 import { type UniqueIdType } from 'features/admin/registration/types'
 import { StatusProgress } from '../registrationTableColumns'
 
@@ -196,27 +195,34 @@ const CompanyDetailOverlay = ({
           {company?.documents && company.documents.length > 0 ? (
             <>
               {company.documents.map(
-                (contract: { documentId: string; documentType: string }) => (
+                (contract: {
+                  documentId: string
+                  documentType: string
+                  documentSize?: number
+                }) => (
                   <Box key={contract.documentId}>
-                    <DropPreviewFile
-                      uploadFile={{
-                        name: contract?.documentType,
-                        status: UploadStatus.UPLOAD_SUCCESS,
-                      }}
-                      translations={{
-                        placeholder: '',
-                        uploadProgress: '',
-                        uploadSuccess: '',
-                        uploadError: '',
-                      }}
-                      onDownload={() => {
-                        void downloadDocument(
-                          contract.documentId,
-                          contract.documentType
-                        )
-                      }}
-                      enableDeleteIcon={false}
-                    />
+                    <div className={'doc-item'}>
+                      <DropPreviewFile
+                        uploadFile={{
+                          name: contract?.documentType,
+                          status: UploadStatus.UPLOAD_SUCCESS,
+                          size: contract?.documentSize,
+                        }}
+                        translations={{
+                          placeholder: '',
+                          uploadProgress: '',
+                          uploadSuccess: '',
+                          uploadError: '',
+                        }}
+                        onDownload={() => {
+                          void downloadDocument(
+                            contract.documentId,
+                            contract.documentType
+                          )
+                        }}
+                        enableDeleteIcon={false}
+                      />
+                    </div>
                   </Box>
                 )
               )}
@@ -244,7 +250,7 @@ const CompanyDetailOverlay = ({
                   color="label"
                   label={getLocaleStr(role.companyRole)}
                   sx={{
-                    marginRight: '8px',
+                    marginRight: '10px',
                   }}
                 />
               )
@@ -303,12 +309,16 @@ const CompanyDetailOverlay = ({
                   id={`simple-tab-${activeTab}`}
                   aria-controls={`simple-tabpanel-${activeTab}`}
                 />
+                <div className="div-container">
+                  {' '}
+                  <div className="tab-divider" />
+                </div>
                 <Tab
                   icon={getStepIcon('2')}
                   iconPosition="start"
                   sx={{
                     fontSize: '14px',
-                    width: '50%',
+                    width: activeTab ? '50%' : '42%',
                     textTransform: 'capitalize',
                     color: '#111 !important',
                     '&.Mui-selected': {
@@ -319,6 +329,16 @@ const CompanyDetailOverlay = ({
                   id={`simple-tab-${activeTab}`}
                   aria-controls={`simple-tabpanel-${activeTab}`}
                 />
+                <>
+                  {selectedRequest && !activeTab && (
+                    <StatusProgress
+                      application={selectedRequest}
+                      trans={t}
+                      type={false}
+                      isProgressOnly={true}
+                    />
+                  )}
+                </>
               </Tabs>
             </Box>
           </>
@@ -346,34 +366,53 @@ const CompanyDetailOverlay = ({
         ) : (
           <DialogContent
             sx={{
-              padding: '0 120px',
-              marginBottom: 5,
+              padding: '30px 110px 56px 110px',
+              width: '100%',
+              marginBottom: activeTab ? 5 : 0,
             }}
           >
             <TabPanel value={activeTab} index={0}>
-              <Box sx={{ width: '100%', margin: '50px 0' }}>
-                <KeyValueView
-                  cols={2.3}
-                  title={t(
+              <Box sx={{ width: '100%' }} className={'company-details'}>
+                <Typography className="title" variant="h4">
+                  {t(
                     'content.admin.registration-requests.overlay.companydatatitle'
                   )}
-                  items={companyData}
-                />
+                </Typography>
+                {companyData?.map((detail) => (
+                  <div className="detail" key={detail.key}>
+                    <Typography variant="body2" className="detail-name">
+                      {detail.key}
+                    </Typography>
+                    <div></div>
+                    <Typography variant="label2" className="detail-text">
+                      {detail.value}
+                    </Typography>
+                  </div>
+                ))}
               </Box>
               <Box ref={modalElement} sx={{ width: '100%' }}>
-                <KeyValueView
-                  cols={2.3}
-                  title={t('content.admin.registration-requests.overlay.docs')}
-                  items={documentData}
-                />
-                <KeyValueView
-                  cols={2.3}
-                  title={t('content.admin.registration-requests.overlay.roles')}
-                  items={companyRoleData}
-                />
+                <Typography className="title" variant="h4">
+                  {t('content.admin.registration-requests.overlay.docs')}
+                </Typography>
+
+                <div className="document-container">
+                  {documentData?.map((detail) => (
+                    <div key={detail.key}>{detail.value}</div>
+                  ))}
+                </div>
+              </Box>
+              <Box
+                ref={modalElement}
+                className={'role-details'}
+                sx={{ width: '100%' }}
+              >
+                <Typography className="title" variant="h4">
+                  {t('content.admin.registration-requests.overlay.roles')}
+                </Typography>
+                <div>{companyRoleData?.[0]?.value}</div>
               </Box>
             </TabPanel>
-            <TabPanel value={activeTab} index={1}>
+            <TabPanel value={activeTab} index={2}>
               <Box sx={{ width: '100%', height }}>
                 {selectedRequest && (
                   <div
diff --git a/src/components/pages/Admin/components/RegistrationRequests/RegistrationRequests.scss b/src/components/pages/Admin/components/RegistrationRequests/RegistrationRequests.scss
index 5ba76d408..bb15cffac 100644
--- a/src/components/pages/Admin/components/RegistrationRequests/RegistrationRequests.scss
+++ b/src/components/pages/Admin/components/RegistrationRequests/RegistrationRequests.scss
@@ -204,3 +204,102 @@
     padding: 0 5px;
   }
 }
+
+.company-details {
+  padding: 30px 32px 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 30px;
+  margin-bottom: 28px;
+  background-color: #f9f9f9;
+  overflow: hidden;
+
+  .title {
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 40px;
+    letter-spacing: -0.18px;
+    margin-bottom: 62px;
+  }
+
+  .detail {
+    display: flex;
+    justify-content: flex-start;
+    margin-bottom: 8px;
+  }
+
+  .detail-name {
+    min-width: 225px;
+    padding-right: 48px;
+    text-align: left;
+  }
+
+  .detail-text {
+    flex-grow: 1;
+    text-align: left;
+  }
+
+  @media (max-width: 600px) {
+    .detail {
+      flex-direction: column;
+    }
+
+    .detail-name {
+      padding-right: 0;
+      white-space: normal;
+      overflow: visible;
+      text-overflow: clip;
+    }
+  }
+}
+
+.document-container {
+  margin-top: 28px;
+  margin-bottom: 28px;
+}
+
+.doc-item {
+  margin-bottom: 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 8px;
+  background-color: #0f71cb0d;
+
+  .MuiBox-root {
+    margin-bottom: 0;
+  }
+}
+
+.role-details {
+  padding: 30px 32px 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 30px;
+  background-color: #f9f9f9;
+
+  .title {
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 40px;
+    letter-spacing: -0.18px;
+    margin-bottom: 62px;
+  }
+}
+
+.div-container {
+  width: 25px;
+  padding: 4px 12px;
+  justify-content: center;
+  align-items: center;
+
+  .tab-divider {
+    background-color: #dcdcdc;
+    width: 1px;
+    height: 100%;
+  }
+}
diff --git a/src/components/pages/Admin/components/RegistrationRequests/registrationTableColumns.tsx b/src/components/pages/Admin/components/RegistrationRequests/registrationTableColumns.tsx
index e185305bd..6d34ea7de 100644
--- a/src/components/pages/Admin/components/RegistrationRequests/registrationTableColumns.tsx
+++ b/src/components/pages/Admin/components/RegistrationRequests/registrationTableColumns.tsx
@@ -39,6 +39,7 @@ interface StatusProgressProps {
   trans: typeof i18next.t
   type?: boolean
   onConfirmationCancel?: (applicationId: string, name: string) => void
+  isProgressOnly?: boolean
 }
 
 export const StatusProgress = ({
@@ -46,6 +47,7 @@ export const StatusProgress = ({
   trans,
   type = true,
   onConfirmationCancel,
+  isProgressOnly = false,
 }: StatusProgressProps) => {
   const t = trans
   const groupedItems = _.chain(application.applicationChecklist)
@@ -64,26 +66,36 @@ export const StatusProgress = ({
     statusText: string
   ) => {
     return (
-      <div
-        className="progressMain"
-        style={{
-          border: `2px solid ${style.border}`,
-          background: style.background,
-        }}
-      >
-        <Progress
-          applicationStatus={row.applicationStatus}
-          items={items}
-          totalItems={row.applicationChecklist.length}
-        />
-        <Typography
-          variant="body3"
-          className="statusText"
-          sx={{ color: style.color }}
-        >
-          {statusText}
-        </Typography>
-      </div>
+      <>
+        {isProgressOnly ? (
+          <Progress
+            applicationStatus={row.applicationStatus}
+            items={items}
+            totalItems={row.applicationChecklist.length}
+          />
+        ) : (
+          <div
+            className="progressMain"
+            style={{
+              border: `2px solid ${style.border}`,
+              background: style.background,
+            }}
+          >
+            <Progress
+              applicationStatus={row.applicationStatus}
+              items={items}
+              totalItems={row.applicationChecklist.length}
+            />
+            <Typography
+              variant="body3"
+              className="statusText"
+              sx={{ color: style.color }}
+            >
+              {statusText}
+            </Typography>
+          </div>
+        )}
+      </>
     )
   }
 
diff --git a/src/components/pages/AppSubscription/AppSubscriptionDetailOverlay/style.scss b/src/components/pages/AppSubscription/AppSubscriptionDetailOverlay/style.scss
index c2caa0221..d3f8c84de 100644
--- a/src/components/pages/AppSubscription/AppSubscriptionDetailOverlay/style.scss
+++ b/src/components/pages/AppSubscription/AppSubscriptionDetailOverlay/style.scss
@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021, 2024 Contributors to the Eclipse Foundation
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
diff --git a/src/features/admin/applicationRequestApiSlice.ts b/src/features/admin/applicationRequestApiSlice.ts
index d2ac89e52..93964b2af 100644
--- a/src/features/admin/applicationRequestApiSlice.ts
+++ b/src/features/admin/applicationRequestApiSlice.ts
@@ -43,6 +43,7 @@ export enum AppFilterType {
 export interface DocumentMapper {
   documentType: string
   documentId: string
+  documentSize?: number
 }
 
 export interface ApplicationChecklistType {