diff --git a/packages/marketplace/src/components/pages/client-app-detail/__test__/app-header.text.tsx b/packages/marketplace/src/components/pages/client-app-detail/__test__/app-header.text.tsx
deleted file mode 100644
index 5f5e5b64e2..0000000000
--- a/packages/marketplace/src/components/pages/client-app-detail/__test__/app-header.text.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import AppHeader, { VerifiedByReapit } from '../app-header'
-
-import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
-import { shallow } from 'enzyme'
-import { AppDetailModel } from '@reapit/foundations-ts-definitions'
-
-describe('AppHeader', () => {
-  test('VerifiedByReapit - should match snapshot', () => {
-    const wrapper = shallow(<VerifiedByReapit appName="test" />)
-    expect(wrapper).toMatchSnapshot()
-  })
-  test('AppHeader - should match snapshot', () => {
-    const wrapper = shallow(<AppHeader appDetailData={appDetailDataStub as AppDetailModel} />)
-    expect(wrapper).toMatchSnapshot()
-  })
-})
diff --git a/packages/marketplace/src/components/pages/developer-app-detail/app-content.tsx b/packages/marketplace/src/components/pages/developer-app-detail/app-content.tsx
deleted file mode 100644
index c4de2aa5a5..0000000000
--- a/packages/marketplace/src/components/pages/developer-app-detail/app-content.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import * as React from 'react'
-import { appInstallationsRequestData } from '@/actions/app-installations'
-import { selectDeveloperId } from '@/selector'
-import developerAppDetailStyles from '@/styles/pages/developer-app-detail.scss?mod'
-import { FaExternalLinkAlt } from 'react-icons/fa'
-import { H5 } from '@reapit/elements'
-import appDetailStyles from '@/styles/blocks/app-detail.scss?mod'
-import ConfirmUninstall from '@/components/ui/app-installations/confirm-uninstall'
-import { PagedResultInstallationModel_, InstallationModel } from '@reapit/foundations-ts-definitions'
-import { handleUninstall, handleAfterClose } from '@/components/ui/app-installations/app-installations-modal'
-import AuthFlow from '@/constants/app-auth-flow'
-import '@/styles/vendor/slick.scss'
-import { useSelector, useDispatch } from 'react-redux'
-import { selectInstallationAppData } from '@/selector/installations'
-import { Table, Modal } from '@reapit/elements'
-import { generateColumns } from '@/components/ui/app-installations/installations'
-import clientAppDetailStyles from '@/styles/pages/client-app-detail.scss?mod'
-import { RenderWithHeader } from './app-detail/render-with-header'
-import { AppDetailDataNotNull } from '@/reducers/client/app-detail'
-import AppAuthenticationDetail from '@/components/ui/app-authentication-detail'
-
-export type AppContentProps = {
-  appDetailData: AppDetailDataNotNull
-}
-
-interface RenderAuthenticationParams {
-  authFlow: string
-  id: string
-  externalId: string
-}
-export const renderAuthentication = ({ authFlow, id, externalId }: RenderAuthenticationParams) => {
-  if (authFlow === AuthFlow.CLIENT_SECRET) {
-    return <AppAuthenticationDetail withCustomHeader={true} appId={id} />
-  }
-
-  return (
-    <div data-test="authentication-client-id">
-      <p>Client ID:</p>
-      <p>{externalId}</p>
-    </div>
-  )
-}
-
-interface RenderInstallationsTableParams {
-  data: InstallationModel[]
-  columns: any[]
-}
-export const renderInstallationsTable = ({ data, columns }: RenderInstallationsTableParams) => {
-  if (data.length === 0) {
-    return (
-      <RenderWithHeader dataTest="render-installations-table-empty-text" header="Installations">
-        <p>Currently, there are no installations for your app</p>
-      </RenderWithHeader>
-    )
-  }
-
-  return (
-    <RenderWithHeader dataTest="render-installations-table" header="Installations">
-      <Table data={data} columns={columns} loading={false} />
-    </RenderWithHeader>
-  )
-}
-
-export const handleUninstallSuccess = ({ handleAfterClose, setUninstallApp, developerId, appId, dispatch }) => () => {
-  handleAfterClose({ setUninstallApp })
-  dispatch(
-    appInstallationsRequestData({
-      appId: [appId],
-      pageNumber: 1,
-      pageSize: 15,
-      isInstalled: true,
-      developerId: [developerId],
-    }),
-  )
-}
-
-const AppContent: React.FC<AppContentProps> = ({ appDetailData }) => {
-  const { summary = '', authFlow = '', externalId = '', id = '', name = '' } = appDetailData
-  const installationsData = useSelector(selectInstallationAppData) as PagedResultInstallationModel_
-  const { data = [] } = installationsData
-  const dispatch = useDispatch()
-  const developerId = useSelector(selectDeveloperId) || ''
-
-  const [uninstallApp, setUninstallApp] = React.useState<InstallationModel>()
-  const columns = generateColumns(handleUninstall(setUninstallApp))()
-
-  /**
-   * 0 = icon
-   * 1 = featured media
-   * 2 -> nth: extra media
-   */
-
-  return (
-    <div className={clientAppDetailStyles.appContentContainer}>
-      <Modal visible={Boolean(uninstallApp)}>
-        <ConfirmUninstall
-          isSetAppDetailStaleAfterUninstallSuccess={false}
-          appName={name}
-          installationDetail={uninstallApp}
-          afterClose={handleAfterClose({ setUninstallApp })}
-          onUninstallSuccess={handleUninstallSuccess({
-            handleAfterClose,
-            setUninstallApp,
-            developerId,
-            appId: id,
-            dispatch,
-          })}
-        />
-      </Modal>
-
-      <div className={clientAppDetailStyles.gutter}>{summary}</div>
-      <div className={appDetailStyles.gutter}>
-        <H5 className="flex items-center">
-          <span className="mr-1">See listing preview</span>{' '}
-          <FaExternalLinkAlt className={developerAppDetailStyles.listPreviewIcon} />
-        </H5>
-        <p>The listing preview will display your app as it would appear in the Marketplace</p>
-      </div>
-
-      <RenderWithHeader header="Authentication">{renderAuthentication({ authFlow, externalId, id })}</RenderWithHeader>
-      <div className={clientAppDetailStyles.gutter}>
-        {renderInstallationsTable({
-          data,
-          columns,
-        })}
-      </div>
-    </div>
-  )
-}
-
-export default AppContent
diff --git a/packages/marketplace/src/components/pages/developer-app-detail/__test__/__snapshots__/app-content.test.tsx.snap b/packages/marketplace/src/components/pages/developer-app-detail/app-detail/__test__/__snapshots__/app-content.test.tsx.snap
similarity index 100%
rename from packages/marketplace/src/components/pages/developer-app-detail/__test__/__snapshots__/app-content.test.tsx.snap
rename to packages/marketplace/src/components/pages/developer-app-detail/app-detail/__test__/__snapshots__/app-content.test.tsx.snap
diff --git a/packages/marketplace/src/components/pages/developer-app-detail/__test__/app-content.test.tsx b/packages/marketplace/src/components/pages/developer-app-detail/app-detail/__test__/app-content.test.tsx
similarity index 96%
rename from packages/marketplace/src/components/pages/developer-app-detail/__test__/app-content.test.tsx
rename to packages/marketplace/src/components/pages/developer-app-detail/app-detail/__test__/app-content.test.tsx
index 5a9ece5e6a..ed7268448b 100644
--- a/packages/marketplace/src/components/pages/developer-app-detail/__test__/app-content.test.tsx
+++ b/packages/marketplace/src/components/pages/developer-app-detail/app-detail/__test__/app-content.test.tsx
@@ -5,7 +5,11 @@ import { shallow, mount } from 'enzyme'
 import AuthFlow from '@/constants/app-auth-flow'
 import { appInstallationsRequestData } from '@/actions/app-installations'
 import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
