diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee9b6388b..075cbc74d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -33,6 +33,11 @@
 - IDP Config
   - Implementation of displaying metadata details
 
+### Feature
+
+- Onboarding Service Provider
+  - created new UI
+
 ## 1.8.0-RC6
 
 ### Change
diff --git a/src/assets/locales/de/registration.json b/src/assets/locales/de/registration.json
new file mode 100644
index 000000000..fc548b2a8
--- /dev/null
+++ b/src/assets/locales/de/registration.json
@@ -0,0 +1,47 @@
+{
+  "osp": {
+    "heading": "Registrierungszusammenfassung",
+    "companyHeading": "Firmendetails",
+    "companyMessage": "Unten finden Sie die Registrierungsdaten Ihres Unternehmens, die Ihnen von Ihrem Onboarding-Anbieter mitgeteilt wurden. Bitte überprüfen Sie die Details und fahren Sie mit der Auswahl der Unternehmensrolle unten fort, bevor Sie Ihre Registrierung absenden.",
+    "companyName": "Name der Firma",
+    "bmw": "BMW AG",
+    "street": "Hausnummer",
+    "zip": "Postleitzahl",
+    "city": "Stadt",
+    "region": "Region",
+    "country": "Land",
+    "companyRole": {
+      "title": "Rollenauswahl",
+      "subTitle": "Hinweis: Bitte wählen Sie mindestens eine Rolle aus und akzeptieren Sie die zugehörigen Geschäftsbedingungen.",
+      "TermsAndCondSpan1": "Ja, ich stimme den",
+      "TermsAndCondSpan2": "Geschäftsbedingungen",
+      "TermsAndCondSpan3": "der ausgewählten Rolle zu.",
+      "TermsAndCond2Span1": "Ja, ich stimme den",
+      "TermsAndCond2Span2": "Sicherheitsvorschriften",
+      "TermsAndCond2Span3": "der ausgewählten Rolle zu.",
+      "ACTIVE_PARTICIPANT": "Aktiver Teilnehmer",
+      "APP_PROVIDER": "App-Anbieter",
+      "SERVICE_PROVIDER": "Service-Anbieter",
+      "ONBOARDING_SERVICE_PROVIDER": "Onboarding-Anbieter",
+      "NoRolesError1": "Es ist ein Fehler aufgetreten. Keine Rollen gefunden.",
+      "NoRolesError2": " oder wenden Sie sich an den Systemadministrator.",
+      "NoRolesError": "Es ist ein Fehler aufgetreten. Keine Rollen gefunden. Bitte {{ retry }} oder wenden Sie sich an den Systemadministrator.",
+      "Please": "Bitte",
+      "Retry": "versuchen Sie es erneut"
+    },
+    "success": {
+      "heading": "Herzlichen Glückwunsch, Ihre Registrierung war erfolgreich!",
+      "description": "Wir werden Ihre Registrierung nun validieren.<br/> Der Vorgang kann ein paar Stunden dauern. In der Zwischenzeit haben Sie bereits die Möglichkeit sich umzusehen und einige <br/> Einführungsseiten zu besuchen. Beachten Sie jedoch bitte, dass der <br/> volle Zugang zum Dataspace erst verfügbar ist, sobald <br/> die Registrierung erfolgreich abgeschlossen wurde. <br /> Wenn Sie Fragen zum Registrierungsstatus haben, finden Sie den aktuellen Status<br/>unten.",
+      "stepTitle": "Status:",
+      "homepage": "Startseite"
+    },
+    "error": {
+      "heading": "Fehler 500: Serverfehler",
+      "description": "Auf unserer Seite ist etwas schief gelaufen. Es liegen technische Schwierigkeiten vor.<br/>Bitte versuchen Sie es in ein paar Augenblicken noch einmal. Wenn das Problem weiterhin besteht, wenden Sie sich bitte an unser Support-Team.<br/><br/>Alle Details und mögliche erneute Auslöser finden Sie unten:",
+      "retry": "Bestätigung erneut versuchen",
+      "back": "zurück zur vorherigen Seite"
+    },
+    "submitError": "Bitte stimmen Sie allen Geschäftsbedingungen der ausgewählten Unternehmensrolle(n) zu, bevor Sie mit dem nächsten Schritt fortfahren.",
+    "helpText": "Wenn Sie Fragen zu Ihrer Registrierung haben, wenden Sie sich bitte an unseren Helpdesk:<br /> help@catena-x.com <br /> oder an den Plattformadministrator: <br />“xxx.xxxx@catena-x-operator.net"
+  }
+}
diff --git a/src/assets/locales/en/registration.json b/src/assets/locales/en/registration.json
new file mode 100644
index 000000000..d976d48bd
--- /dev/null
+++ b/src/assets/locales/en/registration.json
@@ -0,0 +1,47 @@
+{
+  "osp": {
+    "heading": "Registration Summary",
+    "companyHeading": "Company Details",
+    "companyMessage": "Below you can find your company registration details shared by your onboarding provider. Please review the details and proceed to the Company Role selection below before submitting your registration.",
+    "companyName": "Company Name",
+    "bmw": "BMW AG",
+    "street": "Street & Number",
+    "zip": "ZIP",
+    "city": "City",
+    "region": "Region",
+    "country": "Country",
+    "companyRole": {
+      "title": "Role Selection",
+      "subTitle": "Note: Please select at least one role and accept the associated terms and conditions.",
+      "TermsAndCondSpan1": "Yes, I agree to the",
+      "TermsAndCondSpan2": "terms and conditions",
+      "TermsAndCondSpan3": "of the selected role.",
+      "TermsAndCond2Span1": "Yes, I agree to the",
+      "TermsAndCond2Span2": "security regulations",
+      "TermsAndCond2Span3": "of the selected role.",
+      "ACTIVE_PARTICIPANT": "Active Participant",
+      "APP_PROVIDER": "App Provider",
+      "SERVICE_PROVIDER": "Service Provider",
+      "ONBOARDING_SERVICE_PROVIDER": "Onboarding Service Provider",
+      "NoRolesError1": "An error occured. No roles found.",
+      "NoRolesError2": " or contact the system administrator.",
+      "NoRolesError": "An error occured. No roles found. Please {{ retry }} or contact the system administrator.",
+      "Please": "Please",
+      "Retry": "retry"
+    },
+    "success": {
+      "heading": "Congratulations, your registration  has been successfull!",
+      "description": "We will now validate your registration.<br/> The process might take a couple of hours, in the meantime you might wanna check <br/> out some introduction pages already, but note that the complete dataspace <br/> functions will only be available as soon as the registration is successfully finished. <br/> If you are corrious about the registration state, you can find the current status<br/>below.",
+      "stepTitle": "Status:",
+      "homepage": "Get to home"
+    },
+    "error": {
+      "heading": "Error 500 : Server Error",
+      "description": "Something went wrong on our side. We’re experiencing technical difficulities.<br/>Please try the call once again in a couple of moments. If the problem persists, feel<br/>free to reach out to our support team for assistance.<br/><br/>All details and possible retriggers are shared below:",
+      "retry": "Retry confirmation",
+      "back": "Back to previous page"
+    },
+    "submitError": "Please agree to all Terms & Conditions of the selected company role(s) before proceeding to the next step.",
+    "helpText": "If you have any questions regarding your registration please contact our helpdesk:<br /> help@catena-x.com <br /> or contact the platform administrator: <br />“xxx.xxxx@catena-x-operator.net"
+  }
+}
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index 7623e8bdf..1f7a77692 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -28,7 +28,7 @@ import { useTranslation } from 'react-i18next'
 import AccessService from '../services/AccessService'
 import MainOverlay from './MainOverlay'
 import { show } from 'features/control/overlay'
