diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/__tests__/__snapshots__/app-detail-preview.test.tsx.snap b/packages/developer-portal/src/components/pages/app-detail-preview/__tests__/__snapshots__/app-detail-preview.test.tsx.snap
new file mode 100644
index 0000000000..6148fc9977
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/__tests__/__snapshots__/app-detail-preview.test.tsx.snap
@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppDetailPreview should match a snapshot 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <MemoryRouter
+    initialEntries={
+      Array [
+        Object {
+          "key": "clientAppDetailPreviewRoute",
+          "pathname": "/apps/:appid",
+        },
+      ]
+    }
+  >
+    <Router
+      history={
+        Object {
+          "action": "POP",
+          "block": [Function],
+          "canGo": [Function],
+          "createHref": [Function],
+          "entries": Array [
+            Object {
+              "hash": "",
+              "key": "clientAppDetailPreviewRoute",
+              "pathname": "/apps/:appid",
+              "search": "",
+            },
+          ],
+          "go": [Function],
+          "goBack": [Function],
+          "goForward": [Function],
+          "index": 0,
+          "length": 1,
+          "listen": [Function],
+          "location": Object {
+            "hash": "",
+            "key": "clientAppDetailPreviewRoute",
+            "pathname": "/apps/:appid",
+            "search": "",
+          },
+          "push": [Function],
+          "replace": [Function],
+        }
+      }
+    >
+      <AppDetailPreview>
+        <Component
+          dataTest="client-app-detail-container"
+        >
+          <div
+            className=""
+            data-test="client-app-detail-container"
+          >
+            <Component>
+              <div
+                className=""
+                data-test=""
+              >
+                <Component
+                  message="There is no preview app"
+                  type="danger"
+                >
+                  <div
+                    className="notification is-danger "
+                    data-test=""
+                    role="alert"
+                  >
+                    There is no preview app
+                  </div>
+                </Component>
+              </div>
+            </Component>
+          </div>
+        </Component>
+      </AppDetailPreview>
+    </Router>
+  </MemoryRouter>
+</Provider>
+`;
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/__tests__/app-detail-preview.test.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/__tests__/app-detail-preview.test.tsx
new file mode 100644
index 0000000000..dc26a24366
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/__tests__/app-detail-preview.test.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react'
+import * as ReactRedux from 'react-redux'
+import { MemoryRouter } from 'react-router'
+import { mount } from 'enzyme'
+import configureStore from 'redux-mock-store'
+import AppDetailPreview, { loadAppDetailPreviewDataFromLocalStorage } from '../app-detail-preview'
+import Routes from '@/constants/routes'
+import appState from '@/reducers/__stubs__/app-state'
+import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
+
+describe('AppDetailPreview', () => {
+  let store
+  let spyDispatch
+  beforeEach(() => {
+    /* mocking store */
+    const mockStore = configureStore()
+    store = mockStore({
+      ...appState,
+      client: {
+        appDetail: {
+          data: {},
+          loading: false,
+        },
+      },
+    })
+    spyDispatch = jest.spyOn(ReactRedux, 'useDispatch').mockImplementation(() => store.dispatch)
+  })
+
+  it('should match a snapshot', () => {
+    expect(
+      mount(
+        <ReactRedux.Provider store={store}>
+          <MemoryRouter initialEntries={[{ pathname: Routes.APP_DETAIL, key: 'clientAppDetailPreviewRoute' }]}>
+            <AppDetailPreview />
+          </MemoryRouter>
+        </ReactRedux.Provider>,
+      ),
+    ).toMatchSnapshot()
+  })
+  it('should run correctly', () => {
+    window.localStorage.setItem('developer-preview-app', JSON.stringify(appDetailDataStub.data))
+    const mockAppId = '9b6fd5f7-2c15-483d-b925-01b650538e52'
+    const mockSetAppDetailPreviewData = jest.fn()
+    const spyLocalStorageGetItem = jest.spyOn(window.localStorage, 'getItem')
+    const fn = loadAppDetailPreviewDataFromLocalStorage(mockAppId, mockSetAppDetailPreviewData, spyDispatch)
+    fn()
+    expect(spyLocalStorageGetItem).toBeCalledWith('developer-preview-app')
+    expect(mockSetAppDetailPreviewData).toBeCalled()
+  })
+})
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/app-detail-preview.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/app-detail-preview.tsx
new file mode 100644
index 0000000000..872d0f07e4
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/app-detail-preview.tsx
@@ -0,0 +1,71 @@
+// The UI of this page should be the same as the Standalone App Detail page in Marketplace portal
+// Make sure to always update the UI in both places if needed
+import * as React from 'react'
+import AppContent from './client/app-content'
+import { Aside as AppAside } from './client/aside'
+import AppHeader from './common/ui-app-header'
+import { useParams } from 'react-router'
+import { AppDetailData } from '@/reducers/developer'
+import { Grid, GridItem, Section, Alert } from '@reapit/elements'
+import { Dispatch } from 'redux'
+import { showNotificationMessage } from '@/actions/notification-message'
+import { useDispatch } from 'react-redux'
+
+export type AppDetailPreviewProps = {}
+
+export const loadAppDetailPreviewDataFromLocalStorage = (
+  appId: string,
+  setAppDetailPreviewData: React.Dispatch<React.SetStateAction<AppDetailPreviewProps | null>>,
+  dispatch: Dispatch,
+) => () => {
+  try {
+    const appDataString = localStorage.getItem('developer-preview-app')
+    if (!appDataString) {
+      throw new Error('No app preview')
+    }
+
+    const appData = JSON.parse(appDataString) as AppDetailData
+    if (appData?.id !== appId) {
+      throw new Error('No app preview')
+    }
+    setAppDetailPreviewData(appData)
+  } catch (err) {
+    dispatch(
+      showNotificationMessage({
+        message: err.message,
+        variant: 'danger',
+      }),
+    )
+  }
+}
+
+const AppDetailPreview: React.FC<AppDetailPreviewProps> = () => {
+  const dispatch = useDispatch()
+  const [appDetailPreviewData, setAppDetailPreviewData] = React.useState<AppDetailPreviewProps | null>(null)
+  const { appId } = useParams()
+
+  React.useEffect(loadAppDetailPreviewDataFromLocalStorage(appId, setAppDetailPreviewData, dispatch), [appId, dispatch])
+
+  return (
+    <Grid dataTest="client-app-detail-container">
+      {!appDetailPreviewData ? (
+        <GridItem>
+          <Alert type="danger" message="There is no preview app" />
+        </GridItem>
+      ) : (
+        <>
+          <GridItem className="is-one-quarter">
+            <AppAside appDetailData={appDetailPreviewData} desktopIntegrationTypes={[]} />
+          </GridItem>
+          <GridItem className="is-three-quarters">
+            <Section isFlex isFlexColumn isFullHeight>
+              <AppHeader appDetailData={appDetailPreviewData} />
+              <AppContent appDetailData={appDetailPreviewData} />
+            </Section>
+          </GridItem>
+        </>
+      )}
+    </Grid>
+  )
+}
+export default AppDetailPreview
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/app-button-group.test.tsx.snap b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/app-button-group.test.tsx.snap
new file mode 100644
index 0000000000..42b648a34c
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/app-button-group.test.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClientAppDetailButtonGroup should match snapshot when both buttons are hidden 1`] = `""`;
+
+exports[`ClientAppDetailButtonGroup should match snapshot when both buttons are showing 1`] = `
+<Component
+  className="ml-0"
+  dataTest="detail-modal-uninstall-button"
+  onClick={[MockFunction]}
+  type="button"
+  variant="primary"
+>
+  Uninstall App
+</Component>
+`;
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/app-content.test.tsx.snap b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/app-content.test.tsx.snap
new file mode 100644
index 0000000000..288783aeb1
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/app-content.test.tsx.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClientAppContent ClientAppContent - should match snapshot 1`] = `
+<Component
+  hasMargin={false}
+  hasPadding={false}
+  isFlex={true}
+  isFlexColumn={true}
+>
+  <Component
+    summary=""
+  />
+  <Component
+    images={Array []}
+    numberImages={2}
+    splitIndex={1}
+  />
+  <Component
+    description=""
+  />
+  <Component
+    images={Array []}
+    numberImages={2}
+    splitIndex={3}
+  />
+  <Component
+    permissions={Array []}
+  />
+</Component>
+`;
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/aside.test.tsx.snap b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/aside.test.tsx.snap
new file mode 100644
index 0000000000..d57896ae40
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/aside.test.tsx.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClientAside ClientAside - should match snapshot 1`] = `
+<Component
+  flexColumn={true}
+  hasBackground={true}
+  hasPadding={true}
+  isFullHeight={true}
+>
+  <Component
+    isSidebar={true}
+  />
+  <Component
+    desktopIntegrationTypes={
+      Array [
+        Object {
+          "description": "Replaces the standard ID check screen",
+          "id": "IdCheck",
+          "name": "Identity Check",
+          "url": "https://foundations-documentation.reapit.cloud/api/desktop-api#id-check",
+        },
+        Object {
+          "description": "Replaces the standard property marketing screen",
+          "id": "PrpMarketing",
+          "name": "Property Marketing Information",
+          "url": "https://foundations-documentation.reapit.cloud/api/desktop-api#property-marketing-information",
+        },
+        Object {
+          "description": "Replaces the vendor marketing report",
+          "id": "VendorMarketing",
+          "name": "Vendor Marketing Report",
+          "url": "https://foundations-documentation.reapit.cloud/api/desktop-api#vendor-marketing-report",
+        },
+        Object {
+          "description": "Replaces the functionality to generate property particulars",
+          "id": "PrintWizard",
+          "name": "Property Details Generation",
+          "url": "https://foundations-documentation.reapit.cloud/api/desktop-api#property-detail-generation",
+        },
+        Object {
+          "description": "Provides ability to export a saved applicant to third party system",
+          "id": "AppExport",
+          "name": "Applicant Export",
+          "url": "https://foundations-documentation.reapit.cloud/api/desktop-api#applicant-export",
+        },
+        Object {
+          "description": "Launchable from the property screen",
+          "id": "Property",
+          "name": "Property",
+          "url": "https://foundations-documentation.reapit.cloud/api/desktop-api#property-1",
+        },
+        Object {
+          "description": "Launchable from the applicant scree",
+          "id": "Applicant",
+          "name": "Applicant",
+          "url": "https://foundations-documentation.reapit.cloud/api/desktop-api#applicant",
+        },
+      ]
+    }
+    isSidebar={true}
+  />
+  <Component
+    isSidebar={true}
+  />
+  <Component
+    contact={
+      Object {
+        "developer": undefined,
+        "homePage": undefined,
+        "supportEmail": undefined,
+        "telephone": undefined,
+      }
+    }
+  />
+</Component>
+`;
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/contact-developer-modal.test.tsx.snap b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/contact-developer-modal.test.tsx.snap
new file mode 100644
index 0000000000..19d08e90b5
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/__snapshots__/contact-developer-modal.test.tsx.snap
@@ -0,0 +1,191 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContactDeveloperSection should match snapshot with gutter 1`] = `
+<Fragment>
+  <Component
+    dataTest="btn-help"
+    fullWidth={true}
+    onClick={[Function]}
+    type="button"
+    variant="primary"
+  >
+    NEED HELP?
+  </Component>
+  <Memo()
+    footer={
+      <Unknown
+        dataTest="btn-close-modal"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+        variant="primary"
+      >
+        Close
+      </Unknown>
+    }
+    onClose={[Function]}
+    title="Contact Details"
+    visible={false}
+  >
+    <Component>
+      <Component>
+        <Component>
+          <Component>
+            Company name
+          </Component>
+        </Component>
+        <Component>
+          <p>
+            Reapit Ltd
+          </p>
+        </Component>
+      </Component>
+      <Component>
+        <Component>
+          <Component>
+            Telephone Number
+          </Component>
+        </Component>
+        <Component>
+          <p>
+            0777 777 777
+          </p>
+        </Component>
+      </Component>
+      <Component>
+        <Component>
+          <Component>
+            Support Email
+          </Component>
+        </Component>
+        <Component>
+          <p>
+            <a
+              className={[Function]}
+              href="mailto:reapit@reapit.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              reapit@reapit.com
+            </a>
+          </p>
+        </Component>
+      </Component>
+      <Component>
+        <Component>
+          <Component>
+            Home Page
+          </Component>
+        </Component>
+        <Component>
+          <p>
+            <a
+              className={[Function]}
+              href="https://reapit.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              https://reapit.com
+            </a>
+          </p>
+        </Component>
+      </Component>
+    </Component>
+  </Memo()>
+</Fragment>
+`;
+
+exports[`ContactDeveloperSection should match snapshot without gutter 1`] = `
+<Fragment>
+  <Component
+    dataTest="btn-help"
+    fullWidth={true}
+    onClick={[Function]}
+    type="button"
+    variant="primary"
+  >
+    NEED HELP?
+  </Component>
+  <Memo()
+    footer={
+      <Unknown
+        dataTest="btn-close-modal"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+        variant="primary"
+      >
+        Close
+      </Unknown>
+    }
+    onClose={[Function]}
+    title="Contact Details"
+    visible={false}
+  >
+    <Component>
+      <Component>
+        <Component>
+          <Component>
+            Company name
+          </Component>
+        </Component>
+        <Component>
+          <p>
+            Reapit Ltd
+          </p>
+        </Component>
+      </Component>
+      <Component>
+        <Component>
+          <Component>
+            Telephone Number
+          </Component>
+        </Component>
+        <Component>
+          <p>
+            0777 777 777
+          </p>
+        </Component>
+      </Component>
+      <Component>
+        <Component>
+          <Component>
+            Support Email
+          </Component>
+        </Component>
+        <Component>
+          <p>
+            <a
+              className={[Function]}
+              href="mailto:reapit@reapit.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              reapit@reapit.com
+            </a>
+          </p>
+        </Component>
+      </Component>
+      <Component>
+        <Component>
+          <Component>
+            Home Page
+          </Component>
+        </Component>
+        <Component>
+          <p>
+            <a
+              className={[Function]}
+              href="https://reapit.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              https://reapit.com
+            </a>
+          </p>
+        </Component>
+      </Component>
+    </Component>
+  </Memo()>
+</Fragment>
+`;
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/app-button-group.test.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/app-button-group.test.tsx
new file mode 100644
index 0000000000..4d6ab6e782
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/app-button-group.test.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { AppDetailButtonGroup } from '../app-detail-button-group'
+import { shallow } from 'enzyme'
+
+describe('ClientAppDetailButtonGroup', () => {
+  it('should match snapshot when both buttons are showing', () => {
+    const wrapper = shallow(
+      <AppDetailButtonGroup
+        installedOn="some-date"
+        onInstallConfirmationModal={jest.fn()}
+        onUninstallConfirmationModal={jest.fn()}
+        isInstallBtnHidden={false}
+      />,
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('should match snapshot when both buttons are hidden', () => {
+    const wrapper = shallow(
+      <AppDetailButtonGroup
+        installedOn=""
+        onInstallConfirmationModal={jest.fn()}
+        onUninstallConfirmationModal={jest.fn()}
+        isInstallBtnHidden={true}
+      />,
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+})
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/app-content.test.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/app-content.test.tsx
new file mode 100644
index 0000000000..4f80c16f99
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/app-content.test.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import AppContent from '../app-content'
+import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
+import { shallow } from 'enzyme'
+import { AppDetailModel } from '@reapit/foundations-ts-definitions'
+
+describe('ClientAppContent', () => {
+  it('ClientAppContent - should match snapshot', () => {
+    const wrapper = shallow(<AppContent appDetailData={appDetailDataStub as AppDetailModel} />)
+    expect(wrapper).toMatchSnapshot()
+  })
+})
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/aside.test.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/aside.test.tsx
new file mode 100644
index 0000000000..21d4cc0e7c
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/aside.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Aside } from '../aside'
+import { shallow } from 'enzyme'
+import { integrationTypesStub } from '@/sagas/__stubs__/integration-types'
+import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
+import { DesktopIntegrationTypeModel } from '@/actions/app-integration-types'
+import { AppDetailModel } from '@reapit/foundations-ts-definitions'
+
+describe('ClientAside', () => {
+  test('ClientAside - should match snapshot', () => {
+    expect(
+      shallow(
+        <Aside
+          appDetailData={appDetailDataStub as AppDetailModel}
+          desktopIntegrationTypes={integrationTypesStub.data as DesktopIntegrationTypeModel[]}
+        />,
+      ),
+    ).toMatchSnapshot()
+  })
+})
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/contact-developer-modal.test.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/contact-developer-modal.test.tsx
new file mode 100644
index 0000000000..b454300fa3
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/client/__tests__/contact-developer-modal.test.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import {
+  ContactDeveloperSection,
+  ContactDeveloperSectionType,
+  openContactModal,
+  closeContactModal,
+} from '../contact-developer-modal'
+import { shallow } from 'enzyme'
+
+const props: ContactDeveloperSectionType = {
+  contact: {
+    developer: 'Reapit Ltd',
+    telephone: '0777 777 777',
+    supportEmail: 'reapit@reapit.com',
+    homePage: 'https://reapit.com',
+  },
+}
+
+describe('ContactDeveloperSection', () => {
+  test('should match snapshot without gutter', () => {
+    expect(shallow(<ContactDeveloperSection {...props} hasGutter={false} />)).toMatchSnapshot()
+  })
+
+  test('should match snapshot with gutter', () => {
+    expect(shallow(<ContactDeveloperSection {...props} hasGutter />)).toMatchSnapshot()
+  })
+
+  test('handle openContactModal', () => {
+    const setVisible = jest.fn()
+    openContactModal(setVisible)()
+    expect(setVisible).toBeCalled()
+    expect(setVisible).toBeCalledWith(true)
+  })
+
+  test('handle closeContactModal', () => {
+    const setVisible = jest.fn()
+    closeContactModal(setVisible)()
+    expect(setVisible).toBeCalled()
+    expect(setVisible).toBeCalledWith(false)
+  })
+})
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/client/app-content.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/client/app-content.tsx
new file mode 100644
index 0000000000..755c984681
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/client/app-content.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { Section } from '@reapit/elements'
+import { SummarySection, AdditionalImagesSection, PermissionsSection, DescriptionSection } from '../common/ui-sections'
+import { AppDetailData } from '@/reducers/developer'
+
+export type AppContentProps = {
+  appDetailData: AppDetailData
+}
+
+const AppContent: React.FC<AppContentProps> = ({ appDetailData }) => {
+  const { summary = '', description = '', scopes = [], media = [] } = appDetailData || {}
+  return (
+    <Section isFlex isFlexColumn hasPadding={false} hasMargin={false}>
+      <SummarySection summary={summary} />
+      <AdditionalImagesSection images={media} splitIndex={1} numberImages={2} />
+      <DescriptionSection description={description} />
+      <AdditionalImagesSection images={media} splitIndex={3} numberImages={2} />
+      <PermissionsSection permissions={scopes} />
+    </Section>
+  )
+}
+
+export default AppContent
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/client/app-detail-button-group.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/client/app-detail-button-group.tsx
new file mode 100644
index 0000000000..2cb9aae24a
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/client/app-detail-button-group.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { Button } from '@reapit/elements'
+
+interface AppDetailButtonGroupProps {
+  installedOn: string
+  onInstallConfirmationModal: () => void
+  onUninstallConfirmationModal: () => void
+  isInstallBtnHidden: boolean
+}
+
+export const AppDetailButtonGroup: React.FC<AppDetailButtonGroupProps> = ({
+  installedOn,
+  onInstallConfirmationModal,
+  onUninstallConfirmationModal,
+  isInstallBtnHidden,
+}) => {
+  if (installedOn) {
+    return (
+      <Button
+        onClick={onUninstallConfirmationModal}
+        dataTest="detail-modal-uninstall-button"
+        type="button"
+        variant="primary"
+        className="ml-0"
+      >
+        Uninstall App
+      </Button>
+    )
+  }
+
+  if (isInstallBtnHidden) {
+    return null
+  }
+
+  return (
+    <Button
+      dataTest="detail-modal-install-button"
+      type="button"
+      variant="primary"
+      className="ml-0"
+      onClick={onInstallConfirmationModal}
+    >
+      Install App
+    </Button>
+  )
+}
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/client/aside.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/client/aside.tsx
new file mode 100644
index 0000000000..9597cd16ff
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/client/aside.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { DesktopIntegrationTypeModel, AppDetailModel } from '@reapit/foundations-ts-definitions'
+import { FlexContainerBasic } from '@reapit/elements'
+import { ContactDeveloperSection } from './contact-developer-modal'
+import useReactResponsive from '@/components/hooks/use-react-responsive'
+import { History } from 'history'
+import routes from '@/constants/routes'
+import {
+  DeveloperSection,
+  CategorySection,
+  DesktopIntegrationSection,
+  DirectApiSection,
+  BackToAppsSection,
+} from '../common/ui-sections'
+import { useHistory } from 'react-router'
+
+interface AsideProps {
+  appDetailData: AppDetailModel
+  desktopIntegrationTypes: DesktopIntegrationTypeModel[]
+}
+
+export const onBackToAppsButtonClick = (history: History) => {
+  return () => {
+    history.push(routes.APPS)
+  }
+}
+
+export const Aside: React.FC<AsideProps> = ({ desktopIntegrationTypes, appDetailData }) => {
+  const { category, developer, telephone, supportEmail, homePage, isDirectApi } = appDetailData
+  const { isMobile } = useReactResponsive()
+  const history = useHistory()
+
+  return (
+    <FlexContainerBasic flexColumn hasPadding hasBackground isFullHeight={!isMobile}>
+      {developer && <DeveloperSection developer={developer} isSidebar />}
+      <CategorySection category={category} isSidebar />
+      <DesktopIntegrationSection desktopIntegrationTypes={desktopIntegrationTypes} isSidebar />
+      <DirectApiSection isDirectApi={isDirectApi} isSidebar />
+      <ContactDeveloperSection
+        contact={{
+          developer,
+          telephone,
+          supportEmail,
+          homePage,
+        }}
+      />
+      {isMobile && <BackToAppsSection onClick={onBackToAppsButtonClick(history)} />}
+    </FlexContainerBasic>
+  )
+}
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/client/contact-developer-modal.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/client/contact-developer-modal.tsx
new file mode 100644
index 0000000000..829eefda12
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/client/contact-developer-modal.tsx
@@ -0,0 +1,100 @@
+import React from 'react'
+import { Button, Grid, GridItem, SubTitleH6, Content, ModalV2 } from '@reapit/elements'
+import linkStyles from '@/styles/elements/link.scss?mod'
+
+export type ContactDeveloperSectionType = {
+  contact: {
+    developer?: string
+    telephone?: string
+    supportEmail?: string
+    homePage?: string
+  }
+  hasGutter?: boolean
+}
+
+export const openContactModal = (setVisible: React.Dispatch<React.SetStateAction<boolean>>) => () => {
+  setVisible(true)
+}
+
+export const closeContactModal = (setVisible: React.Dispatch<React.SetStateAction<boolean>>) => () => {
+  setVisible(false)
+}
+
+export const ContactDeveloperSection = ({
+  contact: { developer, telephone, supportEmail, homePage },
+}: ContactDeveloperSectionType) => {
+  const [visible, setVisible] = React.useState<boolean>(false)
+
+  return (
+    <>
+      <Button dataTest="btn-help" onClick={openContactModal(setVisible)} type="button" variant="primary" fullWidth>
+        NEED HELP?
+      </Button>
+
+      <ModalV2
+        visible={visible}
+        title={'Contact Details'}
+        onClose={closeContactModal(setVisible)}
+        footer={
+          <Button
+            dataTest="btn-close-modal"
+            disabled={false}
+            type="button"
+            variant="primary"
+            onClick={closeContactModal(setVisible)}
+          >
+            Close
+          </Button>
+        }
+      >
+        <Content>
+          <Grid>
+            <GridItem>
+              <SubTitleH6>Company name</SubTitleH6>
+            </GridItem>
+            <GridItem>
+              <p>{developer}</p>
+            </GridItem>
+          </Grid>
+          <Grid>
+            <GridItem>
+              <SubTitleH6>Telephone Number</SubTitleH6>
+            </GridItem>
+            <GridItem>
+              <p>{telephone}</p>
+            </GridItem>
+          </Grid>
+          <Grid>
+            <GridItem>
+              <SubTitleH6>Support Email</SubTitleH6>
+            </GridItem>
+            <GridItem>
+              <p>
+                <a
+                  className={linkStyles.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href={`mailto:${supportEmail}`}
+                >
+                  {supportEmail}
+                </a>
+              </p>
+            </GridItem>
+          </Grid>
+          <Grid>
+            <GridItem>
+              <SubTitleH6>Home Page</SubTitleH6>
+            </GridItem>
+            <GridItem>
+              <p>
+                <a className={linkStyles.link} href={homePage} target="_blank" rel="noopener noreferrer">
+                  {homePage}
+                </a>
+              </p>
+            </GridItem>
+          </Grid>
+        </Content>
+      </ModalV2>
+    </>
+  )
+}
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/__snapshots__/ui-app-header.test.tsx.snap b/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/__snapshots__/ui-app-header.test.tsx.snap
new file mode 100644
index 0000000000..53470f105f
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/__snapshots__/ui-app-header.test.tsx.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppHeader should match a snapshot 1`] = `
+<Component
+  className=""
+>
+  <Component>
+    <div>
+      <div>
+        <img
+          alt="Peter's Properties"
+          className="image is-96x96"
+          src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/7d88729f-2366-4561-9d5c-282615f3946b.jpeg"
+        />
+      </div>
+      <div>
+        <Component
+          className="text-ellipsis-9"
+        >
+          Peter's Properties
+        </Component>
+        <Component>
+          Verified by Reapit 
+          <FaCheck />
+        </Component>
+      </div>
+    </div>
+  </Component>
+  <Component
+    className="flex items-center"
+  >
+    <img
+      alt="Featured Image"
+      src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/c4a36706-aa44-47f9-9fb6-9053eef4e581.png"
+    />
+  </Component>
+</Component>
+`;
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/__snapshots__/ui-helpers.test.tsx.snap b/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/__snapshots__/ui-helpers.test.tsx.snap
new file mode 100644
index 0000000000..63ca3cfe79
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/__snapshots__/ui-helpers.test.tsx.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ui Sections <AppDetailSection /> should match snapshot 1`] = `
+<Component
+  dataTest="some-test-id"
+>
+  <Component
+    className="mb-2"
+  >
+    test
+  </Component>
+  some text
+</Component>
+`;
+
+exports[`Ui Sections <ImageSection /> should match snapshot for has image 1`] = `
+<Component
+  className="flex justify-center items-center"
+>
+  <img
+    alt="some image"
+    src="https://image.com"
+  />
+</Component>
+`;
+
+exports[`Ui Sections <ImageSection /> should match snapshot for no images 1`] = `""`;
+
+exports[`Ui Sections <Tag /> should match snapshot 1`] = `
+<div>
+  Test
+</div>
+`;
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/__snapshots__/ui-sections.test.tsx.snap b/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/__snapshots__/ui-sections.test.tsx.snap
new file mode 100644
index 0000000000..84daec0213
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/__snapshots__/ui-sections.test.tsx.snap
@@ -0,0 +1,431 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AdditionalImagesSection should match a snapshot where has images 1`] = `
+<Component
+  className="is-desktop flex-col-min-height"
+  isMultiLine={true}
+>
+  <Component
+    className="is-half-desktop"
+    key="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/c4a36706-aa44-47f9-9fb6-9053eef4e581.png"
+  >
+    <Component
+      uri="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/c4a36706-aa44-47f9-9fb6-9053eef4e581.png"
+    />
+  </Component>
+  <Component
+    className="is-half-desktop"
+    key="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/65bd3b97-e78c-41cd-b75f-e06e1d2f00df.png"
+  >
+    <Component
+      uri="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/65bd3b97-e78c-41cd-b75f-e06e1d2f00df.png"
+    />
+  </Component>
+</Component>
+`;
+
+exports[`AdditionalImagesSection should match a snapshot where has no images 1`] = `""`;
+
+exports[`AuthenticationSection should match a snapshot where authFlow is CLIENT_SECRET and not sidebar 1`] = `
+<Component
+  headerText="Authentication"
+  isSidebar={false}
+>
+  <div
+    className=""
+    data-test="authentication-client-id"
+  >
+    <b
+      className="mr-2"
+    >
+      Client ID:
+    </b>
+    SOME_ID
+  </div>
+</Component>
+`;
+
+exports[`AuthenticationSection should match a snapshot where authFlow is USER_SESSION sidebar 1`] = `
+<Component
+  headerText="Authentication"
+  isSidebar={true}
+>
+  <div
+    className=""
+    data-test="authentication-client-id"
+  >
+    <b
+      className="mr-2"
+    >
+      Client ID:
+    </b>
+    SOME_ID
+  </div>
+</Component>
+`;
+
+exports[`BackToAppsSection should match a snapshot 1`] = `
+<Component
+  className="pt-4 bt mt-4 flex"
+>
+  <Component
+    onClick={[MockFunction]}
+  >
+    Back To Apps
+  </Component>
+</Component>
+`;
+
+exports[`CategorySection should match a snapshot where category is defined and is sidebar 1`] = `
+<Component
+  headerText="Category"
+  isSidebar={true}
+>
+  <p>
+    None
+  </p>
+</Component>
+`;
+
+exports[`CategorySection should match a snapshot where category undefined and not sidebar 1`] = `
+<Component
+  headerText="Category"
+  isSidebar={false}
+>
+  <p>
+    None
+  </p>
+</Component>
+`;
+
+exports[`DescriptionSection should match a snapshot 1`] = `
+<Component
+  html="Lorem ipsum"
+/>
+`;
+
+exports[`DesktopIntegrationSection should match a snapshot where desktopIntegrationTypes empty and not sidebar 1`] = `
+<Component
+  headerText="Desktop Integration"
+  isSidebar={false}
+>
+  <p>
+    None
+  </p>
+</Component>
+`;
+
+exports[`DesktopIntegrationSection should match a snapshot where desktopIntegrationTypes hasLength and is sidebar 1`] = `
+<Component
+  headerText="Desktop Integration"
+  isSidebar={true}
+>
+  <Component
+    key="Identity Check"
+  >
+    Identity Check
+  </Component>
+  <Component
+    key="Property Marketing Information"
+  >
+    Property Marketing Information
+  </Component>
+  <Component
+    key="Vendor Marketing Report"
+  >
+    Vendor Marketing Report
+  </Component>
+  <Component
+    key="Property Details Generation"
+  >
+    Property Details Generation
+  </Component>
+  <Component
+    key="Applicant Export"
+  >
+    Applicant Export
+  </Component>
+  <Component
+    key="Property"
+  >
+    Property
+  </Component>
+  <Component
+    key="Applicant"
+  >
+    Applicant
+  </Component>
+</Component>
+`;
+
+exports[`DeveloperAboutSection should match a snapshot 1`] = `
+<Component
+  headerText="About Developer"
+  isSidebar={true}
+/>
+`;
+
+exports[`DeveloperSection should match a snapshot 1`] = `
+<Component
+  headerText="Developer"
+  isSidebar={true}
+>
+  Developer Name
+</Component>
+`;
+
+exports[`DirectApiSection should match a snapshot where isDirectApi false and not sidebar 1`] = `
+<Component
+  headerText="Direct API"
+  isSidebar={false}
+>
+  No
+</Component>
+`;
+
+exports[`DirectApiSection should match a snapshot where isDirectApi true and is sidebar 1`] = `
+<Component
+  headerText="Direct API"
+  isSidebar={true}
+>
+  Yes
+</Component>
+`;
+
+exports[`InstallationsTableSection should not render a table when has no data 1`] = `
+<Component
+  columns={Array []}
+  data={Array []}
+>
+  <Component
+    dataTest="render-installations-table-empty-text"
+    headerText="Installations"
+    isSidebar={false}
+  >
+    <Component
+      dataTest="render-installations-table-empty-text"
+    >
+      <div
+        className=""
+        data-test="render-installations-table-empty-text"
+      >
+        <Component
+          className=""
+        >
+          <h5
+            className=""
+            id=""
+          >
+            Installations
+          </h5>
+        </Component>
+        <p>
+          Currently, there are no installations for your app
+        </p>
+      </div>
+    </Component>
+  </Component>
+</Component>
+`;
+
+exports[`InstallationsTableSection should render a table and match a snapshot when has data 1`] = `
+<Component
+  columns={Array []}
+  data={
+    Array [
+      Object {
+        "appId": "062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+        "client": "DXX",
+        "created": "2019-12-03T05:33:20",
+        "id": "b3c2f644-3241-4298-b320-b0398ff492f9",
+        "links": Array [
+          Object {
+            "action": "GET",
+            "href": "http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9",
+            "rel": "self",
+          },
+          Object {
+            "action": "GET",
+            "href": "http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+            "rel": "app",
+          },
+        ],
+        "status": "Active",
+      },
+    ]
+  }
+>
+  <Component
+    dataTest="render-installations-table"
+    headerText="Installations"
+    isSidebar={false}
+  >
+    <Component
+      dataTest="render-installations-table"
+    >
+      <div
+        className=""
+        data-test="render-installations-table"
+      >
+        <Component
+          className=""
+        >
+          <h5
+            className=""
+            id=""
+          >
+            Installations
+          </h5>
+        </Component>
+        <Component
+          columns={Array []}
+          data={
+            Array [
+              Object {
+                "appId": "062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+                "client": "DXX",
+                "created": "2019-12-03T05:33:20",
+                "id": "b3c2f644-3241-4298-b320-b0398ff492f9",
+                "links": Array [
+                  Object {
+                    "action": "GET",
+                    "href": "http://dev.platformmarketplace.reapit.net/installations/b3c2f644-3241-4298-b320-b0398ff492f9",
+                    "rel": "self",
+                  },
+                  Object {
+                    "action": "GET",
+                    "href": "http://dev.platformmarketplace.reapit.net/apps/062a376c-f5a3-46a0-a64b-e4bc6e5af2c1",
+                    "rel": "app",
+                  },
+                ],
+                "status": "Active",
+              },
+            ]
+          }
+          loading={false}
+          scrollable={true}
+        >
+          <div
+            style={
+              Object {
+                "maxHeight": undefined,
+                "overflow": "scroll",
+              }
+            }
+          >
+            <table
+              className="table is-striped is-fullwidth "
+              role="table"
+            >
+              <thead />
+              <tbody />
+            </table>
+          </div>
+        </Component>
+      </div>
+    </Component>
+  </Component>
+</Component>
+`;
+
+exports[`ListingPreviewSection should match a snapshot 1`] = `
+<Component
+  headerText={
+    <React.Fragment>
+      <span
+        className="mr-2"
+      >
+        See listing preview
+      </span>
+       
+      <a
+        href="#"
+        onClick={[Function]}
+      >
+        <FaExternalLinkAlt />
+      </a>
+    </React.Fragment>
+  }
+  isSidebar={true}
+>
+  <p>
+    The listing preview will display your app as it would appear in the Marketplace
+  </p>
+</Component>
+`;
+
+exports[`PermissionsSection should match a snapshot where has no permissions 1`] = `
+<Component
+  headerText="Permissions required"
+>
+  <Component />
+</Component>
+`;
+
+exports[`PermissionsSection should match a snapshot where has permissions 1`] = `
+<Component
+  headerText="Permissions required"
+>
+  <Component>
+    <Component
+      key="Marketplace/developers.read"
+    >
+      Read data about developers
+    </Component>
+    <Component
+      key="Marketplace/developers.write"
+    >
+      Write data about developers
+    </Component>
+  </Component>
+</Component>
+`;
+
+exports[`PrivateAppSection should match a snapshot where limitToClientIds empty and not sidebar 1`] = `
+<Component
+  headerText="Private App"
+  isSidebar={false}
+>
+  No
+</Component>
+`;
+
+exports[`PrivateAppSection should match a snapshot where limitToClientIds hasLength and is sidebar 1`] = `
+<Component
+  headerText="Private App"
+  isSidebar={true}
+>
+  Yes
+</Component>
+`;
+
+exports[`StatusSection should match a snapshot where isListed false and not sidebar 1`] = `
+<Component
+  headerText="Status"
+  isSidebar={false}
+>
+  <div>
+    Not listed
+  </div>
+</Component>
+`;
+
+exports[`StatusSection should match a snapshot where isListed true and is sidebar 1`] = `
+<Component
+  headerText="Status"
+  isSidebar={true}
+>
+  <div>
+    Listed 
+    <FaCheck />
+  </div>
+</Component>
+`;
+
+exports[`SummarySection should match a snapshot 1`] = `
+<Component
+  className="is-italic"
+>
+  Lorem ipsum
+</Component>
+`;
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/ui-app-header.test.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/ui-app-header.test.tsx
new file mode 100644
index 0000000000..2312ad09c9
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/ui-app-header.test.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
+import AppHeader, { AppHeaderProps } from '../ui-app-header'
+
+const mockProps: AppHeaderProps = {
+  appDetailData: {
+    ...appDetailDataStub.data,
+    apiKey: '',
+  },
+}
+
+describe('AppHeader', () => {
+  it('should match a snapshot', () => {
+    expect(shallow(<AppHeader {...mockProps} />)).toMatchSnapshot()
+  })
+})
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/ui-helpers.test.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/ui-helpers.test.tsx
new file mode 100644
index 0000000000..4cdbb85a32
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/ui-helpers.test.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { Tag, AppDetailSection, ImageSection } from '../ui-helpers'
+import { shallow } from 'enzyme'
+
+describe('Ui Sections', () => {
+  test('<AppDetailSection /> should match snapshot', () => {
+    const wrapper = shallow(
+      <AppDetailSection headerText="test" isSidebar dataTest="some-test-id">
+        some text
+      </AppDetailSection>,
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  test('<Tag /> should match snapshot', () => {
+    const wrapper = shallow(<Tag>Test</Tag>)
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  test('<ImageSection /> should match snapshot for no images', () => {
+    const wrapper = shallow(<ImageSection>Test</ImageSection>)
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  test('<ImageSection /> should match snapshot for has image', () => {
+    const wrapper = shallow(
+      <ImageSection uri="https://image.com" alt="some image">
+        Test
+      </ImageSection>,
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+})
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/ui-sections.test.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/ui-sections.test.tsx
new file mode 100644
index 0000000000..ddf84e6a48
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/common/__tests__/ui-sections.test.tsx
@@ -0,0 +1,200 @@
+import * as React from 'react'
+import { shallow, mount } from 'enzyme'
+import {
+  CategorySection,
+  DesktopIntegrationSection,
+  PrivateAppSection,
+  DirectApiSection,
+  StatusSection,
+  BackToAppsSection,
+  ListingPreviewSection,
+  AuthenticationSection,
+  SummarySection,
+  DeveloperSection,
+  DeveloperAboutSection,
+  AdditionalImagesSection,
+} from '../ui-sections'
+import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
+import { integrationTypesStub } from '@/sagas/__stubs__/integration-types'
+import {
+  DesktopIntegrationTypeModel,
+  InstallationModel,
+  MediaModel,
+  ScopeModel,
+} from '@reapit/foundations-ts-definitions'
+import { Button } from '@reapit/elements'
+import { InstallationsTableSection, PermissionsSection, DescriptionSection } from '../ui-sections'
+import { installationsStub } from '@/sagas/__stubs__/installations'
+
+describe('CategorySection', () => {
+  it('should match a snapshot where category undefined and not sidebar', () => {
+    expect(shallow(<CategorySection category={undefined} />)).toMatchSnapshot()
+  })
+
+  it('should match a snapshot where category is defined and is sidebar', () => {
+    expect(shallow(<CategorySection category={appDetailDataStub.data.category} isSidebar />)).toMatchSnapshot()
+  })
+})
+
+describe('DesktopIntegrationSection', () => {
+  it('should match a snapshot where desktopIntegrationTypes empty and not sidebar', () => {
+    expect(shallow(<DesktopIntegrationSection desktopIntegrationTypes={[]} />)).toMatchSnapshot()
+  })
+
+  it('should match a snapshot where desktopIntegrationTypes hasLength and is sidebar', () => {
+    expect(
+      shallow(
+        <DesktopIntegrationSection
+          desktopIntegrationTypes={integrationTypesStub.data as DesktopIntegrationTypeModel[]}
+          isSidebar
+        />,
+      ),
+    ).toMatchSnapshot()
+  })
+})
+
+describe('PrivateAppSection', () => {
+  it('should match a snapshot where limitToClientIds empty and not sidebar', () => {
+    expect(shallow(<PrivateAppSection limitToClientIds={[]} />)).toMatchSnapshot()
+  })
+
+  it('should match a snapshot where limitToClientIds hasLength and is sidebar', () => {
+    expect(shallow(<PrivateAppSection limitToClientIds={['ID_ONE', 'ID_TWO']} isSidebar />)).toMatchSnapshot()
+  })
+})
+
+describe('DirectApiSection', () => {
+  it('should match a snapshot where isDirectApi false and not sidebar', () => {
+    expect(shallow(<DirectApiSection isDirectApi={false} />)).toMatchSnapshot()
+  })
+
+  it('should match a snapshot where isDirectApi true and is sidebar', () => {
+    expect(shallow(<DirectApiSection isDirectApi isSidebar />)).toMatchSnapshot()
+  })
+})
+
+describe('StatusSection', () => {
+  it('should match a snapshot where isListed false and not sidebar', () => {
+    expect(shallow(<StatusSection isListed={false} />)).toMatchSnapshot()
+  })
+
+  it('should match a snapshot where isListed true and is sidebar', () => {
+    expect(shallow(<StatusSection isListed isSidebar />)).toMatchSnapshot()
+  })
+})
+
+describe('BackToAppsSection', () => {
+  it('should match a snapshot', () => {
+    expect(shallow(<BackToAppsSection onClick={jest.fn()} />)).toMatchSnapshot()
+  })
+
+  it('should respond to a button click', () => {
+    const onClick = jest.fn()
+    const button = shallow(<BackToAppsSection onClick={onClick} />)
+      .find(Button)
+      .first()
+
+    button.simulate('click')
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('ListingPreviewSection', () => {
+  it('should match a snapshot', () => {
+    expect(shallow(<ListingPreviewSection onClick={jest.fn()} isSidebar />)).toMatchSnapshot()
+  })
+
+  it('should respond to a link click', () => {
+    const onClick = jest.fn()
+    const link = mount(<ListingPreviewSection onClick={onClick} />)
+      .find('a')
+      .first()
+
+    link.simulate('click')
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe('AuthenticationSection', () => {
+  it('should match a snapshot where authFlow is CLIENT_SECRET and not sidebar', () => {
+    expect(
+      shallow(<AuthenticationSection authFlow="CLIENT_SECRET" id="SOME_ID" externalId="SOME_ID" />),
+    ).toMatchSnapshot()
+  })
+
+  it('should match a snapshot where authFlow is USER_SESSION sidebar', () => {
+    expect(
+      shallow(<AuthenticationSection authFlow="USER_SESSION" id="SOME_ID" externalId="SOME_ID" isSidebar />),
+    ).toMatchSnapshot()
+  })
+})
+
+describe('SummarySection', () => {
+  it('should match a snapshot', () => {
+    expect(shallow(<SummarySection summary="Lorem ipsum" />)).toMatchSnapshot()
+  })
+})
+
+describe('InstallationsTableSection', () => {
+  it('should render a table and match a snapshot when has data', () => {
+    const wrapper = mount(
+      <InstallationsTableSection data={installationsStub.data as InstallationModel[]} columns={[]} />,
+    )
+    expect(wrapper.find('[data-test="render-installations-table"]').length).toBe(1)
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it('should not render a table when has no data', () => {
+    const wrapper = mount(<InstallationsTableSection data={[]} columns={[]} />)
+    expect(wrapper.find('[data-test="render-installations-table-empty-text"]').length).toBe(1)
+    expect(wrapper).toMatchSnapshot()
+  })
+})
+
+describe('DeveloperSection', () => {
+  it('should match a snapshot', () => {
+    expect(shallow(<DeveloperSection developer="Developer Name" isSidebar />)).toMatchSnapshot()
+  })
+})
+
+describe('DeveloperAboutSection', () => {
+  it('should match a snapshot', () => {
+    expect(shallow(<DeveloperAboutSection isSidebar />)).toMatchSnapshot()
+  })
+})
+
+describe('AdditionalImagesSection', () => {
+  it('should match a snapshot where has images', () => {
+    expect(
+      shallow(
+        <AdditionalImagesSection
+          images={appDetailDataStub.data.media as MediaModel[]}
+          splitIndex={0}
+          numberImages={2}
+        />,
+      ),
+    ).toMatchSnapshot()
+  })
+
+  it('should match a snapshot where has no images', () => {
+    expect(shallow(<AdditionalImagesSection images={[]} splitIndex={0} numberImages={2} />)).toMatchSnapshot()
+  })
+})
+
+describe('PermissionsSection', () => {
+  it('should match a snapshot where has permissions', () => {
+    expect(
+      shallow(<PermissionsSection permissions={appDetailDataStub.data.scopes as ScopeModel[]} />),
+    ).toMatchSnapshot()
+  })
+
+  it('should match a snapshot where has no permissions', () => {
+    expect(shallow(<PermissionsSection permissions={[]} />)).toMatchSnapshot()
+  })
+})
+
+describe('DescriptionSection', () => {
+  it('should match a snapshot', () => {
+    expect(shallow(<DescriptionSection description="Lorem ipsum" />)).toMatchSnapshot()
+  })
+})
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/common/ui-app-header.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/common/ui-app-header.tsx
new file mode 100644
index 0000000000..9a6b02e8ae
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/common/ui-app-header.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { H3, Grid, GridItem, SubTitleH6 } from '@reapit/elements'
+import { FaCheck } from 'react-icons/fa'
+import { AppDetailModel } from '@reapit/foundations-ts-definitions'
+import styles from '@/styles/blocks/standalone-app-detail.scss?mod'
+import { MEDIA_INDEX } from '@/constants/media'
+import ImagePlaceHolder from '@/assets/images/default-app-icon.jpg'
+import featureImagePlaceHolder from '@/assets/images/default-feature-image.jpg'
+import { cx } from 'linaria'
+
+export type AppHeaderProps = {
+  appDetailData: AppDetailModel & {
+    apiKey?: string | undefined
+  }
+  buttonGroup?: React.ReactNode
+}
+
+const AppHeader: React.FC<AppHeaderProps> = ({ appDetailData, buttonGroup }) => {
+  const { media } = appDetailData
+  const appIcon = media?.filter(({ type }) => type === 'icon')[MEDIA_INDEX.ICON]
+  const featureImageSrc = appDetailData?.media?.[MEDIA_INDEX.FEATURE_IMAGE]?.uri
+  const { containerOuterHeader, headerContent, containerHeader, check, appIconContainer } = styles
+
+  return (
+    <Grid className={cx('flex', 'items-center', 'mb-4', containerOuterHeader, 'flex-col-min-height')}>
+      <GridItem>
+        <div className={containerHeader}>
+          <div className={appIconContainer}>
+            <img className="image is-96x96" src={appIcon?.uri || ImagePlaceHolder} alt={appDetailData.name} />
+          </div>
+          <div className={headerContent}>
+            <H3 className="text-ellipsis-9">{appDetailData.name || ''}</H3>
+            <SubTitleH6>
+              Verified by Reapit <FaCheck className={check} />
+            </SubTitleH6>
+
+            {buttonGroup && buttonGroup}
+          </div>
+        </div>
+      </GridItem>
+      <GridItem className="flex items-center">
+        <img src={featureImageSrc || featureImagePlaceHolder} alt="Featured Image" />
+      </GridItem>
+    </Grid>
+  )
+}
+
+export default AppHeader
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/common/ui-helpers.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/common/ui-helpers.tsx
new file mode 100644
index 0000000000..ba299f4bcd
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/common/ui-helpers.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import styles from '@/styles/blocks/standalone-app-detail.scss?mod'
+
+import { H5, Content } from '@reapit/elements'
+
+interface AppDetailSectionProps {
+  headerText: string | React.ReactNode
+  dataTest?: string
+  isSidebar?: boolean
+}
+
+interface ImageSectionProps {
+  uri?: string
+  alt?: string
+}
+
+export const AppDetailSection: React.FC<AppDetailSectionProps> = ({
+  headerText,
+  children,
+  dataTest = '',
+  isSidebar = false,
+}) => (
+  <Content dataTest={dataTest}>
+    <H5 className={isSidebar ? 'mb-2' : ''}>{headerText}</H5>
+    {children}
+  </Content>
+)
+
+export const Tag: React.FC = ({ children }) => <div className={styles.tag}>{children}</div>
+
+export const ImageSection: React.FC<ImageSectionProps> = ({ uri, alt = '' }) => {
+  return uri ? (
+    <Content className="flex justify-center items-center">
+      <img src={uri} alt={alt} />
+    </Content>
+  ) : null
+}
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/common/ui-sections.tsx b/packages/developer-portal/src/components/pages/app-detail-preview/common/ui-sections.tsx
new file mode 100644
index 0000000000..f44d07d923
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/common/ui-sections.tsx
@@ -0,0 +1,247 @@
+import * as React from 'react'
+import {
+  CategoryModel,
+  DesktopIntegrationTypeModel,
+  InstallationModel,
+  MediaModel,
+  ScopeModel,
+} from '@reapit/foundations-ts-definitions'
+import { AppDetailSection, Tag, ImageSection } from './ui-helpers'
+import { convertBooleanToYesNoString } from '@/utils/boolean-to-yes-no-string'
+import { FaCheck, FaExternalLinkAlt } from 'react-icons/fa'
+import styles from '@/styles/blocks/standalone-app-detail.scss?mod'
+import {
+  LevelRight,
+  Button,
+  Table,
+  Grid,
+  GridItem,
+  GridFourCol,
+  GridFourColItem,
+  HTMLRender,
+  Content,
+} from '@reapit/elements'
+import AuthFlow from '@/constants/app-auth-flow'
+import AppAuthenticationDetail from '../../app-detail/app-authentication-detail'
+
+interface IsSidebar {
+  isSidebar?: boolean
+}
+
+interface CategorySectionProps extends IsSidebar {
+  category: CategoryModel | undefined
+}
+
+interface DesktopIntegrationSectionProps extends IsSidebar {
+  desktopIntegrationTypes: DesktopIntegrationTypeModel[]
+}
+
+interface PrivateAppSectionProps extends IsSidebar {
+  limitToClientIds: string[]
+}
+
+interface DirectApiSectionProps extends IsSidebar {
+  isDirectApi: boolean | undefined
+}
+
+interface StatusSectionProps extends IsSidebar {
+  isListed: boolean | undefined
+}
+
+interface BackToAppsSectionProps {
+  onClick: () => void
+}
+
+interface ListingPreviewSectionProps extends IsSidebar {
+  onClick: () => void
+}
+
+interface AuthenticationSectionProps extends IsSidebar {
+  authFlow: string
+  id: string
+  externalId: string
+}
+
+interface SummarySectionProps {
+  summary: string
+}
+
+interface InstallationsTableSectionProps extends IsSidebar {
+  data: InstallationModel[]
+  columns: any[]
+}
+
+interface DeveloperSectionProps extends IsSidebar {
+  developer: string
+}
+
+interface AdditionalImagesSectionProps {
+  images: MediaModel[]
+  splitIndex: number
+  numberImages: number
+}
+
+interface PermissionSectionProps {
+  permissions: ScopeModel[]
+}
+
+interface DescriptionSectionProps {
+  description: string
+}
+
+export const CategorySection: React.FC<CategorySectionProps> = ({ category, isSidebar = false }) => (
+  <AppDetailSection headerText="Category" isSidebar={isSidebar}>
+    {category ? <Tag>{category.name}</Tag> : <p>None</p>}
+  </AppDetailSection>
+)
+
+export const DesktopIntegrationSection: React.FC<DesktopIntegrationSectionProps> = ({
+  desktopIntegrationTypes,
+  isSidebar = false,
+}) => (
+  <AppDetailSection headerText="Desktop Integration" isSidebar={isSidebar}>
+    {desktopIntegrationTypes.length ? (
+      desktopIntegrationTypes.map(({ name }) => <Tag key={name}>{name}</Tag>)
+    ) : (
+      <p>None</p>
+    )}
+  </AppDetailSection>
+)
+
+export const PrivateAppSection: React.FC<PrivateAppSectionProps> = ({ limitToClientIds, isSidebar = false }) => (
+  <AppDetailSection headerText="Private App" isSidebar={isSidebar}>
+    {convertBooleanToYesNoString(Boolean(limitToClientIds.length > 0))}
+  </AppDetailSection>
+)
+
+export const DirectApiSection: React.FC<DirectApiSectionProps> = ({ isDirectApi, isSidebar = false }) => (
+  <AppDetailSection headerText="Direct API" isSidebar={isSidebar}>
+    {convertBooleanToYesNoString(Boolean(isDirectApi))}
+  </AppDetailSection>
+)
+
+export const StatusSection: React.FC<StatusSectionProps> = ({ isListed, isSidebar = false }) => (
+  <AppDetailSection headerText="Status" isSidebar={isSidebar}>
+    <div>
+      {isListed ? (
+        <>
+          Listed <FaCheck className={styles.check} />
+        </>
+      ) : (
+        'Not listed'
+      )}
+    </div>
+  </AppDetailSection>
+)
+
+export const BackToAppsSection: React.FC<BackToAppsSectionProps> = ({ onClick }) => (
+  <LevelRight className="pt-4 bt mt-4 flex">
+    <Button onClick={onClick}>Back To Apps</Button>
+  </LevelRight>
+)
+
+export const ListingPreviewSection: React.FC<ListingPreviewSectionProps> = ({ onClick, isSidebar = false }) => {
+  const onListingPreviewClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    onClick()
+  }
+  return (
+    <AppDetailSection
+      headerText={
+        <>
+          <span className="mr-2">See listing preview</span>{' '}
+          <a className={styles.preview} href="#" onClick={onListingPreviewClick}>
+            <FaExternalLinkAlt />
+          </a>
+        </>
+      }
+      isSidebar={isSidebar}
+    >
+      <p>The listing preview will display your app as it would appear in the Marketplace</p>
+    </AppDetailSection>
+  )
+}
+
+export const AuthenticationSection: React.FC<AuthenticationSectionProps> = ({
+  authFlow,
+  id,
+  externalId,
+  isSidebar = false,
+}) => (
+  <AppDetailSection headerText="Authentication" isSidebar={isSidebar}>
+    <div className={authFlow === AuthFlow.CLIENT_SECRET ? 'mb-4' : ''} data-test="authentication-client-id">
+      <b className="mr-2">Client ID:</b>
+      {externalId}
+    </div>
+    {authFlow === AuthFlow.CLIENT_SECRET && <AppAuthenticationDetail withCustomHeader={true} appId={id} />}
+  </AppDetailSection>
+)
+
+export const SummarySection: React.FC<SummarySectionProps> = ({ summary }) => (
+  <Content className="is-italic">{summary}</Content>
+)
+
+export const InstallationsTableSection: React.FC<InstallationsTableSectionProps> = ({
+  data,
+  columns,
+  isSidebar = false,
+}) => {
+  const testId = !data.length ? 'render-installations-table-empty-text' : 'render-installations-table'
+  return (
+    <AppDetailSection dataTest={testId} headerText="Installations" isSidebar={isSidebar}>
+      {!data.length ? (
+        <p>Currently, there are no installations for your app</p>
+      ) : (
+        <Table data={data} scrollable columns={columns} loading={false} />
+      )}
+    </AppDetailSection>
+  )
+}
+
+export const DeveloperSection: React.FC<DeveloperSectionProps> = ({ isSidebar = false, developer }) => (
+  <AppDetailSection headerText="Developer" isSidebar={isSidebar}>
+    {developer}
+  </AppDetailSection>
+)
+
+export const DeveloperAboutSection: React.FC<IsSidebar> = ({ isSidebar = false }) => (
+  <AppDetailSection headerText="About Developer" isSidebar={isSidebar} />
+)
+
+export const AdditionalImagesSection: React.FC<AdditionalImagesSectionProps> = ({
+  images,
+  splitIndex,
+  numberImages,
+}) => {
+  const extraImages = images.filter((_, index) => index > splitIndex)
+  return (
+    (extraImages.length && (
+      <Grid className="is-desktop flex-col-min-height" isMultiLine>
+        {extraImages.map(({ uri }, index) => {
+          if (index < numberImages) {
+            return (
+              <GridItem className="is-half-desktop" key={uri}>
+                <ImageSection uri={uri} />
+              </GridItem>
+            )
+          }
+        })}
+      </Grid>
+    )) ||
+    null
+  )
+}
+
+export const PermissionsSection: React.FC<PermissionSectionProps> = ({ permissions }) => (
+  <AppDetailSection headerText="Permissions required">
+    <GridFourCol>
+      {permissions.map(permission => (
+        <GridFourColItem key={permission.name}>{permission?.description ?? ''}</GridFourColItem>
+      ))}
+    </GridFourCol>
+  </AppDetailSection>
+)
+
+export const DescriptionSection: React.FC<DescriptionSectionProps> = ({ description }) => (
+  <HTMLRender html={description} />
+)
diff --git a/packages/developer-portal/src/components/pages/app-detail-preview/index.ts b/packages/developer-portal/src/components/pages/app-detail-preview/index.ts
new file mode 100644
index 0000000000..fb8e68535f
--- /dev/null
+++ b/packages/developer-portal/src/components/pages/app-detail-preview/index.ts
@@ -0,0 +1,2 @@
+import AppDetailPreview from './app-detail-preview'
+export default AppDetailPreview
diff --git a/packages/developer-portal/src/core/__tests__/__snapshots__/router.tsx.snap b/packages/developer-portal/src/core/__tests__/__snapshots__/router.tsx.snap
index e3291cca18..94ee7db11c 100644
--- a/packages/developer-portal/src/core/__tests__/__snapshots__/router.tsx.snap
+++ b/packages/developer-portal/src/core/__tests__/__snapshots__/router.tsx.snap
@@ -260,6 +260,19 @@ exports[`Router should match a snapshot 1`] = `
               }
               path="/edition-download"
             />
+            <Component
+              allow="DEVELOPER"
+              component={
+                Object {
+                  "$$typeof": Symbol(react.lazy),
+                  "_ctor": [Function],
+                  "_result": null,
+                  "_status": -1,
+                }
+              }
+              exact={true}
+              path="/apps/:appId/preview"
+            />
             <Route
               render={[Function]}
             />
diff --git a/packages/developer-portal/src/core/router.tsx b/packages/developer-portal/src/core/router.tsx
index b6cfcc0bc4..f90ea1017f 100644
--- a/packages/developer-portal/src/core/router.tsx
+++ b/packages/developer-portal/src/core/router.tsx
@@ -24,6 +24,7 @@ const AnalyticsPage = React.lazy(() => catchChunkError(() => import('@/component
 const RegisterConfirm = React.lazy(() => catchChunkError(() => import('../components/pages/register-confirm')))
 const WebhooksPage = React.lazy(() => catchChunkError(() => import('../components/pages/webhooks')))
 const SettingsPage = React.lazy(() => catchChunkError(() => import('../components/pages/settings/')))
+const AppDetailPreview = React.lazy(() => catchChunkError(() => import('../components/pages/app-detail-preview')))
 
 const SettingsOrganisationTabPage = React.lazy(() =>
   catchChunkError(() => import('../components/pages/settings/settings-organisation-tab')),
@@ -84,6 +85,7 @@ const Router = () => {
                   path={Routes.DEVELOPER_EDITION_DOWNLOAD}
                   component={EditionDownloadPage}
                 />
+                <PrivateRoute allow="DEVELOPER" path={Routes.APP_PREVIEW} exact component={AppDetailPreview} />
                 <Route render={() => <Info infoType="404" />} />
               </Switch>
             </PrivateRouteWrapper>
diff --git a/packages/developer-portal/src/styles/blocks/installed-app-card.scss b/packages/developer-portal/src/styles/blocks/installed-app-card.scss
deleted file mode 100644
index 8a96ca9731..0000000000
--- a/packages/developer-portal/src/styles/blocks/installed-app-card.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-$icon-width: 80px;
-$icon-height: 80px;
-
-.container {
-  display: flex;
-  width: 50%;
-  flex-direction: column;
-  align-items: center;
-
-  @media (min-width: 400px) {
-    width: 33%;
-  }
-
-  @media (min-width: 600px) {
-    width: 25%;
-  }
-}
-.wrapIcon {
-  width: $icon-width;
-  height: $icon-height;
-  cursor: pointer;
-  background-color: #ffffff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-}
-
-.icon {
-  width: $icon-width - 30px;
-  max-height: $icon-height - 30px;
-}
-
-.appTitle {
-  width: $icon-width * 1.5;
-  white-space: nowrap;
-  margin-top: 1rem;
-  text-align: center;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  font-size: 16px;
-  font-weight: bold;
-}
-
-.content {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  max-width: 700px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  height: 4.5rem;
-}
diff --git a/packages/developer-portal/src/styles/blocks/installed-app-list.scss b/packages/developer-portal/src/styles/blocks/installed-app-list.scss
deleted file mode 100644
index 08e5a4d6ac..0000000000
--- a/packages/developer-portal/src/styles/blocks/installed-app-list.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@import './installed-app-card.scss';
-
-.contentIsLoading {
-  opacity: 0.75;
-}
-.wrapList {
-  display: flex;
-  flex-wrap: wrap;
-  justify-items: center;
-  justify-content: flex-start;
-  align-items: center;
-
-  & > * {
-    margin-bottom: 1rem;
-  }
-}
-
diff --git a/packages/elements/src/components/ModalV2/__tests__/__snapshots__/index.tsx.snap b/packages/elements/src/components/ModalV2/__tests__/__snapshots__/index.tsx.snap
index dcde71eeae..5e9b76f485 100644
--- a/packages/elements/src/components/ModalV2/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/elements/src/components/ModalV2/__tests__/__snapshots__/index.tsx.snap
@@ -3,6 +3,7 @@
 exports[`modal Modal should match snapshot 1`] = `
 <Component
   className=""
+  destroyOnClose={true}
   visible={true}
   wrapClassName=""
 >
diff --git a/packages/elements/src/components/ModalV2/index.tsx b/packages/elements/src/components/ModalV2/index.tsx
index 90ca1f3973..b552423c3c 100644
--- a/packages/elements/src/components/ModalV2/index.tsx
+++ b/packages/elements/src/components/ModalV2/index.tsx
@@ -6,9 +6,20 @@ import { modalContainer } from './__styles__'
 
 export interface ModalProps extends IDialogPropTypes {}
 
-export const Modal: React.FC<IDialogPropTypes> = ({ children, className, wrapClassName, ...restProps }) => {
+export const Modal: React.FC<IDialogPropTypes> = ({
+  children,
+  className,
+  wrapClassName,
+  destroyOnClose = true,
+  ...restProps
+}) => {
   return (
-    <Dialog {...restProps} className={cx(modalContainer, className)} wrapClassName={cx(wrapClassName)}>
+    <Dialog
+      {...restProps}
+      destroyOnClose={destroyOnClose}
+      className={cx(modalContainer, className)}
+      wrapClassName={cx(wrapClassName)}
+    >
       {children}
     </Dialog>
   )
diff --git a/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-button-group.test.tsx.snap b/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-button-group.test.tsx.snap
index 48dc51fdc2..42b648a34c 100644
--- a/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-button-group.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-button-group.test.tsx.snap
@@ -1,21 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ClientAppDetailButtonGroup should match snapshot when both buttons are hidden 1`] = `
-<Fragment>
-  <Component />
-</Fragment>
-`;
+exports[`ClientAppDetailButtonGroup should match snapshot when both buttons are hidden 1`] = `""`;
 
 exports[`ClientAppDetailButtonGroup should match snapshot when both buttons are showing 1`] = `
-<Fragment>
-  <Component
-    className="ml-0"
-    dataTest="detail-modal-uninstall-button"
-    onClick={[MockFunction]}
-    type="button"
-    variant="primary"
-  >
-    Uninstall App
-  </Component>
-</Fragment>
+<Component
+  className="ml-0"
+  dataTest="detail-modal-uninstall-button"
+  onClick={[MockFunction]}
+  type="button"
+  variant="primary"
+>
+  Uninstall App
+</Component>
 `;
diff --git a/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/contact-developer-modal.test.tsx.snap b/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/contact-developer-modal.test.tsx.snap
index 35d000d8cd..19d08e90b5 100644
--- a/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/contact-developer-modal.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/contact-developer-modal.test.tsx.snap
@@ -11,9 +11,8 @@ exports[`ContactDeveloperSection should match snapshot with gutter 1`] = `
   >
     NEED HELP?
   </Component>
-  <Component
-    afterClose={[Function]}
-    footerItems={
+  <Memo()
+    footer={
       <Unknown
         dataTest="btn-close-modal"
         disabled={false}
@@ -24,6 +23,7 @@ exports[`ContactDeveloperSection should match snapshot with gutter 1`] = `
         Close
       </Unknown>
     }
+    onClose={[Function]}
     title="Contact Details"
     visible={false}
   >
@@ -91,7 +91,7 @@ exports[`ContactDeveloperSection should match snapshot with gutter 1`] = `
         </Component>
       </Component>
     </Component>
-  </Component>
+  </Memo()>
 </Fragment>
 `;
 
@@ -106,9 +106,8 @@ exports[`ContactDeveloperSection should match snapshot without gutter 1`] = `
   >
     NEED HELP?
   </Component>
-  <Component
-    afterClose={[Function]}
-    footerItems={
+  <Memo()
+    footer={
       <Unknown
         dataTest="btn-close-modal"
         disabled={false}
@@ -119,6 +118,7 @@ exports[`ContactDeveloperSection should match snapshot without gutter 1`] = `
         Close
       </Unknown>
     }
+    onClose={[Function]}
     title="Contact Details"
     visible={false}
   >
@@ -186,6 +186,6 @@ exports[`ContactDeveloperSection should match snapshot without gutter 1`] = `
         </Component>
       </Component>
     </Component>
-  </Component>
+  </Memo()>
 </Fragment>
 `;
diff --git a/packages/marketplace/src/components/pages/app-detail/client/app-detail-button-group.tsx b/packages/marketplace/src/components/pages/app-detail/client/app-detail-button-group.tsx
index 40944d0266..2cb9aae24a 100644
--- a/packages/marketplace/src/components/pages/app-detail/client/app-detail-button-group.tsx
+++ b/packages/marketplace/src/components/pages/app-detail/client/app-detail-button-group.tsx
@@ -14,31 +14,33 @@ export const AppDetailButtonGroup: React.FC<AppDetailButtonGroupProps> = ({
   onUninstallConfirmationModal,
   isInstallBtnHidden,
 }) => {
+  if (installedOn) {
+    return (
+      <Button
+        onClick={onUninstallConfirmationModal}
+        dataTest="detail-modal-uninstall-button"
+        type="button"
+        variant="primary"
+        className="ml-0"
+      >
+        Uninstall App
+      </Button>
+    )
+  }
+
+  if (isInstallBtnHidden) {
+    return null
+  }
+
   return (
-    <>
-      {installedOn ? (
-        <Button
-          onClick={onUninstallConfirmationModal}
-          dataTest="detail-modal-uninstall-button"
-          type="button"
-          variant="primary"
-          className="ml-0"
-        >
-          Uninstall App
-        </Button>
-      ) : (
-        isInstallBtnHidden || (
-          <Button
-            dataTest="detail-modal-install-button"
-            type="button"
-            variant="primary"
-            className="ml-0"
-            onClick={onInstallConfirmationModal}
-          >
-            Install App
-          </Button>
-        )
-      )}
-    </>
+    <Button
+      dataTest="detail-modal-install-button"
+      type="button"
+      variant="primary"
+      className="ml-0"
+      onClick={onInstallConfirmationModal}
+    >
+      Install App
+    </Button>
   )
 }
diff --git a/packages/marketplace/src/components/pages/app-detail/client/app-detail.tsx b/packages/marketplace/src/components/pages/app-detail/client/app-detail.tsx
index be52a034fc..71b45a35b5 100644
--- a/packages/marketplace/src/components/pages/app-detail/client/app-detail.tsx
+++ b/packages/marketplace/src/components/pages/app-detail/client/app-detail.tsx
@@ -1,3 +1,5 @@
+// The UI of this page should be the same as the App Detail Preview page in Developer portal
+// Make sure to always update the UI in both places if needed
 import * as React from 'react'
 import { History } from 'history'
 import { useHistory } from 'react-router'
diff --git a/packages/marketplace/src/components/pages/app-detail/client/contact-developer-modal.tsx b/packages/marketplace/src/components/pages/app-detail/client/contact-developer-modal.tsx
index 263effa35b..829eefda12 100644
--- a/packages/marketplace/src/components/pages/app-detail/client/contact-developer-modal.tsx
+++ b/packages/marketplace/src/components/pages/app-detail/client/contact-developer-modal.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Grid, GridItem, SubTitleH6, Modal, Content } from '@reapit/elements'
+import { Button, Grid, GridItem, SubTitleH6, Content, ModalV2 } from '@reapit/elements'
 import linkStyles from '@/styles/elements/link.scss?mod'
 
 export type ContactDeveloperSectionType = {
@@ -31,11 +31,11 @@ export const ContactDeveloperSection = ({
         NEED HELP?
       </Button>
 
-      <Modal
+      <ModalV2
         visible={visible}
         title={'Contact Details'}
-        afterClose={closeContactModal(setVisible)}
-        footerItems={
+        onClose={closeContactModal(setVisible)}
+        footer={
           <Button
             dataTest="btn-close-modal"
             disabled={false}
@@ -94,7 +94,7 @@ export const ContactDeveloperSection = ({
             </GridItem>
           </Grid>
         </Content>
-      </Modal>
+      </ModalV2>
     </>
   )
 }