diff --git a/packages/app-market/src/components/apps-browse/__styles__/featured-hero-apps.ts b/packages/app-market/src/components/apps-browse/__styles__/featured-hero-apps.ts
index d1a850744c..1e77027a1d 100644
--- a/packages/app-market/src/components/apps-browse/__styles__/featured-hero-apps.ts
+++ b/packages/app-market/src/components/apps-browse/__styles__/featured-hero-apps.ts
@@ -152,6 +152,8 @@ export const FeaturedHeroAppsIcon = styled.img`
   border-radius: 0.25rem;
   width: 48px;
   height: 48px;
+  padding: 0.25rem;
+  background-color: var(--color-white);
 
   ${forMobileAndAbove} {
     border-radius: 0.5rem;
diff --git a/packages/app-market/src/components/apps-browse/__styles__/hero-apps.ts b/packages/app-market/src/components/apps-browse/__styles__/hero-apps.ts
index cb5231ec0d..c2ebecd1ca 100644
--- a/packages/app-market/src/components/apps-browse/__styles__/hero-apps.ts
+++ b/packages/app-market/src/components/apps-browse/__styles__/hero-apps.ts
@@ -106,7 +106,7 @@ export const HeroAppsStrapline = styled(ElBodyText)`
 
 export const HeroAppsInnerContainer = styled.div`
   width: 100%;
-  border-radius: 0.25rem;
+  border-radius: 0.5rem;
   padding: 0.75rem;
 
   ${forMobileAndAbove} {
@@ -203,6 +203,8 @@ export const HeroAppsIcon = styled.img`
   border-radius: 0.25rem;
   width: 40px;
   height: 40px;