-import AppContent, { handleUninstallSuccess, renderAuthentication, renderInstallationsTable } from '../app-content'
+import AppContent, {
+  handleUninstallSuccess,
+  renderAuthentication,
+  renderInstallationsTable,
+} from '../app-content/app-content'
 import { Provider } from 'react-redux'
 import { ReduxState } from '@/types/core'
 import configureStore from 'redux-mock-store'
diff --git a/packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/__test__/__snapshots__/app-content.test.tsx.snap b/packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/__test__/__snapshots__/app-content.test.tsx.snap
deleted file mode 100644
index 7fc2e78c9f..0000000000
--- a/packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/__test__/__snapshots__/app-content.test.tsx.snap
+++ /dev/null
@@ -1,169 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AppContent SlickButtonNav should match snapshot 1`] = `
-<button
-  currentSlide=""
-  setAppDetailModalStateInstall={[MockFunction]}
-  slideCount={[MockFunction]}
->
-  <div>
-    mockComponent
-  </div>
-</button>
-`;
-
-exports[`AppContent renderShowApiKeyForWebComponent should match snapshot and return null 1`] = `<div />`;
-
-exports[`AppContent renderShowApiKeyForWebComponent should match snapshot and return null 2`] = `<div />`;
-
-exports[`AppContent renderShowApiKeyForWebComponent should match snapshot and return null 3`] = `<div />`;
-
-exports[`AppContent renderShowApiKeyForWebComponent should match snapshot not show api key 1`] = `
-<div>
-  <Component
-    className="mb-0"
-  >
-    API key
-  </Component>
-  <p>
-    To obtain your unique API key, click on 'Show API Key' below. For installation instructions, please click here
-  </p>
-  <span>
-    Authentication:
-  </span>
-   
-  <span>
-    <a
-      onClick={[Function]}
-    >
-      <u>
-        Show
-         API key
-      </u>
-    </a>
-  </span>
-</div>
-`;
-
-exports[`AppContent renderShowApiKeyForWebComponent should match snapshot return null 1`] = `<div />`;
-
-exports[`AppContent renderShowApiKeyForWebComponent should match snapshot when isWebComponent 1`] = `
-<div>
-  <Component
-    className="mb-0"
-  >
-    API key
-  </Component>
-  <p>
-    To obtain your unique API key, click on 'Show API Key' below. For installation instructions, please click here
-  </p>
-  <span>
-    Authentication:
-  </span>
-   
-  <span>
-    <a
-      onClick={[Function]}
-    >
-      <u>
-        Hide
-         API key
-      </u>
-    </a>
-  </span>
-  <CopyToClipboard
-    onCopy={[Function]}
-    text="mockApiKey"
-  >
-    <div
-      className="control has-icons-right"
-    >
-      <input
-        className="input is-primary"
-        id="apiKey"
-        name="apiKey"
-        readOnly={true}
-        type="text"
-        value="mockApiKey"
-      />
-      <span
-        className="icon is-right"
-      >
-        <FaCopy />
-      </span>
-    </div>
-  </CopyToClipboard>
-</div>
-`;
-
-exports[`AppContent should match a snapshot 1`] = `
-<Component>
-  <Component
-    className="is-4"
-  />
-  <Component
-    className="is-8"
-  >
-    <Component
-      html="enim facilisis gravida neque convallis a cras semper auctor neque vitae tempus quam 
-    pellentesque nec nam aliquam sem et tortor consequat id porta nibh venenatis cras 
-    sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar 
-    elementum integer enim neque volutpat ac tincidunt vitae semper quis lectus nulla 
-    at volutpat diam ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet 
-    proin fermentum leo vel orci porta non pulvinar neque laoreet suspendisse interdum co"
-    />
-    <br />
-    <div>
-      <Slider
-        dots={false}
-        nextArrow={
-          <Unknown>
-            <ChevronLeft />
-          </Unknown>
-        }
-        prevArrow={
-          <Unknown>
-            <ChevronLeft />
-          </Unknown>
-        }
-        speed={500}
-        variableWidth={true}
-      >
-        <div
-          key="0"
-        >
-          <img
-            src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/c4a36706-aa44-47f9-9fb6-9053eef4e581.png"
-          />
-        </div>
-        <div
-          key="1"
-        >
-          <img
-            src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/65bd3b97-e78c-41cd-b75f-e06e1d2f00df.png"
-          />
-        </div>
-      </Slider>
-    </div>
-    <br />
-    <Component
-      isMultiLine={true}
-    >
-      <Component
-        key="Marketplace/developers.read"
-      >
-        <li>
-          Read data about developers
-        </li>
-      </Component>
-      <Component
-        key="Marketplace/developers.write"
-      >
-        <li>
-          Write data about developers
-        </li>
-      </Component>
-    </Component>
-  </Component>
-</Component>
-`;
diff --git a/packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/__test__/app-content.test.tsx b/packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/__test__/app-content.test.tsx
deleted file mode 100644
index 4da7478548..0000000000
--- a/packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/__test__/app-content.test.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import * as React from 'react'
-import { shallow } from 'enzyme'
-import AppContent, {
-  AppContentProps,
-  SlickButtonNav,
-  handleShowApiKey,
-  handleCopyAlert,
-  renderShowApiKeyForWebComponent,
-} from '../app-content'
-import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
-
-const mockProps: AppContentProps = {
-  appDetailData: {
-    ...appDetailDataStub.data,
-    apiKey: '',
-  },
-  loginType: 'CLIENT',
-}
-
-describe('AppContent', () => {
-  it('should match a snapshot', () => {
-    expect(shallow(<AppContent {...mockProps} />)).toMatchSnapshot()
-  })
-  describe('SlickButtonNav', () => {
-    it('should match snapshot', () => {
-      const mockProps = {
-        currentSlide: '',
-        setAppDetailModalStateInstall: jest.fn(),
-        slideCount: jest.fn(),
-      }
-      const wrapper = shallow(
-        <SlickButtonNav {...mockProps}>
-          <div>mockComponent</div>
-        </SlickButtonNav>,
-      )
-      expect(wrapper).toMatchSnapshot()
-    })
-  })
-
-  describe('handleShowApiKey', () => {
-    it('should run correctly', () => {
-      const input = { setIsShowApikey: jest.fn(), isShowApiKey: true }
-      const fn = handleShowApiKey(input)
-      fn()
-      expect(input.setIsShowApikey).toBeCalledWith(!input.isShowApiKey)
-    })
-  })
-
-  describe('handleCopyAlert', () => {
-    it('should run correctly', () => {
-      window.alert = jest.fn()
-      handleCopyAlert()
-      expect(window.alert).toBeCalledWith('Copied')
-    })
-  })
-
-  describe('renderShowApiKeyForWebComponent', () => {
-    it('should match snapshot when isWebComponent', () => {
-      const input = {
-        isWebComponent: true,
-        setIsShowApikey: jest.fn(),
-        isShowApiKey: true,
-        apiKey: 'mockApiKey',
-        isCurrentLoggedUserDeveloper: false,
-      }
-      const wrapper = shallow(<div>{renderShowApiKeyForWebComponent(input)}</div>)
-      const apiInput = wrapper.find('[id="apiKey"]')
-      expect(apiInput).toHaveLength(1)
-      expect(wrapper).toMatchSnapshot()
-    })
-
-    it('should match snapshot return null', () => {
-      const input = {
-        isWebComponent: false,
-        setIsShowApikey: jest.fn(),
-        isShowApiKey: true,
-        apiKey: 'mockApiKey',
-        isCurrentLoggedUserDeveloper: false,
-      }
-      const wrapper = shallow(<div>{renderShowApiKeyForWebComponent(input)}</div>)
-      const apiInput = wrapper.find('[id="apiKey"]')
-      expect(apiInput).toHaveLength(0)
-      expect(wrapper).toMatchSnapshot()
-    })
-
-    it('should match snapshot not show api key', () => {
-      const input = {
-        isWebComponent: true,
-        setIsShowApikey: jest.fn(),
-        isShowApiKey: false,
-        apiKey: 'mockApiKey',
-        isCurrentLoggedUserDeveloper: false,
-      }
-      const wrapper = shallow(<div>{renderShowApiKeyForWebComponent(input)}</div>)
-      const apiInput = wrapper.find('[id="apiKey"]')
-      expect(apiInput).toHaveLength(0)
-      expect(wrapper).toMatchSnapshot()
-    })
-
-    it('should match snapshot and return null', () => {
-      const input = {
-        isWebComponent: true,
-        setIsShowApikey: jest.fn(),
-        isShowApiKey: false,
-        apiKey: 'mockApiKey',
-        isCurrentLoggedUserDeveloper: true,
-      }
-      const wrapper = shallow(<div>{renderShowApiKeyForWebComponent(input)}</div>)
-      expect(wrapper).toMatchSnapshot()
-    })
-
-    it('should match snapshot and return null', () => {
-      const input = {
-        isWebComponent: false,
-        setIsShowApikey: jest.fn(),
-        isShowApiKey: false,
-        apiKey: 'mockApiKey',
-        isCurrentLoggedUserDeveloper: true,
-      }
-      const wrapper = shallow(<div>{renderShowApiKeyForWebComponent(input)}</div>)
-      expect(wrapper).toMatchSnapshot()
-    })
-
-    it('should match snapshot and return null', () => {
-      const input = {
-        isWebComponent: true,
-        setIsShowApikey: jest.fn(),
-        isShowApiKey: true,
-        apiKey: undefined,
-        isCurrentLoggedUserDeveloper: true,
-      }
-      const wrapper = shallow(<div>{renderShowApiKeyForWebComponent(input)}</div>)
-      expect(wrapper).toMatchSnapshot()
-    })
-  })
-})
diff --git a/packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/app-content.tsx b/packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/app-content.tsx
index 47577fbbb7..cbf65c2c05 100644
--- a/packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/app-content.tsx
+++ b/packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/app-content.tsx
@@ -1,166 +1,130 @@
 import * as React from 'react'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
-import Slider, { Settings } from 'react-slick'
-import ChevronLeftIcon from '@/components/svg/chevron-left'
-import { FaCheck, FaTimes, FaCopy } from 'react-icons/fa'
-import { Grid, GridItem, SubTitleH6, GridThreeColItem, HTMLRender } from '@reapit/elements'
-import { AppDetailModel } from '@reapit/foundations-ts-definitions'
+import { appInstallationsRequestData } from '@/actions/app-installations'
+import { selectDeveloperId } from '@/selector'
+import developerAppDetailStyles from '@/styles/pages/developer-app-detail.scss?mod'
+import { FaExternalLinkAlt } from 'react-icons/fa'
+import { H5 } from '@reapit/elements'
+import appDetailStyles from '@/styles/blocks/app-detail.scss?mod'
+import ConfirmUninstall from '@/components/ui/app-installations/confirm-uninstall'
+import { PagedResultInstallationModel_, InstallationModel } from '@reapit/foundations-ts-definitions'
+import { handleUninstall, handleAfterClose } from '@/components/ui/app-installations/app-installations-modal'
 import AuthFlow from '@/constants/app-auth-flow'
-import AppAuthenticationDetail from '../../../../ui/app-authentication-detail'
-import styles from '@/styles/blocks/app-detail.scss?mod'
-import carouselStyles from '@/styles/elements/carousel.scss?mod'
 import '@/styles/vendor/slick.scss'
+import { useSelector, useDispatch } from 'react-redux'
+import { selectInstallationAppData } from '@/selector/installations'
+import { Table, Modal } from '@reapit/elements'
+import { generateColumns } from '@/components/ui/app-installations/installations'
+import clientAppDetailStyles from '@/styles/pages/client-app-detail.scss?mod'
+import { RenderWithHeader } from '../render-with-header'
+import { AppDetailDataNotNull } from '@/reducers/client/app-detail'
+import AppAuthenticationDetail from '@/components/ui/app-authentication-detail'
 
 export type AppContentProps = {
-  appDetailData: AppDetailModel & {
-    apiKey?: string | undefined
-  }
-  loginType: string
+  appDetailData: AppDetailDataNotNull
 }
 
-export const SlickButtonNav = ({ children, ...props }) => <button {...props}>{children}</button>
-
-export type HandleShowApiKey = {
-  setIsShowApikey: React.Dispatch<React.SetStateAction<boolean>>
-  isShowApiKey: boolean
+interface RenderAuthenticationParams {
+  authFlow: string
+  id: string
+  externalId: string
 }
+export const renderAuthentication = ({ authFlow, id, externalId }: RenderAuthenticationParams) => {
+  if (authFlow === AuthFlow.CLIENT_SECRET) {
+    return <AppAuthenticationDetail withCustomHeader={true} appId={id} />
+  }
 
-export const handleShowApiKey = ({ setIsShowApikey, isShowApiKey }: HandleShowApiKey) => () => {
-  setIsShowApikey(!isShowApiKey)
+  return (
+    <div data-test="authentication-client-id">
+      <p>Client ID:</p>
+      <p>{externalId}</p>
+    </div>
+  )
 }
 
-export const handleCopyAlert = () => alert('Copied')
-
-export type RenderShowApiKeyForWebComponent = HandleShowApiKey & {
-  isWebComponent?: boolean
-  isCurrentLoggedUserDeveloper: boolean
-  apiKey?: string
+interface RenderInstallationsTableParams {
+  data: InstallationModel[]
+  columns: any[]
 }
-
-export const renderShowApiKeyForWebComponent = ({
-  isWebComponent,
-  setIsShowApikey,
-  isShowApiKey,
-  apiKey,
-  isCurrentLoggedUserDeveloper,
-}: RenderShowApiKeyForWebComponent) => {
-  const isShow = isWebComponent && !isCurrentLoggedUserDeveloper
-  if (!isShow) {
-    return null
+export const renderInstallationsTable = ({ data, columns }: RenderInstallationsTableParams) => {
+  if (data.length === 0) {
+    return (
+      <RenderWithHeader dataTest="render-installations-table-empty-text" header="Installations">
+        <p>Currently, there are no installations for your app</p>
+      </RenderWithHeader>
+    )
   }
+
   return (
-    <>
-      <SubTitleH6 className="mb-0">API key</SubTitleH6>
-      <p>
-        To obtain your unique API key, click on &apos;Show API Key&apos; below. For installation instructions, please
-        click here
-      </p>
-      <span>Authentication:</span>&nbsp;
-      <span>
-        <a onClick={handleShowApiKey({ setIsShowApikey, isShowApiKey })}>
-          <u>{!isShowApiKey ? 'Show' : 'Hide'} API key</u>
-        </a>
-      </span>
-      {isShowApiKey && (
-        <CopyToClipboard text={apiKey} onCopy={handleCopyAlert}>
-          <div className="control has-icons-right">
-            <input className="input is-primary" id="apiKey" type="text" name="apiKey" value={apiKey || ''} readOnly />
-            <span className="icon is-right">
-              <FaCopy />
-            </span>
-          </div>
-        </CopyToClipboard>
-      )}
-    </>
+    <RenderWithHeader dataTest="render-installations-table" header="Installations">
+      <Table data={data} columns={columns} loading={false} />
+    </RenderWithHeader>
   )
 }
 
-export const AppContent: React.FC<AppContentProps> = ({ appDetailData, loginType }) => {
-  const {
-    externalId,
-    isListed,
-    id,
-    developer,
-    authFlow,
-    isWebComponent,
-    apiKey,
-    media = [],
-    scopes = [],
-    description = '',
-  } = appDetailData
-  const [isShowApiKey, setIsShowApikey] = React.useState<boolean>(false)
+export const handleUninstallSuccess = ({ handleAfterClose, setUninstallApp, developerId, appId, dispatch }) => () => {
+  handleAfterClose({ setUninstallApp })
+  dispatch(
+    appInstallationsRequestData({
+      appId: [appId],
+      pageNumber: 1,
+      pageSize: 15,
+      isInstalled: true,
+      developerId: [developerId],
+    }),
+  )
+}
 
-  const isCurrentLoggedUserDeveloper = loginType === 'DEVELOPER'
-  const carouselImages = media.filter(({ type }) => type === 'image')
-  const settings: Settings = {
-    dots: false,
-    speed: 500,
-    variableWidth: true,
-    prevArrow: (
-      <SlickButtonNav>
-        <ChevronLeftIcon />
-      </SlickButtonNav>
-    ),
-    nextArrow: (
-      <SlickButtonNav>
-        <ChevronLeftIcon />
-      </SlickButtonNav>
-    ),
-  }
+const AppContent: React.FC<AppContentProps> = ({ appDetailData }) => {
+  const { summary = '', authFlow = '', externalId = '', id = '', name = '' } = appDetailData
+  const installationsData = useSelector(selectInstallationAppData) as PagedResultInstallationModel_
+  const { data = [] } = installationsData
+  const dispatch = useDispatch()
+  const developerId = useSelector(selectDeveloperId) || ''
+
+  const [uninstallApp, setUninstallApp] = React.useState<InstallationModel>()
+  const columns = generateColumns(handleUninstall(setUninstallApp))()
+
+  /**
+   * 0 = icon
+   * 1 = featured media
+   * 2 -> nth: extra media
+   */
 
   return (
-    <Grid>
-      <GridItem className="is-4">
-        {isCurrentLoggedUserDeveloper && (
-          <>
-            <div key="app-developer" className={styles.appInfoRow}>
-              <p className={styles.appInfoProperty}>Developer:</p>
-              <p>{developer}</p>
-            </div>
-            <div key="app-id" className={styles.appInfoRow}>
-              <p className={styles.appInfoProperty}>Client ID:</p>
-              <p>{externalId}</p>
-            </div>
-            <div key="app-listed" className={styles.appInfoRow}>
-              <p className={styles.appInfoProperty}>Status:</p>
-              <p className={styles.appInfoSpace}>{isListed ? 'Listed' : 'Not listed'}</p>
-              {isListed ? <FaCheck className={styles.isListed} /> : <FaTimes className={styles.notListed} />}
-            </div>
-            {authFlow === AuthFlow.CLIENT_SECRET && id && <AppAuthenticationDetail appId={id} />}
-          </>
-        )}
-        {renderShowApiKeyForWebComponent({
-          isWebComponent,
-          isShowApiKey,
-          setIsShowApikey,
-          apiKey: apiKey,
-          isCurrentLoggedUserDeveloper,
+    <div className={clientAppDetailStyles.appContentContainer}>
+      <Modal visible={Boolean(uninstallApp)}>
+        <ConfirmUninstall
+          isSetAppDetailStaleAfterUninstallSuccess={false}
+          appName={name}
+          installationDetail={uninstallApp}
+          afterClose={handleAfterClose({ setUninstallApp })}
+          onUninstallSuccess={handleUninstallSuccess({
+            handleAfterClose,
+            setUninstallApp,
+            developerId,
+            appId: id,
+            dispatch,
+          })}
+        />
+      </Modal>
+
+      <div className={clientAppDetailStyles.gutter}>{summary}</div>
+      <div className={appDetailStyles.gutter}>
+        <H5 className="flex items-center">
+          <span className="mr-1">See listing preview</span>{' '}
+          <FaExternalLinkAlt className={developerAppDetailStyles.listPreviewIcon} />
+        </H5>
+        <p>The listing preview will display your app as it would appear in the Marketplace</p>
+      </div>
+
+      <RenderWithHeader header="Authentication">{renderAuthentication({ authFlow, externalId, id })}</RenderWithHeader>
+      <div className={clientAppDetailStyles.gutter}>
+        {renderInstallationsTable({
+          data,
+          columns,
         })}
-      </GridItem>
-      <GridItem className="is-8">
-        <HTMLRender className={styles.description} html={description} />
-        <br />
-        {carouselImages.length > 0 && (
-          <div className={carouselStyles.container}>
-            <Slider {...settings}>
-              {carouselImages.map(({ uri }, index) => (
-                <div key={index} className={carouselStyles.slide}>
-                  <img src={uri} />
-                </div>
-              ))}
-            </Slider>
-          </div>
-        )}
-        <br />
-        <Grid isMultiLine>
-          {scopes.map(item => (
-            <GridThreeColItem key={item.name}>
-              <li>{item.description}</li>
-            </GridThreeColItem>
-          ))}
-        </Grid>
-      </GridItem>
-    </Grid>
+      </div>
+    </div>
   )
 }
 
diff --git a/packages/marketplace/src/components/pages/developer-app-detail/developer-app-detail.tsx b/packages/marketplace/src/components/pages/developer-app-detail/developer-app-detail.tsx
index e96e769efc..8e29677ec9 100644
--- a/packages/marketplace/src/components/pages/developer-app-detail/developer-app-detail.tsx
+++ b/packages/marketplace/src/components/pages/developer-app-detail/developer-app-detail.tsx
@@ -10,7 +10,7 @@ import { selectAppDetailState, selectAppDetailData, selectAppDetailLoading } fro
 import { selectInstallAppLoading } from '@/selector/installations'
 import { Loader } from '@reapit/elements'
 import AppHeader from './app-detail/app-header'
-import AppContent from './app-content'
+import AppContent from './app-detail/app-content/app-content'
 import DeveloperAppDetailButtonGroup from '@/components/ui/developer-app-detail/developer-app-detail-button-group'
 
 import AppDelete from '@/components/ui/app-delete'