diff --git a/CHANGELOG.md b/CHANGELOG.md
index 40723f874..a5611bf11 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Changelog
 
+## (unreleased) 2.2.0-RC3
+
 ## Unreleased
 
 ### Bugfixes
@@ -31,6 +33,7 @@
 
 - **Company Subscriptions**
   - Update and bind API with filter options [#1062](https://github.com/eclipse-tractusx/portal-frontend/pull/1062)
+  - Add a tabular section to show up both app and service subscription data [#1101](https://github.com/eclipse-tractusx/portal-frontend/pull/1101)
 
 ### Bugfixes
 
diff --git a/src/assets/locales/de/main.json b/src/assets/locales/de/main.json
index 4b741e55f..9517608c6 100644
--- a/src/assets/locales/de/main.json
+++ b/src/assets/locales/de/main.json
@@ -453,8 +453,8 @@
       "technicalUser": "Technischer Benutzer",
       "unsubscribe": "Abbestellen",
       "table": {
-        "appIcon": "App-Symbol",
-        "appTitle": "App-Titel",
+        "appIcon": "Symbol",
+        "appTitle": "Titel",
         "status": "Status",
         "details": "Einzelheiten",
         "action": "Aktion"
@@ -464,7 +464,8 @@
         "active": "aktiv",
         "inactive": "inaktiv",
         "showAll": "Alles anzeigen"
-      }
+      },
+      "searchName": "..search by company name here"
     },
     "companySubscriptionsDetail": {
       "language": "Verfügbare App Sprachen",
diff --git a/src/assets/locales/en/main.json b/src/assets/locales/en/main.json
index a5e7a550d..06080b3b2 100644
--- a/src/assets/locales/en/main.json
+++ b/src/assets/locales/en/main.json
@@ -449,8 +449,8 @@
       "technicalUser": "Technical User",
       "unsubscribe": "Unsubscribe",
       "table": {
-        "appIcon": "App Icon",
-        "appTitle": "App title",
+        "appIcon": "Icon",
+        "appTitle": "Title",
         "status": "Status",
         "details": "Details",
         "action": "Action"
@@ -460,7 +460,8 @@
         "active": "active",
         "inactive": "inactive",
         "showAll": "show all"
-      }
+      },
+      "searchName": "..search by company name here"
     },
     "companySubscriptionsDetail": {
       "language": "Language",
diff --git a/src/components/pages/CompanySubscriptions/CompanySubscriptionDetail.tsx b/src/components/pages/CompanySubscriptions/CompanySubscriptionDetail.tsx
index 359b9b06a..e1c59960e 100644
--- a/src/components/pages/CompanySubscriptions/CompanySubscriptionDetail.tsx
+++ b/src/components/pages/CompanySubscriptions/CompanySubscriptionDetail.tsx
@@ -17,37 +17,75 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { BackButton } from '@catena-x/portal-shared-components'
+import { BackButton, LogoGrayData } from '@catena-x/portal-shared-components'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Box } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import {
   useFetchAppDetailsQuery,
   useFetchSubscriptionAppQuery,
 } from 'features/apps/apiSlice'
 import { PAGES } from 'types/Constants'
+import './CompanySubscriptions.scss'
+import {
+  useFetchServiceDetailsQuery,
+  useFetchSubscriptionServiceQuery,
+} from 'features/serviceSubscription/serviceSubscriptionApiSlice'
+import CommonService from 'services/CommonService'
+import { useState, useEffect } from 'react'
+import { getApiBase } from 'services/EnvironmentService'
 import CompanySubscriptionTechnical from './components/CompanySubscriptionTechnical'
-import CompanySubscriptionContent from './components/CompanySubscriptionContent'
 import CompanySubscriptionHeader from './components/CompanySubscriptionHeader'
-import CompanySubscriptionDocument from './components/CompanySubscriptionDocument'
+import CompanySubscriptionContent from './components/CompanySubscriptionContent'
 import CompanySubscriptionPrivacy from './components/CompanySubscriptionPrivacyContent'