+  padding: 0.25rem;
+  background-color: var(--color-white);
 
   ${forMobileAndAbove} {
     margin-bottom: 1.25rem;
diff --git a/packages/app-market/src/components/apps-detail/__styles__/index.ts b/packages/app-market/src/components/apps-detail/__styles__/index.ts
index 7b464a3393..686643ad5a 100644
--- a/packages/app-market/src/components/apps-detail/__styles__/index.ts
+++ b/packages/app-market/src/components/apps-detail/__styles__/index.ts
@@ -1,7 +1,8 @@
+import { forDesktopAndAbove } from './../../../core/__styles__/media'
 import { ElModalBody } from './../../../../../elements/src/components/modal/__styles__/index'
 import { css } from '@linaria/core'
 import { styled } from '@linaria/react'
-import { forMobileAndAbove, forTabletAndAbove } from '../../../core/__styles__/media'
+import { forMobileAndAbove, forTabletAndAbove, forWidescreenAndAbove } from '../../../core/__styles__/media'
 
 export const htmlRender = css`
   font-family: var(--font-sans-serif);
@@ -22,25 +23,27 @@ export const htmlRender = css`
 export const AppDetailWrapper = styled.div`
   margin-right: 0.75rem;
   border-radius: 0.25rem;
+  padding: 0.75rem;
   background-color: var(--color-grey-light);
-  width: 48px;
-  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-bottom: 0.75rem;
 
   ${forMobileAndAbove} {
     width: 96px;
     height: 96px;
+    margin-bottom: 0rem;
   }
 `
 
 export const AppDetailIcon = styled.img`
-  border-radius: 1rem;
+  border-radius: 0.25rem;
   width: 48px;
   height: 48px;
 
   ${forMobileAndAbove} {
+    border-radius: 1rem;
     width: 72px;
     height: 72px;
   }
@@ -82,6 +85,10 @@ export const AppDetailDescriptionColMain = styled.div`
   ${forTabletAndAbove} {
     grid-column-end: span 7;
   }
+
+  ${forWidescreenAndAbove} {
+    grid-column-end: span 12;
+  }
 `
 
 export const AppDetailDescriptionColAside = styled.div`
@@ -93,6 +100,20 @@ export const AppDetailDescriptionColAside = styled.div`
     grid-column-end: span 5;
     padding-top: 2.75rem;
   }
+
+  ${forWidescreenAndAbove} {
+    display: none;
+  }
+`
+
+export const AppDetailDescriptionAsideDesktop = styled.div`
+  display: none;
+
+  ${forWidescreenAndAbove} {
+    display: block;
+    margin-left: 1rem;
+    margin-bottom: 1.25rem;
+  }
 `
 
 export const AppDetailBackButton = styled.div`
@@ -103,8 +124,13 @@ export const AppDetailBackButton = styled.div`
   align-items: center;
   border-radius: 0.25rem;
   background-color: var(--color-grey-light);
-  margin-bottom: 0.75rem;
+  margin-bottom: 1.25rem;
   cursor: pointer;
+  margin-top: 0.75rem;
+
+  ${forMobileAndAbove} {
+    margin-top: 0;
+  }
 `
 
 export const AppDetailPermissionChip = styled.div`
@@ -143,3 +169,48 @@ export const appDetailVideoModal = css`
     height: calc(100% - 2.5rem);
   }
 `
+
+export const appDetailInfoLineAdjust = css`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+`
+
+export const AppsDetailContentGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+
+  ${forWidescreenAndAbove} {
+    grid-template-columns: 1fr 2fr;
+    grid-column-gap: 2rem;
+  }
+`
+
+export const AppDetailSupportGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-column-gap: 1rem;
+  grid-row-gap: 1.5rem;
+
+  ${forMobileAndAbove} {
+    grid-column-gap: 2rem;
+    grid-row-gap: 2.5rem;
+  }
+`
+
+export const AppDetailSupportGridCol = styled.div`
+  grid-column-end: span 12;
+
+  ${forMobileAndAbove} {
+    grid-column-end: span 6;
+  }
+
+  ${forDesktopAndAbove} {
+    grid-column-end: span 4;
+  }
+
+  ${forWidescreenAndAbove} {
+    grid-column-end: span 6;
+  }
+`
diff --git a/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/app-install-modal.test.tsx.snap b/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/app-install-modal.test.tsx.snap
index 0365ff460b..20b95267da 100644
--- a/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/app-install-modal.test.tsx.snap
+++ b/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/app-install-modal.test.tsx.snap
@@ -12,7 +12,7 @@ Object {
         class="el-mb11"
       >
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           As an organisation admin, you have control over 
           enabling
@@ -32,20 +32,26 @@ Object {
           Desktop Integration
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           This app requires the following Desktop Integration. Some integration types may replace or change certain behaviours within Agency Cloud.
         </p>
-        <ul>
-          <li>
+        <div
+          class="el-mb6"
+        >
+          <div
+            class="app-detail-permission-chip"
+          >
             Launchable from the applicant screen
-          </li>
-          <li>
+          </div>
+          <div
+            class="app-detail-permission-chip"
+          >
             Provides ability to export a saved applicant to third party system
-          </li>
-        </ul>
+          </div>
+        </div>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           For more information regarding Desktop Integration types, please
            
@@ -64,7 +70,7 @@ Object {
           Pricing Information
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           Will Test DevCo
            have specified that there is a cost for using this 
@@ -83,7 +89,7 @@ Object {
           .
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           You will not be charged by Reapit Ltd for any costs associated with using this
            
@@ -96,47 +102,31 @@ Object {
           Data Permissions
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           By 
           enabling
            this app, you are granting the following permissions to your data:
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           Information about your organisation and the names/email addresses of your users
         </p>
         <div
-          class="el-grid"
+          class="app-detail-permission-chip"
         >
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read applicants
-            </div>
-          </div>
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read property images
-            </div>
-          </div>
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read properties
-            </div>
-          </div>
+          Read applicants
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
+          Read property images
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
+          Read properties
         </div>
       </div>
       <div
@@ -168,7 +158,7 @@ Object {
       class="el-mb11"
     >
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         As an organisation admin, you have control over 
         enabling
@@ -188,20 +178,26 @@ Object {
         Desktop Integration
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         This app requires the following Desktop Integration. Some integration types may replace or change certain behaviours within Agency Cloud.
       </p>
-      <ul>
-        <li>
+      <div
+        class="el-mb6"
+      >
+        <div
+          class="app-detail-permission-chip"
+        >
           Launchable from the applicant screen
-        </li>
-        <li>
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
           Provides ability to export a saved applicant to third party system
-        </li>
-      </ul>
+        </div>
+      </div>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         For more information regarding Desktop Integration types, please
          
@@ -220,7 +216,7 @@ Object {
         Pricing Information
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         Will Test DevCo
          have specified that there is a cost for using this 
@@ -239,7 +235,7 @@ Object {
         .
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         You will not be charged by Reapit Ltd for any costs associated with using this
          
@@ -252,47 +248,31 @@ Object {
         Data Permissions
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         By 
         enabling
          this app, you are granting the following permissions to your data:
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         Information about your organisation and the names/email addresses of your users
       </p>
       <div
-        class="el-grid"
+        class="app-detail-permission-chip"
       >
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read applicants
-          </div>
-        </div>
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read property images
-          </div>
-        </div>
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read properties
-          </div>
-        </div>
+        Read applicants
+      </div>
+      <div
+        class="app-detail-permission-chip"
+      >
+        Read property images
+      </div>
+      <div
+        class="app-detail-permission-chip"
+      >
+        Read properties
       </div>
     </div>
     <div
@@ -381,7 +361,7 @@ Object {
         class="el-mb11"
       >
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           As an organisation admin, you have control over 
           enabling
@@ -401,20 +381,26 @@ Object {
           Desktop Integration
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           This app requires the following Desktop Integration. Some integration types may replace or change certain behaviours within Agency Cloud.
         </p>
-        <ul>
-          <li>
+        <div
+          class="el-mb6"
+        >
+          <div
+            class="app-detail-permission-chip"
+          >
             Launchable from the applicant screen
-          </li>
-          <li>
+          </div>
+          <div
+            class="app-detail-permission-chip"
+          >
             Provides ability to export a saved applicant to third party system
-          </li>
-        </ul>
+          </div>
+        </div>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           For more information regarding Desktop Integration types, please
            
@@ -433,7 +419,7 @@ Object {
           Pricing Information
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           Will Test DevCo
            have specified that there is a cost for using this 
@@ -452,7 +438,7 @@ Object {
           .
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           You will not be charged by Reapit Ltd for any costs associated with using this
            
@@ -465,47 +451,31 @@ Object {
           Data Permissions
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           By 
           enabling
            this app, you are granting the following permissions to your data:
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           Information about your organisation and the names/email addresses of your users
         </p>
         <div
-          class="el-grid"
+          class="app-detail-permission-chip"
         >
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read applicants
-            </div>
-          </div>
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read property images
-            </div>
-          </div>
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read properties
-            </div>
-          </div>
+          Read applicants
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
+          Read property images
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
+          Read properties
         </div>
       </div>
       <div
@@ -537,7 +507,7 @@ Object {
       class="el-mb11"
     >
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         As an organisation admin, you have control over 
         enabling
@@ -557,20 +527,26 @@ Object {
         Desktop Integration
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         This app requires the following Desktop Integration. Some integration types may replace or change certain behaviours within Agency Cloud.
       </p>
-      <ul>
-        <li>
+      <div
+        class="el-mb6"
+      >
+        <div
+          class="app-detail-permission-chip"
+        >
           Launchable from the applicant screen
-        </li>
-        <li>
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
           Provides ability to export a saved applicant to third party system
-        </li>
-      </ul>
+        </div>
+      </div>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         For more information regarding Desktop Integration types, please
          
@@ -589,7 +565,7 @@ Object {
         Pricing Information
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         Will Test DevCo
          have specified that there is a cost for using this 
@@ -608,7 +584,7 @@ Object {
         .
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         You will not be charged by Reapit Ltd for any costs associated with using this
          
@@ -621,47 +597,31 @@ Object {
         Data Permissions
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         By 
         enabling
          this app, you are granting the following permissions to your data:
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         Information about your organisation and the names/email addresses of your users
       </p>
       <div
-        class="el-grid"
+        class="app-detail-permission-chip"
       >
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read applicants
-          </div>
-        </div>
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read property images
-          </div>
-        </div>
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read properties
-          </div>
-        </div>
+        Read applicants
+      </div>
+      <div
+        class="app-detail-permission-chip"
+      >
+        Read property images
+      </div>
+      <div
+        class="app-detail-permission-chip"
+      >
+        Read properties
       </div>
     </div>
     <div
@@ -750,7 +710,7 @@ Object {
         class="el-mb11"
       >
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           You are about to 
           enable
@@ -768,20 +728,26 @@ Object {
           Desktop Integration
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           This app requires the following Desktop Integration. Some integration types may replace or change certain behaviours within Agency Cloud.
         </p>
-        <ul>
-          <li>
+        <div
+          class="el-mb6"
+        >
+          <div
+            class="app-detail-permission-chip"
+          >
             Launchable from the applicant screen
-          </li>
-          <li>
+          </div>
+          <div
+            class="app-detail-permission-chip"
+          >
             Provides ability to export a saved applicant to third party system
-          </li>
-        </ul>
+          </div>
+        </div>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           For more information regarding Desktop Integration types, please
            
@@ -800,7 +766,7 @@ Object {
           Pricing Information
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           Will Test DevCo
            have specified there is no cost for using this 
@@ -813,47 +779,31 @@ Object {
           Data Permissions
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           By 
           enabling
            this app, you are granting the following permissions to your data:
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           Information about your organisation and the names/email addresses of your users
         </p>
         <div
-          class="el-grid"
+          class="app-detail-permission-chip"
         >
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read applicants
-            </div>
-          </div>
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read property images
-            </div>
-          </div>
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read properties
-            </div>
-          </div>
+          Read applicants
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
+          Read property images
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
+          Read properties
         </div>
       </div>
       <div
@@ -885,7 +835,7 @@ Object {
       class="el-mb11"
     >
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         You are about to 
         enable
@@ -903,20 +853,26 @@ Object {
         Desktop Integration
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         This app requires the following Desktop Integration. Some integration types may replace or change certain behaviours within Agency Cloud.
       </p>
-      <ul>
-        <li>
+      <div
+        class="el-mb6"
+      >
+        <div
+          class="app-detail-permission-chip"
+        >
           Launchable from the applicant screen
-        </li>
-        <li>
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
           Provides ability to export a saved applicant to third party system
-        </li>
-      </ul>
+        </div>
+      </div>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         For more information regarding Desktop Integration types, please
          
@@ -935,7 +891,7 @@ Object {
         Pricing Information
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         Will Test DevCo
          have specified there is no cost for using this 
@@ -948,47 +904,31 @@ Object {
         Data Permissions
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         By 
         enabling
          this app, you are granting the following permissions to your data:
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         Information about your organisation and the names/email addresses of your users
       </p>
       <div
-        class="el-grid"
+        class="app-detail-permission-chip"
       >
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read applicants
-          </div>
-        </div>
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read property images
-          </div>
-        </div>
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read properties
-          </div>
-        </div>
+        Read applicants
+      </div>
+      <div
+        class="app-detail-permission-chip"
+      >
+        Read property images
+      </div>
+      <div
+        class="app-detail-permission-chip"
+      >
+        Read properties
       </div>
     </div>
     <div
@@ -1077,7 +1017,7 @@ Object {
         class="el-mb11"
       >
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           You are about to 
           enable
@@ -1093,20 +1033,26 @@ Object {
           Desktop Integration
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           This app requires the following Desktop Integration. Some integration types may replace or change certain behaviours within Agency Cloud.
         </p>
-        <ul>
-          <li>
+        <div
+          class="el-mb6"
+        >
+          <div
+            class="app-detail-permission-chip"
+          >
             Launchable from the applicant screen
-          </li>
-          <li>
+          </div>
+          <div
+            class="app-detail-permission-chip"
+          >
             Provides ability to export a saved applicant to third party system
-          </li>
-        </ul>
+          </div>
+        </div>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           For more information regarding Desktop Integration types, please
            
@@ -1125,7 +1071,7 @@ Object {
           Pricing Information
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           Will Test DevCo
            have specified that there is a cost for using this 
@@ -1144,7 +1090,7 @@ Object {
           .
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           You will not be charged by Reapit Ltd for any costs associated with using this
            
@@ -1157,47 +1103,31 @@ Object {
           Data Permissions
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           By 
           enabling
            this app, you are granting the following permissions to your data:
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           Information about your organisation and the names/email addresses of your users
         </p>
         <div
-          class="el-grid"
+          class="app-detail-permission-chip"
         >
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read applicants
-            </div>
-          </div>
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read property images
-            </div>
-          </div>
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read properties
-            </div>
-          </div>
+          Read applicants
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
+          Read property images
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
+          Read properties
         </div>
       </div>
       <div
@@ -1229,7 +1159,7 @@ Object {
       class="el-mb11"
     >
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         You are about to 
         enable
@@ -1245,20 +1175,26 @@ Object {
         Desktop Integration
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         This app requires the following Desktop Integration. Some integration types may replace or change certain behaviours within Agency Cloud.
       </p>
-      <ul>
-        <li>
+      <div
+        class="el-mb6"
+      >
+        <div
+          class="app-detail-permission-chip"
+        >
           Launchable from the applicant screen
-        </li>
-        <li>
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
           Provides ability to export a saved applicant to third party system
-        </li>
-      </ul>
+        </div>
+      </div>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         For more information regarding Desktop Integration types, please
          
@@ -1277,7 +1213,7 @@ Object {
         Pricing Information
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         Will Test DevCo
          have specified that there is a cost for using this 
@@ -1296,7 +1232,7 @@ Object {
         .
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         You will not be charged by Reapit Ltd for any costs associated with using this
          
@@ -1309,47 +1245,31 @@ Object {
         Data Permissions
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         By 
         enabling
          this app, you are granting the following permissions to your data:
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         Information about your organisation and the names/email addresses of your users
       </p>
       <div
-        class="el-grid"
+        class="app-detail-permission-chip"
       >
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read applicants
-          </div>
-        </div>
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read property images
-          </div>
-        </div>
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read properties
-          </div>
-        </div>
+        Read applicants
+      </div>
+      <div
+        class="app-detail-permission-chip"
+      >
+        Read property images
+      </div>
+      <div
+        class="app-detail-permission-chip"
+      >
+        Read properties
       </div>
     </div>
     <div
@@ -1438,7 +1358,7 @@ Object {
         class="el-mb11"
       >
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           You are about to 
           enable
@@ -1456,20 +1376,26 @@ Object {
           Desktop Integration
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           This app requires the following Desktop Integration. Some integration types may replace or change certain behaviours within Agency Cloud.
         </p>
-        <ul>
-          <li>
+        <div
+          class="el-mb6"
+        >
+          <div
+            class="app-detail-permission-chip"
+          >
             Launchable from the applicant screen
-          </li>
-          <li>
+          </div>
+          <div
+            class="app-detail-permission-chip"
+          >
             Provides ability to export a saved applicant to third party system
-          </li>
-        </ul>
+          </div>
+        </div>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           For more information regarding Desktop Integration types, please
            
@@ -1488,7 +1414,7 @@ Object {
           Pricing Information
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           There may be a cost associated to using this 
           integration
@@ -1504,47 +1430,31 @@ Object {
           Data Permissions
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           By 
           enabling
            this app, you are granting the following permissions to your data:
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           Information about your organisation and the names/email addresses of your users
         </p>
         <div
-          class="el-grid"
+          class="app-detail-permission-chip"
         >
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read applicants
-            </div>
-          </div>
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read property images
-            </div>
-          </div>
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read properties
-            </div>
-          </div>
+          Read applicants
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
+          Read property images
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
+          Read properties
         </div>
       </div>
       <div
@@ -1576,7 +1486,7 @@ Object {
       class="el-mb11"
     >
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         You are about to 
         enable
@@ -1594,20 +1504,26 @@ Object {
         Desktop Integration
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         This app requires the following Desktop Integration. Some integration types may replace or change certain behaviours within Agency Cloud.
       </p>
-      <ul>
-        <li>
+      <div
+        class="el-mb6"
+      >
+        <div
+          class="app-detail-permission-chip"
+        >
           Launchable from the applicant screen
-        </li>
-        <li>
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
           Provides ability to export a saved applicant to third party system
-        </li>
-      </ul>
+        </div>
+      </div>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         For more information regarding Desktop Integration types, please
          
@@ -1626,7 +1542,7 @@ Object {
         Pricing Information
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         There may be a cost associated to using this 
         integration
@@ -1642,47 +1558,31 @@ Object {
         Data Permissions
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         By 
         enabling
          this app, you are granting the following permissions to your data:
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         Information about your organisation and the names/email addresses of your users
       </p>
       <div
-        class="el-grid"
+        class="app-detail-permission-chip"
       >
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read applicants
-          </div>
-        </div>
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read property images
-          </div>
-        </div>
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read properties
-          </div>
-        </div>
+        Read applicants
+      </div>
+      <div
+        class="app-detail-permission-chip"
+      >
+        Read property images
+      </div>
+      <div
+        class="app-detail-permission-chip"
+      >
+        Read properties
       </div>
     </div>
     <div
@@ -1771,7 +1671,7 @@ Object {
         class="el-mb11"
       >
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           You are about to 
           enable
@@ -1789,20 +1689,26 @@ Object {
           Desktop Integration
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           This app requires the following Desktop Integration. Some integration types may replace or change certain behaviours within Agency Cloud.
         </p>
-        <ul>
-          <li>
+        <div
+          class="el-mb6"
+        >
+          <div
+            class="app-detail-permission-chip"
+          >
             Launchable from the applicant screen
-          </li>
-          <li>
+          </div>
+          <div
+            class="app-detail-permission-chip"
+          >
             Provides ability to export a saved applicant to third party system
-          </li>
-        </ul>
+          </div>
+        </div>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           For more information regarding Desktop Integration types, please
            
@@ -1821,7 +1727,7 @@ Object {
           Pricing Information
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           Will Test DevCo
            have specified that there is a cost for using this 
@@ -1840,7 +1746,7 @@ Object {
           .
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           You will not be charged by Reapit Ltd for any costs associated with using this
            
@@ -1853,47 +1759,31 @@ Object {
           Data Permissions
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           By 
           enabling
            this app, you are granting the following permissions to your data:
         </p>
         <p
-          class="el-has-grey-text el-small-text"
+          class="el-has-grey-text el-body-text"
         >
           Information about your organisation and the names/email addresses of your users
         </p>
         <div
-          class="el-grid"
+          class="app-detail-permission-chip"
         >
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read applicants
-            </div>
-          </div>
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read property images
-            </div>
-          </div>
-          <div
-            class="el-col"
-          >
-            <div
-              class="app-detail-permission-chip"
-            >
-              Read properties
-            </div>
-          </div>
+          Read applicants
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
+          Read property images
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
+          Read properties
         </div>
       </div>
       <div
@@ -1925,7 +1815,7 @@ Object {
       class="el-mb11"
     >
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         You are about to 
         enable
@@ -1943,20 +1833,26 @@ Object {
         Desktop Integration
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         This app requires the following Desktop Integration. Some integration types may replace or change certain behaviours within Agency Cloud.
       </p>
-      <ul>
-        <li>
+      <div
+        class="el-mb6"
+      >
+        <div
+          class="app-detail-permission-chip"
+        >
           Launchable from the applicant screen
-        </li>
-        <li>
+        </div>
+        <div
+          class="app-detail-permission-chip"
+        >
           Provides ability to export a saved applicant to third party system
-        </li>
-      </ul>
+        </div>
+      </div>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         For more information regarding Desktop Integration types, please
          
@@ -1975,7 +1871,7 @@ Object {
         Pricing Information
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         Will Test DevCo
          have specified that there is a cost for using this 
@@ -1994,7 +1890,7 @@ Object {
         .
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         You will not be charged by Reapit Ltd for any costs associated with using this
          
@@ -2007,47 +1903,31 @@ Object {
         Data Permissions
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         By 
         enabling
          this app, you are granting the following permissions to your data:
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         Information about your organisation and the names/email addresses of your users
       </p>
       <div
-        class="el-grid"
+        class="app-detail-permission-chip"
       >
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read applicants
-          </div>
-        </div>
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read property images
-          </div>
-        </div>
-        <div
-          class="el-col"
-        >
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read properties
-          </div>
-        </div>
+        Read applicants
+      </div>
+      <div
+        class="app-detail-permission-chip"
+      >
+        Read property images
+      </div>
+      <div
+        class="app-detail-permission-chip"
+      >
+        Read properties
       </div>
     </div>
     <div
diff --git a/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/app-install-success-modal.test.tsx.snap b/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/app-install-success-modal.test.tsx.snap
index 4bbac7459f..0595cdb1f4 100644
--- a/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/app-install-success-modal.test.tsx.snap
+++ b/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/app-install-success-modal.test.tsx.snap
@@ -9,21 +9,21 @@ Object {
         class="el-snack-holder"
       />
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         will-test-dev-co-voracious-person
          integration has been successfully enabled.
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         For details on how to use the integration and, if there are any additional setup requirements, a member of
          
-        MOCK_NAME
+        MOCK_DEVELOPER_NAME
          will be in touch to help you through the process.
       </p>
       <p
-        class="el-has-grey-text el-small-text"
+        class="el-has-grey-text el-body-text"
       >
         If you wish to contact them directly, you can do this via telephone at 
         07777777777
@@ -58,21 +58,21 @@ Object {
       class="el-snack-holder"
     />
     <p
-      class="el-has-grey-text el-small-text"
+      class="el-has-grey-text el-body-text"
     >
       will-test-dev-co-voracious-person
        integration has been successfully enabled.
     </p>
     <p
-      class="el-has-grey-text el-small-text"
+      class="el-has-grey-text el-body-text"
     >
       For details on how to use the integration and, if there are any additional setup requirements, a member of
        
-      MOCK_NAME
+      MOCK_DEVELOPER_NAME
        will be in touch to help you through the process.
     </p>
     <p
-      class="el-has-grey-text el-small-text"
+      class="el-has-grey-text el-body-text"
     >
       If you wish to contact them directly, you can do this via telephone at 
       07777777777
@@ -164,14 +164,14 @@ Object {
         class="el-snack-holder"
       />
       <p
-        class="el-small-text"
+        class="el-body-text"
       >
         The 
         will-test-dev-co-voracious-person
          app has been successfully installed. You can now launch the app from the ‘My Apps’ page or by clicking the button below.
       </p>
       <p
-        class="el-small-text"
+        class="el-body-text"
       >
         If you wish to contact the developer about using the app, you can do this via telephone at 
         07777777777
@@ -218,14 +218,14 @@ Object {
       class="el-snack-holder"
     />
     <p
-      class="el-small-text"
+      class="el-body-text"
     >
       The 
       will-test-dev-co-voracious-person
        app has been successfully installed. You can now launch the app from the ‘My Apps’ page or by clicking the button below.
     </p>
     <p
-      class="el-small-text"
+      class="el-body-text"
     >
       If you wish to contact the developer about using the app, you can do this via telephone at 
       07777777777
@@ -329,14 +329,14 @@ Object {
         class="el-snack-holder"
       />
       <p
-        class="el-small-text"
+        class="el-body-text"
       >
         The 
         will-test-dev-co-voracious-person
          app has been successfully installed. You can now launch the app from the ‘My Apps’ page or by clicking the button below.
       </p>
       <p
-        class="el-small-text"
+        class="el-body-text"
       >
         If you wish to contact the developer about using the app, you can do this via telephone at 
         07777777777
@@ -383,14 +383,14 @@ Object {
       class="el-snack-holder"
     />
     <p
-      class="el-small-text"
+      class="el-body-text"
     >
       The 
       will-test-dev-co-voracious-person
        app has been successfully installed. You can now launch the app from the ‘My Apps’ page or by clicking the button below.
     </p>
     <p
-      class="el-small-text"
+      class="el-body-text"
     >
       If you wish to contact the developer about using the app, you can do this via telephone at 
       07777777777
diff --git a/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/apps-detail-header.test.tsx.snap b/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/apps-detail-header.test.tsx.snap
new file mode 100644
index 0000000000..9f86a584dd
--- /dev/null
+++ b/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/apps-detail-header.test.tsx.snap
@@ -0,0 +1,411 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppsDetailHeader should match a snapshot for desktop 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="el-snack-holder"
+      />
+      <div
+        class="el-mb5 el-flex-container"
+      >
+        <div
+          class="app-detail-wrapper"
+        >
+          <img
+            alt="will-test-dev-co-voracious-person"
+            class="el-fade-in app-detail-icon"
+            src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-icon.png"
+          />
+        </div>
+        <div
+          class="el-flex-column el-flex-justify-between el-flex-container"
+        >
+          <div
+            class="el-flex-column el-flex-container"
+          >
+            <h1
+              class="el-has-no-margin el-title"
+            >
+              will-test-dev-co-voracious-person
+            </h1>
+            <p
+              class="el-has-grey-text el-body-text"
+            >
+              Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar
+            </p>
+          </div>
+          <div
+            class="el-flex-container"
+          >
+            <span
+              class="el-mr5 el-intent-success el-icon"
+            >
+              <svg
+                fill="none"
+                height="1em"
+                viewBox="0 0 20 20"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.99995 0C4.48601 0 0 4.48591 0 9.99995C0 15.514 4.48601 20 9.99995 20C15.5139 20 19.9999 15.514 19.9999 9.99995C19.9999 4.48591 15.514 0 9.99995 0ZM15.7421 8.31087L9.45963 14.5933C9.1925 14.8605 8.83741 15.0075 8.45967 15.0075C8.08193 15.0075 7.72684 14.8605 7.45971 14.5933L4.2578 11.3914C3.99067 11.1243 3.84354 10.7692 3.84354 10.3915C3.84354 10.0136 3.99067 9.65852 4.2578 9.39139C4.52483 9.12426 4.87992 8.97713 5.25776 8.97713C5.6355 8.97713 5.9907 9.12426 6.25773 9.3915L8.45957 11.5932L13.742 6.31084C14.0091 6.04371 14.3642 5.89669 14.7419 5.89669C15.1197 5.89669 15.4748 6.04371 15.7419 6.31084C16.2935 6.86242 16.2935 7.7595 15.7421 8.31087Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <p
+              class="el-mr5 el-has-no-margin el-small-text"
+            >
+              Verified by Reapit
+            </p>
+            <div
+              class="el-fade-in app-detail-category-chip"
+            >
+              Category
+            </div>
+            <p
+              class="el-mr5 el-has-bold-text el-has-no-margin el-small-text"
+            >
+              Integration
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="el-snack-holder"
+    />
+    <div
+      class="el-mb5 el-flex-container"
+    >
+      <div
+        class="app-detail-wrapper"
+      >
+        <img
+          alt="will-test-dev-co-voracious-person"
+          class="el-fade-in app-detail-icon"
+          src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-icon.png"
+        />
+      </div>
+      <div
+        class="el-flex-column el-flex-justify-between el-flex-container"
+      >
+        <div
+          class="el-flex-column el-flex-container"
+        >
+          <h1
+            class="el-has-no-margin el-title"
+          >
+            will-test-dev-co-voracious-person
+          </h1>
+          <p
+            class="el-has-grey-text el-body-text"
+          >
+            Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar
+          </p>
+        </div>
+        <div
+          class="el-flex-container"
+        >
+          <span
+            class="el-mr5 el-intent-success el-icon"
+          >
+            <svg
+              fill="none"
+              height="1em"
+              viewBox="0 0 20 20"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.99995 0C4.48601 0 0 4.48591 0 9.99995C0 15.514 4.48601 20 9.99995 20C15.5139 20 19.9999 15.514 19.9999 9.99995C19.9999 4.48591 15.514 0 9.99995 0ZM15.7421 8.31087L9.45963 14.5933C9.1925 14.8605 8.83741 15.0075 8.45967 15.0075C8.08193 15.0075 7.72684 14.8605 7.45971 14.5933L4.2578 11.3914C3.99067 11.1243 3.84354 10.7692 3.84354 10.3915C3.84354 10.0136 3.99067 9.65852 4.2578 9.39139C4.52483 9.12426 4.87992 8.97713 5.25776 8.97713C5.6355 8.97713 5.9907 9.12426 6.25773 9.3915L8.45957 11.5932L13.742 6.31084C14.0091 6.04371 14.3642 5.89669 14.7419 5.89669C15.1197 5.89669 15.4748 6.04371 15.7419 6.31084C16.2935 6.86242 16.2935 7.7595 15.7421 8.31087Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <p
+            class="el-mr5 el-has-no-margin el-small-text"
+          >
+            Verified by Reapit
+          </p>
+          <div
+            class="el-fade-in app-detail-category-chip"
+          >
+            Category
+          </div>
+          <p
+            class="el-mr5 el-has-bold-text el-has-no-margin el-small-text"
+          >
+            Integration
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`AppsDetailHeader should match a snapshot for mobile 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="el-snack-holder"
+      />
+      <div
+        class="el-mb5 el-flex-container"
+      >
+        <div
+          class="el-flex-column el-flex-justify-between el-flex-container"
+        >
+          <div
+            class="el-flex-justify-between el-flex-align-end el-mb3 el-flex-container"
+          >
+            <h2
+              class="el-has-bold-text el-has-no-margin el-subtitle"
+            >
+              will-test-dev-co-voracious-person
+            </h2>
+            <span
+              class="el-mr2 el-intent-success el-icon"
+            >
+              <svg
+                fill="none"
+                height="1em"
+                viewBox="0 0 20 20"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M9.99995 0C4.48601 0 0 4.48591 0 9.99995C0 15.514 4.48601 20 9.99995 20C15.5139 20 19.9999 15.514 19.9999 9.99995C19.9999 4.48591 15.514 0 9.99995 0ZM15.7421 8.31087L9.45963 14.5933C9.1925 14.8605 8.83741 15.0075 8.45967 15.0075C8.08193 15.0075 7.72684 14.8605 7.45971 14.5933L4.2578 11.3914C3.99067 11.1243 3.84354 10.7692 3.84354 10.3915C3.84354 10.0136 3.99067 9.65852 4.2578 9.39139C4.52483 9.12426 4.87992 8.97713 5.25776 8.97713C5.6355 8.97713 5.9907 9.12426 6.25773 9.3915L8.45957 11.5932L13.742 6.31084C14.0091 6.04371 14.3642 5.89669 14.7419 5.89669C15.1197 5.89669 15.4748 6.04371 15.7419 6.31084C16.2935 6.86242 16.2935 7.7595 15.7421 8.31087Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <p
+              class="el-mr2 app-detail-info-line-adjust el-has-no-margin el-small-text"
+            >
+              Verified by Reapit
+            </p>
+          </div>
+          <div
+            class="el-flex-container"
+          >
+            <div
+              class="app-detail-wrapper"
+            >
+              <img
+                alt="will-test-dev-co-voracious-person"
+                class="el-fade-in app-detail-icon"
+                src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-icon.png"
+              />
+            </div>
+            <p
+              class="el-has-grey-text el-small-text"
+            >
+              Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar
+            </p>
+          </div>
+          <div
+            class="el-flex-container"
+          >
+            <div
+              class="el-fade-in app-detail-category-chip"
+            >
+              Category
+            </div>
+            <p
+              class="el-mr5 el-has-bold-text el-has-no-margin el-small-text"
+            >
+              Integration
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="el-snack-holder"
+    />
+    <div
+      class="el-mb5 el-flex-container"
+    >
+      <div
+        class="el-flex-column el-flex-justify-between el-flex-container"
+      >
+        <div
+          class="el-flex-justify-between el-flex-align-end el-mb3 el-flex-container"
+        >
+          <h2
+            class="el-has-bold-text el-has-no-margin el-subtitle"
+          >
+            will-test-dev-co-voracious-person
+          </h2>
+          <span
+            class="el-mr2 el-intent-success el-icon"
+          >
+            <svg
+              fill="none"
+              height="1em"
+              viewBox="0 0 20 20"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.99995 0C4.48601 0 0 4.48591 0 9.99995C0 15.514 4.48601 20 9.99995 20C15.5139 20 19.9999 15.514 19.9999 9.99995C19.9999 4.48591 15.514 0 9.99995 0ZM15.7421 8.31087L9.45963 14.5933C9.1925 14.8605 8.83741 15.0075 8.45967 15.0075C8.08193 15.0075 7.72684 14.8605 7.45971 14.5933L4.2578 11.3914C3.99067 11.1243 3.84354 10.7692 3.84354 10.3915C3.84354 10.0136 3.99067 9.65852 4.2578 9.39139C4.52483 9.12426 4.87992 8.97713 5.25776 8.97713C5.6355 8.97713 5.9907 9.12426 6.25773 9.3915L8.45957 11.5932L13.742 6.31084C14.0091 6.04371 14.3642 5.89669 14.7419 5.89669C15.1197 5.89669 15.4748 6.04371 15.7419 6.31084C16.2935 6.86242 16.2935 7.7595 15.7421 8.31087Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <p
+            class="el-mr2 app-detail-info-line-adjust el-has-no-margin el-small-text"
+          >
+            Verified by Reapit
+          </p>
+        </div>
+        <div
+          class="el-flex-container"
+        >
+          <div
+            class="app-detail-wrapper"
+          >
+            <img
+              alt="will-test-dev-co-voracious-person"
+              class="el-fade-in app-detail-icon"
+              src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-icon.png"
+            />
+          </div>
+          <p
+            class="el-has-grey-text el-small-text"
+          >
+            Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar
+          </p>
+        </div>
+        <div
+          class="el-flex-container"
+        >
+          <div
+            class="el-fade-in app-detail-category-chip"
+          >
+            Category
+          </div>
+          <p
+            class="el-mr5 el-has-bold-text el-has-no-margin el-small-text"
+          >
+            Integration
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/apps-detail.test.tsx.snap b/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/apps-detail.test.tsx.snap
index a52cef1105..987b26f0ca 100644
--- a/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/apps-detail.test.tsx.snap
+++ b/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/apps-detail.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AppsDetail should match a snapshot when loading 1`] = `
+exports[`AppsDetail should match a snapshot for viewport desktop 1`] = `
 Object {
   "asFragment": [Function],
   "baseElement": <body>
@@ -106,7 +106,7 @@ Object {
 }
 `;
 
-exports[`AppsDetail should match a snapshot with data 1`] = `
+exports[`AppsDetail should match a snapshot for viewport mobile 1`] = `
 Object {
   "asFragment": [Function],
   "baseElement": <body>
@@ -125,415 +125,953 @@ Object {
         class="el-page-container"
       >
         <div
-          class="app-detail-back-button"
-        >
-          <span
-            class="el-intent-primary el-icon"
-          >
-            <svg
-              fill="none"
-              height="1em"
-              viewBox="0 0 12 12"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M2 5.5L8 9.39711L8 1.60289L2 5.5Z"
-                fill="currentColor"
-              />
-            </svg>
-          </span>
-        </div>
-        <div
-          class="el-mb5 el-flex-container"
+          class="el-loader-container"
         >
           <div
-            class="app-detail-wrapper"
+            class="el-loader"
           >
-            <img
-              alt="will-test-dev-co-voracious-person"
-              class="el-fade-in app-detail-icon"
-              src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-icon.png"
+            <div
+              class="el-loader-moving-bar"
             />
           </div>
+        </div>
+      </section>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="el-snack-holder"
+    />
+    <section
+      class="el-page-container"
+    >
+      <div
+        class="el-loader-container"
+      >
+        <div
+          class="el-loader"
+        >
           <div
-            class="el-flex-column el-flex-justify-between el-flex-container"
-          >
-            <div
-              class="el-flex-column el-flex-container"
-            >
-              <h1
-                class="el-has-no-margin el-title"
-              >
-                will-test-dev-co-voracious-person
-              </h1>
-              <p
-                class="el-has-grey-text el-body-text"
-              >
-                Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar
-              </p>
-            </div>
-            <div
-              class="el-flex-container"
-            >
-              <span
-                class="el-mr5 el-intent-success el-icon"
-              >
-                <svg
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 20 20"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M9.99995 0C4.48601 0 0 4.48591 0 9.99995C0 15.514 4.48601 20 9.99995 20C15.5139 20 19.9999 15.514 19.9999 9.99995C19.9999 4.48591 15.514 0 9.99995 0ZM15.7421 8.31087L9.45963 14.5933C9.1925 14.8605 8.83741 15.0075 8.45967 15.0075C8.08193 15.0075 7.72684 14.8605 7.45971 14.5933L4.2578 11.3914C3.99067 11.1243 3.84354 10.7692 3.84354 10.3915C3.84354 10.0136 3.99067 9.65852 4.2578 9.39139C4.52483 9.12426 4.87992 8.97713 5.25776 8.97713C5.6355 8.97713 5.9907 9.12426 6.25773 9.3915L8.45957 11.5932L13.742 6.31084C14.0091 6.04371 14.3642 5.89669 14.7419 5.89669C15.1197 5.89669 15.4748 6.04371 15.7419 6.31084C16.2935 6.86242 16.2935 7.7595 15.7421 8.31087Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <p
-                class="el-mr5 el-has-no-margin el-small-text"
-              >
-                Integration Enabled
-              </p>
-              <span
-                class="el-mr5 el-intent-success el-icon"
-              >
-                <svg
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 20 20"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M9.99995 0C4.48601 0 0 4.48591 0 9.99995C0 15.514 4.48601 20 9.99995 20C15.5139 20 19.9999 15.514 19.9999 9.99995C19.9999 4.48591 15.514 0 9.99995 0ZM15.7421 8.31087L9.45963 14.5933C9.1925 14.8605 8.83741 15.0075 8.45967 15.0075C8.08193 15.0075 7.72684 14.8605 7.45971 14.5933L4.2578 11.3914C3.99067 11.1243 3.84354 10.7692 3.84354 10.3915C3.84354 10.0136 3.99067 9.65852 4.2578 9.39139C4.52483 9.12426 4.87992 8.97713 5.25776 8.97713C5.6355 8.97713 5.9907 9.12426 6.25773 9.3915L8.45957 11.5932L13.742 6.31084C14.0091 6.04371 14.3642 5.89669 14.7419 5.89669C15.1197 5.89669 15.4748 6.04371 15.7419 6.31084C16.2935 6.86242 16.2935 7.7595 15.7421 8.31087Z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <p
-                class="el-mr5 el-has-no-margin el-small-text"
-              >
-                Verified by Reapit
-              </p>
-              <div
-                class="el-fade-in app-detail-category-chip"
-              >
-                Category
-              </div>
-              <p
-                class="el-mr5 el-has-bold-text el-has-no-margin el-small-text"
-              >
-                Integration
-              </p>
-            </div>
-          </div>
+            class="el-loader-moving-bar"
+          />
         </div>
+      </div>
+    </section>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`AppsDetail should match a snapshot for viewport superWidescreen 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div
+      id="root"
+    >
+      <div />
+      <div />
+      <div />
+    </div>
+    <div>
+      <div
+        class="el-snack-holder"
+      />
+      <section
+        class="el-page-container"
+      >
         <div
-          class="el-mb11 el-button-group"
+          class="el-loader-container"
         >
           <div
-            class="el-button-group-align-left el-button-group-inner"
+            class="el-loader"
           >
-            <a
-              href="mailto:foo@bar.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <button
-                class="el-intent-low el-button"
-              >
-                Enquire About Integration
-              </button>
-            </a>
+            <div
+              class="el-loader-moving-bar"
+            />
           </div>
         </div>
+      </section>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="el-snack-holder"
+    />
+    <section
+      class="el-page-container"
+    >
+      <div
+        class="el-loader-container"
+      >
         <div
-          class="app-detail-description-grid"
+          class="el-loader"
         >
           <div
-            class="app-detail-description-col-main"
-          >
-            <h2
-              class="el-has-bold-text el-subtitle"
-            >
-              About App
-            </h2>
-            <div>
-              Mock Component
-            </div>
-            <div
-              class="el-button-group"
-            >
-              <div
-                class="el-button-group-inner"
-              >
-                <button
-                  class="el-intent-low el-button"
-                >
-                  <div
-                    class="el-flex-align-center el-flex-container"
-                  >
-                    <span
-                      class="el-mr4 el-intent-primary el-icon"
-                      style="font-size: 1.25em;"
-                    >
-                      <svg
-                        fill="none"
-                        height="1em"
-                        viewBox="0 0 20 16"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M2.82051 0C1.25797 0 0 1.31414 0 2.94643V12.0536C0 13.6859 1.25797 15 2.82051 15H17.1795C18.742 15 20 13.6859 20 12.0536V2.94643C20 1.31414 18.742 0 17.1795 0H2.82051ZM8.20513 5.21825C8.20513 4.68208 8.78322 4.34497 9.24986 4.60902L13.2823 6.89077C13.756 7.15881 13.756 7.84119 13.2823 8.10923L9.24986 10.391C8.78322 10.655 8.20513 10.3179 8.20513 9.78175V5.21825Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </span>
-                    How To Use App
-                  </div>
-                </button>
-                <button
-                  class="el-intent-low el-button"
-                >
-                  <div
-                    class="el-flex-align-center el-flex-container"
-                  >
-                    <span
-                      class="el-mr4 el-intent-primary el-icon"
-                      style="font-size: 1.25em;"
-                    >
-                      <svg
-                        fill="none"
-                        height="1em"
-                        viewBox="0 0 20 16"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M2.82051 0C1.25797 0 0 1.31414 0 2.94643V12.0536C0 13.6859 1.25797 15 2.82051 15H17.1795C18.742 15 20 13.6859 20 12.0536V2.94643C20 1.31414 18.742 0 17.1795 0H2.82051ZM8.20513 5.21825C8.20513 4.68208 8.78322 4.34497 9.24986 4.60902L13.2823 6.89077C13.756 7.15881 13.756 7.84119 13.2823 8.10923L9.24986 10.391C8.78322 10.655 8.20513 10.3179 8.20513 9.78175V5.21825Z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                    </span>
-                    Marketing Presentation
-                  </div>
-                </button>
+            class="el-loader-moving-bar"
+          />
+        </div>
+      </div>
+    </section>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`AppsDetail should match a snapshot for viewport tablet 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div
+      id="root"
+    >
+      <div />
+      <div />
+      <div />
+    </div>
+    <div>
+      <div
+        class="el-snack-holder"
+      />
+      <section
+        class="el-page-container"
+      >
+        <div
+          class="el-loader-container"
+        >
+          <div
+            class="el-loader"
+          >
+            <div
+              class="el-loader-moving-bar"
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="el-snack-holder"
+    />
+    <section
+      class="el-page-container"
+    >
+      <div
+        class="el-loader-container"
+      >
+        <div
+          class="el-loader"
+        >
+          <div
+            class="el-loader-moving-bar"
+          />
+        </div>
+      </div>
+    </section>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`AppsDetail should match a snapshot for viewport widescreen 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div
+      id="root"
+    >
+      <div />
+      <div />
+      <div />
+    </div>
+    <div>
+      <div
+        class="el-snack-holder"
+      />
+      <section
+        class="el-page-container"
+      >
+        <div
+          class="el-loader-container"
+        >
+          <div
+            class="el-loader"
+          >
+            <div
+              class="el-loader-moving-bar"
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="el-snack-holder"
+    />
+    <section
+      class="el-page-container"
+    >
+      <div
+        class="el-loader-container"
+      >
+        <div
+          class="el-loader"
+        >
+          <div
+            class="el-loader-moving-bar"
+          />
+        </div>
+      </div>
+    </section>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`AppsDetail should match a snapshot when loading 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div
+      id="root"
+    >
+      <div />
+      <div />
+      <div />
+    </div>
+    <div>
+      <div
+        class="el-snack-holder"
+      />
+      <section
+        class="el-page-container"
+      >
+        <div
+          class="el-loader-container"
+        >
+          <div
+            class="el-loader"
+          >
+            <div
+              class="el-loader-moving-bar"
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="el-snack-holder"
+    />
+    <section
+      class="el-page-container"
+    >
+      <div
+        class="el-loader-container"
+      >
+        <div
+          class="el-loader"
+        >
+          <div
+            class="el-loader-moving-bar"
+          />
+        </div>
+      </div>
+    </section>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`AppsDetail should match a snapshot with data 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div
+      id="root"
+    >
+      <div />
+      <div />
+      <div />
+    </div>
+    <div>
+      <div
+        class="el-snack-holder"
+      />
+      <section
+        class="el-page-container"
+      >
+        <div
+          class="app-detail-back-button"
+        >
+          <span
+            class="el-intent-primary el-icon"
+          >
+            <svg
+              fill="none"
+              height="1em"
+              viewBox="0 0 12 12"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2 5.5L8 9.39711L8 1.60289L2 5.5Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+        </div>
+        <div
+          class="el-mb5 el-flex-container"
+        >
+          <div
+            class="app-detail-wrapper"
+          >
+            <img
+              alt="will-test-dev-co-voracious-person"
+              class="el-fade-in app-detail-icon"
+              src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-icon.png"
+            />
+          </div>
+          <div
+            class="el-flex-column el-flex-justify-between el-flex-container"
+          >
+            <div
+              class="el-flex-column el-flex-container"
+            >
+              <h1
+                class="el-has-no-margin el-title"
+              >
+                will-test-dev-co-voracious-person
+              </h1>
+              <p
+                class="el-has-grey-text el-body-text"
+              >
+                Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar
+              </p>
+            </div>
+            <div
+              class="el-flex-container"
+            >
+              <span
+                class="el-mr5 el-intent-success el-icon"
+              >
+                <svg
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 20 20"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.99995 0C4.48601 0 0 4.48591 0 9.99995C0 15.514 4.48601 20 9.99995 20C15.5139 20 19.9999 15.514 19.9999 9.99995C19.9999 4.48591 15.514 0 9.99995 0ZM15.7421 8.31087L9.45963 14.5933C9.1925 14.8605 8.83741 15.0075 8.45967 15.0075C8.08193 15.0075 7.72684 14.8605 7.45971 14.5933L4.2578 11.3914C3.99067 11.1243 3.84354 10.7692 3.84354 10.3915C3.84354 10.0136 3.99067 9.65852 4.2578 9.39139C4.52483 9.12426 4.87992 8.97713 5.25776 8.97713C5.6355 8.97713 5.9907 9.12426 6.25773 9.3915L8.45957 11.5932L13.742 6.31084C14.0091 6.04371 14.3642 5.89669 14.7419 5.89669C15.1197 5.89669 15.4748 6.04371 15.7419 6.31084C16.2935 6.86242 16.2935 7.7595 15.7421 8.31087Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <p
+                class="el-mr5 el-has-no-margin el-small-text"
+              >
+                Verified by Reapit
+              </p>
+              <div
+                class="el-fade-in app-detail-category-chip"
+              >
+                Category
               </div>
+              <p
+                class="el-mr5 el-has-bold-text el-has-no-margin el-small-text"
+              >
+                Integration
+              </p>
             </div>
           </div>
+        </div>
+        <div
+          class="el-mb11 el-button-group"
+        >
           <div
-            class="app-detail-description-col-aside"
+            class="el-button-group-align-left el-button-group-inner"
           >
-            <div
-              class="app-detail-image-wrapper"
+            <a
+              href="mailto:foo@bar.com?subject=will-test-dev-co-voracious-person%20Enquiry&body=Dear%20Will Test DevCo%2C%20%0A%0AI%20would%20like%20more%20information%20about%20will-test-dev-co-voracious-person%20featured%20in%20the%20Reapit%20AppMarket%20%0A%0ARegards"
+              rel="noopener noreferrer"
+              target="_blank"
             >
-              <img
-                alt="Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar"
-                class="app-detail-image"
-                src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-screen1ImageUrl.png"
-              />
-            </div>
+              <button
+                class="el-intent-low el-button"
+              >
+                Enquire About Integration
+              </button>
+            </a>
           </div>
         </div>
         <div
-          class="el-mb11 carousel-wrapper"
+          class="apps-detail-content-grid"
         >
           <div
-            class="carousel-grid"
-            style="--ckvo4up-0: 1; --ckvo4up-1: 50.000%; --ckvo4up-2: 0.375rem; --ckvo4up-6: 0.625rem;"
+            class="app-detail-description-grid"
           >
             <div
-              class="carousel-col"
+              class="app-detail-description-col-main"
+            >
+              <h2
+                class="el-has-bold-text el-subtitle"
+              >
+                About App
+              </h2>
+              <div>
+                Mock Component
+              </div>
+              <div
+                class="el-button-group"
+              >
+                <div
+                  class="el-button-group-inner"
+                >
+                  <button
+                    class="el-intent-low el-button"
+                  >
+                    <div
+                      class="el-flex-align-center el-flex-container"
+                    >
+                      <span
+                        class="el-mr4 el-intent-primary el-icon"
+                        style="font-size: 1.25em;"
+                      >
+                        <svg
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 20 16"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M2.82051 0C1.25797 0 0 1.31414 0 2.94643V12.0536C0 13.6859 1.25797 15 2.82051 15H17.1795C18.742 15 20 13.6859 20 12.0536V2.94643C20 1.31414 18.742 0 17.1795 0H2.82051ZM8.20513 5.21825C8.20513 4.68208 8.78322 4.34497 9.24986 4.60902L13.2823 6.89077C13.756 7.15881 13.756 7.84119 13.2823 8.10923L9.24986 10.391C8.78322 10.655 8.20513 10.3179 8.20513 9.78175V5.21825Z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </span>
+                      How To Use App
+                    </div>
+                  </button>
+                  <button
+                    class="el-intent-low el-button"
+                  >
+                    <div
+                      class="el-flex-align-center el-flex-container"
+                    >
+                      <span
+                        class="el-mr4 el-intent-primary el-icon"
+                        style="font-size: 1.25em;"
+                      >
+                        <svg
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 20 16"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M2.82051 0C1.25797 0 0 1.31414 0 2.94643V12.0536C0 13.6859 1.25797 15 2.82051 15H17.1795C18.742 15 20 13.6859 20 12.0536V2.94643C20 1.31414 18.742 0 17.1795 0H2.82051ZM8.20513 5.21825C8.20513 4.68208 8.78322 4.34497 9.24986 4.60902L13.2823 6.89077C13.756 7.15881 13.756 7.84119 13.2823 8.10923L9.24986 10.391C8.78322 10.655 8.20513 10.3179 8.20513 9.78175V5.21825Z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </span>
+                      Marketing Presentation
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="app-detail-description-col-aside"
             >
               <div
                 class="app-detail-image-wrapper"
               >
                 <img
-                  alt="Application Image"
+                  alt="Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar"
                   class="app-detail-image"
-                  src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-screen2ImageUrl.png"
+                  src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-screen1ImageUrl.png"
                 />
               </div>
             </div>
           </div>
-        </div>
-        <div
-          class="el-mb11 el-grid"
-        >
           <div
-            class="el-col"
+            class="el-flex-column el-flex-container"
           >
-            <h2
-              class="el-has-no-margin el-subtitle"
-            >
-              Website
-            </h2>
-            <p
-              class="el-has-grey-text el-has-no-margin el-body-text"
+            <div
+              class="el-flex-column el-flex-container"
             >
-              <a
-                href="https://foo.bar"
-                rel="noopener noreferrer"
-                target="_blank"
+              <div
+                class="app-detail-description-aside-desktop"
               >
-                https://foo.bar
-              </a>
-            </p>
-          </div>
-          <div
-            class="el-col"
-          >
-            <h2
-              class="el-has-no-margin el-subtitle"
-            >
-              Support Email
-            </h2>
-            <p
-              class="el-has-grey-text el-has-no-margin el-body-text"
-            >
-              <a
-                href="mailto:foo@bar.com"
-                rel="noopener noreferrer"
-                target="_blank"
+                <div
+                  class="app-detail-image-wrapper"
+                >
+                  <img
+                    alt="Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar"
+                    class="app-detail-image"
+                    src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-screen1ImageUrl.png"
+                  />
+                </div>
+              </div>
+              <div
+                class="el-mb11 carousel-wrapper"
               >
-                foo@bar.com
-              </a>
-            </p>
-          </div>
-          <div
-            class="el-col"
-          >
-            <h2
-              class="el-has-no-margin el-subtitle"
-            >
-              Telephone
-            </h2>
-            <p
-              class="el-has-grey-text el-has-no-margin el-body-text"
-            >
-              07777777777
-            </p>
-          </div>
-          <div
-            class="el-col"
-          >
-            <h2
-              class="el-has-no-margin el-subtitle"
-            >
-              Terms and Conditions
-            </h2>
-            <p
-              class="el-has-grey-text el-has-no-margin el-body-text"
+                <div
+                  class="carousel-grid"
+                  style="--ckvo4up-0: 1; --ckvo4up-1: 50.000%; --ckvo4up-2: 0.375rem; --ckvo4up-6: 0.625rem;"
+                >
+                  <div
+                    class="carousel-col"
+                  >
+                    <div
+                      class="app-detail-image-wrapper"
+                    >
+                      <img
+                        alt="Application Image"
+                        class="app-detail-image"
+                        src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-screen2ImageUrl.png"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="el-flex-column el-flex-container"
             >
-              <a
-                href="https://foo.bar"
-                rel="noopener noreferrer"
-                target="_blank"
+              <div
+                class="el-mb11 app-detail-support-grid"
               >
-                https://foo.bar
-              </a>
-            </p>
-          </div>
-          <div
-            class="el-col"
-          >
-            <h2
-              class="el-has-no-margin el-subtitle"
-            >
-              Privacy Policy
-            </h2>
-            <p
-              class="el-has-grey-text el-has-no-margin el-body-text"
-            >
-              <a
-                href="https://foo.bar"
-                rel="noopener noreferrer"
-                target="_blank"
+                <div
+                  class="app-detail-support-grid-col"
+                >
+                  <h2
+                    class="el-has-no-margin el-subtitle"
+                  >
+                    Website
+                  </h2>
+                  <p
+                    class="el-has-grey-text el-has-no-margin el-body-text"
+                  >
+                    <a
+                      href="https://foo.bar"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      https://foo.bar
+                    </a>
+                  </p>
+                </div>
+                <div
+                  class="app-detail-support-grid-col"
+                >
+                  <h2
+                    class="el-has-no-margin el-subtitle"
+                  >
+                    Support Email
+                  </h2>
+                  <p
+                    class="el-has-grey-text el-has-no-margin el-body-text"
+                  >
+                    <a
+                      href="mailto:foo@bar.com"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      foo@bar.com
+                    </a>
+                  </p>
+                </div>
+                <div
+                  class="app-detail-support-grid-col"
+                >
+                  <h2
+                    class="el-has-no-margin el-subtitle"
+                  >
+                    Telephone
+                  </h2>
+                  <p
+                    class="el-has-grey-text el-has-no-margin el-body-text"
+                  >
+                    07777777777
+                  </p>
+                </div>
+                <div
+                  class="app-detail-support-grid-col"
+                >
+                  <h2
+                    class="el-has-no-margin el-subtitle"
+                  >
+                    Terms and Conditions
+                  </h2>
+                  <p
+                    class="el-has-grey-text el-has-no-margin el-body-text"
+                  >
+                    <a
+                      href="https://foo.bar"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      https://foo.bar
+                    </a>
+                  </p>
+                </div>
+                <div
+                  class="app-detail-support-grid-col"
+                >
+                  <h2
+                    class="el-has-no-margin el-subtitle"
+                  >
+                    Privacy Policy
+                  </h2>
+                  <p
+                    class="el-has-grey-text el-has-no-margin el-body-text"
+                  >
+                    <a
+                      href="https://foo.bar"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      https://foo.bar
+                    </a>
+                  </p>
+                </div>
+                <div
+                  class="app-detail-support-grid-col"
+                >
+                  <h2
+                    class="el-has-no-margin el-subtitle"
+                  >
+                    Pricing Policy
+                  </h2>
+                  <p
+                    class="el-has-grey-text el-has-no-margin el-body-text"
+                  >
+                    <a
+                      href="https://foo.bar"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      https://foo.bar
+                    </a>
+                  </p>
+                </div>
+              </div>
+              <div
+                class="el-mb11"
               >
-                https://foo.bar
-              </a>
-            </p>
-          </div>
-          <div
-            class="el-col"
-          >
-            <h2
-              class="el-has-no-margin el-subtitle"
-            >
-              Pricing Policy
-            </h2>
-            <p
-              class="el-has-grey-text el-has-no-margin el-body-text"
-            >
-              <a
-                href="https://foo.bar"
-                rel="noopener noreferrer"
-                target="_blank"
+                <h2
+                  class="el-has-bold-text el-subtitle"
+                >
+                  About Developer
+                </h2>
+                <p
+                  class="el-has-grey-text el-has-no-margin el-body-text"
+                >
+                  All about us in a number of words
+                </p>
+              </div>
+              <div
+                class="el-mb11"
               >
-                https://foo.bar
-              </a>
-            </p>
-          </div>
-        </div>
-        <div
-          class="el-mb11"
-        >
-          <h2
-            class="el-has-bold-text el-subtitle"
-          >
-            About Developer
-          </h2>
-          <p
-            class="el-has-grey-text el-has-no-margin el-body-text"
-          >
-            All about us
-          </p>
-        </div>
-        <div
-          class="el-mb11"
-        >
-          <h2
-            class="el-has-bold-text el-subtitle"
-          >
-            Permissions
-          </h2>
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read applicants
-          </div>
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read property images
-          </div>
-          <div
-            class="app-detail-permission-chip"
-          >
-            Read properties
-          </div>
-        </div>
-        <div
-          class="el-mb11"
-        >
-          <h2
-            class="el-has-bold-text el-subtitle"
-          >
-            AgencyCloud Integration
-          </h2>
-          <div
-            class="app-detail-permission-chip"
-          >
-            Applicant
-          </div>
-          <div
-            class="app-detail-permission-chip"
-          >
-            Applicant Export
+                <h2
+                  class="el-has-bold-text el-subtitle"
+                >
+                  Permissions
+                </h2>
+                <div
+                  class="app-detail-permission-chip"
+                >
+                  Read applicants
+                </div>
+                <div
+                  class="app-detail-permission-chip"
+                >
+                  Read property images
+                </div>
+                <div
+                  class="app-detail-permission-chip"
+                >
+                  Read properties
+                </div>
+              </div>
+              <div
+                class="el-mb11"
+              >
+                <h2
+                  class="el-has-bold-text el-subtitle"
+                >
+                  AgencyCloud Integration
+                </h2>
+                <div
+                  class="app-detail-permission-chip"
+                >
+                  Applicant
+                </div>
+                <div
+                  class="app-detail-permission-chip"
+                >
+                  Applicant Export
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </section>
@@ -598,27 +1136,6 @@ Object {
           <div
             class="el-flex-container"
           >
-            <span
-              class="el-mr5 el-intent-success el-icon"
-            >
-              <svg
-                fill="none"
-                height="1em"
-                viewBox="0 0 20 20"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9.99995 0C4.48601 0 0 4.48591 0 9.99995C0 15.514 4.48601 20 9.99995 20C15.5139 20 19.9999 15.514 19.9999 9.99995C19.9999 4.48591 15.514 0 9.99995 0ZM15.7421 8.31087L9.45963 14.5933C9.1925 14.8605 8.83741 15.0075 8.45967 15.0075C8.08193 15.0075 7.72684 14.8605 7.45971 14.5933L4.2578 11.3914C3.99067 11.1243 3.84354 10.7692 3.84354 10.3915C3.84354 10.0136 3.99067 9.65852 4.2578 9.39139C4.52483 9.12426 4.87992 8.97713 5.25776 8.97713C5.6355 8.97713 5.9907 9.12426 6.25773 9.3915L8.45957 11.5932L13.742 6.31084C14.0091 6.04371 14.3642 5.89669 14.7419 5.89669C15.1197 5.89669 15.4748 6.04371 15.7419 6.31084C16.2935 6.86242 16.2935 7.7595 15.7421 8.31087Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-            <p
-              class="el-mr5 el-has-no-margin el-small-text"
-            >
-              Integration Enabled
-            </p>
             <span
               class="el-mr5 el-intent-success el-icon"
             >
@@ -660,7 +1177,7 @@ Object {
           class="el-button-group-align-left el-button-group-inner"
         >
           <a
-            href="mailto:foo@bar.com"
+            href="mailto:foo@bar.com?subject=will-test-dev-co-voracious-person%20Enquiry&body=Dear%20Will Test DevCo%2C%20%0A%0AI%20would%20like%20more%20information%20about%20will-test-dev-co-voracious-person%20featured%20in%20the%20Reapit%20AppMarket%20%0A%0ARegards"
             rel="noopener noreferrer"
             target="_blank"
           >
@@ -673,289 +1190,318 @@ Object {
         </div>
       </div>
       <div
-        class="app-detail-description-grid"
+        class="apps-detail-content-grid"
       >
         <div
-          class="app-detail-description-col-main"
+          class="app-detail-description-grid"
         >
-          <h2
-            class="el-has-bold-text el-subtitle"
-          >
-            About App
-          </h2>
-          <div>
-            Mock Component
-          </div>
           <div
-            class="el-button-group"
+            class="app-detail-description-col-main"
           >
+            <h2
+              class="el-has-bold-text el-subtitle"
+            >
+              About App
+            </h2>
+            <div>
+              Mock Component
+            </div>
             <div
-              class="el-button-group-inner"
+              class="el-button-group"
             >
-              <button
-                class="el-intent-low el-button"
+              <div
+                class="el-button-group-inner"
               >
-                <div
-                  class="el-flex-align-center el-flex-container"
+                <button
+                  class="el-intent-low el-button"
                 >
-                  <span
-                    class="el-mr4 el-intent-primary el-icon"
-                    style="font-size: 1.25em;"
+                  <div
+                    class="el-flex-align-center el-flex-container"
                   >
-                    <svg
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 20 16"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <span
+                      class="el-mr4 el-intent-primary el-icon"
+                      style="font-size: 1.25em;"
                     >
-                      <path
-                        d="M2.82051 0C1.25797 0 0 1.31414 0 2.94643V12.0536C0 13.6859 1.25797 15 2.82051 15H17.1795C18.742 15 20 13.6859 20 12.0536V2.94643C20 1.31414 18.742 0 17.1795 0H2.82051ZM8.20513 5.21825C8.20513 4.68208 8.78322 4.34497 9.24986 4.60902L13.2823 6.89077C13.756 7.15881 13.756 7.84119 13.2823 8.10923L9.24986 10.391C8.78322 10.655 8.20513 10.3179 8.20513 9.78175V5.21825Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </span>
-                  How To Use App
-                </div>
-              </button>
-              <button
-                class="el-intent-low el-button"
-              >
-                <div
-                  class="el-flex-align-center el-flex-container"
+                      <svg
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 20 16"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M2.82051 0C1.25797 0 0 1.31414 0 2.94643V12.0536C0 13.6859 1.25797 15 2.82051 15H17.1795C18.742 15 20 13.6859 20 12.0536V2.94643C20 1.31414 18.742 0 17.1795 0H2.82051ZM8.20513 5.21825C8.20513 4.68208 8.78322 4.34497 9.24986 4.60902L13.2823 6.89077C13.756 7.15881 13.756 7.84119 13.2823 8.10923L9.24986 10.391C8.78322 10.655 8.20513 10.3179 8.20513 9.78175V5.21825Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
+                    How To Use App
+                  </div>
+                </button>
+                <button
+                  class="el-intent-low el-button"
                 >
-                  <span
-                    class="el-mr4 el-intent-primary el-icon"
-                    style="font-size: 1.25em;"
+                  <div
+                    class="el-flex-align-center el-flex-container"
                   >
-                    <svg
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 20 16"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <span
+                      class="el-mr4 el-intent-primary el-icon"
+                      style="font-size: 1.25em;"
                     >
-                      <path
-                        d="M2.82051 0C1.25797 0 0 1.31414 0 2.94643V12.0536C0 13.6859 1.25797 15 2.82051 15H17.1795C18.742 15 20 13.6859 20 12.0536V2.94643C20 1.31414 18.742 0 17.1795 0H2.82051ZM8.20513 5.21825C8.20513 4.68208 8.78322 4.34497 9.24986 4.60902L13.2823 6.89077C13.756 7.15881 13.756 7.84119 13.2823 8.10923L9.24986 10.391C8.78322 10.655 8.20513 10.3179 8.20513 9.78175V5.21825Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </span>
-                  Marketing Presentation
-                </div>
-              </button>
+                      <svg
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 20 16"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M2.82051 0C1.25797 0 0 1.31414 0 2.94643V12.0536C0 13.6859 1.25797 15 2.82051 15H17.1795C18.742 15 20 13.6859 20 12.0536V2.94643C20 1.31414 18.742 0 17.1795 0H2.82051ZM8.20513 5.21825C8.20513 4.68208 8.78322 4.34497 9.24986 4.60902L13.2823 6.89077C13.756 7.15881 13.756 7.84119 13.2823 8.10923L9.24986 10.391C8.78322 10.655 8.20513 10.3179 8.20513 9.78175V5.21825Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
+                    Marketing Presentation
+                  </div>
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="app-detail-description-col-aside"
-        >
-          <div
-            class="app-detail-image-wrapper"
-          >
-            <img
-              alt="Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar"
-              class="app-detail-image"
-              src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-screen1ImageUrl.png"
-            />
-          </div>
-        </div>
-      </div>
-      <div
-        class="el-mb11 carousel-wrapper"
-      >
-        <div
-          class="carousel-grid"
-          style="--ckvo4up-0: 1; --ckvo4up-1: 50.000%; --ckvo4up-2: 0.375rem; --ckvo4up-6: 0.625rem;"
-        >
           <div
-            class="carousel-col"
+            class="app-detail-description-col-aside"
           >
             <div
               class="app-detail-image-wrapper"
             >
               <img
-                alt="Application Image"
+                alt="Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar"
                 class="app-detail-image"
-                src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-screen2ImageUrl.png"
+                src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-screen1ImageUrl.png"
               />
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="el-mb11 el-grid"
-      >
         <div
-          class="el-col"
+          class="el-flex-column el-flex-container"
         >
-          <h2
-            class="el-has-no-margin el-subtitle"
-          >
-            Website
-          </h2>
-          <p
-            class="el-has-grey-text el-has-no-margin el-body-text"
+          <div
+            class="el-flex-column el-flex-container"
           >
-            <a
-              href="https://foo.bar"
-              rel="noopener noreferrer"
-              target="_blank"
+            <div
+              class="app-detail-description-aside-desktop"
             >
-              https://foo.bar
-            </a>
-          </p>
-        </div>
-        <div
-          class="el-col"
-        >
-          <h2
-            class="el-has-no-margin el-subtitle"
-          >
-            Support Email
-          </h2>
-          <p
-            class="el-has-grey-text el-has-no-margin el-body-text"
-          >
-            <a
-              href="mailto:foo@bar.com"
-              rel="noopener noreferrer"
-              target="_blank"
+              <div
+                class="app-detail-image-wrapper"
+              >
+                <img
+                  alt="Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar Foo bar"
+                  class="app-detail-image"
+                  src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-screen1ImageUrl.png"
+                />
+              </div>
+            </div>
+            <div
+              class="el-mb11 carousel-wrapper"
             >
-              foo@bar.com
-            </a>
-          </p>
-        </div>
-        <div
-          class="el-col"
-        >
-          <h2
-            class="el-has-no-margin el-subtitle"
-          >
-            Telephone
-          </h2>
-          <p
-            class="el-has-grey-text el-has-no-margin el-body-text"
-          >
-            07777777777
-          </p>
-        </div>
-        <div
-          class="el-col"
-        >
-          <h2
-            class="el-has-no-margin el-subtitle"
-          >
-            Terms and Conditions
-          </h2>
-          <p
-            class="el-has-grey-text el-has-no-margin el-body-text"
+              <div
+                class="carousel-grid"
+                style="--ckvo4up-0: 1; --ckvo4up-1: 50.000%; --ckvo4up-2: 0.375rem; --ckvo4up-6: 0.625rem;"
+              >
+                <div
+                  class="carousel-col"
+                >
+                  <div
+                    class="app-detail-image-wrapper"
+                  >
+                    <img
+                      alt="Application Image"
+                      class="app-detail-image"
+                      src="https://reapit-marketplace-app-media-dev.s3.eu-west-2.amazonaws.com/Online-Check-List-screen2ImageUrl.png"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="el-flex-column el-flex-container"
           >
-            <a
-              href="https://foo.bar"
-              rel="noopener noreferrer"
-              target="_blank"
+            <div
+              class="el-mb11 app-detail-support-grid"
             >
-              https://foo.bar
-            </a>
-          </p>
-        </div>
-        <div
-          class="el-col"
-        >
-          <h2
-            class="el-has-no-margin el-subtitle"
-          >
-            Privacy Policy
-          </h2>
-          <p
-            class="el-has-grey-text el-has-no-margin el-body-text"
-          >
-            <a
-              href="https://foo.bar"
-              rel="noopener noreferrer"
-              target="_blank"
+              <div
+                class="app-detail-support-grid-col"
+              >
+                <h2
+                  class="el-has-no-margin el-subtitle"
+                >
+                  Website
+                </h2>
+                <p
+                  class="el-has-grey-text el-has-no-margin el-body-text"
+                >
+                  <a
+                    href="https://foo.bar"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    https://foo.bar
+                  </a>
+                </p>
+              </div>
+              <div
+                class="app-detail-support-grid-col"
+              >
+                <h2
+                  class="el-has-no-margin el-subtitle"
+                >
+                  Support Email
+                </h2>
+                <p
+                  class="el-has-grey-text el-has-no-margin el-body-text"
+                >
+                  <a
+                    href="mailto:foo@bar.com"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    foo@bar.com
+                  </a>
+                </p>
+              </div>
+              <div
+                class="app-detail-support-grid-col"
+              >
+                <h2
+                  class="el-has-no-margin el-subtitle"
+                >
+                  Telephone
+                </h2>
+                <p
+                  class="el-has-grey-text el-has-no-margin el-body-text"
+                >
+                  07777777777
+                </p>
+              </div>
+              <div
+                class="app-detail-support-grid-col"
+              >
+                <h2
+                  class="el-has-no-margin el-subtitle"
+                >
+                  Terms and Conditions
+                </h2>
+                <p
+                  class="el-has-grey-text el-has-no-margin el-body-text"
+                >
+                  <a
+                    href="https://foo.bar"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    https://foo.bar
+                  </a>
+                </p>
+              </div>
+              <div
+                class="app-detail-support-grid-col"
+              >
+                <h2
+                  class="el-has-no-margin el-subtitle"
+                >
+                  Privacy Policy
+                </h2>
+                <p
+                  class="el-has-grey-text el-has-no-margin el-body-text"
+                >
+                  <a
+                    href="https://foo.bar"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    https://foo.bar
+                  </a>
+                </p>
+              </div>
+              <div
+                class="app-detail-support-grid-col"
+              >
+                <h2
+                  class="el-has-no-margin el-subtitle"
+                >
+                  Pricing Policy
+                </h2>
+                <p
+                  class="el-has-grey-text el-has-no-margin el-body-text"
+                >
+                  <a
+                    href="https://foo.bar"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    https://foo.bar
+                  </a>
+                </p>
+              </div>
+            </div>
+            <div
+              class="el-mb11"
             >
-              https://foo.bar
-            </a>
-          </p>
-        </div>
-        <div
-          class="el-col"
-        >
-          <h2
-            class="el-has-no-margin el-subtitle"
-          >
-            Pricing Policy
-          </h2>
-          <p
-            class="el-has-grey-text el-has-no-margin el-body-text"
-          >
-            <a
-              href="https://foo.bar"
-              rel="noopener noreferrer"
-              target="_blank"
+              <h2
+                class="el-has-bold-text el-subtitle"
+              >
+                About Developer
+              </h2>
+              <p
+                class="el-has-grey-text el-has-no-margin el-body-text"
+              >
+                All about us in a number of words
+              </p>
+            </div>
+            <div
+              class="el-mb11"
             >
-              https://foo.bar
-            </a>
-          </p>
-        </div>
-      </div>
-      <div
-        class="el-mb11"
-      >
-        <h2
-          class="el-has-bold-text el-subtitle"
-        >
-          About Developer
-        </h2>
-        <p
-          class="el-has-grey-text el-has-no-margin el-body-text"
-        >
-          All about us
-        </p>
-      </div>
-      <div
-        class="el-mb11"
-      >
-        <h2
-          class="el-has-bold-text el-subtitle"
-        >
-          Permissions
-        </h2>
-        <div
-          class="app-detail-permission-chip"
-        >
-          Read applicants
-        </div>
-        <div
-          class="app-detail-permission-chip"
-        >
-          Read property images
-        </div>
-        <div
-          class="app-detail-permission-chip"
-        >
-          Read properties
-        </div>
-      </div>
-      <div
-        class="el-mb11"
-      >
-        <h2
-          class="el-has-bold-text el-subtitle"
-        >
-          AgencyCloud Integration
-        </h2>
-        <div
-          class="app-detail-permission-chip"
-        >
-          Applicant
-        </div>
-        <div
-          class="app-detail-permission-chip"
-        >
-          Applicant Export
+              <h2
+                class="el-has-bold-text el-subtitle"
+              >
+                Permissions
+              </h2>
+              <div
+                class="app-detail-permission-chip"
+              >
+                Read applicants
+              </div>
+              <div
+                class="app-detail-permission-chip"
+              >
+                Read property images
+              </div>
+              <div
+                class="app-detail-permission-chip"
+              >
+                Read properties
+              </div>
+            </div>
+            <div
+              class="el-mb11"
+            >
+              <h2
+                class="el-has-bold-text el-subtitle"
+              >
+                AgencyCloud Integration
+              </h2>
+              <div
+                class="app-detail-permission-chip"
+              >
+                Applicant
+              </div>
+              <div
+                class="app-detail-permission-chip"
+              >
+                Applicant Export
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </section>
diff --git a/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/index.test.tsx.snap b/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/index.test.tsx.snap
index 54c71e888c..4e1f14bead 100644
--- a/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/app-market/src/components/apps-detail/__tests__/__snapshots__/index.test.tsx.snap
@@ -103,132 +103,212 @@ Object {
           />
         </div>
         <div
-          class="app-detail-description-grid"
+          class="apps-detail-content-grid"
         >
           <div
-            class="app-detail-description-col-main"
+            class="app-detail-description-grid"
           >
-            <h2
-              class="el-has-bold-text el-subtitle"
-            >
-              About App
-            </h2>
             <div
-              class="html-render"
-            />
-          </div>
-          <div
-            class="app-detail-description-col-aside"
-          >
+              class="app-detail-description-col-main"
+            >
+              <h2
+                class="el-has-bold-text el-subtitle"
+              >
+                About App
+              </h2>
+              <div
+                class="html-render"
+              />
+            </div>
             <div
-              class="app-detail-image-wrapper"
+              class="app-detail-description-col-aside"
             >
               <div
-                class="el-placeholder-image-wrapper"
+                class="app-detail-image-wrapper"
               >
                 <div
-                  class="el-mb7 el-placeholder-image"
-                  style="font-size: 7.5em;"
+                  class="el-placeholder-image-wrapper"
                 >
-                  <svg
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 183 200"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="el-mb7 el-placeholder-image"
+                    style="font-size: 7.5em;"
                   >
-                    <ellipse
-                      cx="90.7692"
-                      cy="108.718"
-                      fill="#F2F2F2"
-                      rx="90.7692"
-                      ry="91.2821"
-                    />
-                    <path
-                      d="M149.769 59.9736L162.678 51.715C158.49 46.4795 153.74 41.7118 148.515 37.5054L136.008 47.114C141.106 50.822 145.733 55.1401 149.769 59.9736Z"
-                      fill="#C4C4C4"
-                    />
-                    <path
-                      d="M161.555 79.4094L176.145 74.8695C173.889 69.2241 171.087 63.8571 167.804 58.8311L154.969 67.0407C157.522 70.9321 159.74 75.0652 161.554 79.4094H161.555Z"
-                      fill="#C4C4C4"
-                    />
-                    <path
-                      d="M91.3348 184.757C49.3765 184.757 15.2469 150.625 15.2469 108.665C15.2469 66.7067 49.3784 32.5772 91.3348 32.5772C104.677 32.5772 117.219 36.039 128.135 42.0927L141.098 32.1368C126.771 22.7881 109.682 17.3311 91.3344 17.3311C40.9719 17.3311 0 58.3029 0 108.665C0 159.028 40.9719 200 91.3344 200C126.598 200 157.237 179.899 172.448 150.569H154.803C141.17 171.148 117.818 184.757 91.3352 184.757L91.3348 184.757Z"
-                      fill="#C4C4C4"
-                    />
-                    <path
-                      d="M167.415 108.665H182.658C182.658 107.277 182.615 105.897 182.552 104.526H167.297C167.373 105.897 167.415 107.275 167.415 108.665H167.415Z"
-                      fill="#C4C4C4"
-                    />
-                    <path
-                      d="M166.321 95.7561H181.752C181.14 91.4518 180.225 87.2501 179.032 83.1611L164.477 87.6916C165.23 90.3247 165.851 93.0144 166.321 95.7561H166.321Z"
-                      fill="#C4C4C4"
-                    />
-                    <path
-                      d="M125.332 161.312H60.6905C53.8033 161.296 48.2199 155.712 48.2031 148.825V12.4873C48.2199 5.60022 53.8033 0.0167671 60.6905 0H125.332C132.219 0.0167671 137.803 5.60022 137.819 12.4873V148.829C137.798 155.716 132.219 161.296 125.332 161.312Z"
-                      fill="#DFDFDF"
-                    />
-                    <path
-                      d="M125.332 161.312H60.6904C53.8033 161.295 48.2199 155.712 48.2031 148.825V133.008C89.3787 133.008 101.178 133.008 137.819 133.008V148.829C137.798 155.716 132.219 161.295 125.332 161.312Z"
-                      fill="#C4C4C4"
-                    />
-                    <path
-                      d="M99.4303 70.1607C98.0834 61.6268 90.6094 55.0769 81.6156 55.0769C78.2322 55.0769 74.981 56.0035 72.1611 57.7318C67.871 50.5949 60.1476 46.1538 51.5675 46.1538C38.3129 46.1538 27.529 56.8284 27.529 69.9487C27.529 70.03 27.529 70.1143 27.5321 70.1956C19.0134 71.6159 12.3047 78.9675 12.3047 87.7948C12.3047 97.6358 20.5921 105.641 30.5339 105.641H96.6396C106.581 105.641 114.869 97.6358 114.869 87.7948C114.869 78.8922 108.052 71.494 99.4303 70.1607Z"
-                      fill="white"
-                    />
-                  </svg>
+                    <svg
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 183 200"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <ellipse
+                        cx="90.7692"
+                        cy="108.718"
+                        fill="#F2F2F2"
+                        rx="90.7692"
+                        ry="91.2821"
+                      />
+                      <path
+                        d="M149.769 59.9736L162.678 51.715C158.49 46.4795 153.74 41.7118 148.515 37.5054L136.008 47.114C141.106 50.822 145.733 55.1401 149.769 59.9736Z"
+                        fill="#C4C4C4"
+                      />
+                      <path
+                        d="M161.555 79.4094L176.145 74.8695C173.889 69.2241 171.087 63.8571 167.804 58.8311L154.969 67.0407C157.522 70.9321 159.74 75.0652 161.554 79.4094H161.555Z"
+                        fill="#C4C4C4"
+                      />
+                      <path
+                        d="M91.3348 184.757C49.3765 184.757 15.2469 150.625 15.2469 108.665C15.2469 66.7067 49.3784 32.5772 91.3348 32.5772C104.677 32.5772 117.219 36.039 128.135 42.0927L141.098 32.1368C126.771 22.7881 109.682 17.3311 91.3344 17.3311C40.9719 17.3311 0 58.3029 0 108.665C0 159.028 40.9719 200 91.3344 200C126.598 200 157.237 179.899 172.448 150.569H154.803C141.17 171.148 117.818 184.757 91.3352 184.757L91.3348 184.757Z"
+                        fill="#C4C4C4"
+                      />
+                      <path
+                        d="M167.415 108.665H182.658C182.658 107.277 182.615 105.897 182.552 104.526H167.297C167.373 105.897 167.415 107.275 167.415 108.665H167.415Z"
+                        fill="#C4C4C4"
+                      />
+                      <path
+                        d="M166.321 95.7561H181.752C181.14 91.4518 180.225 87.2501 179.032 83.1611L164.477 87.6916C165.23 90.3247 165.851 93.0144 166.321 95.7561H166.321Z"
+                        fill="#C4C4C4"
+                      />
+                      <path
+                        d="M125.332 161.312H60.6905C53.8033 161.296 48.2199 155.712 48.2031 148.825V12.4873C48.2199 5.60022 53.8033 0.0167671 60.6905 0H125.332C132.219 0.0167671 137.803 5.60022 137.819 12.4873V148.829C137.798 155.716 132.219 161.296 125.332 161.312Z"
+                        fill="#DFDFDF"
+                      />
+                      <path
+                        d="M125.332 161.312H60.6904C53.8033 161.295 48.2199 155.712 48.2031 148.825V133.008C89.3787 133.008 101.178 133.008 137.819 133.008V148.829C137.798 155.716 132.219 161.295 125.332 161.312Z"
+                        fill="#C4C4C4"
+                      />
+                      <path
+                        d="M99.4303 70.1607C98.0834 61.6268 90.6094 55.0769 81.6156 55.0769C78.2322 55.0769 74.981 56.0035 72.1611 57.7318C67.871 50.5949 60.1476 46.1538 51.5675 46.1538C38.3129 46.1538 27.529 56.8284 27.529 69.9487C27.529 70.03 27.529 70.1143 27.5321 70.1956C19.0134 71.6159 12.3047 78.9675 12.3047 87.7948C12.3047 97.6358 20.5921 105.641 30.5339 105.641H96.6396C106.581 105.641 114.869 97.6358 114.869 87.7948C114.869 78.8922 108.052 71.494 99.4303 70.1607Z"
+                        fill="white"
+                      />
+                    </svg>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <div
-          class="el-mb11 carousel-wrapper"
-        >
           <div
-            class="carousel-grid"
-            style="--ckvo4up-0: 0; --ckvo4up-1: 50.000%; --ckvo4up-2: 0.375rem; --ckvo4up-6: 0.625rem;"
-          />
-        </div>
-        <div
-          class="el-mb11 el-grid"
-        >
-          <div
-            class="el-col"
+            class="el-flex-column el-flex-container"
           >
-            <h2
-              class="el-has-no-margin el-subtitle"
+            <div
+              class="el-flex-column el-flex-container"
             >
-              Pricing Policy
-            </h2>
-            <p
-              class="el-has-grey-text el-has-no-margin el-body-text"
+              <div
+                class="app-detail-description-aside-desktop"
+              >
+                <div
+                  class="app-detail-image-wrapper"
+                >
+                  <div
+                    class="el-placeholder-image-wrapper"
+                  >
+                    <div
+                      class="el-mb7 el-placeholder-image"
+                      style="font-size: 7.5em;"
+                    >
+                      <svg
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 183 200"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <ellipse
+                          cx="90.7692"
+                          cy="108.718"
+                          fill="#F2F2F2"
+                          rx="90.7692"
+                          ry="91.2821"
+                        />
+                        <path
+                          d="M149.769 59.9736L162.678 51.715C158.49 46.4795 153.74 41.7118 148.515 37.5054L136.008 47.114C141.106 50.822 145.733 55.1401 149.769 59.9736Z"
+                          fill="#C4C4C4"
+                        />
+                        <path
+                          d="M161.555 79.4094L176.145 74.8695C173.889 69.2241 171.087 63.8571 167.804 58.8311L154.969 67.0407C157.522 70.9321 159.74 75.0652 161.554 79.4094H161.555Z"
+                          fill="#C4C4C4"
+                        />
+                        <path
+                          d="M91.3348 184.757C49.3765 184.757 15.2469 150.625 15.2469 108.665C15.2469 66.7067 49.3784 32.5772 91.3348 32.5772C104.677 32.5772 117.219 36.039 128.135 42.0927L141.098 32.1368C126.771 22.7881 109.682 17.3311 91.3344 17.3311C40.9719 17.3311 0 58.3029 0 108.665C0 159.028 40.9719 200 91.3344 200C126.598 200 157.237 179.899 172.448 150.569H154.803C141.17 171.148 117.818 184.757 91.3352 184.757L91.3348 184.757Z"
+                          fill="#C4C4C4"
+                        />
+                        <path
+                          d="M167.415 108.665H182.658C182.658 107.277 182.615 105.897 182.552 104.526H167.297C167.373 105.897 167.415 107.275 167.415 108.665H167.415Z"
+                          fill="#C4C4C4"
+                        />
+                        <path
+                          d="M166.321 95.7561H181.752C181.14 91.4518 180.225 87.2501 179.032 83.1611L164.477 87.6916C165.23 90.3247 165.851 93.0144 166.321 95.7561H166.321Z"
+                          fill="#C4C4C4"
+                        />
+                        <path
+                          d="M125.332 161.312H60.6905C53.8033 161.296 48.2199 155.712 48.2031 148.825V12.4873C48.2199 5.60022 53.8033 0.0167671 60.6905 0H125.332C132.219 0.0167671 137.803 5.60022 137.819 12.4873V148.829C137.798 155.716 132.219 161.296 125.332 161.312Z"
+                          fill="#DFDFDF"
+                        />
+                        <path
+                          d="M125.332 161.312H60.6904C53.8033 161.295 48.2199 155.712 48.2031 148.825V133.008C89.3787 133.008 101.178 133.008 137.819 133.008V148.829C137.798 155.716 132.219 161.295 125.332 161.312Z"
+                          fill="#C4C4C4"
+                        />
+                        <path
+                          d="M99.4303 70.1607C98.0834 61.6268 90.6094 55.0769 81.6156 55.0769C78.2322 55.0769 74.981 56.0035 72.1611 57.7318C67.871 50.5949 60.1476 46.1538 51.5675 46.1538C38.3129 46.1538 27.529 56.8284 27.529 69.9487C27.529 70.03 27.529 70.1143 27.5321 70.1956C19.0134 71.6159 12.3047 78.9675 12.3047 87.7948C12.3047 97.6358 20.5921 105.641 30.5339 105.641H96.6396C106.581 105.641 114.869 97.6358 114.869 87.7948C114.869 78.8922 108.052 71.494 99.4303 70.1607Z"
+                          fill="white"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="el-mb11 carousel-wrapper"
+              >
+                <div
+                  class="carousel-grid"
+                  style="--ckvo4up-0: 0; --ckvo4up-1: 50.000%; --ckvo4up-2: 0.375rem; --ckvo4up-6: 0.625rem;"
+                />
+              </div>
+            </div>
+            <div
+              class="el-flex-column el-flex-container"
             >
-              Free
-            </p>
+              <div
+                class="el-mb11 app-detail-support-grid"
+              >
+                <div
+                  class="app-detail-support-grid-col"
+                >
+                  <h2
+                    class="el-has-no-margin el-subtitle"
+                  >
+                    Pricing Policy
+                  </h2>
+                  <p
+                    class="el-has-grey-text el-has-no-margin el-body-text"
+                  >
+                    Free
+                  </p>
+                </div>
+              </div>
+              <div
+                class="el-mb11"
+              >
+                <h2
+                  class="el-has-bold-text el-subtitle"
+                >
+                  About Developer
+                </h2>
+                <p
+                  class="el-has-grey-text el-has-no-margin el-body-text"
+                />
+              </div>
+              <div
+                class="el-mb11"
+              >
+                <h2
+                  class="el-has-bold-text el-subtitle"
+                >
+                  Permissions
+                </h2>
+              </div>
+            </div>
           </div>
         </div>
-        <div
-          class="el-mb11"
-        >
-          <h2
-            class="el-has-bold-text el-subtitle"
-          >
-            About Developer
-          </h2>
-          <p
-            class="el-has-grey-text el-has-no-margin el-body-text"
-          />
-        </div>
-        <div
-          class="el-mb11"
-        >
-          <h2
-            class="el-has-bold-text el-subtitle"
-          >
-            Permissions
-          </h2>
-        </div>
       </section>
     </div>
   </body>,
@@ -331,132 +411,212 @@ Object {
         />
       </div>
       <div
-        class="app-detail-description-grid"
+        class="apps-detail-content-grid"
       >
         <div
-          class="app-detail-description-col-main"
+          class="app-detail-description-grid"
         >
-          <h2
-            class="el-has-bold-text el-subtitle"
-          >
-            About App
-          </h2>
           <div
-            class="html-render"
-          />
-        </div>
-        <div
-          class="app-detail-description-col-aside"
-        >
+            class="app-detail-description-col-main"
+          >
+            <h2
+              class="el-has-bold-text el-subtitle"
+            >
+              About App
+            </h2>
+            <div
+              class="html-render"
+            />
+          </div>
           <div
-            class="app-detail-image-wrapper"
+            class="app-detail-description-col-aside"
           >
             <div
-              class="el-placeholder-image-wrapper"
+              class="app-detail-image-wrapper"
             >
               <div
-                class="el-mb7 el-placeholder-image"
-                style="font-size: 7.5em;"
+                class="el-placeholder-image-wrapper"
               >
-                <svg
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 183 200"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="el-mb7 el-placeholder-image"
+                  style="font-size: 7.5em;"
                 >
-                  <ellipse
-                    cx="90.7692"
-                    cy="108.718"
-                    fill="#F2F2F2"
-                    rx="90.7692"
-                    ry="91.2821"
-                  />
-                  <path
-                    d="M149.769 59.9736L162.678 51.715C158.49 46.4795 153.74 41.7118 148.515 37.5054L136.008 47.114C141.106 50.822 145.733 55.1401 149.769 59.9736Z"
-                    fill="#C4C4C4"
-                  />
-                  <path
-                    d="M161.555 79.4094L176.145 74.8695C173.889 69.2241 171.087 63.8571 167.804 58.8311L154.969 67.0407C157.522 70.9321 159.74 75.0652 161.554 79.4094H161.555Z"
-                    fill="#C4C4C4"
-                  />
-                  <path
-                    d="M91.3348 184.757C49.3765 184.757 15.2469 150.625 15.2469 108.665C15.2469 66.7067 49.3784 32.5772 91.3348 32.5772C104.677 32.5772 117.219 36.039 128.135 42.0927L141.098 32.1368C126.771 22.7881 109.682 17.3311 91.3344 17.3311C40.9719 17.3311 0 58.3029 0 108.665C0 159.028 40.9719 200 91.3344 200C126.598 200 157.237 179.899 172.448 150.569H154.803C141.17 171.148 117.818 184.757 91.3352 184.757L91.3348 184.757Z"
-                    fill="#C4C4C4"
-                  />
-                  <path
-                    d="M167.415 108.665H182.658C182.658 107.277 182.615 105.897 182.552 104.526H167.297C167.373 105.897 167.415 107.275 167.415 108.665H167.415Z"
-                    fill="#C4C4C4"
-                  />
-                  <path
-                    d="M166.321 95.7561H181.752C181.14 91.4518 180.225 87.2501 179.032 83.1611L164.477 87.6916C165.23 90.3247 165.851 93.0144 166.321 95.7561H166.321Z"
-                    fill="#C4C4C4"
-                  />
-                  <path
-                    d="M125.332 161.312H60.6905C53.8033 161.296 48.2199 155.712 48.2031 148.825V12.4873C48.2199 5.60022 53.8033 0.0167671 60.6905 0H125.332C132.219 0.0167671 137.803 5.60022 137.819 12.4873V148.829C137.798 155.716 132.219 161.296 125.332 161.312Z"
-                    fill="#DFDFDF"
-                  />
-                  <path
-                    d="M125.332 161.312H60.6904C53.8033 161.295 48.2199 155.712 48.2031 148.825V133.008C89.3787 133.008 101.178 133.008 137.819 133.008V148.829C137.798 155.716 132.219 161.295 125.332 161.312Z"
-                    fill="#C4C4C4"
-                  />
-                  <path
-                    d="M99.4303 70.1607C98.0834 61.6268 90.6094 55.0769 81.6156 55.0769C78.2322 55.0769 74.981 56.0035 72.1611 57.7318C67.871 50.5949 60.1476 46.1538 51.5675 46.1538C38.3129 46.1538 27.529 56.8284 27.529 69.9487C27.529 70.03 27.529 70.1143 27.5321 70.1956C19.0134 71.6159 12.3047 78.9675 12.3047 87.7948C12.3047 97.6358 20.5921 105.641 30.5339 105.641H96.6396C106.581 105.641 114.869 97.6358 114.869 87.7948C114.869 78.8922 108.052 71.494 99.4303 70.1607Z"
-                    fill="white"
-                  />
-                </svg>
+                  <svg
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 183 200"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <ellipse
+                      cx="90.7692"
+                      cy="108.718"
+                      fill="#F2F2F2"
+                      rx="90.7692"
+                      ry="91.2821"
+                    />
+                    <path
+                      d="M149.769 59.9736L162.678 51.715C158.49 46.4795 153.74 41.7118 148.515 37.5054L136.008 47.114C141.106 50.822 145.733 55.1401 149.769 59.9736Z"
+                      fill="#C4C4C4"
+                    />
+                    <path
+                      d="M161.555 79.4094L176.145 74.8695C173.889 69.2241 171.087 63.8571 167.804 58.8311L154.969 67.0407C157.522 70.9321 159.74 75.0652 161.554 79.4094H161.555Z"
+                      fill="#C4C4C4"
+                    />
+                    <path
+                      d="M91.3348 184.757C49.3765 184.757 15.2469 150.625 15.2469 108.665C15.2469 66.7067 49.3784 32.5772 91.3348 32.5772C104.677 32.5772 117.219 36.039 128.135 42.0927L141.098 32.1368C126.771 22.7881 109.682 17.3311 91.3344 17.3311C40.9719 17.3311 0 58.3029 0 108.665C0 159.028 40.9719 200 91.3344 200C126.598 200 157.237 179.899 172.448 150.569H154.803C141.17 171.148 117.818 184.757 91.3352 184.757L91.3348 184.757Z"
+                      fill="#C4C4C4"
+                    />
+                    <path
+                      d="M167.415 108.665H182.658C182.658 107.277 182.615 105.897 182.552 104.526H167.297C167.373 105.897 167.415 107.275 167.415 108.665H167.415Z"
+                      fill="#C4C4C4"
+                    />
+                    <path
+                      d="M166.321 95.7561H181.752C181.14 91.4518 180.225 87.2501 179.032 83.1611L164.477 87.6916C165.23 90.3247 165.851 93.0144 166.321 95.7561H166.321Z"
+                      fill="#C4C4C4"
+                    />
+                    <path
+                      d="M125.332 161.312H60.6905C53.8033 161.296 48.2199 155.712 48.2031 148.825V12.4873C48.2199 5.60022 53.8033 0.0167671 60.6905 0H125.332C132.219 0.0167671 137.803 5.60022 137.819 12.4873V148.829C137.798 155.716 132.219 161.296 125.332 161.312Z"
+                      fill="#DFDFDF"
+                    />
+                    <path
+                      d="M125.332 161.312H60.6904C53.8033 161.295 48.2199 155.712 48.2031 148.825V133.008C89.3787 133.008 101.178 133.008 137.819 133.008V148.829C137.798 155.716 132.219 161.295 125.332 161.312Z"
+                      fill="#C4C4C4"
+                    />
+                    <path
+                      d="M99.4303 70.1607C98.0834 61.6268 90.6094 55.0769 81.6156 55.0769C78.2322 55.0769 74.981 56.0035 72.1611 57.7318C67.871 50.5949 60.1476 46.1538 51.5675 46.1538C38.3129 46.1538 27.529 56.8284 27.529 69.9487C27.529 70.03 27.529 70.1143 27.5321 70.1956C19.0134 71.6159 12.3047 78.9675 12.3047 87.7948C12.3047 97.6358 20.5921 105.641 30.5339 105.641H96.6396C106.581 105.641 114.869 97.6358 114.869 87.7948C114.869 78.8922 108.052 71.494 99.4303 70.1607Z"
+                      fill="white"
+                    />
+                  </svg>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="el-mb11 carousel-wrapper"
-      >
-        <div
-          class="carousel-grid"
-          style="--ckvo4up-0: 0; --ckvo4up-1: 50.000%; --ckvo4up-2: 0.375rem; --ckvo4up-6: 0.625rem;"
-        />
-      </div>
-      <div
-        class="el-mb11 el-grid"
-      >
         <div
-          class="el-col"
+          class="el-flex-column el-flex-container"
         >
-          <h2
-            class="el-has-no-margin el-subtitle"
+          <div
+            class="el-flex-column el-flex-container"
           >
-            Pricing Policy
-          </h2>
-          <p
-            class="el-has-grey-text el-has-no-margin el-body-text"
+            <div
+              class="app-detail-description-aside-desktop"
+            >
+              <div
+                class="app-detail-image-wrapper"
+              >
+                <div
+                  class="el-placeholder-image-wrapper"
+                >
+                  <div
+                    class="el-mb7 el-placeholder-image"
+                    style="font-size: 7.5em;"
+                  >
+                    <svg
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 183 200"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <ellipse
+                        cx="90.7692"
+                        cy="108.718"
+                        fill="#F2F2F2"
+                        rx="90.7692"
+                        ry="91.2821"
+                      />
+                      <path
+                        d="M149.769 59.9736L162.678 51.715C158.49 46.4795 153.74 41.7118 148.515 37.5054L136.008 47.114C141.106 50.822 145.733 55.1401 149.769 59.9736Z"
+                        fill="#C4C4C4"
+                      />
+                      <path
+                        d="M161.555 79.4094L176.145 74.8695C173.889 69.2241 171.087 63.8571 167.804 58.8311L154.969 67.0407C157.522 70.9321 159.74 75.0652 161.554 79.4094H161.555Z"
+                        fill="#C4C4C4"
+                      />
+                      <path
+                        d="M91.3348 184.757C49.3765 184.757 15.2469 150.625 15.2469 108.665C15.2469 66.7067 49.3784 32.5772 91.3348 32.5772C104.677 32.5772 117.219 36.039 128.135 42.0927L141.098 32.1368C126.771 22.7881 109.682 17.3311 91.3344 17.3311C40.9719 17.3311 0 58.3029 0 108.665C0 159.028 40.9719 200 91.3344 200C126.598 200 157.237 179.899 172.448 150.569H154.803C141.17 171.148 117.818 184.757 91.3352 184.757L91.3348 184.757Z"
+                        fill="#C4C4C4"
+                      />
+                      <path
+                        d="M167.415 108.665H182.658C182.658 107.277 182.615 105.897 182.552 104.526H167.297C167.373 105.897 167.415 107.275 167.415 108.665H167.415Z"
+                        fill="#C4C4C4"
+                      />
+                      <path
+                        d="M166.321 95.7561H181.752C181.14 91.4518 180.225 87.2501 179.032 83.1611L164.477 87.6916C165.23 90.3247 165.851 93.0144 166.321 95.7561H166.321Z"
+                        fill="#C4C4C4"
+                      />
+                      <path
+                        d="M125.332 161.312H60.6905C53.8033 161.296 48.2199 155.712 48.2031 148.825V12.4873C48.2199 5.60022 53.8033 0.0167671 60.6905 0H125.332C132.219 0.0167671 137.803 5.60022 137.819 12.4873V148.829C137.798 155.716 132.219 161.296 125.332 161.312Z"
+                        fill="#DFDFDF"
+                      />
+                      <path
+                        d="M125.332 161.312H60.6904C53.8033 161.295 48.2199 155.712 48.2031 148.825V133.008C89.3787 133.008 101.178 133.008 137.819 133.008V148.829C137.798 155.716 132.219 161.295 125.332 161.312Z"
+                        fill="#C4C4C4"
+                      />
+                      <path
+                        d="M99.4303 70.1607C98.0834 61.6268 90.6094 55.0769 81.6156 55.0769C78.2322 55.0769 74.981 56.0035 72.1611 57.7318C67.871 50.5949 60.1476 46.1538 51.5675 46.1538C38.3129 46.1538 27.529 56.8284 27.529 69.9487C27.529 70.03 27.529 70.1143 27.5321 70.1956C19.0134 71.6159 12.3047 78.9675 12.3047 87.7948C12.3047 97.6358 20.5921 105.641 30.5339 105.641H96.6396C106.581 105.641 114.869 97.6358 114.869 87.7948C114.869 78.8922 108.052 71.494 99.4303 70.1607Z"
+                        fill="white"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="el-mb11 carousel-wrapper"
+            >
+              <div
+                class="carousel-grid"
+                style="--ckvo4up-0: 0; --ckvo4up-1: 50.000%; --ckvo4up-2: 0.375rem; --ckvo4up-6: 0.625rem;"
+              />
+            </div>
+          </div>
+          <div
+            class="el-flex-column el-flex-container"
           >
-            Free
-          </p>
+            <div
+              class="el-mb11 app-detail-support-grid"
+            >
+              <div
+                class="app-detail-support-grid-col"
+              >
+                <h2
+                  class="el-has-no-margin el-subtitle"
+                >
+                  Pricing Policy
+                </h2>
+                <p
+                  class="el-has-grey-text el-has-no-margin el-body-text"
+                >
+                  Free
+                </p>
+              </div>
+            </div>
+            <div
+              class="el-mb11"
+            >
+              <h2
+                class="el-has-bold-text el-subtitle"
+              >
+                About Developer
+              </h2>
+              <p
+                class="el-has-grey-text el-has-no-margin el-body-text"
+              />
+            </div>
+            <div
+              class="el-mb11"
+            >
+              <h2
+                class="el-has-bold-text el-subtitle"
+              >
+                Permissions
+              </h2>
+            </div>
+          </div>
         </div>
       </div>
-      <div
-        class="el-mb11"
-      >
-        <h2
-          class="el-has-bold-text el-subtitle"
-        >
-          About Developer
-        </h2>
-        <p
-          class="el-has-grey-text el-has-no-margin el-body-text"
-        />
-      </div>
-      <div
-        class="el-mb11"
-      >
-        <h2
-          class="el-has-bold-text el-subtitle"
-        >
-          Permissions
-        </h2>
-      </div>
     </section>
   </div>,
   "debug": [Function],
diff --git a/packages/app-market/src/components/apps-detail/__tests__/app-install-success-modal.test.tsx b/packages/app-market/src/components/apps-detail/__tests__/app-install-success-modal.test.tsx
index 91c9e0bd50..9e627b9931 100644
--- a/packages/app-market/src/components/apps-detail/__tests__/app-install-success-modal.test.tsx
+++ b/packages/app-market/src/components/apps-detail/__tests__/app-install-success-modal.test.tsx
@@ -3,7 +3,6 @@ import { render } from '../../../tests/react-testing'
 import { mockAppDetailModel } from '../../../tests/__stubs__/apps'
 import { AppInstallSuccesModalContent } from '../app-install-success-modal'
 import { useReapitConnect } from '@reapit/connect-session'
-import { mockDeveloperModel } from '../../../tests/__stubs__/developers'
 
 jest.mock('@reapit/connect-session', () => ({
   ReapitConnectBrowserSession: jest.fn(),
@@ -18,7 +17,11 @@ describe('AppInstallSuccesModalContent', () => {
   it('should match a snapshot where app is  directApi', () => {
     expect(
       render(
-        <AppInstallSuccesModalContent app={mockAppDetailModel} closeModal={jest.fn()} developer={mockDeveloperModel} />,
+        <AppInstallSuccesModalContent
+          app={mockAppDetailModel}
+          closeModal={jest.fn()}
+          developer={'MOCK_DEVELOPER_NAME'}
+        />,
       ),
     ).toMatchSnapshot()
   })
@@ -29,7 +32,7 @@ describe('AppInstallSuccesModalContent', () => {
         <AppInstallSuccesModalContent
           app={{ ...mockAppDetailModel, isDirectApi: false }}
           closeModal={jest.fn()}
-          developer={mockDeveloperModel}
+          developer={'MOCK_DEVELOPER_NAME'}
         />,
       ),
     ).toMatchSnapshot()
@@ -45,7 +48,7 @@ describe('AppInstallSuccesModalContent', () => {
         <AppInstallSuccesModalContent
           app={{ ...mockAppDetailModel, isDirectApi: false }}
           closeModal={jest.fn()}
-          developer={mockDeveloperModel}
+          developer={'MOCK_DEVELOPER_NAME'}
         />,
       ),
     ).toMatchSnapshot()
diff --git a/packages/app-market/src/components/apps-detail/__tests__/apps-detail-header.test.tsx b/packages/app-market/src/components/apps-detail/__tests__/apps-detail-header.test.tsx
new file mode 100644
index 0000000000..f74f4a8430
--- /dev/null
+++ b/packages/app-market/src/components/apps-detail/__tests__/apps-detail-header.test.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { render, setViewport } from '../../../tests/react-testing'
+import { mockAppDetailModel } from '../../../tests/__stubs__/apps'
+import { AppsDetailHeader } from '../apps-detail-header'
+
+describe('AppsDetailHeader', () => {
+  it('should match a snapshot for mobile', () => {
+    setViewport('mobile')
+    expect(render(<AppsDetailHeader app={mockAppDetailModel} />)).toMatchSnapshot()
+  })
+
+  it('should match a snapshot for desktop', () => {
+    setViewport('desktop')
+    expect(render(<AppsDetailHeader app={mockAppDetailModel} />)).toMatchSnapshot()
+  })
+})
diff --git a/packages/app-market/src/components/apps-detail/__tests__/apps-detail.test.tsx b/packages/app-market/src/components/apps-detail/__tests__/apps-detail.test.tsx
index 4689c709ae..778be65812 100644
--- a/packages/app-market/src/components/apps-detail/__tests__/apps-detail.test.tsx
+++ b/packages/app-market/src/components/apps-detail/__tests__/apps-detail.test.tsx
@@ -1,12 +1,10 @@
 import { useReapitGet } from '@reapit/utils-react'
 import React from 'react'
 import { MediaType } from '@reapit/elements'
-import { render } from '../../../tests/react-testing'
+import { render, setViewport, viewPortOptions } from '../../../tests/react-testing'
 import { mockAppDetailModel } from '../../../tests/__stubs__/apps'
 import { mockDesktopIntegrationTypeModelPagedResult } from '../../../tests/__stubs__/desktop-integration-types'
-import { mockDeveloperModel } from '../../../tests/__stubs__/developers'
 import { AppsDetail, handleCarouselCols, handleOpenModal } from '../apps-detail'
-import { mockInstallationModelPagedResult } from '../../../tests/__stubs__/installations'
 
 window.reapit.config.clientHiddenAppIds = {}
 window.reapit.config.orgAdminRestrictedAppIds = []
@@ -39,9 +37,7 @@ describe('AppsDetail', () => {
     document.body.appendChild(testElem)
 
     mockUseReapitGet
-      .mockReturnValueOnce([mockInstallationModelPagedResult, false])
       .mockReturnValueOnce([mockAppDetailModel, false])
-      .mockReturnValueOnce([mockDeveloperModel, false])
       .mockReturnValueOnce([mockDesktopIntegrationTypeModelPagedResult, false])
     expect(render(<AppsDetail />)).toMatchSnapshot()
   })
@@ -51,6 +47,13 @@ describe('AppsDetail', () => {
 
     expect(render(<AppsDetail />)).toMatchSnapshot()
   })
+
+  viewPortOptions.forEach((option) => {
+    it(`should match a snapshot for viewport ${option}`, () => {
+      setViewport(option)
+      expect(render(<AppsDetail />)).toMatchSnapshot()
+    })
+  })
 })
 
 describe('handleCarouselCols', () => {
diff --git a/packages/app-market/src/components/apps-detail/app-install-modal.tsx b/packages/app-market/src/components/apps-detail/app-install-modal.tsx
index 8345a9f4f6..ac1a61c63e 100644
--- a/packages/app-market/src/components/apps-detail/app-install-modal.tsx
+++ b/packages/app-market/src/components/apps-detail/app-install-modal.tsx
@@ -7,7 +7,7 @@ import {
 import { selectIsMarketplaceAdmin, selectIsOffGrouping, selectIsOrgAdmin } from '../../utils/auth'
 import { useReapitConnect } from '@reapit/connect-session'
 import { reapitConnectBrowserSession } from '../../core/connect-session'
-import { BodyText, Button, ButtonGroup, Col, elMb11, Grid, SmallText } from '@reapit/elements'
+import { Button, ButtonGroup, elMb11, BodyText, elMb6 } from '@reapit/elements'
 import { AcProcessType, DesktopLink, SendFunction, useReapitUpdate } from '@reapit/utils-react'
 import { UpdateActionNames, updateActions } from '@reapit/utils-common'
 import { AppDetailPermissionChip } from './__styles__'
@@ -79,7 +79,7 @@ export const AppInstallModalContent: FC<AppInstallModalContentProps> = ({
     <>
       <div className={elMb11}>
         {isOffGrouping && isOrgAdmin ? (
-          <SmallText hasGreyText>
+          <BodyText hasGreyText>
             As an organisation admin, you have control over {isDirectApi ? 'enabling' : 'installation'} of &lsquo;{name}
             &rsquo; for either your Office Group or for <b>all</b> Users and Offices within your Organisation. To do
             this, you need to visit the{' '}
@@ -89,31 +89,33 @@ export const AppInstallModalContent: FC<AppInstallModalContentProps> = ({
               target="_blank"
               content="Reapit Connect Management App."
             />
-          </SmallText>
+          </BodyText>
         ) : isOffGrouping && isMarketplaceAdmin ? (
-          <SmallText hasGreyText>
+          <BodyText hasGreyText>
             You are about to {isDirectApi ? 'enable' : 'install'} &lsquo;{name}&rsquo; for your Office Group{' '}
             {offGroupName}
-          </SmallText>
+          </BodyText>
         ) : (
-          <SmallText hasGreyText>
+          <BodyText hasGreyText>
             You are about to {isDirectApi ? 'enable' : 'install'} &lsquo;{name}&rsquo; for <b>all</b> Users and Offices
             within your Organisation.
-          </SmallText>
+          </BodyText>
         )}
         {userDesktopIntegrationTypes?.length ? (
           <>
             <BodyText>Desktop Integration</BodyText>
-            <SmallText hasGreyText>
+            <BodyText hasGreyText>
               This app requires the following Desktop Integration. Some integration types may replace or change certain
               behaviours within Agency Cloud.
-            </SmallText>
-            <ul>
+            </BodyText>
+            <div className={elMb6}>
               {userDesktopIntegrationTypes.map((integration) => (
-                <li key={integration.name}>{integration?.description ?? ''}</li>
+                <AppDetailPermissionChip key={integration.name}>
+                  {integration?.description ?? ''}
+                </AppDetailPermissionChip>
               ))}
-            </ul>
-            <SmallText hasGreyText>
+            </div>
+            <BodyText hasGreyText>
               For more information regarding Desktop Integration types, please{' '}
               <DesktopLink
                 uri="https://marketplace-documentation.reapit.cloud/integration-types"
@@ -122,53 +124,47 @@ export const AppInstallModalContent: FC<AppInstallModalContentProps> = ({
                 content="click here"
               />
               .
-            </SmallText>
+            </BodyText>
           </>
         ) : null}
         <BodyText>Pricing Information</BodyText>
         {isFree ? (
-          <SmallText hasGreyText>
+          <BodyText hasGreyText>
             {developer} have specified there is no cost for using this {isDirectApi ? 'integration' : 'app'}.
-          </SmallText>
+          </BodyText>
         ) : pricingUrl ? (
           <>
-            <SmallText hasGreyText>
+            <BodyText hasGreyText>
               {developer} have specified that there is a cost for using this {isDirectApi ? 'integration' : 'app'},
               please <DesktopLink uri={pricingUrl} acProcess={AcProcessType.web} target="_blank" content="click here" />{' '}
               to view their pricing information. You will be billed directly by {developer}.
-            </SmallText>
+            </BodyText>
             {developer !== 'Reapit Ltd' && (
-              <SmallText hasGreyText>
+              <BodyText hasGreyText>
                 You will not be charged by Reapit Ltd for any costs associated with using this{' '}
                 {isDirectApi ? 'integration' : 'app'}.
-              </SmallText>
+              </BodyText>
             )}
           </>
         ) : (
-          <SmallText hasGreyText>
+          <BodyText hasGreyText>
             There may be a cost associated to using this {isDirectApi ? 'integration' : 'app'}. However, this
             information has not yet been provided by {developer}. Please contact {developer} directly for information
             about pricing.
-          </SmallText>
+          </BodyText>
         )}
         <>
           <BodyText>Data Permissions</BodyText>
-          <SmallText hasGreyText>
+          <BodyText hasGreyText>
             By {isDirectApi ? 'enabling' : 'installing'} this app, you are granting the following permissions to your
             data:
-          </SmallText>
-          <SmallText hasGreyText>
+          </BodyText>
+          <BodyText hasGreyText>
             Information about your organisation and the names/email addresses of your users
-          </SmallText>
-          {Boolean(scopes.length) && (
-            <Grid>
-              {scopes.map(({ name, description }) => (
-                <Col key={name}>
-                  <AppDetailPermissionChip>{description ?? ''}</AppDetailPermissionChip>
-                </Col>
-              ))}
-            </Grid>
-          )}
+          </BodyText>
+          {scopes?.map(({ name, description }) => (
+            <AppDetailPermissionChip key={name}>{description ?? ''}</AppDetailPermissionChip>
+          ))}
         </>
       </div>
       <ButtonGroup alignment="center">
diff --git a/packages/app-market/src/components/apps-detail/app-install-success-modal.tsx b/packages/app-market/src/components/apps-detail/app-install-success-modal.tsx
index 281a3c92ec..8cfa31d3fd 100644
--- a/packages/app-market/src/components/apps-detail/app-install-success-modal.tsx
+++ b/packages/app-market/src/components/apps-detail/app-install-success-modal.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
-import { AppDetailModel, DeveloperModel } from '@reapit/foundations-ts-definitions'
-import { Button, ButtonGroup, SmallText } from '@reapit/elements'
+import { AppDetailModel } from '@reapit/foundations-ts-definitions'
+import { Button, ButtonGroup, BodyText } from '@reapit/elements'
 import { AcProcessType, DesktopLink } from '@reapit/utils-react'
 
 export const DESKTOP_REFRESH_URL = 'agencycloud://apps/refresh'
@@ -8,38 +8,37 @@ export const DESKTOP_REFRESH_URL = 'agencycloud://apps/refresh'
 export type AppInstallModalContentProps = {
   app?: AppDetailModel
   closeModal: () => void
-  developer: DeveloperModel
+  developer?: string
 }
 
 export const AppInstallSuccesModalContent: FC<AppInstallModalContentProps> = ({ app, closeModal, developer }) => {
   const { name, id, isDirectApi, launchUri, telephone, supportEmail } = app ?? {}
-  const { name: developerName } = developer
 
   return (
     <>
       {isDirectApi ? (
         <>
-          <SmallText hasGreyText>{name} integration has been successfully enabled.</SmallText>
-          <SmallText hasGreyText>
+          <BodyText hasGreyText>{name} integration has been successfully enabled.</BodyText>
+          <BodyText hasGreyText>
             For details on how to use the integration and, if there are any additional setup requirements, a member of{' '}
-            {developerName} will be in touch to help you through the process.
-          </SmallText>
-          <SmallText hasGreyText>
+            {developer} will be in touch to help you through the process.
+          </BodyText>
+          <BodyText hasGreyText>
             If you wish to contact them directly, you can do this via telephone at {telephone} or email at{' '}
             <DesktopLink uri={supportEmail} acProcess={AcProcessType.mail} target="_blank" content={supportEmail} />.
-          </SmallText>
+          </BodyText>
         </>
       ) : (
         <>
-          <SmallText>
+          <BodyText>
             The {name} app has been successfully installed. You can now launch the app from the &lsquo;My Apps&rsquo;
             page or by clicking the button below.
-          </SmallText>
-          <SmallText>
+          </BodyText>
+          <BodyText>
             If you wish to contact the developer about using the app, you can do this via telephone at {telephone} or
             email at{' '}
             <DesktopLink uri={supportEmail} acProcess={AcProcessType.mail} target="_blank" content={supportEmail} />.
-          </SmallText>
+          </BodyText>
         </>
       )}
       <ButtonGroup alignment="center">
diff --git a/packages/app-market/src/components/apps-detail/apps-detail-header.tsx b/packages/app-market/src/components/apps-detail/apps-detail-header.tsx
new file mode 100644
index 0000000000..3fd5e801a8
--- /dev/null
+++ b/packages/app-market/src/components/apps-detail/apps-detail-header.tsx
@@ -0,0 +1,125 @@
+import { cx } from '@linaria/core'
+import {
+  BodyText,
+  elFadeIn,
+  elMb3,
+  elMb5,
+  elMr2,
+  elMr5,
+  FlexContainer,
+  Icon,
+  PlaceholderImage,
+  SmallText,
+  Subtitle,
+  Title,
+  useMediaQuery,
+} from '@reapit/elements'
+import { AppDetailModel } from '@reapit/foundations-ts-definitions'
+import React, { FC } from 'react'
+import { IsFreeNotice } from '../apps-browse/__styles__'
+import { AppDetailCategoryChip, AppDetailIcon, appDetailInfoLineAdjust, AppDetailWrapper } from './__styles__'
+
+export interface AppsDetailHeaderProps {
+  app: AppDetailModel
+}
+
+export const AppsDetailHeader: FC<AppsDetailHeaderProps> = ({ app }) => {
+  const { isMobile } = useMediaQuery()
+  const { name, summary, isFree, categories, isDirectApi, installedOn, media } = app
+  const isInstalled = Boolean(installedOn)
+  const iconUri = media?.find((item) => item.type === 'icon')?.uri
+
+  if (isMobile) {
+    return (
+      <FlexContainer className={elMb5}>
+        <FlexContainer isFlexColumn isFlexJustifyBetween>
+          <FlexContainer className={elMb3} isFlexAlignEnd isFlexJustifyBetween>
+            <Subtitle hasNoMargin hasBoldText>
+              {name}
+            </Subtitle>
+            {isInstalled && (
+              <>
+                <Icon icon="tickSolidSystem" className={elMr2} intent="success" />
+                <SmallText className={cx(elMr2, appDetailInfoLineAdjust)} hasNoMargin>
+                  {isDirectApi ? 'Integration Enabled' : 'App Installed'}
+                </SmallText>
+              </>
+            )}
+            <Icon icon="tickSolidSystem" className={elMr2} intent="success" />
+            <SmallText className={cx(elMr2, appDetailInfoLineAdjust)} hasNoMargin>
+              Verified by Reapit
+            </SmallText>
+          </FlexContainer>
+          <FlexContainer>
+            <AppDetailWrapper>
+              {iconUri ? (
+                <AppDetailIcon className={elFadeIn} src={iconUri} alt={name} />
+              ) : (
+                <PlaceholderImage placeholder="placeholderSmall" size={72} />
+              )}
+            </AppDetailWrapper>
+            <SmallText hasGreyText>{summary}</SmallText>
+          </FlexContainer>
+          <FlexContainer>
+            {Boolean(categories?.length) &&
+              categories?.map((category) => (
+                <AppDetailCategoryChip className={elFadeIn} key={category?.id}>
+                  {category.name}
+                </AppDetailCategoryChip>
+              ))}
+            {isDirectApi && (
+              <SmallText className={elMr5} hasBoldText hasNoMargin>
+                Integration
+              </SmallText>
+            )}
+            {isFree && <IsFreeNotice>FREE</IsFreeNotice>}
+          </FlexContainer>
+        </FlexContainer>
+      </FlexContainer>
+    )
+  }
+
+  return (
+    <FlexContainer className={elMb5}>
+      <AppDetailWrapper>
+        {iconUri ? (
+          <AppDetailIcon className={elFadeIn} src={iconUri} alt={name} />
+        ) : (
+          <PlaceholderImage placeholder="placeholderSmall" size={72} />
+        )}
+      </AppDetailWrapper>
+      <FlexContainer isFlexColumn isFlexJustifyBetween>
+        <FlexContainer isFlexColumn>
+          <Title hasNoMargin>{name}</Title>
+          <BodyText hasGreyText>{summary}</BodyText>
+        </FlexContainer>
+        <FlexContainer>
+          {isInstalled && (
+            <>
+              <Icon icon="tickSolidSystem" className={elMr5} intent="success" />
+              <SmallText className={elMr5} hasNoMargin>
+                {isDirectApi ? 'Integration Enabled' : 'App Installed'}
+              </SmallText>
+            </>
+          )}
+          <Icon icon="tickSolidSystem" className={elMr5} intent="success" />
+          <SmallText className={elMr5} hasNoMargin>
+            Verified by Reapit
+          </SmallText>
+          {Boolean(categories?.length) &&
+            categories?.map((category) => (
+              <AppDetailCategoryChip className={elFadeIn} key={category?.id}>
+                {category.name}
+              </AppDetailCategoryChip>
+            ))}
+          {isDirectApi && (
+            <SmallText className={elMr5} hasBoldText hasNoMargin>
+              Integration
+            </SmallText>
+          )}
+          {isFree && <IsFreeNotice>FREE</IsFreeNotice>}
+        </FlexContainer>
+      </FlexContainer>
+    </FlexContainer>
+  )
+}
diff --git a/packages/app-market/src/components/apps-detail/apps-detail.tsx b/packages/app-market/src/components/apps-detail/apps-detail.tsx
index 546625cdce..53f04e2738 100644
--- a/packages/app-market/src/components/apps-detail/apps-detail.tsx
+++ b/packages/app-market/src/components/apps-detail/apps-detail.tsx
@@ -1,35 +1,25 @@
 import React, { createRef, Dispatch, FC, LegacyRef, SetStateAction, useMemo, useRef, useState } from 'react'
 import {
-  Title,
   PageContainer,
   Loader,
   Subtitle,
   FlexContainer,
   PlaceholderImage,
-  elFadeIn,
   BodyText,
   elMb7,
   Icon,
   useMediaQuery,
   MediaType,
-  Grid,
-  Col,
   elMb11,
-  elMr5,
-  elMb5,
-  SmallText,
   ButtonGroup,
   Button,
   elMr4,
+  elMr6,
+  elMl6,
 } from '@reapit/elements'
 import { useHistory, useParams } from 'react-router-dom'
 import { AcProcessType, DesktopLink, HTMLRender, useReapitGet } from '@reapit/utils-react'
-import {
-  AppDetailModel,
-  DesktopIntegrationTypeModelPagedResult,
-  DeveloperModel,
-  InstallationModelPagedResult,
-} from '@reapit/foundations-ts-definitions'
+import { AppDetailModel, DesktopIntegrationTypeModelPagedResult } from '@reapit/foundations-ts-definitions'
 import { reapitConnectBrowserSession } from '../../core/connect-session'
 import { GetActionNames, getActions } from '../../../../utils-common/src'
 import {
@@ -37,17 +27,17 @@ import {
   AppDetailDescriptionColAside,
   AppDetailDescriptionColMain,
   AppDetailDescriptionGrid,
-  AppDetailIcon,
   AppDetailImage,
   AppDetailImageWrapper,
   AppDetailPermissionChip,
-  AppDetailWrapper,
-  AppDetailCategoryChip,
   htmlRender,
   appDetailVideoModal,
+  AppsDetailContentGrid,
+  AppDetailSupportGrid,
+  AppDetailSupportGridCol,
+  AppDetailDescriptionAsideDesktop,
 } from './__styles__'
 import { Carousel } from '../carousel'
-import { IsFreeNotice } from '../apps-browse/__styles__'
 import { useModal } from '@reapit/elements'
 import { AppInstallModalContent } from './app-install-modal'
 import { AppInstallSuccesModalContent } from './app-install-success-modal'
@@ -55,13 +45,14 @@ import { useReapitConnect } from '@reapit/connect-session'
 import { selectIsAdmin } from '../../utils/auth'
 import { filterRestrictedAppDetail } from '../../utils/browse-app'
 import { cx } from '@linaria/core'
+import { AppsDetailHeader } from './apps-detail-header'
 
 export interface AppIdParams {
   appId: string
 }
 
 export const handleCarouselCols = (mediaQuery: MediaType) => () => {
-  const { isMobile, isTablet, isDesktop } = mediaQuery
+  const { isMobile, isTablet, isDesktop, isSuperWideScreen, is4KScreen } = mediaQuery
 
   if (isMobile) {
     return 1
@@ -71,6 +62,10 @@ export const handleCarouselCols = (mediaQuery: MediaType) => () => {
     return 2
   }
 
+  if (isSuperWideScreen || is4KScreen) {
+    return 1
+  }
+
   return 3
 }
 
@@ -94,53 +89,30 @@ export const AppsDetail: FC = () => {
   const { Modal: VideoModal, openModal: videoOpenModal, closeModal: videoCloseModal } = useModal()
   const { connectSession } = useReapitConnect(reapitConnectBrowserSession)
   const clientId = connectSession?.loginIdentity.clientId
-  const developerId = connectSession?.loginIdentity.developerId
-
-  const baseParams = {
-    clientId,
-    appId,
-    onlyInstalled: true,
-  }
-
-  const queryParams = developerId ? { ...baseParams, developerId } : baseParams
-
-  const [installations] = useReapitGet<InstallationModelPagedResult>({
-    reapitConnectBrowserSession,
-    action: getActions(window.reapit.config.appEnv)[GetActionNames.getInstallations],
-    queryParams,
-    fetchWhenTrue: [clientId, appId],
-  })
+  const sessionDeveloperId = connectSession?.loginIdentity.developerId
 
   const [unfilteredAppDetail, appDetailLoading, , refetchApp] = useReapitGet<AppDetailModel>({
     reapitConnectBrowserSession,
     action: getActions(window.reapit.config.appEnv)[GetActionNames.getAppById],
+    queryParams: { clientId },
     uriParams: {
       appId,
     },
-    fetchWhenTrue: [appId],
+    fetchWhenTrue: [appId, clientId],
   })
 
   const appDetail = useMemo(filterRestrictedAppDetail(unfilteredAppDetail, connectSession), [unfilteredAppDetail])
 
-  const [developerDetail] = useReapitGet<DeveloperModel>({
-    reapitConnectBrowserSession,
-    action: getActions(window.reapit.config.appEnv)[GetActionNames.getDeveloper],
-    uriParams: { developerId: appDetail?.developerId },
-    fetchWhenTrue: [appDetail?.developerId],
-  })
-
   const [desktopIntegrationTypes] = useReapitGet<DesktopIntegrationTypeModelPagedResult>({
     reapitConnectBrowserSession,
     action: getActions(window.reapit.config.appEnv)[GetActionNames.getDesktopIntegrationTypes],
   })
 
   const app = appDetail ?? {}
-  const developer = developerDetail ?? {}
   const {
     name,
     description,
     media,
-    summary,
     scopes,
     homePage,
     supportEmail,
@@ -149,19 +121,27 @@ export const AppsDetail: FC = () => {
     privacyPolicyUrl,
     pricingUrl,
     isFree,
-    categories,
     isDirectApi,
     desktopIntegrationTypeIds,
+    developerAbout,
+    developer,
+    installedOn,
+    isListed,
+    developerId,
   } = app
-  const { about } = developer
-  const iconUri = media?.find((item) => item.type === 'icon')?.uri
+
   const images = media?.filter((item) => item.type === 'image')
   const videos = media?.filter((item) => item.type === 'video')
   const heroImage = images ? images[0] : null
   const screenshots = images ? images.slice(1, images.length) : []
   imageRefs.current = screenshots.map((_, i) => imageRefs.current[i] ?? createRef())
-  const isInstalled = Boolean(installations?.totalCount)
+  const isSandbox = clientId !== 'SBOX' && clientId !== 'SBXA'
+  const hideInstall =
+    (!isListed && isSandbox) || (isSandbox && sessionDeveloperId && sessionDeveloperId !== developerId)
+  const isInstalled = Boolean(installedOn)
   const isAdmin = selectIsAdmin(connectSession)
+  const { isSuperWideScreen, is4KScreen } = mediaQuery
+  const isFullScreen = isSuperWideScreen || is4KScreen
 
   return (
     <PageContainer>
@@ -172,56 +152,16 @@ export const AppsDetail: FC = () => {
           <AppDetailBackButton onClick={history.goBack}>
             <Icon icon="backSystem" intent="primary" />
           </AppDetailBackButton>
-          <FlexContainer className={elMb5}>
-            <AppDetailWrapper>
-              {iconUri ? (
-                <AppDetailIcon className={elFadeIn} src={iconUri} alt={name} />
-              ) : (
-                <PlaceholderImage placeholder="placeholderSmall" size={72} />
-              )}
-            </AppDetailWrapper>
-            <FlexContainer isFlexColumn isFlexJustifyBetween>
-              <FlexContainer isFlexColumn>
-                <Title hasNoMargin>{name}</Title>
-                <BodyText hasGreyText>{summary}</BodyText>
-              </FlexContainer>
-              <FlexContainer>
-                {isInstalled && (
-                  <>
-                    <Icon icon="tickSolidSystem" className={elMr5} intent="success" />
-                    <SmallText className={elMr5} hasNoMargin>
-                      {isDirectApi ? 'Integration Enabled' : 'App Installed'}
-                    </SmallText>
-                  </>
-                )}
-                <Icon icon="tickSolidSystem" className={elMr5} intent="success" />
-                <SmallText className={elMr5} hasNoMargin>
-                  Verified by Reapit
-                </SmallText>
-                {Boolean(categories?.length) &&
-                  categories?.map((category) => (
-                    <AppDetailCategoryChip className={elFadeIn} key={category?.id}>
-                      {category.name}
-                    </AppDetailCategoryChip>
-                  ))}
-                {isDirectApi && (
-                  <SmallText className={elMr5} hasBoldText hasNoMargin>
-                    Integration
-                  </SmallText>
-                )}
-                {isFree && <IsFreeNotice>FREE</IsFreeNotice>}
-              </FlexContainer>
-            </FlexContainer>
-          </FlexContainer>
+          <AppsDetailHeader app={app} />
           <ButtonGroup className={elMb11} alignment="left">
-            {!isInstalled && isAdmin && (
+            {!isInstalled && isAdmin && !hideInstall && (
               <Button intent="critical" onClick={appInstallOpenModal}>
                 {isDirectApi ? 'Enable Integration' : 'Install App'}
               </Button>
             )}
             {supportEmail && (
               <DesktopLink
-                uri={supportEmail}
+                uri={`${supportEmail}?subject=${name}%20Enquiry&body=Dear%20${developer}%2C%20%0A%0AI%20would%20like%20more%20information%20about%20${name}%20featured%20in%20the%20Reapit%20AppMarket%20%0A%0ARegards`}
                 acProcess={AcProcessType.mail}
                 target="_blank"
                 content={
@@ -230,140 +170,163 @@ export const AppsDetail: FC = () => {
               />
             )}
           </ButtonGroup>
-          <AppDetailDescriptionGrid>
-            <AppDetailDescriptionColMain>
-              <Subtitle hasBoldText>About App</Subtitle>
-              <HTMLRender className={htmlRender} html={description ?? ''} />
-              {videos && Boolean(videos?.length) && (
-                <ButtonGroup>
-                  <Button intent="low" onClick={handleOpenModal(setVideoUrl, videoOpenModal, videos[0]?.uri)}>
-                    <FlexContainer isFlexAlignCenter>
-                      <Icon className={cx(elMr4)} icon="videoSystem" intent="primary" fontSize="1.25em" />
-                      How To Use App
-                    </FlexContainer>
-                  </Button>
-                  {videos && videos?.length > 1 && (
-                    <Button intent="low" onClick={handleOpenModal(setVideoUrl, videoOpenModal, videos[1]?.uri)}>
+          <AppsDetailContentGrid>
+            <AppDetailDescriptionGrid>
+              <AppDetailDescriptionColMain>
+                <Subtitle hasBoldText>About App</Subtitle>
+                <HTMLRender className={htmlRender} html={description ?? ''} />
+                {videos && Boolean(videos?.length) && (
+                  <ButtonGroup>
+                    <Button intent="low" onClick={handleOpenModal(setVideoUrl, videoOpenModal, videos[0]?.uri)}>
                       <FlexContainer isFlexAlignCenter>
                         <Icon className={cx(elMr4)} icon="videoSystem" intent="primary" fontSize="1.25em" />
-                        Marketing Presentation
+                        How To Use App
                       </FlexContainer>
                     </Button>
-                  )}
-                </ButtonGroup>
-              )}
-            </AppDetailDescriptionColMain>
-            <AppDetailDescriptionColAside>
-              <AppDetailImageWrapper>
-                {heroImage?.uri ? (
-                  <AppDetailImage src={heroImage.uri} alt={description} />
-                ) : (
-                  <PlaceholderImage className={elMb7} placeholder="placeholderLarge" size={192} fillAvailable />
-                )}
-              </AppDetailImageWrapper>
-            </AppDetailDescriptionColAside>
-          </AppDetailDescriptionGrid>
-          <Carousel
-            className={elMb11}
-            numberCols={carouselCols}
-            items={screenshots.map(({ id, uri, description }) => (
-              <AppDetailImageWrapper key={id}>
-                {uri ? (
-                  <AppDetailImage src={uri} alt={description} />
-                ) : (
-                  <PlaceholderImage className={elMb7} placeholder="placeholderLarge" size={192} fillAvailable />
+                    {videos && videos?.length > 1 && (
+                      <Button intent="low" onClick={handleOpenModal(setVideoUrl, videoOpenModal, videos[1]?.uri)}>
+                        <FlexContainer isFlexAlignCenter>
+                          <Icon className={cx(elMr4)} icon="videoSystem" intent="primary" fontSize="1.25em" />
+                          Marketing Presentation
+                        </FlexContainer>
+                      </Button>
+                    )}
+                  </ButtonGroup>
                 )}
-              </AppDetailImageWrapper>
-            ))}
-          />
-          <Grid className={elMb11}>
-            {homePage && (
-              <Col>
-                <Subtitle hasNoMargin>Website</Subtitle>
-                <BodyText hasGreyText hasNoMargin>
-                  <DesktopLink uri={homePage} acProcess={AcProcessType.web} target="_blank" content={homePage} />
-                </BodyText>
-              </Col>
-            )}
-            {supportEmail && (
-              <Col>
-                <Subtitle hasNoMargin>Support Email</Subtitle>
-                <BodyText hasGreyText hasNoMargin>
-                  <DesktopLink
-                    uri={supportEmail}
-                    acProcess={AcProcessType.mail}
-                    target="_blank"
-                    content={supportEmail}
-                  />
-                </BodyText>
-              </Col>
-            )}
-            {telephone && (
-              <Col>
-                <Subtitle hasNoMargin>Telephone</Subtitle>
-                <BodyText hasGreyText hasNoMargin>
-                  {telephone}
-                </BodyText>
-              </Col>
-            )}
-            {termsAndConditionsUrl && (
-              <Col>
-                <Subtitle hasNoMargin>Terms and Conditions</Subtitle>
-                <BodyText hasGreyText hasNoMargin>
-                  <DesktopLink
-                    uri={termsAndConditionsUrl}
-                    acProcess={AcProcessType.web}
-                    target="_blank"
-                    content={termsAndConditionsUrl}
-                  />
-                </BodyText>
-              </Col>
-            )}
-            {privacyPolicyUrl && (
-              <Col>
-                <Subtitle hasNoMargin>Privacy Policy</Subtitle>
-                <BodyText hasGreyText hasNoMargin>
-                  <DesktopLink
-                    uri={privacyPolicyUrl}
-                    acProcess={AcProcessType.web}
-                    target="_blank"
-                    content={privacyPolicyUrl}
-                  />
-                </BodyText>
-              </Col>
-            )}
-            <Col>
-              <Subtitle hasNoMargin>Pricing Policy</Subtitle>
-              <BodyText hasGreyText hasNoMargin>
-                {!isFree && pricingUrl ? (
-                  <DesktopLink uri={pricingUrl} acProcess={AcProcessType.web} target="_blank" content={pricingUrl} />
-                ) : (
-                  'Free'
+              </AppDetailDescriptionColMain>
+              <AppDetailDescriptionColAside>
+                <AppDetailImageWrapper>
+                  {heroImage?.uri ? (
+                    <AppDetailImage src={heroImage.uri} alt={description} />
+                  ) : (
+                    <PlaceholderImage className={elMb7} placeholder="placeholderLarge" size={192} fillAvailable />
+                  )}
+                </AppDetailImageWrapper>
+              </AppDetailDescriptionColAside>
+            </AppDetailDescriptionGrid>
+            <FlexContainer isFlexRowReverse={isFullScreen} isFlexColumn={!isFullScreen}>
+              <FlexContainer isFlexColumn>
+                <AppDetailDescriptionAsideDesktop>
+                  <AppDetailImageWrapper>
+                    {heroImage?.uri ? (
+                      <AppDetailImage src={heroImage.uri} alt={description} />
+                    ) : (
+                      <PlaceholderImage className={elMb7} placeholder="placeholderLarge" size={192} fillAvailable />
+                    )}
+                  </AppDetailImageWrapper>
+                </AppDetailDescriptionAsideDesktop>
+                <Carousel
+                  className={cx(elMb11, isFullScreen && elMl6)}
+                  numberCols={carouselCols}
+                  items={screenshots.map(({ id, uri, description }) => (
+                    <AppDetailImageWrapper key={id}>
+                      {uri ? (
+                        <AppDetailImage src={uri} alt={description} />
+                      ) : (
+                        <PlaceholderImage className={elMb7} placeholder="placeholderLarge" size={192} fillAvailable />
+                      )}
+                    </AppDetailImageWrapper>
+                  ))}
+                />
+              </FlexContainer>
+              <FlexContainer className={cx(isFullScreen && elMr6)} isFlexColumn>
+                <AppDetailSupportGrid className={elMb11}>
+                  {homePage && (
+                    <AppDetailSupportGridCol>
+                      <Subtitle hasNoMargin>Website</Subtitle>
+                      <BodyText hasGreyText hasNoMargin>
+                        <DesktopLink uri={homePage} acProcess={AcProcessType.web} target="_blank" content={homePage} />
+                      </BodyText>
+                    </AppDetailSupportGridCol>
+                  )}
+                  {supportEmail && (
+                    <AppDetailSupportGridCol>
+                      <Subtitle hasNoMargin>Support Email</Subtitle>
+                      <BodyText hasGreyText hasNoMargin>
+                        <DesktopLink
+                          uri={supportEmail}
+                          acProcess={AcProcessType.mail}
+                          target="_blank"
+                          content={supportEmail}
+                        />
+                      </BodyText>
+                    </AppDetailSupportGridCol>
+                  )}
+                  {telephone && (
+                    <AppDetailSupportGridCol>
+                      <Subtitle hasNoMargin>Telephone</Subtitle>
+                      <BodyText hasGreyText hasNoMargin>
+                        {telephone}
+                      </BodyText>
+                    </AppDetailSupportGridCol>
+                  )}
+                  {termsAndConditionsUrl && (
+                    <AppDetailSupportGridCol>
+                      <Subtitle hasNoMargin>Terms and Conditions</Subtitle>
+                      <BodyText hasGreyText hasNoMargin>
+                        <DesktopLink
+                          uri={termsAndConditionsUrl}
+                          acProcess={AcProcessType.web}
+                          target="_blank"
+                          content={termsAndConditionsUrl}
+                        />
+                      </BodyText>
+                    </AppDetailSupportGridCol>
+                  )}
+                  {privacyPolicyUrl && (
+                    <AppDetailSupportGridCol>
+                      <Subtitle hasNoMargin>Privacy Policy</Subtitle>
+                      <BodyText hasGreyText hasNoMargin>
+                        <DesktopLink
+                          uri={privacyPolicyUrl}
+                          acProcess={AcProcessType.web}
+                          target="_blank"
+                          content={privacyPolicyUrl}
+                        />
+                      </BodyText>
+                    </AppDetailSupportGridCol>
+                  )}
+                  <AppDetailSupportGridCol>
+                    <Subtitle hasNoMargin>Pricing Policy</Subtitle>
+                    <BodyText hasGreyText hasNoMargin>
+                      {!isFree && pricingUrl ? (
+                        <DesktopLink
+                          uri={pricingUrl}
+                          acProcess={AcProcessType.web}
+                          target="_blank"
+                          content={pricingUrl}
+                        />
+                      ) : (
+                        'Free'
+                      )}
+                    </BodyText>
+                  </AppDetailSupportGridCol>
+                </AppDetailSupportGrid>
+                <div className={elMb11}>
+                  <Subtitle hasBoldText>About Developer</Subtitle>
+                  <BodyText hasNoMargin hasGreyText>
+                    {developerAbout}
+                  </BodyText>
+                </div>
+                <div className={elMb11}>
+                  <Subtitle hasBoldText>Permissions</Subtitle>
+                  {scopes?.map(({ name, description }) => (
+                    <AppDetailPermissionChip key={name}>{description}</AppDetailPermissionChip>
+                  ))}
+                </div>
+                {Boolean(desktopIntegrationTypeIds?.length) && (
+                  <div className={elMb11}>
+                    <Subtitle hasBoldText>AgencyCloud Integration</Subtitle>
+                    {desktopIntegrationTypeIds?.map((id) => {
+                      const desktopType = desktopIntegrationTypes?.data?.find((item) => item.id === id)
+                      if (desktopType)
+                        return <AppDetailPermissionChip key={id}>{desktopType.name}</AppDetailPermissionChip>
+                    })}
+                  </div>
                 )}
-              </BodyText>
-            </Col>
-          </Grid>
-          <div className={elMb11}>
-            <Subtitle hasBoldText>About Developer</Subtitle>
-            <BodyText hasNoMargin hasGreyText>
-              {about}
-            </BodyText>
-          </div>
-          <div className={elMb11}>
-            <Subtitle hasBoldText>Permissions</Subtitle>
-            {scopes?.map(({ name, description }) => (
-              <AppDetailPermissionChip key={name}>{description}</AppDetailPermissionChip>
-            ))}
-          </div>
-          {Boolean(desktopIntegrationTypeIds?.length) && (
-            <div className={elMb11}>
-              <Subtitle hasBoldText>AgencyCloud Integration</Subtitle>
-              {desktopIntegrationTypeIds?.map((id) => {
-                const desktopType = desktopIntegrationTypes?.data?.find((item) => item.id === id)
-                if (desktopType) return <AppDetailPermissionChip key={id}>{desktopType.name}</AppDetailPermissionChip>
-              })}
-            </div>
-          )}
+              </FlexContainer>
+            </FlexContainer>
+          </AppsDetailContentGrid>
         </>
       )}
       <AppInstallModal title={`Install ${name}`}>
diff --git a/packages/app-market/src/components/apps-support/__tests__/__snapshots__/apps-support-item.test.tsx.snap b/packages/app-market/src/components/apps-support/__tests__/__snapshots__/apps-support-item.test.tsx.snap
index ac61eabff8..186bbebae1 100644
--- a/packages/app-market/src/components/apps-support/__tests__/__snapshots__/apps-support-item.test.tsx.snap
+++ b/packages/app-market/src/components/apps-support/__tests__/__snapshots__/apps-support-item.test.tsx.snap
@@ -12,7 +12,7 @@ Object {
         class="el-card-wrap"
       >
         <div
-          class="el-card-list-main-wrap"
+          class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
         >
           <h5
             class="el-card-list-heading"
@@ -375,7 +375,7 @@ Object {
       class="el-card-wrap"
     >
       <div
-        class="el-card-list-main-wrap"
+        class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
       >
         <h5
           class="el-card-list-heading"
@@ -795,7 +795,7 @@ Object {
         class="el-card-wrap"
       >
         <div
-          class="el-card-list-main-wrap"
+          class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
         >
           <h5
             class="el-card-list-heading"
@@ -1126,7 +1126,7 @@ Object {
       class="el-card-wrap"
     >
       <div
-        class="el-card-list-main-wrap"
+        class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
       >
         <h5
           class="el-card-list-heading"
diff --git a/packages/app-market/src/components/carousel/__styles__/index.ts b/packages/app-market/src/components/carousel/__styles__/index.ts
index f8b82178d9..4d41077949 100644
--- a/packages/app-market/src/components/carousel/__styles__/index.ts
+++ b/packages/app-market/src/components/carousel/__styles__/index.ts
@@ -9,6 +9,7 @@ export interface CarouselGridProps {
 
 export const CarouselWrapper = styled.div`
   position: relative;
+  height: fit-content;
 `
 
 export const CarouselCol = styled.div`
diff --git a/packages/app-market/src/core/app.tsx b/packages/app-market/src/core/app.tsx
index 4e83f9b3c3..1845ccd5a7 100644
--- a/packages/app-market/src/core/app.tsx
+++ b/packages/app-market/src/core/app.tsx
@@ -2,6 +2,9 @@ import React, { FC } from 'react'
 import Router from './router'
 import { MediaStateProvider, NavStateProvider, SnackProvider } from '@reapit/elements'
 import ErrorBoundary from './error-boundary'
+import { injectSwitchModeToWindow } from '@reapit/utils-react'
+
+injectSwitchModeToWindow()
 
 const App: FC = () => (
   <ErrorBoundary>
diff --git a/packages/elements/src/components/card/__styles__/index.ts b/packages/elements/src/components/card/__styles__/index.ts
index baad4432a4..e3f2ba711a 100644
--- a/packages/elements/src/components/card/__styles__/index.ts
+++ b/packages/elements/src/components/card/__styles__/index.ts
@@ -155,7 +155,7 @@ export const ElMobileToggle = styled.button`
   }
 
   &.${elMobileListToggle} {
-    top: 4.5rem;
+    top: 0;
   }
 `
 
diff --git a/packages/elements/src/components/card/card-components.tsx b/packages/elements/src/components/card/card-components.tsx
index 2f73f6c82d..4dcb8f95f7 100644
--- a/packages/elements/src/components/card/card-components.tsx
+++ b/packages/elements/src/components/card/card-components.tsx
@@ -209,7 +209,7 @@ export const Card: FC<CardProps> = ({
       )}
       {hasListCard && (
         <>
-          <CardListMainWrap className={cx(listMobileOpen && elCardListMainWrapExpanded)}>
+          <CardListMainWrap className={cx((listMobileOpen || !hasMainCard) && elCardListMainWrapExpanded)}>
             {listContextMenuItems && (listMobileOpen || !isMobile) && (
               <CardContextMenu contextMenuItems={listContextMenuItems} />
             )}
diff --git a/packages/elements/src/storybook/changelog.stories.mdx b/packages/elements/src/storybook/changelog.stories.mdx
index 97464d518a..f263c32c26 100644
--- a/packages/elements/src/storybook/changelog.stories.mdx
+++ b/packages/elements/src/storybook/changelog.stories.mdx
@@ -14,11 +14,15 @@ We will publish release version history and changes here. Where possible, we wil
 
 Beta versions should be relatively stable but subject to occssional breaking changes.
 
+### **3.9.2 - 11/08/22**
+
+- Fixes small bug where list items on `Card` fails to render in mobile
+
 ### **3.9.1 - 09/08/22**
 
-  - Adds `TableSortHeader` for a sortable table header element
-  - Adds `labelChild` property to `TableCell` element to add a customisable table header
-  - Adds `onLabelClick` for a label header click event
+- Adds `TableSortHeader` for a sortable table header element
+- Adds `labelChild` property to `TableCell` element to add a customisable table header
+- Adds `onLabelClick` for a label header click event
 
 ### **3.9.0 - 03/08/22**
 
diff --git a/packages/payments-client/src/components/pages/payment/__tests__/__snapshots__/payment-external.test.tsx.snap b/packages/payments-client/src/components/pages/payment/__tests__/__snapshots__/payment-external.test.tsx.snap
index 2854a68e6d..a1bbb8907b 100644
--- a/packages/payments-client/src/components/pages/payment/__tests__/__snapshots__/payment-external.test.tsx.snap
+++ b/packages/payments-client/src/components/pages/payment/__tests__/__snapshots__/payment-external.test.tsx.snap
@@ -62,7 +62,7 @@ Object {
               class="el-card-wrap"
             >
               <div
-                class="el-card-list-main-wrap"
+                class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
               >
                 <h5
                   class="el-card-list-heading"
@@ -284,7 +284,7 @@ Object {
               class="el-card-wrap"
             >
               <div
-                class="el-card-list-main-wrap"
+                class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
               >
                 <h5
                   class="el-card-list-heading"
@@ -565,7 +565,7 @@ Object {
               class="el-card-wrap"
             >
               <div
-                class="el-card-list-main-wrap"
+                class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
               >
                 <h5
                   class="el-card-list-heading"
@@ -2298,7 +2298,7 @@ Object {
             class="el-card-wrap"
           >
             <div
-              class="el-card-list-main-wrap"
+              class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
             >
               <h5
                 class="el-card-list-heading"
@@ -2520,7 +2520,7 @@ Object {
             class="el-card-wrap"
           >
             <div
-              class="el-card-list-main-wrap"
+              class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
             >
               <h5
                 class="el-card-list-heading"
@@ -2801,7 +2801,7 @@ Object {
             class="el-card-wrap"
           >
             <div
-              class="el-card-list-main-wrap"
+              class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
             >
               <h5
                 class="el-card-list-heading"
@@ -4591,7 +4591,7 @@ Object {
               class="el-card-wrap"
             >
               <div
-                class="el-card-list-main-wrap"
+                class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
               >
                 <h5
                   class="el-card-list-heading"
@@ -4813,7 +4813,7 @@ Object {
               class="el-card-wrap"
             >
               <div
-                class="el-card-list-main-wrap"
+                class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
               >
                 <h5
                   class="el-card-list-heading"
@@ -5094,7 +5094,7 @@ Object {
               class="el-card-wrap"
             >
               <div
-                class="el-card-list-main-wrap"
+                class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
               >
                 <h5
                   class="el-card-list-heading"
@@ -6827,7 +6827,7 @@ Object {
             class="el-card-wrap"
           >
             <div
-              class="el-card-list-main-wrap"
+              class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
             >
               <h5
                 class="el-card-list-heading"
@@ -7049,7 +7049,7 @@ Object {
             class="el-card-wrap"
           >
             <div
-              class="el-card-list-main-wrap"
+              class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
             >
               <h5
                 class="el-card-list-heading"
@@ -7330,7 +7330,7 @@ Object {
             class="el-card-wrap"
           >
             <div
-              class="el-card-list-main-wrap"
+              class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
             >
               <h5
                 class="el-card-list-heading"
diff --git a/packages/payments-client/src/components/pages/payment/__tests__/__snapshots__/payment-internal.test.tsx.snap b/packages/payments-client/src/components/pages/payment/__tests__/__snapshots__/payment-internal.test.tsx.snap
index 7343a3a12f..207494a114 100644
--- a/packages/payments-client/src/components/pages/payment/__tests__/__snapshots__/payment-internal.test.tsx.snap
+++ b/packages/payments-client/src/components/pages/payment/__tests__/__snapshots__/payment-internal.test.tsx.snap
@@ -62,7 +62,7 @@ Object {
               class="el-card-wrap"
             >
               <div
-                class="el-card-list-main-wrap"
+                class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
               >
                 <h5
                   class="el-card-list-heading"
@@ -284,7 +284,7 @@ Object {
               class="el-card-wrap"
             >
               <div
-                class="el-card-list-main-wrap"
+                class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
               >
                 <h5
                   class="el-card-list-heading"
@@ -565,7 +565,7 @@ Object {
               class="el-card-wrap"
             >
               <div
-                class="el-card-list-main-wrap"
+                class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
               >
                 <h5
                   class="el-card-list-heading"
@@ -2298,7 +2298,7 @@ Object {
             class="el-card-wrap"
           >
             <div
-              class="el-card-list-main-wrap"
+              class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
             >
               <h5
                 class="el-card-list-heading"
@@ -2520,7 +2520,7 @@ Object {
             class="el-card-wrap"
           >
             <div
-              class="el-card-list-main-wrap"
+              class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
             >
               <h5
                 class="el-card-list-heading"
@@ -2801,7 +2801,7 @@ Object {
             class="el-card-wrap"
           >
             <div
-              class="el-card-list-main-wrap"
+              class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
             >
               <h5
                 class="el-card-list-heading"
diff --git a/packages/payments-client/src/components/pages/payment/__tests__/__snapshots__/payment-page-content.test.tsx.snap b/packages/payments-client/src/components/pages/payment/__tests__/__snapshots__/payment-page-content.test.tsx.snap
index 383d37de33..1cddf5b88f 100644
--- a/packages/payments-client/src/components/pages/payment/__tests__/__snapshots__/payment-page-content.test.tsx.snap
+++ b/packages/payments-client/src/components/pages/payment/__tests__/__snapshots__/payment-page-content.test.tsx.snap
@@ -62,7 +62,7 @@ Object {
               class="el-card-wrap"
             >
               <div
-                class="el-card-list-main-wrap"
+                class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
               >
                 <h5
                   class="el-card-list-heading"
@@ -284,7 +284,7 @@ Object {
               class="el-card-wrap"
             >
               <div
-                class="el-card-list-main-wrap"
+                class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
               >
                 <h5
                   class="el-card-list-heading"
@@ -565,7 +565,7 @@ Object {
               class="el-card-wrap"
             >
               <div
-                class="el-card-list-main-wrap"
+                class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
               >
                 <h5
                   class="el-card-list-heading"
@@ -2298,7 +2298,7 @@ Object {
             class="el-card-wrap"
           >
             <div
-              class="el-card-list-main-wrap"
+              class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
             >
               <h5
                 class="el-card-list-heading"
@@ -2520,7 +2520,7 @@ Object {
             class="el-card-wrap"
           >
             <div
-              class="el-card-list-main-wrap"
+              class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
             >
               <h5
                 class="el-card-list-heading"
@@ -2801,7 +2801,7 @@ Object {
             class="el-card-wrap"
           >
             <div
-              class="el-card-list-main-wrap"
+              class="el-card-list-main-wrap-expanded el-card-list-main-wrap"
             >
               <h5
                 class="el-card-list-heading"