-import { OVERLAYS, PAGES } from 'types/Constants'
+import { type OVERLAYS, PAGES } from 'types/Constants'
 import MainNotify from './MainNotify'
 import MainSearchOverlay from './shared/frame/SearchOverlay'
 import { MenuInfo } from './pages/Home/components/MenuInfo'
@@ -41,6 +41,7 @@ import './styles/main.scss'
 import RegistrationStatus from './pages/RegistrationStatus'
 import Logout from './pages/Logout'
 import Redirect from './actions/Redirect'
+import { OSPConsent } from './pages/OSPConsent'
 
 export default function Main() {
   document.title = useTranslation().t('title')
@@ -50,6 +51,14 @@ export default function Main() {
   const { data, isLoading } = useFetchApplicationsQuery()
   const companyData = data?.[0]
 
+  const renderSection = () => {
+    return companyData?.applicationType === ApplicationType.INTERNAL ? (
+      <RegistrationStatus />
+    ) : (
+      <OSPConsent />
+    )
+  }
+
   useEffect(() => {
     const overlay = searchParams.get('overlay')?.split(':')
     overlay && dispatch(show(overlay[0] as OVERLAYS, overlay[1]))
@@ -70,21 +79,15 @@ export default function Main() {
     ].includes(companyData.applicationStatus) &&
     !location.search.includes('overlay=consent_osp')
   ) {
-    if (companyData.applicationType === ApplicationType.INTERNAL) {
-      return (
-        <>
-          <Header main={[]} user={AccessService.userMenuReg()} />
-          <MainSearchOverlay />
-          {window.location.pathname === '/logout' ? (
-            <Logout />
-          ) : (
-            <RegistrationStatus />
-          )}
-          <Footer pages={AccessService.footerMenu()} />
-          <MenuInfo main={[]} />
-        </>
-      )
-    } else dispatch(show(OVERLAYS.CONSENT_OSP))
+    return (
+      <>
+        <Header main={[]} user={AccessService.userMenuReg()} />
+        <MainSearchOverlay />
+        {location.pathname === '/logout' ? <Logout /> : renderSection()}
+        <Footer pages={AccessService.footerMenu()} />
+        <MenuInfo main={[]} />
+      </>
+    )
   }
 
   return (
diff --git a/src/components/pages/OSPConsent/CompanyDetails.tsx b/src/components/pages/OSPConsent/CompanyDetails.tsx
new file mode 100644
index 000000000..e1153a5c0
--- /dev/null
+++ b/src/components/pages/OSPConsent/CompanyDetails.tsx
@@ -0,0 +1,306 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { useEffect, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { useMediaQuery, useTheme } from '@mui/material'
+import { uniqueId } from 'lodash'
+import {
+  StaticTable,
+  type TableType,
+  Typography,
+  Button,
+  Checkbox,
+  LoadingButton,
+} from '@catena-x/portal-shared-components'
+import {
+  useFetchCompanyDetailsWithAddressQuery,
+  useFetchAgreementDataQuery,
+  type companyRole,
+  useFetchAgreementConsentsQuery,
+  type AgreementData,
+} from 'features/registration/registrationApiSlice'
+import { getApiBase } from 'services/EnvironmentService'
+import UserService from 'services/UserService'
+import { download } from 'utils/downloadUtils'
+import './style.scss'
+
+interface CompanyDetailsProps {
+  applicationId: string
+  loading: boolean
+  handleSubmit: () => void
+  submitError: boolean
+}
+
+export const CompanyDetails = ({
+  applicationId,
+  loading,
+  handleSubmit,
+  submitError,
+}: CompanyDetailsProps) => {
+  const tm = useTranslation().t
+  const { t } = useTranslation('registration')
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'), {
+    defaultMatches: true,
+  })
+
+  const [companyRoleChecked, setCompanyRoleChecked] = useState<{
+    [key: string]: boolean
+  }>({})
+  const [agreementChecked, setAgreementChecked] = useState<{
+    [key: string]: boolean
+  }>({})
+
+  const { data: companyDetails } = useFetchCompanyDetailsWithAddressQuery(
+    applicationId ?? ''
+  )
+  const { data: allConsentData } = useFetchAgreementDataQuery()
+  const { data: consentData } = useFetchAgreementConsentsQuery(
+    applicationId ?? ''
+  )
+
+  useEffect(() => {
+    updateSelectedRolesAndAgreement()
+  }, [consentData])
+
+  const updateSelectedRolesAndAgreement = () => {
+    consentData &&
+      setCompanyRoleChecked(
+        consentData?.companyRoles.reduce((prev, next) => {
+          return { ...prev, [next]: true }
+        }, {})
+      )
+
+    consentData &&
+      setAgreementChecked(
+        consentData?.agreements.reduce((prev, next) => {
+          return { ...prev, [next.agreementId]: true }
+        }, {})
+      )
+  }
+
+  const handleAgreementCheck = (id: string) => {
+    const updatedMap = { ...agreementChecked }
+    updatedMap[id] = !updatedMap[id]
+    setAgreementChecked(updatedMap)
+  }
+
+  const handleCompanyRoleCheck = (id: string) => {
+    const updatedMap = { ...companyRoleChecked }
+    updatedMap[id] = !updatedMap[id]
+
+    if (!updatedMap[id]) {
+      const companyRoleIndex =
+        allConsentData?.companyRoles.findIndex(
+          (item) => item.companyRole === id
+        ) ?? 0
+
+      const updatedAgreementIds = allConsentData?.companyRoles[
+        companyRoleIndex
+      ].agreementIds.reduce((prev: {}, next: string) => {
+        return { ...prev, [next]: false }
+      }, {})
+
+      setAgreementChecked((prevState: { [key: string]: boolean }) => ({
+        ...prevState,
+        ...updatedAgreementIds,
+      }))
+    }
+
+    setCompanyRoleChecked(updatedMap)
+  }
+
+  const handleDownloadClick = (documentId: string, documentName: string) => {
+    if (!documentId) return
+    try {
+      fetch(
+        `${getApiBase()}/api/registration/registrationDocuments/${documentId}`,
+        {
+          method: 'GET',
+          headers: {
+            authorization: `Bearer ${UserService.getToken()}`,
+          },
+        }
+      )
+        .then(async (res) => {
+          const fileType = res.headers.get('content-type') ?? ''
+          const file = await res.blob()
+          download(file, fileType, documentName)
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    } catch (error) {
+      console.error(error, 'ERROR WHILE FETCHING DOCUMENT')
+    }
+  }
+
+  const renderTermsText = (agreement: AgreementData) => {
+    return (
+      <>
+        <strong>{t('osp.companyRole.TermsAndCondSpan1')} </strong>
+        <Typography
+          variant={isMobile ? 'body3' : 'body2'}
+          className={agreement.documentId ? 'agreement-span' : ''}
+          onClick={() => {
+            handleDownloadClick(agreement.documentId, agreement.name)
+          }}
+          onKeyDown={() => {
+            // do nothing
+          }}
+        >
+          {agreement.name}
+        </Typography>{' '}
+        <strong>{t('osp.companyRole.TermsAndCondSpan3')}</strong>
+      </>
+    )
+  }
+
+  const renderTermsSection = (role: companyRole) => {
+    if (role.agreementIds.length === 0) return null
+    return (
+      <ul className="agreement-check-list">
+        {role.agreementIds.map((id) => (
+          <li key={id} className="agreement-li">
+            <Checkbox
+              label=""
+              className="agreement-check"
+              onChange={() => {
+                handleAgreementCheck(id)
+              }}
+              checked={agreementChecked?.[id]}
+            />
+            {allConsentData?.agreements
+              .filter((agreement) => agreement.agreementId === id)
+              .map((agreement) => (
+                <Typography
+                  variant={isMobile ? 'body3' : 'body2'}
+                  className="agreement-text"
+                  key={agreement.agreementId}
+                >
+                  {agreement.documentId
+                    ? renderTermsText(agreement)
+                    : agreement.name}
+                </Typography>
+              ))}
+          </li>
+        ))}
+      </ul>
+    )
+  }
+
+  const tableData: TableType = {
+    head: [t('osp.companyName'), t('osp.bmw')],
+    body: [
+      [t('osp.street'), companyDetails?.streetName ?? ''],
+      [t('osp.zip'), companyDetails?.zipCode ?? ''],
+      [t('osp.city'), companyDetails?.city ?? ''],
+      [t('osp.region'), companyDetails?.region ?? ''],
+      [t('osp.country'), companyDetails?.countryAlpha2Code ?? ''],
+    ],
+  }
+
+  return (
+    <div className="registration-details">
+      <Typography variant={isMobile ? 'h4' : 'h3'} className="company-heading">
+        {t('osp.companyHeading')}
+      </Typography>
+      <Typography variant="body2" className="company-message">
+        {t('osp.companyMessage')}
+      </Typography>
+      {companyDetails && <StaticTable data={tableData} horizontal={false} />}
+      <div className="rolesSection">
+        <Typography
+          variant={isMobile ? 'h4' : 'h3'}
+          className="company-heading"
+        >
+          {t('osp.companyRole.title')}
+        </Typography>
+        <Typography variant="body2" className="company-message">
+          {t('osp.companyRole.subTitle')}
+        </Typography>
+        <div className="rolesList">
+          {allConsentData?.companyRoles.map((role) => (
+            <div
+              className="company-role-section"
+              key={uniqueId(role.companyRole)}
+            >
+              <div className="role-checkbox-row">
+                <div className="role-checkbox">
+                  <Checkbox
+                    label=""
+                    onChange={() => {
+                      handleCompanyRoleCheck(role.companyRole)
+                    }}
+                    checked={companyRoleChecked?.[role.companyRole]}
+                  />
+                </div>
+                <div className="role-checkbox-text">
+                  <Typography
+                    variant={isMobile ? 'label2' : 'label1'}
+                    className="company-heading"
+                  >
+                    {t(`osp.companyRole.${role.companyRole}`)}
+                  </Typography>
+                  <Typography variant={isMobile ? 'body3' : 'body2'}>
+                    {role.descriptions['en' as keyof typeof role.descriptions]}
+                  </Typography>
+                  {companyRoleChecked?.[role.companyRole] &&
+                    renderTermsSection(role)}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        {submitError && (
+          <Typography variant="body3" className="submitError">
+            {t('osp.submitError')}
+          </Typography>
+        )}
+      </div>
+      <div className="submitBtn">
+        {loading ? (
+          <LoadingButton
+            color="primary"
+            helperText=""
+            helperTextColor="success"
+            label=""
+            loadIndicator="Loading ..."
+            loading
+            size="small"
+            onButtonClick={() => {
+              // do nothing
+            }}
+            sx={{ marginLeft: '10px' }}
+          />
+        ) : (
+          <Button variant="contained" size="small" onClick={handleSubmit}>
+            {tm('global.actions.submit')}
+          </Button>
+        )}
+      </div>
+      <div className="helpdeskText">
+        <Trans>
+          <Typography variant="body3">{t('osp.helpText')}</Typography>
+        </Trans>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/pages/OSPConsent/ErrorRegistration.tsx b/src/components/pages/OSPConsent/ErrorRegistration.tsx
new file mode 100644
index 000000000..c3bce6ce0
--- /dev/null
+++ b/src/components/pages/OSPConsent/ErrorRegistration.tsx
@@ -0,0 +1,67 @@
+import type { Dispatch, SetStateAction } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import {
+  Button,
+  LoadingButton,
+  Typography,
+} from '@catena-x/portal-shared-components'
+
+interface ErrorRegProps {
+  loading: boolean
+  handleSubmit: () => void
+  setIsError: Dispatch<SetStateAction<boolean>>
+}
+
+export const ErrorRegistration = ({
+  loading,
+  handleSubmit,
+  setIsError,
+}: ErrorRegProps) => {
+  const { t } = useTranslation('registration')
+
+  return (
+    <div className="registration-error">
+      <Trans>
+        <Typography variant="body2" className="description">
+          {t('osp.error.description')}
+        </Typography>
+      </Trans>
+      <div className="retryBtn">
+        {loading ? (
+          <LoadingButton
+            color="primary"
+            helperText=""
+            helperTextColor="success"
+            label=""
+            loadIndicator="Loading ..."
+            loading
+            size="small"
+            onButtonClick={() => {
+              // do nothing
+            }}
+            sx={{ marginLeft: '10px' }}
+          />
+        ) : (
+          <Button variant="contained" size="small" onClick={handleSubmit}>
+            {t('osp.error.retry')}
+          </Button>
+        )}
+        <Button
+          variant="outlined"
+          size="small"
+          className="backBtn"
+          onClick={() => {
+            setIsError(false)
+          }}
+        >
+          {t('osp.error.back')}
+        </Button>
+      </div>
+      <div className="helpdeskText">
+        <Trans>
+          <Typography variant="body3">{t('osp.helpText')}</Typography>
+        </Trans>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/pages/OSPConsent/SuccessRegistration.tsx b/src/components/pages/OSPConsent/SuccessRegistration.tsx
new file mode 100644
index 000000000..91cfb031a
--- /dev/null
+++ b/src/components/pages/OSPConsent/SuccessRegistration.tsx
@@ -0,0 +1,53 @@
+import { useNavigate } from 'react-router-dom'
+import { useMediaQuery, useTheme } from '@mui/material'
+import { Trans, useTranslation } from 'react-i18next'
+import { Button, Typography } from '@catena-x/portal-shared-components'
+import RegistrationStatusList from 'components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReviewContent/RegistrationStatusList'
+import { type ApplicationResponse } from 'features/registration/registrationApiSlice'
+
+export const SuccessRegistration = ({
+  applicationData,
+}: {
+  applicationData: ApplicationResponse[]
+}) => {
+  const { t } = useTranslation('registration')
+  const theme = useTheme()
+  const navigate = useNavigate()
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'), {
+    defaultMatches: true,
+  })
+
+  return (
+    <div className="registration-confirmation">
+      <Typography variant={isMobile ? 'h4' : 'h3'}>
+        {t('osp.success.heading')}
+      </Typography>
+      <Trans>
+        <Typography variant="body2" className="description">
+          {t('osp.success.description')}
+        </Typography>
+      </Trans>
+      <div className="statusDetails">
+        <Typography variant="h5" className="stepTitle">
+          {t('osp.success.stepTitle')}
+        </Typography>
+        {applicationData?.[0] && (
+          <RegistrationStatusList
+            checklist={applicationData[0].applicationChecklist}
+          />
+        )}
+      </div>
+      <div className="homeBtn">
+        <Button
+          variant="contained"
+          size="small"
+          onClick={() => {
+            navigate('/home')
+          }}
+        >
+          {t('osp.success.homepage')}
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/pages/OSPConsent/index.tsx b/src/components/pages/OSPConsent/index.tsx
new file mode 100644
index 000000000..1a40ae3b6
--- /dev/null
+++ b/src/components/pages/OSPConsent/index.tsx
@@ -0,0 +1,152 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useMediaQuery, useTheme } from '@mui/material'
+import { Typography } from '@catena-x/portal-shared-components'
+import {
+  useFetchApplicationsQuery,
+  useFetchAgreementConsentsQuery,
+  useUpdateAgreementConsentsMutation,
+  CONSENT_STATUS,
+} from 'features/registration/registrationApiSlice'
+import './style.scss'
+import { SuccessRegistration } from './SuccessRegistration'
+import { ErrorRegistration } from './ErrorRegistration'
+import { CompanyDetails } from './CompanyDetails'
+
+export const OSPConsent = () => {
+  const { t } = useTranslation('registration')
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'), {
+    defaultMatches: true,
+  })
+
+  const [companyRoleChecked, setCompanyRoleChecked] = useState<{
+    [key: string]: boolean
+  }>({})
+  const [agreementChecked, setAgreementChecked] = useState<{
+    [key: string]: boolean
+  }>({})
+  const [loading, setLoading] = useState(false)
+  const [submitError, setSubmitError] = useState(false)
+  const [isSuccess, setIsSuccess] = useState(false)
+  const [isError, setIsError] = useState(false)
+
+  const { data: applicationData, refetch } = useFetchApplicationsQuery()
+  const applicationId = applicationData?.[0].applicationId
+
+  const { data: consentData } = useFetchAgreementConsentsQuery(
+    applicationId ?? ''
+  )
+  const [updateAgreementConsents] = useUpdateAgreementConsentsMutation()
+
+  useEffect(() => {
+    updateSelectedRolesAndAgreement()
+  }, [consentData])
+
+  const updateSelectedRolesAndAgreement = () => {
+    consentData &&
+      setCompanyRoleChecked(
+        consentData?.companyRoles.reduce((prev, next) => {
+          return { ...prev, [next]: true }
+        }, {})
+      )
+
+    consentData &&
+      setAgreementChecked(
+        consentData?.agreements.reduce((prev, next) => {
+          return { ...prev, [next.agreementId]: true }
+        }, {})
+      )
+  }
+
+  const handleSubmit = async () => {
+    setLoading(true)
+    const companyRoles = Object.keys(companyRoleChecked).filter(
+      (item) => companyRoleChecked[item]
+    )
+
+    const agreements = Object.keys(agreementChecked)
+      .filter((agreementId) => agreementChecked[agreementId])
+      .map((agreementId) => {
+        return {
+          agreementId,
+          consentStatus: CONSENT_STATUS.ACTIVE,
+        }
+      })
+
+    const data = {
+      companyRoles,
+      agreements,
+    }
+
+    await updateAgreementConsents(data)
+      .unwrap()
+      .then(() => {
+        setIsError(false)
+        setIsSuccess(true)
+        refetch()
+      })
+      .catch((errors) => {
+        if (errors.status === 500) setIsError(true)
+        else setSubmitError(true)
+      })
+    setLoading(false)
+  }
+
+  const renderRegistrationSection = () => {
+    if (!applicationData || !applicationId) return
+    if (isSuccess) {
+      return <SuccessRegistration applicationData={applicationData} />
+    } else if (isError) {
+      return (
+        <ErrorRegistration
+          loading={loading}
+          handleSubmit={handleSubmit}
+          setIsError={setIsError}
+        />
+      )
+    } else {
+      return (
+        <CompanyDetails
+          applicationId={applicationId}
+          loading={loading}
+          handleSubmit={handleSubmit}
+          submitError={submitError}
+        />
+      )
+    }
+  }
+
+  return (
+    <div className="ospMain">
+      <div className="mainContainer">
+        <Typography
+          className={`heading ${isError && 'error-heading'}`}
+          variant={isMobile ? 'h3' : 'h2'}
+        >
+          {isError ? t('osp.error.heading') : t('osp.heading')}
+        </Typography>
+        {renderRegistrationSection()}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/pages/OSPConsent/style.scss b/src/components/pages/OSPConsent/style.scss
new file mode 100644
index 000000000..0b805f127
--- /dev/null
+++ b/src/components/pages/OSPConsent/style.scss
@@ -0,0 +1,185 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+.ospMain {
+  .mainContainer {
+    width: 100%;
+    max-width: 1100px;
+    padding: 0 15px 0 15px !important;
+    margin-right: auto;
+    margin-left: auto;
+
+    .mainRow {
+      display: inline-block;
+      width: 100%;
+    }
+
+    .error-heading {
+      color: #d91e18;
+    }
+
+    .heading {
+      margin: 67px 0 30px;
+      padding-bottom: 15px;
+      text-align: center;
+      position: relative;
+    }
+
+    .heading::after {
+      content: '';
+      width: 70px;
+      border-bottom: 2px solid;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .submitError {
+      color: #d91e18;
+      text-align: center;
+      margin-top: 50px;
+    }
+
+    .submitBtn {
+      text-align: center;
+    }
+
+    .retryBtn {
+      display: inline-grid;
+      .backBtn {
+        margin-top: 20px;
+      }
+    }
+
+    .helpdeskText {
+      margin-top: 40px;
+      text-align: center;
+    }
+
+    .company-message {
+      margin: 10px 0 30px;
+    }
+
+    .rolesSection {
+      margin: 30px 0 50px;
+
+      .rolesList {
+        .company-role-section {
+          margin-bottom: 20px;
+
+          .role-checkbox-row {
+            display: flex;
+
+            .role-checkbox {
+              padding-right: 10px;
+            }
+
+            .role-checkbox-text {
+              margin-top: 8px;
+            }
+          }
+        }
+
+        .agreement-check-list {
+          padding: 0px;
+
+          .agreement-li {
+            list-style: none;
+            font-size: 1rem;
+            display: flex;
+            .agreement-text {
+              display: flex;
+              margin-top: 10px;
+            }
+            .agreement-check {
+              margin-right: 10px;
+            }
+          }
+
+          .agreement-span {
+            color: #0d6efd;
+            cursor: pointer;
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    .registration-confirmation {
+      text-align: center;
+      margin: 50px 0 0;
+      .description {
+        margin: 30px 0 30px;
+      }
+      .statusDetails {
+        width: 60%;
+        margin: 0 auto;
+        .stepTitle {
+          text-align: left;
+        }
+      }
+      .homeBtn {
+        margin-top: 50px;
+      }
+    }
+
+    .registration-error {
+      text-align: center;
+      margin: 50px 0 0;
+      .description {
+        margin: 30px 0 30px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .heading {
+        margin: 75px 0 0;
+        text-align: left;
+      }
+      .heading::after {
+        display: none;
+      }
+      .agreement-text {
+        display: inline !important;
+      }
+      .registration-confirmation {
+        text-align: left;
+        margin: 0;
+        .statusDetails {
+          width: 100%;
+          .stepTitle {
+            text-align: center;
+          }
+        }
+        .homeBtn {
+          text-align: center;
+        }
+      }
+      .registration-error {
+        text-align: left;
+        margin: 0;
+        .retryBtn {
+          text-align: center;
+          display: block;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReview.scss b/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReview.scss
index 4ede224be..df50bef06 100644
--- a/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReview.scss
+++ b/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReview.scss
@@ -29,28 +29,29 @@
   .stepTitle {
     margin-top: 30px;
   }
-  .statusList {
-    list-style: none;
-    margin-top: 30px;
-    padding: 0;
-    li {
-      display: flex;
-      margin: 15px 0;
-      padding: 10px;
-      align-items: center;
-      .icon {
-        display: flex;
-      }
-      .statusLabel {
-        margin-left: 10px;
-        margin-right: auto;
-      }
-      .m-0 {
-        margin: 0;
-      }
-    }
-  }
   .helpMain {
     margin-top: 40px;
   }
 }
+
+.statusList {
+  list-style: none;
+  margin-top: 30px;
+  padding: 0;
+  li {
+    display: flex;
+    margin: 15px 0;
+    padding: 10px;
+    align-items: center;
+    .icon {
+      display: flex;
+    }
+    .statusLabel {
+      margin-left: 10px;
+      margin-right: auto;
+    }
+    .m-0 {
+      margin: 0;
+    }
+  }
+}
diff --git a/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReviewContent/RegistrationStatusList.tsx b/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReviewContent/RegistrationStatusList.tsx
new file mode 100644
index 000000000..e3d327236
--- /dev/null
+++ b/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReviewContent/RegistrationStatusList.tsx
@@ -0,0 +1,129 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { useTranslation } from 'react-i18next'
+import { useMediaQuery, useTheme } from '@mui/material'
+import { Typography, StatusTag } from '@catena-x/portal-shared-components'
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
+import LoopIcon from '@mui/icons-material/Loop'
+import PendingActionsIcon from '@mui/icons-material/PendingActions'
+import PendingIcon from '@mui/icons-material/Pending'
+import ReportProblemIcon from '@mui/icons-material/ReportProblem'
+import { type ApplicationChecklist } from 'features/registration/registrationApiSlice'
+import uniqueId from 'lodash/uniqueId'
+import '../RegistrationReview.scss'
+import { ProgressStatus } from 'features/admin/applicationRequestApiSlice'
+
+export type StatusTagIcon = {
+  type?: 'confirmed' | 'pending' | 'declined' | 'label'
+}
+
+const RegistrationStatusList = ({
+  checklist,
+}: {
+  checklist: ApplicationChecklist[]
+}) => {
+  const { t } = useTranslation()
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'), {
+    defaultMatches: true,
+  })
+
+  const renderStatus = (status: string) => {
+    switch (status) {
+      case ProgressStatus.IN_PROGRESS:
+        return {
+          icon: <LoopIcon />,
+          backgroundColor: '#EAF1FE',
+          color: '#0F71CB',
+          iconColor: 'label' as StatusTagIcon['type'],
+        }
+      case ProgressStatus.TO_DO:
+        return {
+          icon: <PendingActionsIcon />,
+          backgroundColor: '#EAF1FE',
+          color: '#0F71CB',
+          iconColor: 'label' as StatusTagIcon['type'],
+        }
+      case ProgressStatus.DONE:
+        return {
+          icon: <CheckCircleOutlineIcon />,
+          backgroundColor: '#F5F9EE',
+          color: '#00AA55',
+          iconColor: 'confirmed' as StatusTagIcon['type'],
+        }
+      case ProgressStatus.FAILED:
+        return {
+          icon: <ReportProblemIcon />,
+          backgroundColor: '#FFF6FF',
+          color: '#D91E18',
+          iconColor: 'declined' as StatusTagIcon['type'],
+        }
+      default:
+        return {
+          icon: <PendingIcon />,
+          backgroundColor: '#FFF6FF',
+          color: '#D91E18',
+          iconColor: 'label' as StatusTagIcon['type'],
+        }
+    }
+  }
+
+  return (
+    <ul className="statusList">
+      {checklist.map((checklist: ApplicationChecklist) => (
+        <li
+          key={uniqueId(checklist.statusId)}
+          style={{
+            backgroundColor: renderStatus(checklist.statusId).backgroundColor,
+            flexDirection: isMobile ? 'column-reverse' : 'unset',
+          }}
+        >
+          {!isMobile && (
+            <div
+              style={{ color: renderStatus(checklist.statusId).color }}
+              className="icon"
+            >
+              {renderStatus(checklist.statusId).icon}
+            </div>
+          )}
+          <div
+            className={`${isMobile ? 'm-0' : 'statusLabel'}`}
+            style={{
+              margin: isMobile ? 0 : '',
+            }}
+          >
+            <Typography variant="label3">
+              {t(`content.registrationInreview.steps.${checklist.typeId}`)}
+            </Typography>
+          </div>
+          <StatusTag
+            color={renderStatus(checklist.statusId).iconColor}
+            label={t(
+              `content.registrationInreview.status.${checklist.statusId}`
+            )}
+            size="small"
+          />
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default RegistrationStatusList
diff --git a/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReviewContent/index.tsx b/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReviewContent/index.tsx
index ecb673fe6..d45c8ed24 100644
--- a/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReviewContent/index.tsx
+++ b/src/components/shared/frame/Header/RegistrationReviewOverlay/RegistrationReviewContent/index.tsx
@@ -19,20 +19,14 @@
  ********************************************************************************/
 
 import { Trans, useTranslation } from 'react-i18next'
-import { useMediaQuery, useTheme } from '@mui/material'
-import { Typography, StatusTag } from '@catena-x/portal-shared-components'
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
-import LoopIcon from '@mui/icons-material/Loop'
-import PendingActionsIcon from '@mui/icons-material/PendingActions'
-import PendingIcon from '@mui/icons-material/Pending'
-import ReportProblemIcon from '@mui/icons-material/ReportProblem'
+import { Typography } from '@catena-x/portal-shared-components'
 import {
   type ApplicationChecklist,
   useFetchApplicationsQuery,
 } from 'features/registration/registrationApiSlice'
-import uniqueId from 'lodash/uniqueId'
 import '../RegistrationReview.scss'
 import { ProgressStatus } from 'features/admin/applicationRequestApiSlice'
+import RegistrationStatusList from './RegistrationStatusList'
 
 export type StatusTagIcon = {
   type?: 'confirmed' | 'pending' | 'declined' | 'label'
@@ -40,10 +34,6 @@ export type StatusTagIcon = {
 
 const RegistrationReviewContent = () => {
   const { t } = useTranslation()
-  const theme = useTheme()
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'), {
-    defaultMatches: true,
-  })
   const { data } = useFetchApplicationsQuery()
   const companyData = data?.[0]
 
@@ -52,46 +42,6 @@ const RegistrationReviewContent = () => {
       checklist.statusId === ProgressStatus.DONE
   ).length
 
-  const renderStatus = (status: string) => {
-    switch (status) {
-      case ProgressStatus.IN_PROGRESS:
-        return {
-          icon: <LoopIcon />,
-          backgroundColor: '#EAF1FE',
-          color: '#0F71CB',
-          iconColor: 'label' as StatusTagIcon['type'],
-        }
-      case ProgressStatus.TO_DO:
-        return {
-          icon: <PendingActionsIcon />,
-          backgroundColor: '#EAF1FE',
-          color: '#0F71CB',
-          iconColor: 'label' as StatusTagIcon['type'],
-        }
-      case ProgressStatus.DONE:
-        return {
-          icon: <CheckCircleOutlineIcon />,
-          backgroundColor: '#F5F9EE',
-          color: '#00AA55',
-          iconColor: 'confirmed' as StatusTagIcon['type'],
-        }
-      case ProgressStatus.FAILED:
-        return {
-          icon: <ReportProblemIcon />,
-          backgroundColor: '#FFF6FF',
-          color: '#D91E18',
-          iconColor: 'declined' as StatusTagIcon['type'],
-        }
-      default:
-        return {
-          icon: <PendingIcon />,
-          backgroundColor: '#FFF6FF',
-          color: '#D91E18',
-          iconColor: 'label' as StatusTagIcon['type'],
-        }
-    }
-  }
-
   return (
     <>
       <Typography variant="body1" className="subDescription">
@@ -107,46 +57,9 @@ const RegistrationReviewContent = () => {
           {t('content.registrationInreview.stageTitle')}
         </Typography>
       </Trans>
-      <ul className="statusList">
-        {companyData?.applicationChecklist.map(
-          (checklist: ApplicationChecklist) => (
-            <li
-              key={uniqueId(checklist.statusId)}
-              style={{
-                backgroundColor: renderStatus(checklist.statusId)
-                  .backgroundColor,
-                flexDirection: isMobile ? 'column-reverse' : 'unset',
-              }}
-            >
-              {!isMobile && (
-                <div
-                  style={{ color: renderStatus(checklist.statusId).color }}
-                  className="icon"
-                >
-                  {renderStatus(checklist.statusId).icon}
-                </div>
-              )}
-              <div
-                className={`${isMobile ? 'm-0' : 'statusLabel'}`}
-                style={{
-                  margin: isMobile ? 0 : '',
-                }}
-              >
-                <Typography variant="label3">
-                  {t(`content.registrationInreview.steps.${checklist.typeId}`)}
-                </Typography>
-              </div>
-              <StatusTag
-                color={renderStatus(checklist.statusId).iconColor}
-                label={t(
-                  `content.registrationInreview.status.${checklist.statusId}`
-                )}
-                size="small"
-              />
-            </li>
-          )
-        )}
-      </ul>
+      {companyData?.applicationChecklist && (
+        <RegistrationStatusList checklist={companyData.applicationChecklist} />
+      )}
     </>
   )
 }
diff --git a/src/features/registration/registrationApiSlice.ts b/src/features/registration/registrationApiSlice.ts
index 034967bac..741ee4e06 100644
--- a/src/features/registration/registrationApiSlice.ts
+++ b/src/features/registration/registrationApiSlice.ts
@@ -49,6 +49,73 @@ export type ApplicationResponse = {
   applicationType: ApplicationType
 }
 
+export type Identifier = {
+  type: string
+  value: string
+}
+
+export type UniqueIdentifier = {
+  id: number
+  label: string
+}
+
+export type CompanyDetails = {
+  companyId: string
+  bpn: string
+  name: string
+  shortName: string
+  city: string
+  region: string
+  streetAdditional: string
+  streetName: string
+  streetNumber: string
+  zipCode: string
+  countryAlpha2Code: string
+  taxId: string
+  uniqueIds: Identifier[]
+  uniqueIdentifier: UniqueIdentifier[]
+}
+
+export type CompanyRoleData = {
+  companyRole: string
+  descriptions: {
+    de: string
+    en: string
+  }
+  agreementIds: string[]
+}
+
+export type AgreementData = {
+  agreementId: string
+  name: string
+  agreementLink: string
+  documentId: string
+}
+
+export type AgreementResponse = {
+  companyRoles: CompanyRoleData[]
+  agreements: AgreementData[]
+}
+
+export type AgreementConsents = {
+  companyRoles: string[]
+  agreements: {
+    agreementId: string
+    consentStatus: string
+  }[]
+}
+
+export type companyRole = {
+  companyRole: string
+  agreementIds: string[]
+  descriptions: { de: string; en: string }
+}
+
+export enum CONSENT_STATUS {
+  ACTIVE = 'ACTIVE',
+  INACTIVE = 'INACTIVE',
+}
+
 export const apiSlice = createApi({
   reducerPath: 'rtk/registration',
   baseQuery: fetchBaseQuery(apiBaseQuery()),
@@ -56,7 +123,31 @@ export const apiSlice = createApi({
     fetchApplications: builder.query<ApplicationResponse[], void>({
       query: () => '/api/registration/applications',
     }),
+    fetchCompanyDetailsWithAddress: builder.query<CompanyDetails, string>({
+      query: (applicationId) =>
+        `/api/registration/application/${applicationId}/companyDetailsWithAddress`,
+    }),
+    fetchAgreementData: builder.query<AgreementResponse, void>({
+      query: () => '/api/registration/companyRoleAgreementData',
+    }),
+    fetchAgreementConsents: builder.query<AgreementConsents, string>({
+      query: (applicationId) =>
+        `/api/registration/application/${applicationId}/companyRoleAgreementConsents`,
+    }),
+    updateAgreementConsents: builder.mutation<void, AgreementConsents>({
+      query: (data) => ({
+        url: '/api/registration/Network/partnerRegistration/submit',
+        method: 'POST',
+        body: data,
+      }),
+    }),
   }),
 })
 
-export const { useFetchApplicationsQuery } = apiSlice
+export const {
+  useFetchApplicationsQuery,
+  useFetchCompanyDetailsWithAddressQuery,
+  useFetchAgreementDataQuery,
+  useFetchAgreementConsentsQuery,
+  useUpdateAgreementConsentsMutation,
+} = apiSlice
diff --git a/src/services/I18nService.ts b/src/services/I18nService.ts
index 9fcad25d7..d4cc9b667 100644
--- a/src/services/I18nService.ts
+++ b/src/services/I18nService.ts
@@ -33,6 +33,8 @@ import notificationDE from '../assets/locales/de/notification.json'
 import notificationEN from '../assets/locales/en/notification.json'
 import servicereleaseDE from '../assets/locales/de/servicerelease.json'
 import servicereleaseEN from '../assets/locales/en/servicerelease.json'
+import registrationDE from '../assets/locales/de/registration.json'
+import registrationEN from '../assets/locales/en/registration.json'
 import type { NotificationType } from 'features/notification/types'
 
 const resources = {
@@ -43,6 +45,7 @@ const resources = {
     idp: idpDE,
     notification: notificationDE,
     servicerelease: servicereleaseDE,
+    registration: registrationDE,
   },
   en: {
     translation: mainEN,
@@ -51,6 +54,7 @@ const resources = {
     idp: idpEN,
     notification: notificationEN,
     servicerelease: servicereleaseEN,
+    registration: registrationEN,
   },
 }
 
diff --git a/src/types/Config.tsx b/src/types/Config.tsx
index b128a49a0..6cb7105df 100644
--- a/src/types/Config.tsx
+++ b/src/types/Config.tsx
@@ -84,6 +84,7 @@ import ChangeDocuments from 'components/pages/AppOverview/ChangeDocuments'
 import OSPManagement from 'components/pages/OSPManagement'
 import CompanyCertificates from 'components/pages/CompanyCertificates'
 import CompanyWallet from 'components/pages/CompanyWallet'
+import { OSPConsent } from 'components/pages/OSPConsent'
 import CompanySubscriptions from 'components/pages/CompanySubscriptions'
 import CompanySubscriptionDetail from 'components/pages/CompanySubscriptions/CompanySubscriptionDetail'
 
@@ -546,6 +547,10 @@ export const ALL_PAGES: IPage[] = [
     role: ROLES.COMPANY_WALLET,
     element: <CompanyWallet />,
   },
+  {
+    name: PAGES.CONSENT_OSP,
+    element: <OSPConsent />,
+  },
   {
     name: PAGES.COMPANY_SUBSCRIPTIONS,
     role: ROLES.VIEW_SUBSCRIPTION,
@@ -686,9 +691,6 @@ export const ALL_OVERLAYS: IOverlay[] = [
     name: OVERLAYS.REGISTER_NEXT_OSP,
     role: ROLES.IDP_SETUP,
   },
-  {
-    name: OVERLAYS.CONSENT_OSP,
-  },
   {
     name: OVERLAYS.APP_OVERVIEW_CONFIRM,
     role: ROLES.APPOVERVIEW_VIEW,
diff --git a/src/types/Constants.ts b/src/types/Constants.ts
index f2b302414..12d79e668 100644
--- a/src/types/Constants.ts
+++ b/src/types/Constants.ts
@@ -104,6 +104,7 @@ export enum PAGES {
   COMPANY_CERTIFICATE = 'companyCertificate',
   COMPANY_WALLET = 'companyWallet',
   DECLINE = 'decline',
+  CONSENT_OSP = 'consent_osp',
   COMPANY_SUBSCRIPTIONS = 'company-subscriptions',
   COMPANY_SUBSCRIPTIONS_DETAIL = 'company-subscriptions-detail',
 }