-import './CompanySubscriptions.scss'
+import CompanySubscriptionDocument from './components/CompanySubscriptionDocument'
 
 export default function CompanySubscriptionDetail() {
   const navigate = useNavigate()
   const { state: items } = useLocation()
   const { t } = useTranslation()
+  const id = items.row.offerId ?? ('' as string)
+  const subscriptionId = items.row.subscriptionId ?? ('' as string)
+  const { data: appData, error: appError } = useFetchSubscriptionAppQuery(
+    { appId: id, subscriptionId },
+    { skip: items.service }
+  )
+  const { data: serviceData, error: serviceError } =
+    useFetchSubscriptionServiceQuery(
+      { serviceId: id, subscriptionId },
+      { skip: items.app }
+    )
+  const { data: fetchAppsData } = useFetchAppDetailsQuery(id, {
+    skip: items.service,
+  })
+  const { data: fetchServicessData } = useFetchServiceDetailsQuery(id, {
+    skip: items.app,
+  })
+  const [docId, setDocId] = useState('')
+
+  const data = items.app ? appData : serviceData
+  const fetchData = items.app ? fetchAppsData : fetchServicessData
 
-  const appId = items ? items.offerId : ''
-  const subscriptionId = items ? items.subscriptionId : ''
+  // To-Do fix the type issue with status and data from FetchBaseQueryError
+  // eslint-disable-next-line
+  const error: any = items.app ? appError : serviceError
 
-  // Prevent API call when appId does not exist
-  const { data } = appId
-    ? useFetchSubscriptionAppQuery({ appId, subscriptionId })
-    : { data: undefined }
-  const { data: fetchAppsData } = appId
-    ? useFetchAppDetailsQuery(appId)
-    : { data: undefined }
+  useEffect(() => {
+    if (fetchData?.leadPictureId) {
+      const id = CommonService.isValidPictureId(fetchData?.leadPictureId)
+      setDocId(id)
+    }
+  }, [fetchData])
+
+  const getSrc = () => {
+    if (fetchData?.id && items.app && docId)
+      return `${getApiBase()}/api/apps/${fetchData.id}/appDocuments/${docId}`
+    if (fetchData?.id && items.service && docId)
+      return `${getApiBase()}/api/services/${
+        fetchData.id
+      }/serviceDocuments/${docId}`
+    return LogoGrayData
+  }
 
   return (
     <main className="company-subscription-detail">
@@ -61,12 +99,14 @@ export default function CompanySubscriptionDetail() {
             }}
           />
         </Box>
-        {data && fetchAppsData && (
+        {error && <Typography variant="body2">{error?.data?.title}</Typography>}
+
+        {data && fetchData && (
           <>
-            <CompanySubscriptionHeader detail={fetchAppsData} />
-            <CompanySubscriptionContent detail={fetchAppsData} />
-            <CompanySubscriptionDocument detail={fetchAppsData} />
-            <CompanySubscriptionPrivacy detail={fetchAppsData} />
+            <CompanySubscriptionHeader detail={fetchData} src={getSrc()} />
+            <CompanySubscriptionContent detail={fetchData} />
+            <CompanySubscriptionDocument detail={fetchData} />
+            <CompanySubscriptionPrivacy detail={fetchData} />
             <CompanySubscriptionTechnical detail={data} />
           </>
         )}
diff --git a/src/components/pages/CompanySubscriptions/CompanySubscriptionsTableColumns.tsx b/src/components/pages/CompanySubscriptions/CompanySubscriptionsTableColumns.tsx
index 87029a91f..58b0008e1 100644
--- a/src/components/pages/CompanySubscriptions/CompanySubscriptionsTableColumns.tsx
+++ b/src/components/pages/CompanySubscriptions/CompanySubscriptionsTableColumns.tsx
@@ -43,7 +43,8 @@ import './CompanySubscriptions.scss'
 
 export const CompanySubscriptionsTableColumns = (
   t: typeof i18next.t,
-  handleOverlay?: (row: SubscribedActiveApps, enable: boolean) => void
+  handleOverlay?: (row: SubscribedActiveApps, enable: boolean) => void,
+  currentActive?: number
 ): Array<GridColDef> => {
   const navigate = useNavigate()
 
@@ -86,6 +87,19 @@ export const CompanySubscriptionsTableColumns = (
       )
   }
 
+  const canShowButton = (row: SubscribedActiveApps) =>
+    row.status === SubscriptionStatus.ACTIVE
+
+  const getSource = (row: SubscribedActiveApps) => {
+    if (row.image && currentActive === 0)
+      return `${getApiBase()}/api/apps/${row.offerId}/appDocuments/${row.image}`
+    if (row.image && currentActive === 1)
+      return `${getApiBase()}/api/services/${row.offerId}/serviceDocuments/${
+        row.image
+      }`
+    return LogoGrayData
+  }
+
   return [
     {
       field: 'image',
@@ -96,13 +110,7 @@ export const CompanySubscriptionsTableColumns = (
       disableColumnMenu: true,
       renderCell: ({ row }: { row: SubscribedActiveApps }) => (
         <Image
-          src={
-            row.image
-              ? `${getApiBase()}/api/apps/${row.offerId}/appDocuments/${
-                  row.image
-                }`
-              : LogoGrayData
-          }
+          src={getSource(row)}
           loader={fetchImageWithToken}
           style={{
             objectFit: 'cover',
@@ -146,7 +154,13 @@ export const CompanySubscriptionsTableColumns = (
             onClick={() => {
               navigate(
                 `/${PAGES.COMPANY_SUBSCRIPTIONS_DETAIL}/${row.offerId}`,
-                { state: row }
+                {
+                  state: {
+                    row,
+                    app: currentActive === 0,
+                    service: currentActive === 1,
+                  },
+                }
               )
             }}
           >
@@ -161,21 +175,20 @@ export const CompanySubscriptionsTableColumns = (
       flex: 2,
       disableColumnMenu: true,
       sortable: false,
-      renderCell: ({ row }: { row: SubscribedActiveApps }) =>
-        row.status === SubscriptionStatus.ACTIVE && (
-          <Button
-            variant="contained"
-            size="small"
-            sx={{ textTransform: 'none' }}
-            onClick={(e) => {
-              handleOverlay?.(row, true)
-              console.log('row.offerId', row.offerId)
-              e.stopPropagation()
-            }}
-          >
-            {t('content.companySubscriptions.unsubscribe')}
-          </Button>
-        ),
+      renderCell: ({ row }: { row: SubscribedActiveApps }) => (
+        <Button
+          variant="contained"
+          size="small"
+          disabled={!canShowButton(row)}
+          sx={{ textTransform: 'none' }}
+          onClick={(e) => {
+            handleOverlay?.(row, true)
+            e.stopPropagation()
+          }}
+        >
+          {t('content.companySubscriptions.unsubscribe')}
+        </Button>
+      ),
     },
   ]
 }
diff --git a/src/components/pages/CompanySubscriptions/components/CompanySubscriptionContent/index.tsx b/src/components/pages/CompanySubscriptions/components/CompanySubscriptionContent/index.tsx
index d984d8c3a..624e13e84 100644
--- a/src/components/pages/CompanySubscriptions/components/CompanySubscriptionContent/index.tsx
+++ b/src/components/pages/CompanySubscriptions/components/CompanySubscriptionContent/index.tsx
@@ -22,11 +22,12 @@ import { Box, useMediaQuery, useTheme } from '@mui/material'
 import { ImageGallery, Typography } from '@catena-x/portal-shared-components'
 import { type AppDetails } from 'features/apps/types'
 import CommonService from 'services/CommonService'
+import { type ServiceDetailsResponse } from 'features/serviceSubscription/serviceSubscriptionApiSlice'
 
 export default function CompanySubscriptionContent({
   detail,
 }: Readonly<{
-  detail: AppDetails
+  detail: AppDetails | ServiceDetailsResponse
 }>) {
   const { t } = useTranslation()
   const theme = useTheme()
@@ -44,14 +45,16 @@ export default function CompanySubscriptionContent({
         </Typography>
       </Box>
       <Box className="company-subscription-content-section" id="image-gallery">
-        <ImageGallery
-          gallery={CommonService.imagesAndAppidToImageType(
-            detail.images,
-            detail.id
-          )}
-          maxWidth={isMobile ? 150 : undefined}
-          modalWidth={isMobile ? '300' : '600'}
-        />
+        {detail?.images && (
+          <ImageGallery
+            gallery={CommonService.imagesAndAppidToImageType(
+              detail.images,
+              detail.id
+            )}
+            maxWidth={isMobile ? 150 : undefined}
+            modalWidth={isMobile ? '300' : '600'}
+          />
+        )}
       </Box>
     </>
   )
diff --git a/src/components/pages/CompanySubscriptions/components/CompanySubscriptionDocument/index.tsx b/src/components/pages/CompanySubscriptions/components/CompanySubscriptionDocument/index.tsx
index c996573c0..514496568 100644
--- a/src/components/pages/CompanySubscriptions/components/CompanySubscriptionDocument/index.tsx
+++ b/src/components/pages/CompanySubscriptions/components/CompanySubscriptionDocument/index.tsx
@@ -26,11 +26,12 @@ import { useFetchDocumentByIdMutation } from 'features/apps/apiSlice'
 import { type AppDetails, type Documents } from 'features/apps/types'
 import { download } from 'utils/downloadUtils'
 import 'components/styles/document.scss'
+import { type ServiceDetailsResponse } from 'features/serviceSubscription/serviceSubscriptionApiSlice'
 
 export default function CompanySubscriptionDocument({
   detail,
 }: Readonly<{
-  detail: AppDetails
+  detail: AppDetails | ServiceDetailsResponse
 }>) {
   const { t } = useTranslation()
 
diff --git a/src/components/pages/CompanySubscriptions/components/CompanySubscriptionHeader/index.tsx b/src/components/pages/CompanySubscriptions/components/CompanySubscriptionHeader/index.tsx
index 57ed54406..3523d206e 100644
--- a/src/components/pages/CompanySubscriptions/components/CompanySubscriptionHeader/index.tsx
+++ b/src/components/pages/CompanySubscriptions/components/CompanySubscriptionHeader/index.tsx
@@ -28,26 +28,18 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
 import UnpublishedIcon from '@mui/icons-material/Unpublished'
 import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty'
 import { useTranslation } from 'react-i18next'
-import { useEffect, useState } from 'react'
 import { type AppDetails, SubscriptionStatus } from 'features/apps/types'
-import CommonService from 'services/CommonService'
 import { fetchImageWithToken } from 'services/ImageService'
-import { getApiBase } from 'services/EnvironmentService'
+import { type ServiceDetailsResponse } from 'features/serviceSubscription/serviceSubscriptionApiSlice'
 
 export default function CompanySubscriptionHeader({
   detail,
+  src,
 }: Readonly<{
-  detail: AppDetails
+  detail: AppDetails | ServiceDetailsResponse
+  src: string
 }>) {
   const { t } = useTranslation()
-  const [docId, setDocId] = useState('')
-
-  useEffect(() => {
-    if (detail.leadPictureId) {
-      const id = CommonService.isValidPictureId(detail.leadPictureId)
-      setDocId(id)
-    }
-  }, [detail])
 
   const renderStatusButton = (status: string) => {
     if (status === SubscriptionStatus.ACTIVE)
@@ -102,11 +94,7 @@ export default function CompanySubscriptionHeader({
     <Box className="company-subscription-header">
       <div className="lead-image">
         <Image
-          src={
-            detail?.id && docId
-              ? `${getApiBase()}/api/apps/${detail.id}/appDocuments/${docId}`
-              : LogoGrayData
-          }
+          src={src ?? LogoGrayData}
           alt={detail.title}
           loader={fetchImageWithToken}
         />
@@ -119,7 +107,7 @@ export default function CompanySubscriptionHeader({
         <Typography variant="label2">
           {t('content.companySubscriptionsDetail.language')}:
           <Typography variant="caption2" sx={{ pb: 2, ml: 1 }}>
-            {detail.languages.length
+            {detail?.languages?.length
               ? detail.languages.map((lang, index) => (
                   <span key={lang}>
                     {` ${index ? ', ' : ''}${lang.toUpperCase()} `}
diff --git a/src/components/pages/CompanySubscriptions/components/CompanySubscriptionPrivacyContent/index.tsx b/src/components/pages/CompanySubscriptions/components/CompanySubscriptionPrivacyContent/index.tsx
index f57347048..265d7f2d2 100644
--- a/src/components/pages/CompanySubscriptions/components/CompanySubscriptionPrivacyContent/index.tsx
+++ b/src/components/pages/CompanySubscriptions/components/CompanySubscriptionPrivacyContent/index.tsx
@@ -24,6 +24,7 @@ import { Typography } from '@catena-x/portal-shared-components'
 import { PrivacyPolicyType } from 'features/adminBoard/adminBoardApiSlice'
 import { type AppDetails } from 'features/apps/types'
 import './CompanySubscriptionPrivacyContent.scss'
+import { type ServiceDetailsResponse } from 'features/serviceSubscription/serviceSubscriptionApiSlice'
 
 const policyIcons = {
   [PrivacyPolicyType.COMPANY_DATA]: Apartment,
@@ -36,7 +37,7 @@ const policyIcons = {
 export default function CompanySubscriptionPrivacy({
   detail,
 }: Readonly<{
-  detail: AppDetails
+  detail: AppDetails | ServiceDetailsResponse
 }>) {
   const { t } = useTranslation('', {
     keyPrefix: 'content.companySubscriptionsDetail.privacy',
@@ -58,7 +59,7 @@ export default function CompanySubscriptionPrivacy({
       </div>
       {detail?.privacyPolicies?.length ? (
         <div className="policies-list app-policies">
-          {detail.privacyPolicies.map((policy: PrivacyPolicyType) => (
+          {detail?.privacyPolicies?.map((policy: PrivacyPolicyType) => (
             <Typography
               variant="body2"
               className="policy-name"
diff --git a/src/components/pages/CompanySubscriptions/components/CompanySubscriptionTechnical/index.tsx b/src/components/pages/CompanySubscriptions/components/CompanySubscriptionTechnical/index.tsx
index a297ad1e5..793ccae1c 100644
--- a/src/components/pages/CompanySubscriptions/components/CompanySubscriptionTechnical/index.tsx
+++ b/src/components/pages/CompanySubscriptions/components/CompanySubscriptionTechnical/index.tsx
@@ -20,14 +20,14 @@
 import { Box } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { StaticTable, Typography } from '@catena-x/portal-shared-components'
-import { type ActiveSubscriptionDetails } from 'features/apps/types'
+import { type FetchSubscriptionResponseType } from 'features/apps/types'
 import { PAGES, ROLES } from 'types/Constants'
 import { userHasPortalRole } from 'services/AccessService'
 
 export default function CompanySubscriptionTechnical({
   detail,
 }: Readonly<{
-  detail: ActiveSubscriptionDetails
+  detail: FetchSubscriptionResponseType
 }>) {
   const { t } = useTranslation()
 
diff --git a/src/components/pages/CompanySubscriptions/index.tsx b/src/components/pages/CompanySubscriptions/index.tsx
index 9c609877f..e41e53bc5 100644
--- a/src/components/pages/CompanySubscriptions/index.tsx
+++ b/src/components/pages/CompanySubscriptions/index.tsx
@@ -19,6 +19,9 @@
 
 import {
   PageLoadingTable,
+  Tab,
+  TabPanel,
+  Tabs,
   Typography,
 } from '@catena-x/portal-shared-components'
 import { useTranslation } from 'react-i18next'
@@ -26,7 +29,7 @@ import {
   useFetchSubscribedActiveAppsStatusQuery,
   useUnsubscribeAppMutation,
 } from 'features/apps/apiSlice'
-import { useEffect, useState } from 'react'
+import { type SyntheticEvent, useEffect, useState } from 'react'
 import { isName } from 'types/Patterns'
 import { useDispatch, useSelector } from 'react-redux'
 import { setSearchInput } from 'features/appManagement/actions'
@@ -38,6 +41,11 @@ import {
   type SubscribedActiveApps,
 } from 'features/apps/types'
 import { CompanySubscriptionsTableColumns } from './CompanySubscriptionsTableColumns'
+import {
+  useFetchCompanyServiceSubscriptionsQuery,
+  useUnsubscribeServiceMutation,
+} from 'features/serviceSubscription/serviceSubscriptionApiSlice'
+import { Box } from '@mui/material'
 
 interface FetchHookArgsType {
   statusId: string
@@ -62,8 +70,10 @@ export default function CompanySubscriptions() {
   const [loading, setLoading] = useState<boolean>(false)
   const [appId, setAppId] = useState<string>('')
   const [subscriptionId, setSubscriptionId] = useState<string>('')
-  const [unsubscribeMutation] = useUnsubscribeAppMutation()
+  const [unsubscribeAppMutation] = useUnsubscribeAppMutation()
+  const [unsubscribeServiceMutation] = useUnsubscribeServiceMutation()
   const [enableErrorMessage, setEnableErrorMessage] = useState<boolean>(false)
+  const [currentActive, setCurrentActive] = useState<number>(0)
 
   const setView = (e: React.MouseEvent<HTMLInputElement>) => {
     const viewValue = e.currentTarget.value
@@ -72,6 +82,13 @@ export default function CompanySubscriptions() {
     setRefresh(Date.now())
   }
 
+  const handleTabChange = (
+    _e: SyntheticEvent<Element, Event>,
+    value: number
+  ) => {
+    setCurrentActive(value)
+  }
+
   const filterView = [
     {
       buttonText: t('content.companySubscriptions.filter.pending'),
@@ -108,16 +125,24 @@ export default function CompanySubscriptions() {
     return validateExpr
   }
 
+  const callSuccess = () => {
+    success(t('content.organization.unsubscribe.unsubscribeSuccess'))
+    setLoading(false)
+    setShowUnsubscribeOverlay(false)
+    setEnableErrorMessage(false)
+    setRefresh(Date.now())
+  }
+
   const onUnsubscribeSubmit = async () => {
     setLoading(true)
-    await unsubscribeMutation(subscriptionId)
+    await (
+      currentActive === 0
+        ? unsubscribeAppMutation(subscriptionId)
+        : unsubscribeServiceMutation(subscriptionId)
+    )
       .unwrap()
       .then(() => {
-        success(t('content.organization.unsubscribe.unsubscribeSuccess'))
-        setLoading(false)
-        setShowUnsubscribeOverlay(false)
-        setEnableErrorMessage(false)
-        setRefresh(Date.now())
+        callSuccess()
       })
       .catch(() => {
         setLoading(false)
@@ -133,7 +158,69 @@ export default function CompanySubscriptions() {
 
   const companySubscriptionsCols = CompanySubscriptionsTableColumns(
     t,
-    handleOverlay
+    handleOverlay,
+    currentActive
+  )
+
+  const getIcon = (num: number) => {
+    return (
+      <Typography
+        variant="label3"
+        sx={{
+          background: currentActive + 1 === num ? '#0f71cb' : 'white',
+          color: currentActive + 1 === num ? 'white' : '#0f71cb',
+          outline: '2px solid #0f71cb',
+          flex: '0',
+          marginRight: '20px',
+          borderRadius: '50%',
+          height: '20px',
+          width: '20px',
+          minWidth: '20px',
+          textAlign: 'center',
+          lineHeight: '20px',
+          position: 'relative',
+        }}
+      >
+        {num}
+      </Typography>
+    )
+  }
+
+  // Add an ESLint exception until there is a solution
+  // eslint-disable-next-line
+  const renderTable = (query: any) => (
+    <div className={'table-container'}>
+      <PageLoadingTable<SubscribedActiveApps, FetchHookArgsType>
+        sx={{
+          '.MuiDataGrid-cell': {
+            alignContent: 'center !important',
+          },
+        }}
+        autoFocus={false}
+        searchExpr={searchExpr}
+        alignCell="start"
+        defaultFilter={group}
+        filterViews={filterView}
+        toolbarVariant={'searchAndFilter'}
+        hasBorder={false}
+        columnHeadersBackgroundColor={'transparent'}
+        searchPlaceholder={t('content.companySubscriptions.searchName')}
+        searchInputData={searchInputData}
+        onSearch={(expr: string) => {
+          if (expr !== '' && !onValidate(expr)) return
+          setRefresh(Date.now())
+          setSearchExpr(expr)
+        }}
+        searchDebounce={1000}
+        title={''}
+        loadLabel={t('global.actions.more')}
+        fetchHook={query}
+        fetchHookArgs={fetchHookArgs}
+        fetchHookRefresh={refresh}
+        getRowId={(row: { [key: string]: string }) => row.offerId}
+        columns={companySubscriptionsCols}
+      />
+    </div>
   )
 
   return (
@@ -151,6 +238,7 @@ export default function CompanySubscriptions() {
           appId={appId}
           subscriptionId={subscriptionId}
           enableErrorMessage={enableErrorMessage}
+          activeTab={currentActive}
         />
       )}
       <Typography
@@ -160,39 +248,52 @@ export default function CompanySubscriptions() {
       >
         {t('content.companySubscriptions.headertitle')}
       </Typography>
-
-      <div className={'table-container'}>
-        <PageLoadingTable<SubscribedActiveApps, FetchHookArgsType>
-          sx={{
-            '.MuiDataGrid-cell': {
-              alignContent: 'center !important',
-            },
-          }}
-          autoFocus={false}
-          searchExpr={searchExpr}
-          alignCell="start"
-          defaultFilter={group}
-          filterViews={filterView}
-          toolbarVariant={'searchAndFilter'}
-          hasBorder={false}
-          columnHeadersBackgroundColor={'transparent'}
-          searchPlaceholder={t('global.table.searchName')}
-          searchInputData={searchInputData}
-          onSearch={(expr: string) => {
-            if (!onValidate(expr)) return
-            setRefresh(Date.now())
-            setSearchExpr(expr)
-          }}
-          searchDebounce={1000}
-          title={''}
-          loadLabel={t('global.actions.more')}
-          fetchHook={useFetchSubscribedActiveAppsStatusQuery}
-          fetchHookArgs={fetchHookArgs}
-          fetchHookRefresh={refresh}
-          getRowId={(row: { [key: string]: string }) => row.subscriptionId}
-          columns={companySubscriptionsCols}
-        />
-      </div>
+      <Box>
+        <Tabs
+          value={currentActive}
+          onChange={handleTabChange}
+          sx={{ margin: '0 18% 20px' }}
+        >
+          <Tab
+            iconPosition="start"
+            icon={getIcon(1)}
+            aria-controls={`simple-tabpanel-${currentActive}`}
+            id={`simple-tab-${currentActive}`}
+            label={'App Company Subscriptions'}
+            sx={{
+              textTransform: 'none',
+              display: 'inline-flex',
+              width: '100%',
+              maxWidth: '550px',
+              '&.Mui-selected': {
+                borderBottom: '3px solid #0f71cb',
+              },
+            }}
+          />
+          <Tab
+            iconPosition="start"
+            icon={getIcon(2)}
+            aria-controls={`simple-tabpanel-${currentActive}`}
+            id={`simple-tab-${currentActive}`}
+            label={'Service Company Subscriptions'}
+            sx={{
+              textTransform: 'none',
+              display: 'inline-flex',
+              width: '100%',
+              maxWidth: '550px',
+              '&.Mui-selected': {
+                borderBottom: '3px solid #0f71cb',
+              },
+            }}
+          />
+        </Tabs>
+        <TabPanel value={currentActive} index={0}>
+          {renderTable(useFetchSubscribedActiveAppsStatusQuery)}
+        </TabPanel>
+        <TabPanel value={currentActive} index={1}>
+          {renderTable(useFetchCompanyServiceSubscriptionsQuery)}
+        </TabPanel>
+      </Box>
     </main>
   )
 }
diff --git a/src/components/pages/Organization/UnSubscribeOverlay.tsx b/src/components/pages/Organization/UnSubscribeOverlay.tsx
index c7e18e135..2fb218a49 100644
--- a/src/components/pages/Organization/UnSubscribeOverlay.tsx
+++ b/src/components/pages/Organization/UnSubscribeOverlay.tsx
@@ -34,10 +34,12 @@ import {
 import Box from '@mui/material/Box'
 import { useFetchSubscriptionAppQuery } from 'features/apps/apiSlice'
 import './Organization.scss'
+import { type SubscribeTechnicalUserData } from 'features/apps/types'
 import {
-  type SubscribeTechnicalUserData,
-  SubscriptionStatus,
-} from 'features/apps/types'
+  OfferSubscriptionStatus,
+  useFetchSubscriptionServiceQuery,
+} from 'features/serviceSubscription/serviceSubscriptionApiSlice'
+import LoadingProgress from 'components/shared/basic/LoadingProgress'
 
 interface UnSubscribeOverlayProps {
   openDialog?: boolean
@@ -47,6 +49,7 @@ interface UnSubscribeOverlayProps {
   subscriptionId: string
   appId: string
   enableErrorMessage: boolean
+  activeTab: number
 }
 
 const UnSubscribeOverlay = ({
@@ -57,10 +60,35 @@ const UnSubscribeOverlay = ({
   subscriptionId,
   appId,
   enableErrorMessage,
+  activeTab,
 }: UnSubscribeOverlayProps) => {
   const { t } = useTranslation()
-  const { data } = useFetchSubscriptionAppQuery({ appId, subscriptionId })
+  const {
+    data: appData,
+    error: appError,
+    isFetching: isAppFetching,
+  } = useFetchSubscriptionAppQuery(
+    { appId, subscriptionId },
+    { skip: activeTab === 1 }
+  )
+  const {
+    data: serviceData,
+    error: serviceError,
+    isFetching: isServiceFetching,
+  } = useFetchSubscriptionServiceQuery(
+    { serviceId: appId, subscriptionId },
+    { skip: activeTab === 0 }
+  )
   const [checkBoxSelected, setCheckBoxSelected] = useState<boolean>(false)
+
+  const data = activeTab === 0 ? appData : serviceData
+
+  const isFetching: boolean = isAppFetching ?? isServiceFetching
+
+  // To-Do fix the type issue with status and data from FetchBaseQueryError
+  // eslint-disable-next-line
+  const error: any = activeTab === 0 ? appError : serviceError
+
   return (
     <div>
       <Dialog
@@ -74,71 +102,108 @@ const UnSubscribeOverlay = ({
         <div className="unsubscribeOverlay">
           <DialogHeader
             title={t('content.organization.unsubscribe.title')}
-            intro={`For ${data?.name}`}
+            intro={error ? '' : `For ${data?.name}`}
           />
           <DialogContent>
-            <Typography variant="body3">
-              {t('content.organization.unsubscribe.descriptionNote')}
-            </Typography>
-            <Typography variant="body3">
-              {t('content.organization.unsubscribe.description')}
-            </Typography>
-            <Box sx={{ mt: '20px' }}>
-              <StaticTable
-                data={{
-                  head: [
-                    t(
-                      'content.organization.unsubscribe.table.listOfConnectedObjects'
-                    ),
-                    '',
-                  ],
-                  body: [
-                    [
-                      t('content.organization.unsubscribe.table.app'),
-                      data?.name ?? '',
-                    ],
-                    [
-                      t('content.organization.unsubscribe.table.status'),
-                      data?.offerSubscriptionStatus ===
-                      SubscriptionStatus.ACTIVE
-                        ? t('content.organization.unsubscribe.subscribed')
-                        : '',
-                    ],
-                    [
-                      t('content.organization.unsubscribe.table.connector'),
-                      data?.connectorData[0]?.name ?? '',
-                    ],
-                    [
-                      t('content.organization.unsubscribe.table.techUser'),
-                      data?.technicalUserData
-                        ?.map(
-                          (userdata: SubscribeTechnicalUserData) =>
-                            userdata.name
-                        )
-                        .toString() ?? '',
-                    ],
-                  ],
-                }}
-                horizontal={false}
-              />
-            </Box>
-            <Box
-              sx={{
-                alignContent: 'left',
-                display: 'grid',
-                padding: '44px 0 12px 0',
+            <div
+              style={{
+                textAlign: 'center',
               }}
             >
-              <Checkbox
-                label={t('content.organization.unsubscribe.checkBoxLabel')}
-                checked={checkBoxSelected}
-                onClick={() => {
-                  setCheckBoxSelected(!checkBoxSelected)
-                }}
-              />
-              <Typography variant="body2" sx={{ ml: 4 }}>
-                {t('content.organization.unsubscribe.checkBoxLabelDescription')}
+              <Typography variant="body3">
+                {t('content.organization.unsubscribe.descriptionNote')}
               </Typography>
+              <Typography variant="body3">
+                {t('content.organization.unsubscribe.description')}
+              </Typography>
+            </div>
+            <Box sx={{ mt: '20px' }}>
+              {isFetching ? (
+                <div style={{ textAlign: 'center', margin: 30 }}>
+                  <LoadingProgress />
+                </div>
+              ) : (
+                <>
+                  {error ? (
+                    <Typography
+                      variant="body2"
+                      sx={{ ml: 0, textAlign: 'center' }}
+                    >
+                      {error.data.title}
+                    </Typography>
+                  ) : (
+                    <>
+                      <StaticTable
+                        data={{
+                          head: [
+                            t(
+                              'content.organization.unsubscribe.table.listOfConnectedObjects'
+                            ),
+                            '',
+                          ],
+                          body: [
+                            [
+                              t('content.organization.unsubscribe.table.app'),
+                              data?.name ?? '',
+                            ],
+                            [
+                              t(
+                                'content.organization.unsubscribe.table.status'
+                              ),
+                              data?.offerSubscriptionStatus ===
+                              OfferSubscriptionStatus.ACTIVE
+                                ? t(
+                                    'content.organization.unsubscribe.subscribed'
+                                  )
+                                : '',
+                            ],
+                            [
+                              t(
+                                'content.organization.unsubscribe.table.connector'
+                              ),
+                              data?.connectorData[0]?.name ?? '',
+                            ],
+                            [
+                              t(
+                                'content.organization.unsubscribe.table.techUser'
+                              ),
+                              data?.technicalUserData
+                                ?.map(
+                                  (userdata: SubscribeTechnicalUserData) =>
+                                    userdata.name
+                                )
+                                .toString() ?? '',
+                            ],
+                          ],
+                        }}
+                        horizontal={false}
+                      />
+                      <Box
+                        sx={{
+                          alignContent: 'left',
+                          display: 'grid',
+                          padding: '44px 0 12px 0',
+                        }}
+                      >
+                        <Checkbox
+                          label={t(
+                            'content.organization.unsubscribe.checkBoxLabel'
+                          )}
+                          checked={checkBoxSelected}
+                          onClick={() => {
+                            setCheckBoxSelected(!checkBoxSelected)
+                          }}
+                        />
+                        <Typography variant="body2" sx={{ ml: 4 }}>
+                          {t(
+                            'content.organization.unsubscribe.checkBoxLabelDescription'
+                          )}
+                        </Typography>
+                      </Box>
+                    </>
+                  )}
+                </>
+              )}
             </Box>
           </DialogContent>
           <DialogActions sx={{ display: 'block', textAlign: 'center' }}>
@@ -179,7 +244,7 @@ const UnSubscribeOverlay = ({
               ) : (
                 <Button
                   variant="contained"
-                  disabled={!checkBoxSelected}
+                  disabled={!checkBoxSelected || error}
                   onClick={(e) => {
                     handleConfirmClick(e)
                   }}
diff --git a/src/features/apps/apiSlice.ts b/src/features/apps/apiSlice.ts
index 99393e63d..a6ef97de1 100644
--- a/src/features/apps/apiSlice.ts
+++ b/src/features/apps/apiSlice.ts
@@ -26,7 +26,6 @@ import {
 import i18next from 'i18next'
 import { getApiBase } from 'services/EnvironmentService'
 import { apiBaseQuery } from 'utils/rtkUtil'
-import { PAGE_SIZE } from 'types/Constants'
 import {
   type AppDetails,
   type AppMarketplaceApp,
@@ -38,12 +37,13 @@ import {
   type SubscriptionAppRequest,
   type AgreementRequest,
   type ActiveSubscription,
-  type ActiveSubscriptionDetails,
   type FetchSubscriptionAppQueryType,
   type SubscribedActiveApps,
   StatusIdEnum,
+  type FetchSubscriptionResponseType,
   CompanySubscriptionFilterType,
 } from './types'
+import { PAGE_SIZE } from 'types/Constants'
 
 export const apiSlice = createApi({
   reducerPath: 'rtk/apps/marketplace',
@@ -149,11 +149,15 @@ export const apiSlice = createApi({
       query: () => '/api/apps/subscribed/activesubscriptions',
     }),
     fetchSubscriptionApp: builder.query<
-      ActiveSubscriptionDetails,
+      FetchSubscriptionResponseType,
       FetchSubscriptionAppQueryType
     >({
       query: (obj) =>
         `/api/apps/${obj.appId}/subscription/${obj.subscriptionId}/subscriber`,
+      transformErrorResponse: (res) => ({
+        status: res.status,
+        data: res.data,
+      }),
     }),
     unsubscribeApp: builder.mutation<void, string>({
       query: (subscriptionId) => ({
@@ -165,14 +169,18 @@ export const apiSlice = createApi({
       PaginResult<SubscribedActiveApps>,
       PaginFetchArgs
     >({
-      query: (fetchArgs) => {
-        if (
-          fetchArgs.args.statusId &&
-          fetchArgs.args.statusId !== CompanySubscriptionFilterType.SHOW_ALL
-        ) {
-          return `/api/Apps/subscribed/subscription-status?size=${PAGE_SIZE}&page=${fetchArgs.page}&statusId=${fetchArgs.args.statusId}`
-        } else {
-          return `/api/Apps/subscribed/subscription-status?size=${PAGE_SIZE}&page=${fetchArgs.page}`
+      query: (body) => {
+        const url = `/api/apps/subscribed/subscription-status?size=${PAGE_SIZE}&page=${body.page}`
+        const statusId =
+          body.args.statusId &&
+          body.args.statusId !== CompanySubscriptionFilterType.SHOW_ALL
+            ? `&status=${body.args.statusId}`
+            : ''
+        const companyName = body.args.expr
+          ? `&companyName=${body.args.expr}`
+          : ''
+        return {
+          url: `${url}${statusId}${companyName}`,
         }
       },
     }),
diff --git a/src/features/apps/types.ts b/src/features/apps/types.ts
index 899e1a203..33d58abae 100644
--- a/src/features/apps/types.ts
+++ b/src/features/apps/types.ts
@@ -20,6 +20,10 @@
 import type { CardItems } from '@catena-x/portal-shared-components'
 import type { PrivacyPolicyType } from 'features/adminBoard/adminBoardApiSlice'
 import type { UseCaseType } from 'features/appManagement/types'
+import {
+  type OfferSubscriptionStatus,
+  type OfferSubscriptionDataType,
+} from 'features/serviceSubscription/serviceSubscriptionApiSlice'
 
 export type ImageType = {
   src: string
@@ -150,6 +154,7 @@ export type AppDetails = AppMarketplaceApp & {
   technicalUserProfile?: {
     [key: string]: string[] | null
   }
+  offerSubscriptionDetailData?: OfferSubscriptionDataType[]
 }
 
 export type Documents = {
@@ -251,9 +256,9 @@ export const initialState: AppsControlState = {
 }
 
 export enum CompanySubscriptionFilterType {
-  PENDING = 'pending',
-  ACTIVE = 'active',
-  INACTIVE = 'inactive',
+  PENDING = 'PENDING',
+  ACTIVE = 'ACTIVE',
+  INACTIVE = 'INACTIVE',
   SHOW_ALL = 'show all',
 }
 
@@ -273,3 +278,13 @@ export enum StatusIdEnum {
   WIP = 'WIP',
   All = 'All',
 }
+
+export interface FetchSubscriptionResponseType {
+  id: string
+  offerSubscriptionStatus: OfferSubscriptionStatus
+  name: string
+  provider: string
+  contact: string[]
+  technicalUserData: SubscribeTechnicalUserData[]
+  connectorData: SubscribeConnectorData[]
+}
diff --git a/src/features/serviceSubscription/serviceSubscriptionApiSlice.ts b/src/features/serviceSubscription/serviceSubscriptionApiSlice.ts
index eeb95ca87..adc4524b6 100644
--- a/src/features/serviceSubscription/serviceSubscriptionApiSlice.ts
+++ b/src/features/serviceSubscription/serviceSubscriptionApiSlice.ts
@@ -18,8 +18,21 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
+import {
+  type PaginFetchArgs,
+  type PaginResult,
+} from '@catena-x/portal-shared-components'
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { type PrivacyPolicyType } from 'features/adminBoard/adminBoardApiSlice'
+import {
+  CompanySubscriptionFilterType,
+  type Documents,
+  type FetchSubscriptionResponseType,
+  type SubscribedActiveApps,
+} from 'features/apps/types'
 import { type ProcessStep } from 'features/appSubscription/appSubscriptionApiSlice'
+import i18next from 'i18next'
+import { PAGE_SIZE } from 'types/Constants'
 import { apiBaseQuery } from 'utils/rtkUtil'
 
 export interface SubscriptionRequestType {
@@ -38,7 +51,7 @@ export interface SubscriptionResponseContentType {
 
 export type SubscriptionContent = {
   offerId: string
-  serviceName: string
+  offerName: string
   companySubscriptionStatuses: SubscriptionResponseContentType[]
 }
 
@@ -90,6 +103,54 @@ export type SubscriptionDetailResponse = {
   processStepTypeId?: ProcessStep
 }
 
+export enum LicenseType {
+  COTS = 'COTS',
+  FOSS = 'FOSS',
+}
+
+export enum OfferSubscriptionStatus {
+  PENDING = 'PENDING',
+  ACTIVE = 'ACTIVE',
+  INACTIVE = 'INACTIVE',
+}
+
+export interface OfferSubscriptionDataType {
+  offerSubscriptionId: string
+  offerSubscriptionStatus: OfferSubscriptionStatus
+}
+
+export enum ServiceTypes {
+  DATASPACE_SERVICE = 'DATASPACE_SERVICE',
+  CONSULTANCY_SERVICE = 'CONSULTANCY_SERVICE',
+}
+
+export interface ServiceDetailsResponse {
+  id: string
+  title: string
+  provider: string
+  contactEmail: string
+  description: string
+  licenseType: LicenseType
+  price: string
+  offerSubscriptionDetailData: OfferSubscriptionDataType[]
+  serviceTypes: ServiceTypes
+  technicalUserProfile: {
+    [key: string]: string[] | null
+  }
+  leadPictureId?: string
+  isSubscribed: string
+  longDescription: string
+  languages: string[]
+  images: string[]
+  privacyPolicies: PrivacyPolicyType[]
+  documents: Documents
+}
+
+export interface SubscriptionServiceRequestType {
+  serviceId: string
+  subscriptionId: string
+}
+
 export const apiSlice = createApi({
   reducerPath: 'rtk/services/serviceSubscription',
   baseQuery: fetchBaseQuery(apiBaseQuery()),
@@ -121,7 +182,49 @@ export const apiSlice = createApi({
       SubscriptionDetailRequestBody
     >({
       query: (body) =>
-        `/api/Services/${body.appId}/subscription/${body.subscriptionId}/provider`,
+        `/api/services/${body.appId}/subscription/${body.subscriptionId}/provider`,
+    }),
+    fetchSubscriptionService: builder.query<
+      FetchSubscriptionResponseType,
+      SubscriptionServiceRequestType
+    >({
+      query: (obj) =>
+        `/api/services/${obj.serviceId}/subscription/${obj.subscriptionId}/subscriber`,
+      transformErrorResponse: (res) => {
+        return {
+          status: res.status,
+          data: res.data,
+        }
+      },
+    }),
+    fetchServiceDetails: builder.query<ServiceDetailsResponse, string>({
+      query: (id: string) => `/api/services/${id}?lang=${i18next.language}`,
+    }),
+    fetchCompanyServiceSubscriptions: builder.query<
+      PaginResult<SubscribedActiveApps>,
+      PaginFetchArgs
+    >({
+      query: (body) => {
+        console.log(body)
+        const url = `/api/services/subscribed/subscription-status?size=${PAGE_SIZE}&page=${body.page}`
+        const statusId =
+          body.args.statusId &&
+          body.args.statusId !== CompanySubscriptionFilterType.SHOW_ALL
+            ? `&status=${body.args.statusId}`
+            : ''
+        const companyName = body.args.expr
+          ? `&companyName=${body.args.expr}`
+          : ''
+        return {
+          url: `${url}${statusId}${companyName}`,
+        }
+      },
+    }),
+    unsubscribeService: builder.mutation<void, string>({
+      query: (subscriptionId) => ({
+        url: `/api/services/${subscriptionId}/unsubscribe`,
+        method: 'PUT',
+      }),
     }),
   }),
 })
@@ -130,4 +233,8 @@ export const {
   useFetchServiceSubscriptionsQuery,
   useFetchServiceFiltersQuery,
   useFetchServiceSubDetailQuery,
+  useFetchSubscriptionServiceQuery,
+  useFetchServiceDetailsQuery,
+  useFetchCompanyServiceSubscriptionsQuery,
+  useUnsubscribeServiceMutation,
 } = apiSlice