diff --git a/CHANGELOG.md b/CHANGELOG.md
index de74512bf..b50b74ce5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -51,7 +51,9 @@
   - Change the payload data as per backend logic
 - App Subscription
   - Add and Edit Tenant URL functionality in detail overlay
-- Data Space
+- Static Pages
+  - Data Space
+  - Catena-X Participant
 
 ## 1.5.0
 
diff --git a/src/components/pages/CompanyRoles/index.tsx b/src/components/pages/CompanyRoles/index.tsx
index 663d4f6e3..c00978afa 100644
--- a/src/components/pages/CompanyRoles/index.tsx
+++ b/src/components/pages/CompanyRoles/index.tsx
@@ -37,15 +37,18 @@ export default function CompanyRoles() {
 
   useEffect(() => {
     CommonService.getCompanyRoles((data: any) => {
-      setLinkArray(data.subNavigation)
       if (url.indexOf('companyrolesappprovider') > 1) {
         setCompanyRoles(data.appProvider)
+        setLinkArray(data.appProvider.subNavigation)
       } else if (url.indexOf('companyrolesserviceprovider') > 1) {
         setCompanyRoles(data.serviceProvider)
+        setLinkArray(data.serviceProvider.subNavigation)
       } else if (url.indexOf('companyrolesconfirmitybody') > 1) {
         setCompanyRoles(data.confirmity)
+        setLinkArray(data.confirmity.subNavigation)
       } else {
         setCompanyRoles(data.participant)
+        setLinkArray(data.participant.subNavigation)
       }
     })
   }, [url, language])
diff --git a/src/components/shared/templates/StaticTemplateResponsive/Cards/AlignedText.tsx b/src/components/shared/templates/StaticTemplateResponsive/Cards/AlignedText.tsx
new file mode 100644
index 000000000..fa5ae1525
--- /dev/null
+++ b/src/components/shared/templates/StaticTemplateResponsive/Cards/AlignedText.tsx
@@ -0,0 +1,42 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 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 { subSectionsType } from '../StaticTypes'
+import '../StaticTemplate.scss'
+import TitleDescriptionAndSectionlink from './TitleDescriptionAndSectionlink'
+
+export default function AlignedText({
+  provider,
+  align,
+}: {
+  provider: subSectionsType
+  align?: string
+}) {
+  return (
+    <div
+      id={provider.id}
+      className={align === 'left' ? 'leftAligned' : 'rightAligned'}
+    >
+      <TitleDescriptionAndSectionlink
+        provider={provider}
+        defaultTitleVariation={false}
+      />
+    </div>
+  )
+}
diff --git a/src/components/shared/templates/StaticTemplateResponsive/Cards/ImageVideoWrapper.tsx b/src/components/shared/templates/StaticTemplateResponsive/Cards/ImageVideoWrapper.tsx
index 79723e32f..09fb2af70 100644
--- a/src/components/shared/templates/StaticTemplateResponsive/Cards/ImageVideoWrapper.tsx
+++ b/src/components/shared/templates/StaticTemplateResponsive/Cards/ImageVideoWrapper.tsx
@@ -18,71 +18,37 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { IconButton, Typography } from '@catena-x/portal-shared-components'
 import { ReactElement } from 'react'
 import { ProviderProps } from '../StaticTypes'
 import '../StaticTemplate.scss'
-import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
-import { Trans } from 'react-i18next'
+import TitleDescriptionAndSectionlink from './TitleDescriptionAndSectionlink'
 
 export default function ImageVideoWrapper({
   provider,
   children,
   scrollTop,
   showScroll,
+  isImagePresent,
 }: {
   provider: ProviderProps
   children: ReactElement
   scrollTop: () => void
   showScroll: boolean
+  isImagePresent?: boolean
 }) {
-  const navigate = (link: { internal: boolean; id: string }) => {
-    if (link.internal) {
-      const element = document.getElementById(link.id)
-      const top = element?.offsetTop
-      window.scrollTo({
-        top: top,
-        behavior: 'smooth',
-      })
-    } else {
-      window.open(link.id, '_blank')
-    }
-  }
-
   return (
     <div className={'imageVideoTextSideBySide'}>
-      <div className={'titleDescriptionBody'}>
-        <div className="titleWithIcon sideBySideTitle">
-          <Typography variant="h2">{provider.title}</Typography>
-          {showScroll && (
-            <IconButton onClick={scrollTop}>
-              <ArrowUpwardIcon />
-            </IconButton>
-          )}
-        </div>
-        <Typography className={'providerDescription'}>
-          <Trans
-            key={provider.description}
-            i18nKey={provider.description}
-            components={[
-              <span key={provider.description}></span>,
-              <br key={provider.description} />,
-            ]}
-          ></Trans>
-        </Typography>
-        {provider.sectionLink && (
-          <>
-            {provider.sectionLink.data.map((link) => (
-              <Typography
-                className={'highlightText'}
-                onClick={() => navigate(link)}
-                key={link.title}
-              >
-                {link.title}
-              </Typography>
-            ))}
-          </>
-        )}
+      <div
+        className={'titleDescriptionBody'}
+        style={{
+          width: !isImagePresent ? '100%' : '50%',
+        }}
+      >
+        <TitleDescriptionAndSectionlink
+          showScroll={showScroll}
+          provider={provider}
+          scrollTop={scrollTop}
+        />
       </div>
       {children}
     </div>
diff --git a/src/components/shared/templates/StaticTemplateResponsive/Cards/RenderImage.tsx b/src/components/shared/templates/StaticTemplateResponsive/Cards/RenderImage.tsx
index e9eccc18d..84f33c03e 100644
--- a/src/components/shared/templates/StaticTemplateResponsive/Cards/RenderImage.tsx
+++ b/src/components/shared/templates/StaticTemplateResponsive/Cards/RenderImage.tsx
@@ -51,7 +51,12 @@ export default function RenderImage({
           additionalStyles={additionalStyles || {}}
         />
       ) : (
-        <img className={'imageGallery'} src={url} alt="provider" />
+        <img
+          className={'imageGallery'}
+          src={url}
+          alt="provider"
+          width={width ? width : 'auto'}
+        />
       )}
     </>
   )
diff --git a/src/components/shared/templates/StaticTemplateResponsive/Cards/TextImageSideBySideWithSections.tsx b/src/components/shared/templates/StaticTemplateResponsive/Cards/TextImageSideBySideWithSections.tsx
new file mode 100644
index 000000000..3f5f10949
--- /dev/null
+++ b/src/components/shared/templates/StaticTemplateResponsive/Cards/TextImageSideBySideWithSections.tsx
@@ -0,0 +1,120 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 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 { ProviderProps } from '../StaticTypes'
+import RenderImage from './RenderImage'
+import '../StaticTemplate.scss'
+import AlignedText from './AlignedText'
+import { Typography } from '@catena-x/portal-shared-components'
+import { Trans } from 'react-i18next'
+import TitleDescriptionAndSectionlink from './TitleDescriptionAndSectionlink'
+
+export default function TextImageSideBySideWithSections({
+  provider,
+  baseUrl,
+  scrollTop,
+  showScroll,
+}: {
+  provider: ProviderProps
+  baseUrl: string
+  scrollTop: () => void
+  showScroll: boolean
+}) {
+  return (
+    <div className="imageVideoTextSideBySideWithSections">
+      <div className={'imageVideoTextSideBySide padding-bottom-20'}>
+        <div
+          className={'titleDescriptionBody'}
+          style={{
+            width: !provider.imagePath ? '100%' : '50%',
+          }}
+        >
+          <TitleDescriptionAndSectionlink
+            showScroll={showScroll}
+            provider={provider}
+            scrollTop={scrollTop}
+          />
+          {provider.subDescriptions && (
+            <>
+              <Typography className={'providerDescription'}>
+                <Trans
+                  key={provider.subDescriptions.title}
+                  i18nKey={provider.subDescriptions.title}
+                  components={[
+                    <span key={provider.subDescriptions.title}></span>,
+                    <br key={provider.subDescriptions.title} />,
+                    <p
+                      key={provider.subDescriptions.title}
+                      className="padding-left-30"
+                    ></p>,
+                  ]}
+                ></Trans>
+              </Typography>
+              {provider?.subDescriptions?.sections.map(
+                (section: { title: string; link: string; value: string }) => (
+                  <>
+                    <Typography>
+                      <Trans
+                        key={section.title}
+                        i18nKey={section.title}
+                        components={[
+                          <span key={section.title}></span>,
+                          <br key={section.title} />,
+                          <span
+                            key={section.title}
+                            className="subDescription"
+                          ></span>,
+                        ]}
+                      ></Trans>
+                    </Typography>
+                    <Typography
+                      className={
+                        'padding-left-30 highlightText padding-bottom-20'
+                      }
+                      onClick={() => window.open(section.link, '_blank')}
+                      key={section.value}
+                    >
+                      {section.value}
+                    </Typography>
+                  </>
+                )
+              )}
+            </>
+          )}
+        </div>
+        {provider.imagePath !== '' && (
+          <RenderImage
+            url={baseUrl + provider.imagePath || ''}
+            additionalStyles={{
+              textAlign: 'center',
+            }}
+            width="490px"
+          />
+        )}
+      </div>
+      {provider.subsections && (
+        <>
+          {provider.subsections.map((section) => (
+            <AlignedText key={section.title} provider={section} align="left" />
+          ))}
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/shared/templates/StaticTemplateResponsive/Cards/TextVideoSideBySide.tsx b/src/components/shared/templates/StaticTemplateResponsive/Cards/TextVideoSideBySide.tsx
index 79cb4af02..0227fffca 100644
--- a/src/components/shared/templates/StaticTemplateResponsive/Cards/TextVideoSideBySide.tsx
+++ b/src/components/shared/templates/StaticTemplateResponsive/Cards/TextVideoSideBySide.tsx
@@ -37,6 +37,7 @@ export default function TextVideoSideBySide({
       scrollTop={scrollTop}
       showScroll={showScroll}
       provider={provider}
+      isImagePresent={true}
       children={
         <ReactPlayer
           className="video"
diff --git a/src/components/shared/templates/StaticTemplateResponsive/Cards/TitleDescriptionAndSectionlink.tsx b/src/components/shared/templates/StaticTemplateResponsive/Cards/TitleDescriptionAndSectionlink.tsx
new file mode 100644
index 000000000..cd40ec956
--- /dev/null
+++ b/src/components/shared/templates/StaticTemplateResponsive/Cards/TitleDescriptionAndSectionlink.tsx
@@ -0,0 +1,90 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 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 { IconButton, Typography } from '@catena-x/portal-shared-components'
+import '../StaticTemplate.scss'
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
+import { Trans } from 'react-i18next'
+import { ProviderProps, subSectionsType } from '../StaticTypes'
+
+export default function TitleDescriptionAndSectionlink({
+  scrollTop,
+  showScroll,
+  provider,
+  defaultTitleVariation = true,
+}: {
+  scrollTop?: () => void
+  showScroll?: boolean
+  provider: ProviderProps | subSectionsType
+  defaultTitleVariation?: boolean
+}) {
+  const navigateTo = (link: { internal: boolean; id: string }) => {
+    if (link.internal) {
+      const element = document.getElementById(link.id)
+      const top = element?.offsetTop
+      window.scrollTo({
+        top: top,
+        behavior: 'smooth',
+      })
+    } else {
+      window.open(link.id, '_blank')
+    }
+  }
+  return (
+    <>
+      <div className="titleWithIcon sideBySideTitle">
+        {defaultTitleVariation ? (
+          <>
+            <Typography variant="h2">{provider.title}</Typography>
+            {showScroll && (
+              <IconButton onClick={scrollTop}>
+                <ArrowUpwardIcon />
+              </IconButton>
+            )}
+          </>
+        ) : (
+          <Typography variant="h3">{provider.title}</Typography>
+        )}
+      </div>
+      <Typography className={'providerDescription'}>
+        <Trans
+          key={provider.description}
+          i18nKey={provider.description}
+          components={[
+            <span key={provider.description}></span>,
+            <br key={provider.description} />,
+          ]}
+        ></Trans>
+      </Typography>
+      {provider.sectionLink && (
+        <>
+          {provider.sectionLink.data.map((link) => (
+            <Typography
+              className={'highlightText'}
+              onClick={() => navigateTo(link)}
+              key={link.title}
+            >
+              {link.title}
+            </Typography>
+          ))}
+        </>
+      )}
+    </>
+  )
+}
diff --git a/src/components/shared/templates/StaticTemplateResponsive/StaticTemplate.scss b/src/components/shared/templates/StaticTemplateResponsive/StaticTemplate.scss
index 46103b822..fc93eac6e 100644
--- a/src/components/shared/templates/StaticTemplateResponsive/StaticTemplate.scss
+++ b/src/components/shared/templates/StaticTemplateResponsive/StaticTemplate.scss
@@ -42,6 +42,9 @@
     padding: 20px;
     width: 48%;
   }
+  .imageVideoTextSideBySideWithSections {
+    padding-bottom: 90px;
+  }
   .video {
     border-radius: 16px;
     border: 0px;
@@ -62,7 +65,6 @@
 
   .titleDescriptionBody {
     padding: 20px;
-    width: 50%;
   }
 
   .providerDescription {
@@ -141,6 +143,21 @@
     gap: 30px;
     margin-top: 84px;
   }
+
+  .leftAligned {
+    text-align: left;
+    margin: 20px 20px 20px 100px;
+  }
+
+  .rightAligned {
+    text-align: right;
+    margin: 20px 20px 20px 100px;
+  }
+
+  .leftAligned .title,
+  .rightAligned .title {
+    margin-bottom: 20px;
+  }
 }
 
 //tab layout
@@ -169,6 +186,10 @@
     width: 48%;
   }
 
+  .imageVideoTextSideBySideWithSections {
+    padding-bottom: 20px;
+  }
+
   .video {
     border-radius: 16px;
     border: 0px;
@@ -189,7 +210,6 @@
 
   .titleDescriptionBody {
     padding: 20px;
-    width: 50%;
   }
 
   .providerDescription {
@@ -256,6 +276,21 @@
     margin-top: 84px;
     grid-template-columns: repeat(2, 1fr) !important;
   }
+
+  .leftAligned {
+    text-align: left;
+    margin: 20px 20px 20px 100px;
+  }
+
+  .rightAligned {
+    text-align: right;
+    margin: 20px 20px 20px 100px;
+  }
+
+  .leftAligned .title,
+  .rightAligned .title {
+    margin-bottom: 20px;
+  }
 }
 
 //mobile layout
@@ -283,6 +318,9 @@
     padding-top: 20px;
     width: 100%;
   }
+  .imageVideoTextSideBySideWithSections {
+    padding-bottom: 20px;
+  }
   .video {
     border-radius: 16px;
     border: 0px;
@@ -304,7 +342,6 @@
 
   .titleDescriptionBody {
     padding: 20px;
-    width: 50%;
   }
 
   .providerDescription {
@@ -370,6 +407,28 @@
     margin-top: 20px;
     grid-template-columns: repeat(1, 1fr) !important;
   }
+
+  .leftAligned {
+    text-align: left;
+    margin: 20px 20px 20px 20px;
+  }
+
+  .rightAligned {
+    text-align: right;
+    margin: 20px 20px 20px 20px;
+  }
+
+  .leftAligned .title,
+  .rightAligned .title {
+    margin-bottom: 20px;
+  }
+
+  .imageGallery {
+    width: 100%;
+    height: auto;
+    border-radius: 16px;
+    margin-top: 20px;
+  }
 }
 
 .readMoreStyle {
@@ -406,7 +465,6 @@
 }
 
 .imageGallery {
-  width: 100%;
   height: auto;
   border-radius: 16px;
   margin-top: 20px;
@@ -475,10 +533,7 @@ strong:hover .tooltiptext {
 
 .highlightText {
   cursor: pointer;
-}
-
-.highlightText:hover {
-  color: #0f71cb;
+  color: #0f71cb !important;
 }
 
 .linkGridContainer {
@@ -488,3 +543,25 @@ strong:hover .tooltiptext {
   margin-top: 60px;
   cursor: pointer;
 }
+
+.providerDescription.padding-top-10 {
+  padding-top: 10px;
+}
+
+.padding-left-30 {
+  padding: 0px 0px 0px 30px;
+}
+
+.imageVideoTextSideBySide.padding-bottom-20 {
+  padding-bottom: 20px;
+}
+
+.subDescription {
+  display: block;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.padding-bottom-20 {
+  padding-bottom: 20px;
+}
diff --git a/src/components/shared/templates/StaticTemplateResponsive/StaticTypes.ts b/src/components/shared/templates/StaticTemplateResponsive/StaticTypes.ts
index 5dda74762..b11036e1d 100644
--- a/src/components/shared/templates/StaticTemplateResponsive/StaticTypes.ts
+++ b/src/components/shared/templates/StaticTemplateResponsive/StaticTypes.ts
@@ -29,6 +29,25 @@ export type CardDetailsProps = {
   imageShape?: string
 }
 
+export type sectionLinkType = {
+  data: {
+    title: string
+    id: string
+    internal: boolean
+  }[]
+}
+
+export type subSectionsType = {
+  title: string
+  description: string
+  imagePath: string
+  id: string
+  backgroundColor: string
+  template: string
+  align: string
+  sectionLink: sectionLinkType
+}
+
 export type ProviderProps = {
   title: string
   description: string
@@ -47,13 +66,16 @@ export type ProviderProps = {
   subTitles?: string[]
   align?: 'left' | 'center' | 'right'
   images?: string[]
-  sectionLink?: {
-    data: {
+  sectionLink?: sectionLinkType
+  subDescriptions?: {
+    title: string
+    sections: {
       title: string
-      id: string
-      internal: boolean
+      link: string
+      value: string
     }[]
   }
+  subsections?: subSectionsType[]
 }
 
 export type linkProps = {
@@ -77,4 +99,6 @@ export enum TemplateNames {
   TextCenterAlignedWithImagesInFlex = 'TextCenterAlignedWithImagesInFlex',
   TextCenterAlignedWithImagesInGrid = 'TextCenterAlignedWithImagesInGrid',
   LinkButtonGrid = 'LinkButtonGrid',
+  AlignedText = 'AlignedText',
+  TextImageSideBySideWithSections = 'TextImageSideBySideWithSections',
 }
diff --git a/src/components/shared/templates/StaticTemplateResponsive/index.tsx b/src/components/shared/templates/StaticTemplateResponsive/index.tsx
index 0005f188a..2f1a5c623 100644
--- a/src/components/shared/templates/StaticTemplateResponsive/index.tsx
+++ b/src/components/shared/templates/StaticTemplateResponsive/index.tsx
@@ -33,6 +33,7 @@ import FlexImages from './Cards/FlexImages'
 import GridImages from './Cards/GridImages'
 import { useState } from 'react'
 import { useMediaQuery, useTheme } from '@mui/material'
+import TextImageSideBySideWithSections from './Cards/TextImageSideBySideWithSections'
 
 const TemplateConfig = ({
   provider,
@@ -201,6 +202,16 @@ const TemplateConfig = ({
           <LinkButtonGrid provider={provider} grid={provider.grid} />
         </>
       )
+    //Text in the left and image in the right side with sub sections
+    case TemplateNames.TextImageSideBySideWithSections:
+      return (
+        <TextImageSideBySideWithSections
+          baseUrl={baseUrl}
+          provider={provider}
+          scrollTop={scrollTop}
+          showScroll={showScroll}
+        />
+      )
     default:
       //Text in the left and image in the right side
       return (
diff --git a/src/components/shared/templates/Templates.scss b/src/components/shared/templates/Templates.scss
index 61c81645c..2bc3dfee9 100644
--- a/src/components/shared/templates/Templates.scss
+++ b/src/components/shared/templates/Templates.scss
@@ -41,6 +41,23 @@
   height: 100px;
 }
 
+//tab layout
+@media (max-width: 1024px) {
+  .subNavigationContainer {
+    display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    padding-top: 0px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .subNavigationContainer button {
+    padding-right: 0px;
+    margin-right: 0px;
+  }
+}
+
 //mobile layout
 @media (max-width: 480px) {
   .subNavigationContainer {