diff --git a/packages/marketplace/linaria.config.js b/packages/marketplace/linaria.config.js
index e1e8b188ef..1aec47cf1e 100644
--- a/packages/marketplace/linaria.config.js
+++ b/packages/marketplace/linaria.config.js
@@ -4,5 +4,5 @@ module.exports = {
   evaluate: true,
   displayName: false,
   // converts camelCase classNames to kebab-case-for-friendly-css
-  classNameSlug: (_hash, title) => dashify(title),
+  classNameSlug: (hash, title) => `${hash}-${dashify(title)}`,
 }
diff --git a/packages/marketplace/src/components/pages/app-detail/__styles__/app-permission-content.ts b/packages/marketplace/src/components/pages/app-detail/__styles__/app-permission-content.ts
new file mode 100644
index 0000000000..6c4b2c199f
--- /dev/null
+++ b/packages/marketplace/src/components/pages/app-detail/__styles__/app-permission-content.ts
@@ -0,0 +1,25 @@
+import { css } from 'linaria'
+
+export const permissionBlock = css`
+  margin-bottom: 15px;
+`
+
+export const installButtonContainer = css`
+  display: flex;
+`
+
+export const installButton = css`
+  margin: 0 1rem;
+  width: 100%;
+  &:last-child {
+    margin: 0 0 0 1rem;
+  }
+`
+
+export const permissionList = css`
+  padding: 0 2rem 2rem 2rem;
+`
+
+export const permissionListItem = css`
+  list-style-type: circle;
+`
diff --git a/packages/marketplace/src/components/pages/app-detail/__styles__/standalone-app-detail.ts b/packages/marketplace/src/components/pages/app-detail/__styles__/standalone-app-detail.ts
new file mode 100644
index 0000000000..fbe132a5a9
--- /dev/null
+++ b/packages/marketplace/src/components/pages/app-detail/__styles__/standalone-app-detail.ts
@@ -0,0 +1,74 @@
+import { css } from 'linaria'
+import * as colors from '@/core/__styles__/colors'
+import { forMobileOnly, forTabletAndBelow } from '@/core/__styles__/screen-size'
+import { forIeOnly } from '@/core/__styles__/browser'
+
+export const preview = css`
+  position: relative;
+  top: 2px;
+`
+
+export const check = css`
+  position: relative;
+  top: 2px;
+  left: 2px;
+  color: ${colors.reapitGreen};
+`
+
+export const tag = css`
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background: ${colors.greyLight};
+  margin: 0.5rem 0.5rem 0 0;
+`
+
+export const container = css`
+  height: 100%;
+  margin-bottom: auto;
+  ${forMobileOnly} {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+  ${forIeOnly} {
+    min-width: 1024px;
+  }
+`
+
+export const containerHeader = css`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+`
+
+export const appIconContainer = css`
+  width: 96px;
+  height: auto;
+  margin: 0 auto;
+`
+
+export const headerContent = css`
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  align-items: center;
+  text-align: center;
+`
+
+export const containerOuterHeader = css`
+  ${forTabletAndBelow} {
+    flex-direction: column;
+  }
+`
+
+export const buttonGroup = css`
+  display: flex;
+  flex-direction: column;
+
+  ${forMobileOnly} {
+    > button {
+      width: 50%;
+    }
+
+    flex-direction: row;
+  }
+`
diff --git a/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-detail.test.tsx.snap b/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-detail.test.tsx.snap
index cc411e529c..0416d4aafd 100644
--- a/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-detail.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-detail.test.tsx.snap
@@ -57,6 +57,7 @@ exports[`AppDetail should match a snapshot 1`] = `
     >
       <AppDetail>
         <Component
+          className=""
           dataTest="client-app-detail-container"
         >
           <div
@@ -88,6 +89,7 @@ exports[`AppDetail should match a snapshot 1`] = `
                     className="flex"
                   >
                     <Unknown
+                      className=""
                       dataTest="agree-btn"
                       loading={false}
                       onClick={[Function]}
@@ -97,6 +99,7 @@ exports[`AppDetail should match a snapshot 1`] = `
                       Confirm
                     </Unknown>
                     <Unknown
+                      className=""
                       dataTest="disagree-btn"
                       disabled={false}
                       onClick={[Function]}
@@ -126,6 +129,7 @@ exports[`AppDetail should match a snapshot 1`] = `
                       className="flex"
                     >
                       <Unknown
+                        className=""
                         dataTest="agree-btn"
                         loading={false}
                         onClick={[Function]}
@@ -135,6 +139,7 @@ exports[`AppDetail should match a snapshot 1`] = `
                         Confirm
                       </Unknown>
                       <Unknown
+                        className=""
                         dataTest="disagree-btn"
                         disabled={false}
                         onClick={[Function]}
@@ -203,6 +208,7 @@ exports[`AppDetail should match a snapshot 1`] = `
                     className="flex"
                   >
                     <Unknown
+                      className=""
                       dataTest="agree-btn"
                       loading={false}
                       onClick={[Function]}
@@ -212,6 +218,7 @@ exports[`AppDetail should match a snapshot 1`] = `
                       Confirm
                     </Unknown>
                     <Unknown
+                      className=""
                       dataTest="disagree-btn"
                       disabled={false}
                       onClick={[Function]}
@@ -241,6 +248,7 @@ exports[`AppDetail should match a snapshot 1`] = `
                       className="flex"
                     >
                       <Unknown
+                        className=""
                         dataTest="agree-btn"
                         loading={false}
                         onClick={[Function]}
@@ -250,6 +258,7 @@ exports[`AppDetail should match a snapshot 1`] = `
                         Confirm
                       </Unknown>
                       <Unknown
+                        className=""
                         dataTest="disagree-btn"
                         disabled={false}
                         onClick={[Function]}
@@ -508,6 +517,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
     >
       <AppDetail>
         <Component
+          className=""
           dataTest="client-app-detail-container"
         >
           <div
@@ -539,6 +549,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
                     className="flex"
                   >
                     <Unknown
+                      className=""
                       dataTest="agree-btn"
                       loading={false}
                       onClick={[Function]}
@@ -548,6 +559,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
                       Confirm
                     </Unknown>
                     <Unknown
+                      className=""
                       dataTest="disagree-btn"
                       disabled={false}
                       onClick={[Function]}
@@ -577,6 +589,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
                       className="flex"
                     >
                       <Unknown
+                        className=""
                         dataTest="agree-btn"
                         loading={false}
                         onClick={[Function]}
@@ -586,6 +599,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
                         Confirm
                       </Unknown>
                       <Unknown
+                        className=""
                         dataTest="disagree-btn"
                         disabled={false}
                         onClick={[Function]}
@@ -654,6 +668,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
                     className="flex"
                   >
                     <Unknown
+                      className=""
                       dataTest="agree-btn"
                       loading={false}
                       onClick={[Function]}
@@ -663,6 +678,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
                       Confirm
                     </Unknown>
                     <Unknown
+                      className=""
                       dataTest="disagree-btn"
                       disabled={false}
                       onClick={[Function]}
@@ -692,6 +708,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
                       className="flex"
                     >
                       <Unknown
+                        className=""
                         dataTest="agree-btn"
                         loading={false}
                         onClick={[Function]}
@@ -701,6 +718,7 @@ exports[`AppDetail should render loader when client.appDetail.data is an empty o
                         Confirm
                       </Unknown>
                       <Unknown
+                        className=""
                         dataTest="disagree-btn"
                         disabled={false}
                         onClick={[Function]}
@@ -959,6 +977,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
     >
       <AppDetail>
         <Component
+          className=""
           dataTest="client-app-detail-container"
         >
           <div
@@ -990,6 +1009,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
                     className="flex"
                   >
                     <Unknown
+                      className=""
                       dataTest="agree-btn"
                       loading={false}
                       onClick={[Function]}
@@ -999,6 +1019,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
                       Confirm
                     </Unknown>
                     <Unknown
+                      className=""
                       dataTest="disagree-btn"
                       disabled={false}
                       onClick={[Function]}
@@ -1028,6 +1049,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
                       className="flex"
                     >
                       <Unknown
+                        className=""
                         dataTest="agree-btn"
                         loading={false}
                         onClick={[Function]}
@@ -1037,6 +1059,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
                         Confirm
                       </Unknown>
                       <Unknown
+                        className=""
                         dataTest="disagree-btn"
                         disabled={false}
                         onClick={[Function]}
@@ -1105,6 +1128,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
                     className="flex"
                   >
                     <Unknown
+                      className=""
                       dataTest="agree-btn"
                       loading={false}
                       onClick={[Function]}
@@ -1114,6 +1138,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
                       Confirm
                     </Unknown>
                     <Unknown
+                      className=""
                       dataTest="disagree-btn"
                       disabled={false}
                       onClick={[Function]}
@@ -1143,6 +1168,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
                       className="flex"
                     >
                       <Unknown
+                        className=""
                         dataTest="agree-btn"
                         loading={false}
                         onClick={[Function]}
@@ -1152,6 +1178,7 @@ exports[`AppDetail should render loader when isLoadingAppDetail = true 1`] = `
                         Confirm
                       </Unknown>
                       <Unknown
+                        className=""
                         dataTest="disagree-btn"
                         disabled={false}
                         onClick={[Function]}
diff --git a/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-install-confirmation.test.tsx.snap b/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-install-confirmation.test.tsx.snap
index 5cacda44db..5923ab4b00 100644
--- a/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-install-confirmation.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-install-confirmation.test.tsx.snap
@@ -106,6 +106,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
               className="flex"
             >
               <Unknown
+                className=""
                 dataTest="agree-btn"
                 loading={false}
                 onClick={[Function]}
@@ -115,6 +116,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
                 Confirm
               </Unknown>
               <Unknown
+                className=""
                 dataTest="disagree-btn"
                 disabled={false}
                 onClick={[MockFunction]}
@@ -144,6 +146,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
                 className="flex"
               >
                 <Unknown
+                  className=""
                   dataTest="agree-btn"
                   loading={false}
                   onClick={[Function]}
@@ -153,6 +156,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
                   Confirm
                 </Unknown>
                 <Unknown
+                  className=""
                   dataTest="disagree-btn"
                   disabled={false}
                   onClick={[MockFunction]}
@@ -325,6 +329,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
                         className="flex"
                       >
                         <Unknown
+                          className=""
                           dataTest="agree-btn"
                           loading={false}
                           onClick={[Function]}
@@ -334,6 +339,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
                           Confirm
                         </Unknown>
                         <Unknown
+                          className=""
                           dataTest="disagree-btn"
                           disabled={false}
                           onClick={[MockFunction]}
@@ -531,6 +537,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
                                       className="flex"
                                     >
                                       <Component
+                                        className=""
                                         dataTest="agree-btn"
                                         loading={false}
                                         onClick={[Function]}
@@ -548,6 +555,7 @@ exports[`ClientAppInstallConfirmation should match a snapshot 1`] = `
                                         </button>
                                       </Component>
                                       <Component
+                                        className=""
                                         dataTest="disagree-btn"
                                         disabled={false}
                                         onClick={[MockFunction]}
diff --git a/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-uninstall-confirmation.test.tsx.snap b/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-uninstall-confirmation.test.tsx.snap
index 119279dc48..b7886dd6a6 100644
--- a/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-uninstall-confirmation.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-uninstall-confirmation.test.tsx.snap
@@ -392,6 +392,7 @@ exports[`ClientAppUninstallConfirmation renderUninstallConfirmationModalFooter s
     className="flex"
   >
     <Component
+      className=""
       dataTest="agree-btn"
       loading={false}
       onClick={[Function]}
@@ -401,6 +402,7 @@ exports[`ClientAppUninstallConfirmation renderUninstallConfirmationModalFooter s
       Confirm
     </Component>
     <Component
+      className=""
       dataTest="disagree-btn"
       disabled={false}
       onClick={[MockFunction]}
@@ -520,6 +522,7 @@ exports[`ClientAppUninstallConfirmation should match a snapshot 1`] = `
               className="flex"
             >
               <Unknown
+                className=""
                 dataTest="agree-btn"
                 loading={false}
                 onClick={[Function]}
@@ -529,6 +532,7 @@ exports[`ClientAppUninstallConfirmation should match a snapshot 1`] = `
                 Confirm
               </Unknown>
               <Unknown
+                className=""
                 dataTest="disagree-btn"
                 disabled={false}
                 onClick={[MockFunction]}
@@ -558,6 +562,7 @@ exports[`ClientAppUninstallConfirmation should match a snapshot 1`] = `
                 className="flex"
               >
                 <Unknown
+                  className=""
                   dataTest="agree-btn"
                   loading={false}
                   onClick={[Function]}
@@ -567,6 +572,7 @@ exports[`ClientAppUninstallConfirmation should match a snapshot 1`] = `
                   Confirm
                 </Unknown>
                 <Unknown
+                  className=""
                   dataTest="disagree-btn"
                   disabled={false}
                   onClick={[MockFunction]}
@@ -704,6 +710,7 @@ exports[`ClientAppUninstallConfirmation should match a snapshot 1`] = `
                         className="flex"
                       >
                         <Unknown
+                          className=""
                           dataTest="agree-btn"
                           loading={false}
                           onClick={[Function]}
@@ -713,6 +720,7 @@ exports[`ClientAppUninstallConfirmation should match a snapshot 1`] = `
                           Confirm
                         </Unknown>
                         <Unknown
+                          className=""
                           dataTest="disagree-btn"
                           disabled={false}
                           onClick={[MockFunction]}
@@ -862,6 +870,7 @@ exports[`ClientAppUninstallConfirmation should match a snapshot 1`] = `
                                       className="flex"
                                     >
                                       <Component
+                                        className=""
                                         dataTest="agree-btn"
                                         loading={false}
                                         onClick={[Function]}
@@ -879,6 +888,7 @@ exports[`ClientAppUninstallConfirmation should match a snapshot 1`] = `
                                         </button>
                                       </Component>
                                       <Component
+                                        className=""
                                         dataTest="disagree-btn"
                                         disabled={false}
                                         onClick={[MockFunction]}
diff --git a/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/contact-developer-modal.test.tsx.snap b/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/contact-developer-modal.test.tsx.snap
index c3f14b823e..124190b884 100644
--- a/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/contact-developer-modal.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/contact-developer-modal.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`ContactDeveloperSection should match snapshot with gutter 1`] = `
         <Component>
           <p>
             <a
-              className={[Function]}
+              className=""
               href="mailto:reapit@reapit.com"
               rel="noopener noreferrer"
               target="_blank"
@@ -80,7 +80,7 @@ exports[`ContactDeveloperSection should match snapshot with gutter 1`] = `
         <Component>
           <p>
             <a
-              className={[Function]}
+              className=""
               href="https://reapit.com"
               rel="noopener noreferrer"
               target="_blank"
@@ -156,7 +156,7 @@ exports[`ContactDeveloperSection should match snapshot without gutter 1`] = `
         <Component>
           <p>
             <a
-              className={[Function]}
+              className=""
               href="mailto:reapit@reapit.com"
               rel="noopener noreferrer"
               target="_blank"
@@ -175,7 +175,7 @@ exports[`ContactDeveloperSection should match snapshot without gutter 1`] = `
         <Component>
           <p>
             <a
-              className={[Function]}
+              className=""
               href="https://reapit.com"
               rel="noopener noreferrer"
               target="_blank"
diff --git a/packages/marketplace/src/components/pages/app-detail/client/app-detail.tsx b/packages/marketplace/src/components/pages/app-detail/client/app-detail.tsx
index ee02fea4ec..58c33e2691 100644
--- a/packages/marketplace/src/components/pages/app-detail/client/app-detail.tsx
+++ b/packages/marketplace/src/components/pages/app-detail/client/app-detail.tsx
@@ -12,7 +12,7 @@ import { selectIsAdmin } from '@/selector/auth'
 import { canGoBack } from '@/utils/router-helper'
 import AppContent from './app-content'
 import { Loader, GridItem, Grid, Section } from '@reapit/elements'
-import styles from '@/styles/blocks/standalone-app-detail.scss?mod'
+import * as styles from '../__styles__/standalone-app-detail'
 import AppInstallConfirmation from '@/components/pages/app-detail/client/app-install-confirmation'
 import { Aside } from './aside'
 import { getDesktopIntegrationTypes } from '@/utils/get-desktop-integration-types'
diff --git a/packages/marketplace/src/components/pages/app-detail/client/app-install-confirmation.tsx b/packages/marketplace/src/components/pages/app-detail/client/app-install-confirmation.tsx
index 42c6091fd7..2f6aa2075b 100644
--- a/packages/marketplace/src/components/pages/app-detail/client/app-install-confirmation.tsx
+++ b/packages/marketplace/src/components/pages/app-detail/client/app-install-confirmation.tsx
@@ -3,7 +3,7 @@ import { useHistory } from 'react-router'
 import { History } from 'history'
 import { useDispatch, useSelector } from 'react-redux'
 import { AppDetailModel } from '@reapit/foundations-ts-definitions'
-import appPermissionContentStyles from '@/styles/pages/app-permission-content.scss?mod'
+import * as appPermissionContentStyles from '../__styles__/app-permission-content'
 import { Button, ModalV2, GridFourCol, GridFourColItem, Content, ModalPropsV2 } from '@reapit/elements'
 import { installApp } from '@/actions/installations'
 import { fetchAppDetail } from '@/actions/apps'
diff --git a/packages/marketplace/src/components/pages/app-detail/client/app-uninstall-confirmation.tsx b/packages/marketplace/src/components/pages/app-detail/client/app-uninstall-confirmation.tsx
index 66eeb14eb3..bf3a1f4111 100644
--- a/packages/marketplace/src/components/pages/app-detail/client/app-uninstall-confirmation.tsx
+++ b/packages/marketplace/src/components/pages/app-detail/client/app-uninstall-confirmation.tsx
@@ -4,7 +4,7 @@ import { History } from 'history'
 import { Dispatch } from 'redux'
 import { useDispatch, useSelector } from 'react-redux'
 import { AppDetailModel } from '@reapit/foundations-ts-definitions'
-import appPermissionContentStyles from '@/styles/pages/app-permission-content.scss?mod'
+import * as appPermissionContentStyles from '../__styles__/app-permission-content'
 import { fetchAppDetail } from '@/actions/apps'
 import { Button, ModalV2, ModalPropsV2 } from '@reapit/elements'
 import { uninstallApp } from '@/actions/installations'
diff --git a/packages/marketplace/src/components/pages/app-detail/client/contact-developer-modal.tsx b/packages/marketplace/src/components/pages/app-detail/client/contact-developer-modal.tsx
index 829eefda12..3c3dde0492 100644
--- a/packages/marketplace/src/components/pages/app-detail/client/contact-developer-modal.tsx
+++ b/packages/marketplace/src/components/pages/app-detail/client/contact-developer-modal.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Button, Grid, GridItem, SubTitleH6, Content, ModalV2 } from '@reapit/elements'
-import linkStyles from '@/styles/elements/link.scss?mod'
+import * as linkStyles from '@/core/__styles__/elements'
 
 export type ContactDeveloperSectionType = {
   contact: {
diff --git a/packages/marketplace/src/components/pages/app-detail/common/__tests__/__snapshots__/ui-app-header.test.tsx.snap b/packages/marketplace/src/components/pages/app-detail/common/__tests__/__snapshots__/ui-app-header.test.tsx.snap
index 19a68c6a06..f3d7565206 100644
--- a/packages/marketplace/src/components/pages/app-detail/common/__tests__/__snapshots__/ui-app-header.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/app-detail/common/__tests__/__snapshots__/ui-app-header.test.tsx.snap
@@ -5,21 +5,29 @@ exports[`AppHeader should match a snapshot 1`] = `
   className=""
 >
   <Component>
-    <div>
-      <div>
+    <div
+      className=""
+    >
+      <div
+        className=""
+      >
         <img
           alt="Peter's Properties"
           className="image is-96x96"
           src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/7d88729f-2366-4561-9d5c-282615f3946b.jpeg"
         />
       </div>
-      <div>
+      <div
+        className=""
+      >
         <Component>
           Peter's Properties
         </Component>
         <Component>
           Verified by Reapit 
-          <FaCheck />
+          <FaCheck
+            className=""
+          />
         </Component>
       </div>
     </div>
diff --git a/packages/marketplace/src/components/pages/app-detail/common/__tests__/__snapshots__/ui-helpers.test.tsx.snap b/packages/marketplace/src/components/pages/app-detail/common/__tests__/__snapshots__/ui-helpers.test.tsx.snap
index 63ca3cfe79..af95749625 100644
--- a/packages/marketplace/src/components/pages/app-detail/common/__tests__/__snapshots__/ui-helpers.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/app-detail/common/__tests__/__snapshots__/ui-helpers.test.tsx.snap
@@ -27,7 +27,9 @@ exports[`Ui Sections <ImageSection /> should match snapshot for has image 1`] =
 exports[`Ui Sections <ImageSection /> should match snapshot for no images 1`] = `""`;
 
 exports[`Ui Sections <Tag /> should match snapshot 1`] = `
-<div>
+<div
+  className=""
+>
   Test
 </div>
 `;
diff --git a/packages/marketplace/src/components/pages/app-detail/common/__tests__/__snapshots__/ui-sections.test.tsx.snap b/packages/marketplace/src/components/pages/app-detail/common/__tests__/__snapshots__/ui-sections.test.tsx.snap
index 9c77e3b904..455370b893 100644
--- a/packages/marketplace/src/components/pages/app-detail/common/__tests__/__snapshots__/ui-sections.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/app-detail/common/__tests__/__snapshots__/ui-sections.test.tsx.snap
@@ -301,6 +301,7 @@ exports[`ListingPreviewSection should match a snapshot 1`] = `
       </span>
        
       <a
+        className=""
         href="#"
         onClick={[Function]}
       >
@@ -379,7 +380,9 @@ exports[`StatusSection should match a snapshot where isListed true and is sideba
 >
   <div>
     Listed 
-    <FaCheck />
+    <FaCheck
+      className=""
+    />
   </div>
 </Component>
 `;
diff --git a/packages/marketplace/src/components/pages/app-detail/common/ui-app-header.tsx b/packages/marketplace/src/components/pages/app-detail/common/ui-app-header.tsx
index 04fdadb48f..cc8fe50c7d 100644
--- a/packages/marketplace/src/components/pages/app-detail/common/ui-app-header.tsx
+++ b/packages/marketplace/src/components/pages/app-detail/common/ui-app-header.tsx
@@ -2,7 +2,8 @@ import * as React from 'react'
 import { H3, Grid, GridItem, SubTitleH6 } from '@reapit/elements'
 import { FaCheck } from 'react-icons/fa'
 import { AppDetailModel } from '@reapit/foundations-ts-definitions'
-import styles from '@/styles/blocks/standalone-app-detail.scss?mod'
+import * as styles from '../__styles__/standalone-app-detail'
+
 import { MEDIA_INDEX } from '@/constants/media'
 import ImagePlaceHolder from '@/assets/images/default-app-icon.jpg'
 import featureImagePlaceHolder from '@/assets/images/default-feature-image.jpg'
diff --git a/packages/marketplace/src/components/pages/app-detail/common/ui-helpers.tsx b/packages/marketplace/src/components/pages/app-detail/common/ui-helpers.tsx
index ba299f4bcd..8941a12469 100644
--- a/packages/marketplace/src/components/pages/app-detail/common/ui-helpers.tsx
+++ b/packages/marketplace/src/components/pages/app-detail/common/ui-helpers.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import styles from '@/styles/blocks/standalone-app-detail.scss?mod'
+import * as styles from '../__styles__/standalone-app-detail'
 
 import { H5, Content } from '@reapit/elements'
 
diff --git a/packages/marketplace/src/components/pages/app-detail/common/ui-sections.tsx b/packages/marketplace/src/components/pages/app-detail/common/ui-sections.tsx
index 2ae6cbb1ad..12743970ba 100644
--- a/packages/marketplace/src/components/pages/app-detail/common/ui-sections.tsx
+++ b/packages/marketplace/src/components/pages/app-detail/common/ui-sections.tsx
@@ -9,7 +9,7 @@ import {
 import { AppDetailSection, Tag, ImageSection } from './ui-helpers'
 import { convertBooleanToYesNoString } from '@/utils/boolean-to-yes-no-string'
 import { FaCheck, FaExternalLinkAlt } from 'react-icons/fa'
-import styles from '@/styles/blocks/standalone-app-detail.scss?mod'
+import * as styles from '../__styles__/standalone-app-detail'
 import {
   LevelRight,
   Button,
diff --git a/packages/marketplace/src/components/pages/apps/__styles__/index.ts b/packages/marketplace/src/components/pages/apps/__styles__/index.ts
new file mode 100644
index 0000000000..f53bb48a8d
--- /dev/null
+++ b/packages/marketplace/src/components/pages/apps/__styles__/index.ts
@@ -0,0 +1,12 @@
+import { css } from 'linaria'
+
+export const appList = css`
+  width: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  margin: -1rem;
+  padding: 1rem;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`
diff --git a/packages/marketplace/src/components/pages/apps/__tests__/__snapshots__/apps.test.tsx.snap b/packages/marketplace/src/components/pages/apps/__tests__/__snapshots__/apps.test.tsx.snap
index 6207c5309f..bcd6a42932 100644
--- a/packages/marketplace/src/components/pages/apps/__tests__/__snapshots__/apps.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/apps/__tests__/__snapshots__/apps.test.tsx.snap
@@ -58,6 +58,7 @@ exports[`Client should match a snapshot when LOADING false 1`] = `
       <Component>
         <ErrorBoundary>
           <Component
+            className=""
             hasBackground={false}
             hasMargin={false}
             hasPadding={false}
@@ -220,6 +221,7 @@ exports[`Client should match a snapshot when LOADING false 2`] = `
       <Component>
         <ErrorBoundary>
           <Component
+            className=""
             hasBackground={false}
             hasMargin={false}
             hasPadding={false}
@@ -281,7 +283,7 @@ exports[`Client should match a snapshot when LOADING false 2`] = `
                             className="overflow-hidden mb-4"
                           >
                             <Component
-                              className=" undefined"
+                              className=""
                               data-test="app-list-container"
                             >
                               <div
diff --git a/packages/marketplace/src/components/pages/apps/apps.tsx b/packages/marketplace/src/components/pages/apps/apps.tsx
index 521d81b74b..344f6fef62 100644
--- a/packages/marketplace/src/components/pages/apps/apps.tsx
+++ b/packages/marketplace/src/components/pages/apps/apps.tsx
@@ -19,7 +19,7 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 import { fetchApps } from '@/actions/apps'
 import { getNumberOfItems } from '@/utils/browse-app'
 import ComingSoonApps from './coming-soon'
-import styles from '@/styles/pages/apps.scss?mod'
+import * as styles from './__styles__'
 
 const DEFAULT_SCROLL_THRESHOLD = 0.5
 
@@ -82,7 +82,7 @@ export const Apps: React.FunctionComponent = () => {
   return (
     <ErrorBoundary>
       <Section
-        className={styles['app-list']}
+        className={styles.appList}
         isFlex
         isFlexColumn
         hasPadding={false}
diff --git a/packages/marketplace/src/components/pages/help/__styles__/index.ts b/packages/marketplace/src/components/pages/help/__styles__/index.ts
new file mode 100644
index 0000000000..e5d7af0cdb
--- /dev/null
+++ b/packages/marketplace/src/components/pages/help/__styles__/index.ts
@@ -0,0 +1,17 @@
+import { css } from 'linaria'
+import * as colors from '@/core/__styles__/colors'
+
+export const wrapBoxContent = css`
+  height: 100%;
+  border: 2px solid ${colors.greyLight};
+`
+
+export const image = css`
+  width: 100%;
+  height: auto;
+`
+
+export const button = css`
+  min-width: 8rem;
+  width: 35%;
+`
diff --git a/packages/marketplace/src/components/pages/help/help-item-list.tsx b/packages/marketplace/src/components/pages/help/help-item-list.tsx
index 62c940b133..e5c9708308 100644
--- a/packages/marketplace/src/components/pages/help/help-item-list.tsx
+++ b/packages/marketplace/src/components/pages/help/help-item-list.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import styles from '@/styles/pages/help.scss?mod'
+import * as styles from './__styles__'
 import { Button, GridFourCol, GridThreeColItem, H5, Section, LevelRight, Content } from '@reapit/elements'
 
 export interface HelpItem {
diff --git a/packages/marketplace/src/styles/blocks/installed-app-card.scss b/packages/marketplace/src/components/pages/installed-apps/__styles__/installed-app-card.ts
similarity index 63%
rename from packages/marketplace/src/styles/blocks/installed-app-card.scss
rename to packages/marketplace/src/components/pages/installed-apps/__styles__/installed-app-card.ts
index 8a96ca9731..687e79a0f8 100644
--- a/packages/marketplace/src/styles/blocks/installed-app-card.scss
+++ b/packages/marketplace/src/components/pages/installed-apps/__styles__/installed-app-card.ts
@@ -1,7 +1,9 @@
-$icon-width: 80px;
-$icon-height: 80px;
+import { css } from 'linaria'
 
-.container {
+const iconWidth = 80
+const iconHeight = 80
+
+export const container = css`
   display: flex;
   width: 50%;
   flex-direction: column;
@@ -14,25 +16,24 @@ $icon-height: 80px;
   @media (min-width: 600px) {
     width: 25%;
   }
-}
-.wrapIcon {
-  width: $icon-width;
-  height: $icon-height;
+`
+
+export const wrapIcon = css`
+  width: ${iconWidth}px;
+  height: ${iconHeight}px;
   cursor: pointer;
   background-color: #ffffff;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
-}
-
-.icon {
-  width: $icon-width - 30px;
-  max-height: $icon-height - 30px;
-}
-
-.appTitle {
-  width: $icon-width * 1.5;
+`
+export const icon = css`
+  width: ${iconWidth - 30}px;
+  max-height: ${iconHeight - 30}px;
+`
+export const appTitle = css`
+  width: ${iconWidth * 1.5}px;
   white-space: nowrap;
   margin-top: 1rem;
   text-align: center;
@@ -40,9 +41,8 @@ $icon-height: 80px;
   overflow: hidden;
   font-size: 16px;
   font-weight: bold;
-}
-
-.content {
+`
+export const content = css`
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -50,4 +50,4 @@ $icon-height: 80px;
   overflow: hidden;
   text-overflow: ellipsis;
   height: 4.5rem;
-}
+`
diff --git a/packages/marketplace/src/styles/blocks/installed-app-list.scss b/packages/marketplace/src/components/pages/installed-apps/__styles__/installed-app-list.ts
similarity index 63%
rename from packages/marketplace/src/styles/blocks/installed-app-list.scss
rename to packages/marketplace/src/components/pages/installed-apps/__styles__/installed-app-list.ts
index 08e5a4d6ac..fef29ee7bc 100644
--- a/packages/marketplace/src/styles/blocks/installed-app-list.scss
+++ b/packages/marketplace/src/components/pages/installed-apps/__styles__/installed-app-list.ts
@@ -1,9 +1,10 @@
-@import './installed-app-card.scss';
+import { css } from 'linaria'
 
-.contentIsLoading {
+export const contentIsLoading = css`
   opacity: 0.75;
-}
-.wrapList {
+`
+
+export const wrapList = css`
   display: flex;
   flex-wrap: wrap;
   justify-items: center;
@@ -13,5 +14,4 @@
   & > * {
     margin-bottom: 1rem;
   }
-}
-
+`
diff --git a/packages/marketplace/src/components/pages/installed-apps/__tests__/__snapshots__/installed-app-list.test.tsx.snap b/packages/marketplace/src/components/pages/installed-apps/__tests__/__snapshots__/installed-app-list.test.tsx.snap
index 2d2e8b24a3..e358573142 100644
--- a/packages/marketplace/src/components/pages/installed-apps/__tests__/__snapshots__/installed-app-list.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/installed-apps/__tests__/__snapshots__/installed-app-list.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`InstalledAppList should match a snappshot ListDesktopScreen 1`] = `
 <Component
-  className=" "
+  className=""
   data-test="app-list-container"
 >
   <Component
@@ -74,7 +74,7 @@ exports[`InstalledAppList should match a snappshot ListDesktopScreen 1`] = `
 
 exports[`InstalledAppList should match a snappshot ListMobileScreen 1`] = `
 <div
-  className="undefined "
+  className=""
 >
   <InstalledAppCard
     app={
diff --git a/packages/marketplace/src/components/pages/installed-apps/installed-app-card.tsx b/packages/marketplace/src/components/pages/installed-apps/installed-app-card.tsx
index 142da01e5f..65386073bc 100644
--- a/packages/marketplace/src/components/pages/installed-apps/installed-app-card.tsx
+++ b/packages/marketplace/src/components/pages/installed-apps/installed-app-card.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
-import installedAppCardStyles from '@/styles/blocks/installed-app-card.scss?mod'
+import * as installedAppCardStyles from './__styles__/installed-app-card'
 import { isMobile, Tile } from '@reapit/elements'
 import defaultAppIcon from '@/assets/images/default-app-icon.jpg'
 
diff --git a/packages/marketplace/src/components/pages/installed-apps/installed-app-list.tsx b/packages/marketplace/src/components/pages/installed-apps/installed-app-list.tsx
index 9f10343a19..060f463f9b 100644
--- a/packages/marketplace/src/components/pages/installed-apps/installed-app-list.tsx
+++ b/packages/marketplace/src/components/pages/installed-apps/installed-app-list.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
 import InstalledAppCard from './installed-app-card'
-import installedAppListStyles from '@/styles/blocks/installed-app-list.scss?mod'
+import * as installedAppListStyles from './__styles__/installed-app-list'
 import {
   Loader,
   H3,
@@ -39,7 +39,7 @@ export const ListMobileScreen = ({
   loading,
   onCardClick,
 }: Pick<InstalledAppListProps, 'list' | 'loading' | 'onCardClick'>) => (
-  <div className={`${installedAppListStyles.wrapList} ${loading ? installedAppListStyles.isLoading : ''}`}>
+  <div className={cx(installedAppListStyles.wrapList, loading && installedAppListStyles.contentIsLoading)}>
     {list.map(app => (
       <InstalledAppCard key={app.id} app={app} onClick={onClickHandler(onCardClick, app)} />
     ))}
@@ -51,7 +51,7 @@ export const ListDesktopScreen = ({
   loading,
   onCardClick,
 }: Pick<InstalledAppListProps, 'list' | 'loading' | 'onCardClick'>) => (
-  <GridFourCol className={` ${loading ? installedAppListStyles.contentIsLoading : ''}`} data-test="app-list-container">
+  <GridFourCol className={cx(loading && installedAppListStyles.contentIsLoading)} data-test="app-list-container">
     {list.map(app => (
       <GridFourColItem key={app.id}>
         <InstalledAppCard key={app.id} app={app} onClick={onClickHandler(onCardClick, app)} />
diff --git a/packages/marketplace/src/styles/pages/login.scss b/packages/marketplace/src/components/pages/login/__styles__/index.ts
similarity index 75%
rename from packages/marketplace/src/styles/pages/login.scss
rename to packages/marketplace/src/components/pages/login/__styles__/index.ts
index 1ec7663e93..766f73d8e1 100644
--- a/packages/marketplace/src/styles/pages/login.scss
+++ b/packages/marketplace/src/components/pages/login/__styles__/index.ts
@@ -1,21 +1,22 @@
-@import '../base/colors.scss';
+import { css } from 'linaria'
+import * as colors from '@/core/__styles__/colors'
 
-.container {
+export const container = css`
   min-width: 100vw;
   min-height: 100vh;
   display: flex;
   justify-content: flex-end;
   align-items: center;
   flex-direction: row;
-  background-color: $white;
+  background-color: ${colors.white};
 
   @media screen and (max-width: 900px) {
     flex-direction: column-reverse;
   }
-}
+`
 
-.wrapper {
-  background-color: $white;
+export const wrapper = css`
+  background-color: ${colors.white};
   width: 33.33%;
   padding: 1rem;
   pointer-events: auto;
@@ -49,10 +50,10 @@
   @media screen and (min-width: 1200px) {
     padding: 0 3rem;
   }
-}
+`
 
-.image {
-  background-color: $white;
+export const image = css`
+  background-color: ${colors.white};
   width: 66.66%;
   height: 100vh;
   font-size: 0;
@@ -67,13 +68,13 @@
     width: 100%;
     height: 300px;
   }
-}
+`
 
-.register-level {
+export const registerLevel = css`
   flex-direction: column;
-}
+`
 
-.register {
+export const register = css`
   max-width: 400px;
   width: 100%;
   text-align: right;
@@ -89,24 +90,24 @@
   @media screen and (min-width: 960px) {
     padding: 0;
   }
-}
-.loginForm {
+`
+
+export const loginForm = css`
   position: relative;
   .forgotPasswordContainer {
     position: absolute;
     right: 0;
     z-index: 1;
   }
-}
+`
 
-.labelTerms {
+export const labelTerms = css`
   font-size: 0.8rem;
   display: flex;
   align-items: center;
-}
+`
 
-// Need this to override default without !important
-.loginButton.loginButton {
+export const loginButton = css`
   margin-right: auto;
   margin-left: auto;
-}
+`
diff --git a/packages/marketplace/src/components/pages/login/__tests__/__snapshots__/login.test.tsx.snap b/packages/marketplace/src/components/pages/login/__tests__/__snapshots__/login.test.tsx.snap
index e99ede2a86..70f18a6d54 100644
--- a/packages/marketplace/src/components/pages/login/__tests__/__snapshots__/login.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/login/__tests__/__snapshots__/login.test.tsx.snap
@@ -56,8 +56,12 @@ exports[`Login should match a snapshot 1`] = `
       }
     >
       <Component>
-        <div>
-          <div>
+        <div
+          className=""
+        >
+          <div
+            className=""
+          >
             <Component>
               <div
                 className=""
@@ -79,12 +83,15 @@ exports[`Login should match a snapshot 1`] = `
                 </p>
               </section>
             </Component>
-            <Component>
+            <Component
+              className=""
+            >
               <div
                 className=""
                 data-test=""
               >
                 <Component
+                  className=""
                   dataTest="login-button"
                   disabled={false}
                   fullWidth={true}
@@ -114,7 +121,9 @@ exports[`Login should match a snapshot 1`] = `
               />
             </Component>
           </div>
-          <div>
+          <div
+            className=""
+          >
             <img
               alt="Reapit Graphic"
               src=""
diff --git a/packages/marketplace/src/components/pages/login/login.tsx b/packages/marketplace/src/components/pages/login/login.tsx
index 2db95d6b80..27e66b3331 100644
--- a/packages/marketplace/src/components/pages/login/login.tsx
+++ b/packages/marketplace/src/components/pages/login/login.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Button, Level, FlexContainerBasic, Section, notification } from '@reapit/elements'
 import { getDefaultRoute } from '@/utils/auth-route'
 import messages from '@/constants/messages'
-import loginStyles from '@/styles/pages/login.scss?mod'
+import * as loginStyles from './__styles__'
 import logoImage from '@/assets/images/reapit-graphic.jpg'
 import connectImage from '@/assets/images/reapit-connect.png'
 import { reapitConnectBrowserSession } from '@/core/connect-session'
diff --git a/packages/marketplace/src/components/pages/settings/__styles__/index.ts b/packages/marketplace/src/components/pages/settings/__styles__/index.ts
new file mode 100644
index 0000000000..d08446fede
--- /dev/null
+++ b/packages/marketplace/src/components/pages/settings/__styles__/index.ts
@@ -0,0 +1,6 @@
+import { css } from 'linaria'
+import { grey } from '@/core/__styles__/colors'
+
+export const userInfoSection = css`
+  color: ${grey};
+`
diff --git a/packages/marketplace/src/components/pages/settings/__tests__/__snapshots__/setting.test.tsx.snap b/packages/marketplace/src/components/pages/settings/__tests__/__snapshots__/setting.test.tsx.snap
index 5cc692d7a0..045f81b9b7 100644
--- a/packages/marketplace/src/components/pages/settings/__tests__/__snapshots__/setting.test.tsx.snap
+++ b/packages/marketplace/src/components/pages/settings/__tests__/__snapshots__/setting.test.tsx.snap
@@ -92,7 +92,9 @@ exports[`Settings should match snapshot 1`] = `
             </Component>
           </section>
         </Component>
-        <Component>
+        <Component
+          className=""
+        >
           <section
             className=""
             data-test=""
diff --git a/packages/marketplace/src/components/pages/settings/setting.tsx b/packages/marketplace/src/components/pages/settings/setting.tsx
index 6086709f06..d72f195ff1 100644
--- a/packages/marketplace/src/components/pages/settings/setting.tsx
+++ b/packages/marketplace/src/components/pages/settings/setting.tsx
@@ -13,7 +13,7 @@ import {
 import { selectUpdatePasswordLoading } from '@/selector/cognito-identity'
 import { changePassword } from '@/actions/cognito-identity'
 import ChangePasswordForm, { ChangePasswordValues } from './change-password-form'
-import styles from '@/styles/pages/settings.scss?mod'
+import * as styles from './__styles__'
 
 export type CreateDispatchersReturn = {
   changePassword: (values: ChangePasswordValues) => void
@@ -57,7 +57,7 @@ export const Settings: React.FC = () => {
           </Button>
         )}
       </Section>
-      <Section className={styles['user-info-section']}>
+      <Section className={styles.userInfoSection}>
         <Grid>
           <GridItem>
             <Grid>
diff --git a/packages/marketplace/src/styles/blocks/app-card.scss b/packages/marketplace/src/components/ui/app-card/__styles__/index.ts
similarity index 53%
rename from packages/marketplace/src/styles/blocks/app-card.scss
rename to packages/marketplace/src/components/ui/app-card/__styles__/index.ts
index 64f8bca60a..6d7dc82638 100644
--- a/packages/marketplace/src/styles/blocks/app-card.scss
+++ b/packages/marketplace/src/components/ui/app-card/__styles__/index.ts
@@ -1,8 +1,7 @@
-@import '../base/colors.scss';
+import { css } from 'linaria'
+import { black } from '@/core/__styles__/colors'
 
-// This solution is a bit shit and will only add an elipsis in webkit browsers
-// Sorry but other browsers no-supporty...
-.content {
+export const content = css`
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -10,11 +9,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
   height: 72px;
-}
+`
 
-.directAPI {
-  color: $black;
+export const directAPI = css`
+  color: ${black};
   font-weight: 400;
   margin-left: 5px;
   white-space: nowrap;
-}
+`
diff --git a/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-card.tsx.snap b/packages/marketplace/src/components/ui/app-card/__tests__/__snapshots__/app-card.tsx.snap
similarity index 91%
rename from packages/marketplace/src/components/ui/__tests__/__snapshots__/app-card.tsx.snap
rename to packages/marketplace/src/components/ui/app-card/__tests__/__snapshots__/app-card.tsx.snap
index 3133195e34..974b59c567 100644
--- a/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-card.tsx.snap
+++ b/packages/marketplace/src/components/ui/app-card/__tests__/__snapshots__/app-card.tsx.snap
@@ -19,13 +19,17 @@ exports[`AppCard should match a snapshot 1`] = `
     subHeading={
       <React.Fragment>
         Pete's Proptech World Ltd
-        <span>
+        <span
+          className=""
+        >
           (Direct API)
         </span>
       </React.Fragment>
     }
   >
-    <p>
+    <p
+      className=""
+    >
       nXXT2zaK807ysWgy8F0WEhIYRP3TgosAtfuiLtQCImoSx0kynxbIF0nkGHU36Oz13kM3DG0Bcsicr8L6eWFKLBg4axlmiOEWcvwHAbBP9LRvoFkCl58k1wjhOExnpaZItEyOT1AXVKv8PE44aMGtVz
     </p>
   </Component>
diff --git a/packages/marketplace/src/components/ui/__tests__/app-card.tsx b/packages/marketplace/src/components/ui/app-card/__tests__/app-card.tsx
similarity index 100%
rename from packages/marketplace/src/components/ui/__tests__/app-card.tsx
rename to packages/marketplace/src/components/ui/app-card/__tests__/app-card.tsx
diff --git a/packages/marketplace/src/components/ui/app-card.tsx b/packages/marketplace/src/components/ui/app-card/app-card.tsx
similarity index 96%
rename from packages/marketplace/src/components/ui/app-card.tsx
rename to packages/marketplace/src/components/ui/app-card/app-card.tsx
index 9e7813ad42..e9fcb1284a 100644
--- a/packages/marketplace/src/components/ui/app-card.tsx
+++ b/packages/marketplace/src/components/ui/app-card/app-card.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
 import { Tile } from '@reapit/elements'
-import appCardStyles from '@/styles/blocks/app-card.scss?mod'
+import * as appCardStyles from './__styles__'
 import defaultAppIcon from '@/assets/images/default-app-icon.jpg'
 import Fade from '@/components/ui/fade'
 
diff --git a/packages/marketplace/src/components/ui/app-card/index.ts b/packages/marketplace/src/components/ui/app-card/index.ts
new file mode 100644
index 0000000000..2c4f1e4173
--- /dev/null
+++ b/packages/marketplace/src/components/ui/app-card/index.ts
@@ -0,0 +1 @@
+export { default } from './app-card'
diff --git a/packages/marketplace/src/styles/blocks/app-list.scss b/packages/marketplace/src/components/ui/app-list/__styles__/index.ts
similarity index 58%
rename from packages/marketplace/src/styles/blocks/app-list.scss
rename to packages/marketplace/src/components/ui/app-list/__styles__/index.ts
index c4a78a1d1f..749881cfed 100644
--- a/packages/marketplace/src/styles/blocks/app-list.scss
+++ b/packages/marketplace/src/components/ui/app-list/__styles__/index.ts
@@ -1,9 +1,11 @@
-.container {
+import { css } from 'linaria'
+
+export const container = css`
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
-}
+`
 
-.loaderContainer {
+export const loaderContainer = css`
   position: absolute;
   left: 0;
   right: 0;
@@ -12,8 +14,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-}
+`
 
-.contentIsLoading {
+export const contentIsLoading = css`
   opacity: 0.75;
-}
+`
diff --git a/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-list.tsx.snap b/packages/marketplace/src/components/ui/app-list/__tests__/__snapshots__/app-list.tsx.snap
similarity index 99%
rename from packages/marketplace/src/components/ui/__tests__/__snapshots__/app-list.tsx.snap
rename to packages/marketplace/src/components/ui/app-list/__tests__/__snapshots__/app-list.tsx.snap
index 44d39e1382..a2ad006104 100644
--- a/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-list.tsx.snap
+++ b/packages/marketplace/src/components/ui/app-list/__tests__/__snapshots__/app-list.tsx.snap
@@ -5,7 +5,7 @@ exports[`AppList should match a snapshot 1`] = `
   className="overflow-hidden mb-4"
 >
   <Component
-    className=" "
+    className=""
     data-test="app-list-container"
   >
     <Component
@@ -83,7 +83,7 @@ exports[`AppList should match a snapshot when use empty infoType 1`] = `
   className="overflow-hidden mb-4"
 >
   <Component
-    className=" "
+    className=""
     data-test="app-list-container"
   >
     <Component
diff --git a/packages/marketplace/src/components/ui/__tests__/app-list.tsx b/packages/marketplace/src/components/ui/app-list/__tests__/app-list.tsx
similarity index 98%
rename from packages/marketplace/src/components/ui/__tests__/app-list.tsx
rename to packages/marketplace/src/components/ui/app-list/__tests__/app-list.tsx
index ffa2481fd4..63cafac683 100644
--- a/packages/marketplace/src/components/ui/__tests__/app-list.tsx
+++ b/packages/marketplace/src/components/ui/app-list/__tests__/app-list.tsx
@@ -5,7 +5,7 @@ import { AppList, AppListProps } from '../app-list'
 import { appsDataStub } from '@/sagas/__stubs__/apps'
 import { Loader, GridThreeColItem, Helper } from '@reapit/elements'
 import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
-import AppCard from '../app-card'
+import AppCard from '../../app-card'
 
 const props: AppListProps = {
   list: appsDataStub.data as AppSummaryModel[],
diff --git a/packages/marketplace/src/components/ui/app-list.tsx b/packages/marketplace/src/components/ui/app-list/app-list.tsx
similarity index 89%
rename from packages/marketplace/src/components/ui/app-list.tsx
rename to packages/marketplace/src/components/ui/app-list/app-list.tsx
index b45a287286..ea84c02ec4 100644
--- a/packages/marketplace/src/components/ui/app-list.tsx
+++ b/packages/marketplace/src/components/ui/app-list/app-list.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
-import AppCard from './app-card'
-import styles from '@/styles/blocks/app-list.scss?mod'
+import AppCard from '../app-card'
+import * as styles from './__styles__'
 import { Loader, InfoType, GridFourCol, GridThreeColItem, Helper, infoText } from '@reapit/elements'
+import { cx } from 'linaria'
 
 export type AppListProps = {
   list: AppSummaryModel[]
@@ -30,7 +31,7 @@ export const AppList: React.FunctionComponent<AppListProps> = ({
             : 'We are unable to find any Apps that match your search criteria. Please try again.'}
         </Helper>
       ) : (
-        <GridFourCol className={` ${loading ? styles.contentIsLoading : ''}`} data-test="app-list-container">
+        <GridFourCol className={cx(loading && styles.contentIsLoading)} data-test="app-list-container">
           {list.map(app => (
             <GridThreeColItem key={app.id}>
               <AppCard
diff --git a/packages/marketplace/src/components/ui/app-list/index.ts b/packages/marketplace/src/components/ui/app-list/index.ts
new file mode 100644
index 0000000000..eb78b11f88
--- /dev/null
+++ b/packages/marketplace/src/components/ui/app-list/index.ts
@@ -0,0 +1 @@
+export { default } from './app-list'
diff --git a/packages/marketplace/src/components/ui/app-sidebar/__styles__/index.ts b/packages/marketplace/src/components/ui/app-sidebar/__styles__/index.ts
new file mode 100644
index 0000000000..20aca7ded2
--- /dev/null
+++ b/packages/marketplace/src/components/ui/app-sidebar/__styles__/index.ts
@@ -0,0 +1,31 @@
+import { css } from 'linaria'
+import { white, grey } from '@/core/__styles__/colors'
+
+export const sidebar = css`
+  width: 100%;
+  @media screen and (min-width: 769px) {
+    width: 240px;
+    min-width: 240px;
+  }
+`
+
+export const sidebarWrap = css`
+  background-color: ${white};
+  padding: 1rem;
+`
+
+export const subHeading = css`
+  border-bottom: 1px ${grey} solid;
+  padding-bottom: 0.5rem;
+  margin-bottom: 1rem;
+  color: ${grey};
+`
+
+export const btnSearch = css`
+  height: 100%;
+  outline: none;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  pointer-events: initial;
+`
diff --git a/packages/marketplace/src/components/ui/app-sidebar/__tests__/__snapshots__/app-sidebar.tsx.snap b/packages/marketplace/src/components/ui/app-sidebar/__tests__/__snapshots__/app-sidebar.tsx.snap
index 1855556add..595b6d4568 100644
--- a/packages/marketplace/src/components/ui/app-sidebar/__tests__/__snapshots__/app-sidebar.tsx.snap
+++ b/packages/marketplace/src/components/ui/app-sidebar/__tests__/__snapshots__/app-sidebar.tsx.snap
@@ -1,16 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AppSidebar should match a snapshot 1`] = `
-<div>
+<div
+  className=""
+>
   <Component
     flexColumn={true}
     hasPadding={true}
   >
-    <div>
+    <div
+      className=""
+    >
       <Component>
         Browse Apps
       </Component>
-      <Component>
+      <Component
+        className=""
+      >
         Search
       </Component>
       <Formik
@@ -123,8 +129,12 @@ exports[`AppSidebar should match a snapshot 1`] = `
         }
       />
     </div>
-    <div>
-      <Component>
+    <div
+      className=""
+    >
+      <Component
+        className=""
+      >
         Filter
       </Component>
       <CategoriesList
@@ -166,6 +176,7 @@ exports[`FilterForm should match a snapshot 1`] = `
     placeholder="Search..."
     rightIcon={
       <button
+        className=""
         type="submit"
       >
         <FaSearch />
diff --git a/packages/marketplace/src/components/ui/app-sidebar/app-sidebar.tsx b/packages/marketplace/src/components/ui/app-sidebar/app-sidebar.tsx
index 52dd1a2559..4459f150b7 100644
--- a/packages/marketplace/src/components/ui/app-sidebar/app-sidebar.tsx
+++ b/packages/marketplace/src/components/ui/app-sidebar/app-sidebar.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useSelector } from 'react-redux'
 import { FlexContainerBasic, H5, Input, Formik, Form, RadioSelect, FormikProps, H6 } from '@reapit/elements'
 import { useHistory, useLocation } from 'react-router'
-import styles from '@/styles/blocks/app-sidebar.scss?mod'
+import * as styles from './__styles__'
 import CategoriesList from '@/components/ui/categories-list'
 import { FaSearch } from 'react-icons/fa'
 import { CategoryModel } from '@reapit/foundations-ts-definitions'
diff --git a/packages/marketplace/src/components/ui/categories-list/__styles__/index.ts b/packages/marketplace/src/components/ui/categories-list/__styles__/index.ts
new file mode 100644
index 0000000000..aac39e5276
--- /dev/null
+++ b/packages/marketplace/src/components/ui/categories-list/__styles__/index.ts
@@ -0,0 +1,9 @@
+import { css } from 'linaria'
+import { forMobileOnly } from '@/core/__styles__/screen-size'
+
+export const listCategories = css`
+  ${forMobileOnly} {
+    display: flex;
+    flex-wrap: wrap;
+  }
+`
diff --git a/packages/marketplace/src/components/ui/__tests__/__snapshots__/categories-list.tsx.snap b/packages/marketplace/src/components/ui/categories-list/__tests__/__snapshots__/categories-list.tsx.snap
similarity index 97%
rename from packages/marketplace/src/components/ui/__tests__/__snapshots__/categories-list.tsx.snap
rename to packages/marketplace/src/components/ui/categories-list/__tests__/__snapshots__/categories-list.tsx.snap
index e596b8865d..1b37c3b7a7 100644
--- a/packages/marketplace/src/components/ui/__tests__/__snapshots__/categories-list.tsx.snap
+++ b/packages/marketplace/src/components/ui/categories-list/__tests__/__snapshots__/categories-list.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CategoriesList should match a snapshot 1`] = `
-<ul>
+<ul
+  className=""
+>
   <CategoryItem
     onSelectCategory={[MockFunction]}
     selected={true}
diff --git a/packages/marketplace/src/components/ui/__tests__/categories-list.tsx b/packages/marketplace/src/components/ui/categories-list/__tests__/categories-list.tsx
similarity index 90%
rename from packages/marketplace/src/components/ui/__tests__/categories-list.tsx
rename to packages/marketplace/src/components/ui/categories-list/__tests__/categories-list.tsx
index 0e7444ff70..35e9257bc0 100644
--- a/packages/marketplace/src/components/ui/__tests__/categories-list.tsx
+++ b/packages/marketplace/src/components/ui/categories-list/__tests__/categories-list.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { shallow } from 'enzyme'
 
-import CategoriesList, { CategoriesListProps } from '@/components/ui/categories-list'
+import CategoriesList, { CategoriesListProps } from '../categories-list'
 import CategoryItem from '@/components/ui/category-item'
 import { categoriesStub } from '@/sagas/__stubs__/categories'
 import { CategoryModel } from '@reapit/foundations-ts-definitions'
diff --git a/packages/marketplace/src/components/ui/categories-list.tsx b/packages/marketplace/src/components/ui/categories-list/categories-list.tsx
similarity index 89%
rename from packages/marketplace/src/components/ui/categories-list.tsx
rename to packages/marketplace/src/components/ui/categories-list/categories-list.tsx
index a8f9fa7f2e..717cbb3b36 100644
--- a/packages/marketplace/src/components/ui/categories-list.tsx
+++ b/packages/marketplace/src/components/ui/categories-list/categories-list.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import CategoryItem from './category-item'
-import styles from '@/styles/blocks/categories-list.scss?mod'
+import CategoryItem from '../category-item'
+import * as styles from './__styles__'
 import { CategoryModel } from '@reapit/foundations-ts-definitions'
 
 export interface CategoriesListProps {
diff --git a/packages/marketplace/src/components/ui/categories-list/index.ts b/packages/marketplace/src/components/ui/categories-list/index.ts
new file mode 100644
index 0000000000..feef970033
--- /dev/null
+++ b/packages/marketplace/src/components/ui/categories-list/index.ts
@@ -0,0 +1 @@
+export { default } from './categories-list'
diff --git a/packages/marketplace/src/components/ui/category-item/__styles__/index.ts b/packages/marketplace/src/components/ui/category-item/__styles__/index.ts
new file mode 100644
index 0000000000..518393b4ca
--- /dev/null
+++ b/packages/marketplace/src/components/ui/category-item/__styles__/index.ts
@@ -0,0 +1,30 @@
+import { css } from 'linaria'
+import { black } from '@/core/__styles__/colors'
+
+export const categoryItem = css`
+  display: inline;
+  margin: 4px;
+
+  a {
+    color: #262f69;
+    cursor: pointer;
+    text-decoration: none;
+    font-weight: normal;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  @media screen and (min-width: 769px) {
+    display: block;
+    margin: 4px;
+  }
+`
+
+export const categoryItemActive = css`
+  a {
+    color: ${black};
+    font-weight: 700;
+  }
+`
diff --git a/packages/marketplace/src/components/ui/__tests__/__snapshots__/category-item.tsx.snap b/packages/marketplace/src/components/ui/category-item/__tests__/__snapshots__/category-item.tsx.snap
similarity index 87%
rename from packages/marketplace/src/components/ui/__tests__/__snapshots__/category-item.tsx.snap
rename to packages/marketplace/src/components/ui/category-item/__tests__/__snapshots__/category-item.tsx.snap
index 7a428b7bf2..6651bcf253 100644
--- a/packages/marketplace/src/components/ui/__tests__/__snapshots__/category-item.tsx.snap
+++ b/packages/marketplace/src/components/ui/category-item/__tests__/__snapshots__/category-item.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`CategoryItem should match a snapshot 1`] = `
 <li
-  className="undefined false"
+  className=""
 >
   <a
     data-test-category-id="3"
diff --git a/packages/marketplace/src/components/ui/__tests__/category-item.tsx b/packages/marketplace/src/components/ui/category-item/__tests__/category-item.tsx
similarity index 100%
rename from packages/marketplace/src/components/ui/__tests__/category-item.tsx
rename to packages/marketplace/src/components/ui/category-item/__tests__/category-item.tsx
diff --git a/packages/marketplace/src/components/ui/category-item.tsx b/packages/marketplace/src/components/ui/category-item/category-item.tsx
similarity index 78%
rename from packages/marketplace/src/components/ui/category-item.tsx
rename to packages/marketplace/src/components/ui/category-item/category-item.tsx
index 56964d8c4b..1ebe847efa 100644
--- a/packages/marketplace/src/components/ui/category-item.tsx
+++ b/packages/marketplace/src/components/ui/category-item/category-item.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
-import styles from '@/styles/blocks/categories-list.scss?mod'
+import * as styles from './__styles__'
 import { CategoryModel } from '@reapit/foundations-ts-definitions'
+import { cx } from 'linaria'
 
 export interface CategoryItemProps {
   category?: CategoryModel
@@ -15,7 +16,7 @@ const CategoryItem: React.FunctionComponent<CategoryItemProps> = ({
 }: CategoryItemProps) => {
   if (!category) {
     return (
-      <li className={`${styles.categoryItem} ${selected && styles.categoryItemActive}`}>
+      <li className={cx(styles.categoryItem, selected && styles.categoryItemActive)}>
         <a
           href="#"
           onClick={event => {
@@ -30,7 +31,7 @@ const CategoryItem: React.FunctionComponent<CategoryItemProps> = ({
   }
 
   return (
-    <li className={`${styles.categoryItem} ${selected && styles.categoryItemActive}`}>
+    <li className={cx(styles.categoryItem, selected && styles.categoryItemActive)}>
       <a
         data-test-category-id={category?.id}
         href="#"
diff --git a/packages/marketplace/src/components/ui/category-item/index.ts b/packages/marketplace/src/components/ui/category-item/index.ts
new file mode 100644
index 0000000000..3b683e60e0
--- /dev/null
+++ b/packages/marketplace/src/components/ui/category-item/index.ts
@@ -0,0 +1 @@
+export { default } from './category-item'
diff --git a/packages/marketplace/src/components/ui/featured-app/__styles__/index.ts b/packages/marketplace/src/components/ui/featured-app/__styles__/index.ts
new file mode 100644
index 0000000000..5be2b6a19c
--- /dev/null
+++ b/packages/marketplace/src/components/ui/featured-app/__styles__/index.ts
@@ -0,0 +1,5 @@
+import { css } from 'linaria'
+
+export const featuredApp = css`
+  min-height: 150px;
+`
diff --git a/packages/marketplace/src/components/ui/__tests__/__snapshots__/featured-app.tsx.snap b/packages/marketplace/src/components/ui/featured-app/__tests__/__snapshots__/featured-app.tsx.snap
similarity index 97%
rename from packages/marketplace/src/components/ui/__tests__/__snapshots__/featured-app.tsx.snap
rename to packages/marketplace/src/components/ui/featured-app/__tests__/__snapshots__/featured-app.tsx.snap
index 611eae00a7..469515b4b4 100644
--- a/packages/marketplace/src/components/ui/__tests__/__snapshots__/featured-app.tsx.snap
+++ b/packages/marketplace/src/components/ui/featured-app/__tests__/__snapshots__/featured-app.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`FeaturedApp should match a snapshot 1`] = `
 <Component
+  className=""
   key="09043eb8-9e5e-4650-b7f1-f0cb62699027"
 >
   <div
diff --git a/packages/marketplace/src/components/ui/__tests__/featured-app.tsx b/packages/marketplace/src/components/ui/featured-app/__tests__/featured-app.tsx
similarity index 100%
rename from packages/marketplace/src/components/ui/__tests__/featured-app.tsx
rename to packages/marketplace/src/components/ui/featured-app/__tests__/featured-app.tsx
diff --git a/packages/marketplace/src/components/ui/featured-app.tsx b/packages/marketplace/src/components/ui/featured-app/featured-app.tsx
similarity index 88%
rename from packages/marketplace/src/components/ui/featured-app.tsx
rename to packages/marketplace/src/components/ui/featured-app/featured-app.tsx
index c61c8930e6..4a51573e73 100644
--- a/packages/marketplace/src/components/ui/featured-app.tsx
+++ b/packages/marketplace/src/components/ui/featured-app/featured-app.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
 import { GridThreeColItem } from '@reapit/elements'
-import styles from '@/styles/blocks/featured-app.scss?mod'
+import * as styles from './__styles__'
 import { Link } from 'react-router-dom'
 import Routes from '@/constants/routes'
 import featureImagePlaceHolder from '@/assets/images/default-feature-image.jpg'
@@ -17,7 +17,7 @@ const FeaturedApp: React.FunctionComponent<FeaturedAppProps> = ({ app }: Feature
   const featureImageSrc = app.featuredImageUri || featureImagePlaceHolder
 
   return (
-    <GridThreeColItem className={styles['featured-app']} key={app.id}>
+    <GridThreeColItem className={styles.featuredApp} key={app.id}>
       <div className="card">
         <div className="card-image">
           <Link className="image" to={`${Routes.APPS}/${app.id}`}>
diff --git a/packages/marketplace/src/components/ui/featured-app/index.ts b/packages/marketplace/src/components/ui/featured-app/index.ts
new file mode 100644
index 0000000000..74ea497bae
--- /dev/null
+++ b/packages/marketplace/src/components/ui/featured-app/index.ts
@@ -0,0 +1 @@
+export { default } from './featured-app'
diff --git a/packages/marketplace/src/core/__styles__/browser.ts b/packages/marketplace/src/core/__styles__/browser.ts
new file mode 100644
index 0000000000..90078a7598
--- /dev/null
+++ b/packages/marketplace/src/core/__styles__/browser.ts
@@ -0,0 +1 @@
+export const forIeOnly = '@media all and (-ms-high-contrast:none)'
diff --git a/packages/marketplace/src/core/__styles__/colors.ts b/packages/marketplace/src/core/__styles__/colors.ts
new file mode 100644
index 0000000000..7e6d946d5a
--- /dev/null
+++ b/packages/marketplace/src/core/__styles__/colors.ts
@@ -0,0 +1,24 @@
+export const white = '#fff'
+export const black = '#3b454e'
+export const grey = '#74818d'
+export const greyLight = '#f5f7f9'
+
+export const greenLighter = '#acf2bd'
+export const greenLightest = '#e6ffed'
+export const redLighter = '#fdb8c0'
+export const redLightest = '#ffeef0'
+
+export const reapitDarkblue = '#262f69'
+export const reapitDarkblueDrakened = '#1e2554'
+export const reapitMidblue = '#0061a8'
+export const reapitLightblue = '#23a4de'
+export const reapitLightestblue = '#7bc9eb'
+
+export const reapitOrange = '#ec631b'
+export const reapitLime = '#cddb00'
+export const reapitTeal = '#006580'
+export const reapitPlumb = '#7a2c81'
+export const reapitPurple = '#a4185c'
+export const reapitGold = '#ffb71b'
+export const reapitGreen = '#a0c862'
+export const reapitRed = '#d3033d'
diff --git a/packages/marketplace/src/core/__styles__/elements.ts b/packages/marketplace/src/core/__styles__/elements.ts
new file mode 100644
index 0000000000..c44d7d0c80
--- /dev/null
+++ b/packages/marketplace/src/core/__styles__/elements.ts
@@ -0,0 +1,14 @@
+import { css } from 'linaria'
+import { reapitMidblue } from './colors'
+
+export const link = css`
+  color: ${reapitMidblue};
+  font-weight: bold;
+`
+
+export const hyperlinked = css`
+  color: ${reapitMidblue};
+  color: ${reapitMidblue};
+  text-decoration: underline;
+  font-weight: bold;
+`
diff --git a/packages/marketplace/src/core/__styles__/index.ts b/packages/marketplace/src/core/__styles__/index.ts
new file mode 100644
index 0000000000..da320da846
--- /dev/null
+++ b/packages/marketplace/src/core/__styles__/index.ts
@@ -0,0 +1,10 @@
+import { css } from 'linaria'
+
+export const globals = css`
+  @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap');
+  @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
+
+  #root {
+    height: 100%;
+  }
+`
diff --git a/packages/marketplace/src/core/__styles__/layouts.ts b/packages/marketplace/src/core/__styles__/layouts.ts
new file mode 100644
index 0000000000..df4b2f899b
--- /dev/null
+++ b/packages/marketplace/src/core/__styles__/layouts.ts
@@ -0,0 +1,14 @@
+// layout
+export const layoutBase = '1rem'
+export const layoutQuarter = 'calc(1rem / 4)'
+export const layoutThird = 'calc(1rem / 3)'
+export const layoutHalf = 'calc(1rem / 2)'
+export const layoutTwoThird = 'calc(1rem * 0.67)'
+export const layoutThreeQuarter = 'calc(1rem * 0.75)'
+export const layoutOneQuarter = 'calc(1rem * 1.25)'
+export const layoutOneHalf = 'calc(1rem * 1.5)'
+export const layoutDouble = 'calc(1rem * 2)'
+export const layoutTwoHalf = 'calc(1rem * 2.5)'
+export const layoutTriple = 'calc(1rem * 3)'
+export const layoutQuadruple = 'calc(1rem * 4)'
+export const layoutSextuple = 'calc(1rem * 6)'
diff --git a/packages/marketplace/src/core/__styles__/screen-size.ts b/packages/marketplace/src/core/__styles__/screen-size.ts
new file mode 100644
index 0000000000..74dc490843
--- /dev/null
+++ b/packages/marketplace/src/core/__styles__/screen-size.ts
@@ -0,0 +1,6 @@
+export const forSmallMobileOnly = '@media (max-width: 414px)'
+export const forMobileOnly = '@media (max-width: 768px)'
+export const forTabletAndBelow = '@media (max-width: 1023px)'
+export const forTabletOnly = '@media (min-width: 769px) and (max-width: 1023px)'
+export const forTabletAndDesktop = '@media (min-width: 769px)'
+export const forDesktopOnly = '@media (min-width: 1024px)'
diff --git a/packages/marketplace/src/core/app.tsx b/packages/marketplace/src/core/app.tsx
index 9df54140dd..adfd5d1349 100644
--- a/packages/marketplace/src/core/app.tsx
+++ b/packages/marketplace/src/core/app.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import Router from './router'
 import { Provider } from 'react-redux'
 import store from './store'
+import './__styles__'
 
 const App = () => {
   return (
diff --git a/packages/marketplace/src/core/index.tsx b/packages/marketplace/src/core/index.tsx
index 0ce6deb52e..336db51cd5 100644
--- a/packages/marketplace/src/core/index.tsx
+++ b/packages/marketplace/src/core/index.tsx
@@ -1,4 +1,3 @@
-import '../styles/index.scss'
 import * as Sentry from '@sentry/browser'
 import React from 'react'
 import { render } from 'react-dom'
diff --git a/packages/marketplace/src/styles/base/browser.scss b/packages/marketplace/src/styles/base/browser.scss
deleted file mode 100644
index 34b3718fa4..0000000000
--- a/packages/marketplace/src/styles/base/browser.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@mixin for-ie-only {
-  @media all and (-ms-high-contrast:none) { @content; }
-}
\ No newline at end of file
diff --git a/packages/marketplace/src/styles/base/colors.scss b/packages/marketplace/src/styles/base/colors.scss
deleted file mode 100644
index 77d58d8d1d..0000000000
--- a/packages/marketplace/src/styles/base/colors.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-$white: #fff;
-$black: #3b454e;
-$grey: #74818d;
-$grey-light: #f5f7f9;
-
-$green-lighter: #acf2bd;
-$green-lightest: #e6ffed;
-$red-lighter: #fdb8c0;
-$red-lightest: #ffeef0;
-
-$reapit-dark-blue: #262f69;
-$reapit-dark-blue-darkened: #1e2554;
-$reapit-mid-blue: #0061a8;
-$reapit-light-blue: #23a4de;
-$reapit-lightest-blue: #7bc9eb;
-$reapit-lightest-blue-lightened: #d4edf8;
-
-$reapit-orange: #ec631b;
-$reapit-lime: #cddb00;
-$reapit-teal: #006580;
-$reapit-plumb: #7a2c81;
-$reapit-purple: #a4185c;
-$reapit-gold: #ffb71b;
-$reapit-green: #a0c862;
-$reapit-red: #d3033d;
diff --git a/packages/marketplace/src/styles/base/fonts.scss b/packages/marketplace/src/styles/base/fonts.scss
deleted file mode 100644
index 78f26e0680..0000000000
--- a/packages/marketplace/src/styles/base/fonts.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$font-family-monospace: 'Source Code Pro', monospace;
-$font-family-roboto: 'Roboto', Helvetica, Arial, sans-serif;
\ No newline at end of file
diff --git a/packages/marketplace/src/styles/base/layout.scss b/packages/marketplace/src/styles/base/layout.scss
deleted file mode 100644
index a21cb393db..0000000000
--- a/packages/marketplace/src/styles/base/layout.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-$layout-base: 1rem;
-// Generic layout values that scale to rem base
-$layout-quarter: calc(1rem / 4);
-$layout-third: calc(1rem / 3);
-$layout-half: calc(1rem / 2);
-$layout-two-third: calc(1rem * 0.67);
-$layout-three-quarter: calc(1rem * 0.75);
-$layout-one-quarter: calc(1rem * 1.25);
-$layout-one-half: calc(1rem * 1.5);
-$layout-double: calc(1rem * 2);
-$layout-two-half: calc(1rem * 2.5);
-$layout-triple: calc(1rem * 3);
-$layout-quadruple: calc(1rem * 4);
-$layout-sextuple: calc(1rem * 6);
diff --git a/packages/marketplace/src/styles/base/screen-size.scss b/packages/marketplace/src/styles/base/screen-size.scss
deleted file mode 100644
index ccc7b5c2d6..0000000000
--- a/packages/marketplace/src/styles/base/screen-size.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@mixin for-small-mobile-only {
-  @media (max-width: 414px) { @content; }
-}
-
-@mixin for-mobile-only {
-  @media (max-width: 768px) { @content; }
-}
-
-@mixin for-tablet-and-below {
-  @media (max-width: 1023px) { @content; }
-}
-
-@mixin for-tablet-only {
-  @media (min-width: 769px) and (max-width: 1023px) { @content; }
-}
-
-@mixin for-tablet-and-desktop {
-  @media (min-width: 769px) { @content; }
-}
-
-@mixin for-desktop-only {
-  @media (min-width: 1024px) { @content; }
-}
-
diff --git a/packages/marketplace/src/styles/blocks/app-authentication-detail.scss b/packages/marketplace/src/styles/blocks/app-authentication-detail.scss
deleted file mode 100644
index adc02c2b14..0000000000
--- a/packages/marketplace/src/styles/blocks/app-authentication-detail.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@import '../base/colors.scss';
-
-.btnShowAuthentication {
-  text-decoration: underline;
-}
-
-.authenticationCodeWrap {
-  padding: 8px;
-  border: 1px solid $grey;
-  min-width: 80%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.authenticationCode {
-  word-break: break-all;
-  margin-bottom: 0 !important;
-}
-
-.btnCopy {
-  cursor: pointer;
-  position: relative;
-}
-
-.tooltiptext {
-  top: -5px;
-  bottom: auto;
-  right: 128%;
-
-  visibility: hidden;
-  position: absolute;
-  min-width: 80px;
-  background-color: #555;
-  color: #fff;
-  text-align: center;
-  padding: 5px 0;
-  border-radius: 6px;
-  z-index: 1;
-  opacity: 0;
-  transition: opacity 0.6s;
-}
-
-.btnCopy:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
-
-.tooltiptext::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 100%;
-  margin-top: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: transparent transparent transparent #555;
-}
diff --git a/packages/marketplace/src/styles/blocks/app-sidebar.scss b/packages/marketplace/src/styles/blocks/app-sidebar.scss
deleted file mode 100644
index cbed3bbfa2..0000000000
--- a/packages/marketplace/src/styles/blocks/app-sidebar.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@import "../base/colors.scss";
-
-.sidebar {
-  width: 100%;
-}
-
-.sidebarWrap {
-  background-color: white;
-  padding: 1rem;
-
-  .subHeading {
-    border-bottom: 1px $grey solid;
-    padding-bottom: 0.5rem;
-    margin-bottom: 1rem;
-    color: $grey;
-  }
-}
-
-.btnSearch {
-  height: 100%;
-  outline: none;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  pointer-events: initial;
-}
-
-
-
-@media screen and (min-width: 769px) {
-  .sidebar {
-    width: 240px;
-    min-width: 240px;
-  }
-}
diff --git a/packages/marketplace/src/styles/blocks/categories-list.scss b/packages/marketplace/src/styles/blocks/categories-list.scss
deleted file mode 100644
index 7553ea3c38..0000000000
--- a/packages/marketplace/src/styles/blocks/categories-list.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@import '../base/screen-size.scss';
-
-.categoryItem {
-  display: inline;
-  margin: 4px;
-
-  a {
-    color: #262f69;
-    cursor: pointer;
-    text-decoration: none;
-    font-weight: normal;
-  }
-
-  &.categoryItemActive {
-    a {
-      color: black;
-      font-weight: 700;
-    }
-  }
-}
-
-.categoryItem:hover {
-  text-decoration: underline;
-}
-
-@media screen and (min-width: 769px) {
-  .categoryItem {
-    display: block;
-    margin: 4px;
-  }
-}
-
-.listCategories {
-  @include for-mobile-only {
-    display: flex;
-    flex-wrap: wrap;
-  }
-}
diff --git a/packages/marketplace/src/styles/blocks/featured-app.scss b/packages/marketplace/src/styles/blocks/featured-app.scss
deleted file mode 100644
index 42fca023e5..0000000000
--- a/packages/marketplace/src/styles/blocks/featured-app.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.featured-app {
-  min-height: 150px;
-}
diff --git a/packages/marketplace/src/styles/blocks/loader.scss b/packages/marketplace/src/styles/blocks/loader.scss
deleted file mode 100644
index e4b3d87032..0000000000
--- a/packages/marketplace/src/styles/blocks/loader.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@import '../base/layout.scss';
-@import '../base/colors.scss';
-
-.loader {
-  display: block;
-  margin: auto;
-  width: $layout-triple;
-  height: $layout-two-half;
-
-  &.body {
-    margin: 100px auto,
-  }
-
-  > div {
-    background-color: $grey;
-    height: 100%;
-    width: $layout-third;
-    margin: 2px;
-    display: inline-block;
-    border-radius: 15%;
-
-    animation: loader-animation 1.2s infinite ease-in-out;
-
-    &:nth-of-type(1) {
-      animation-delay: -1.1s;
-    }
-
-    &:nth-of-type(2) {
-      animation-delay: -1s;
-    }
-
-    &:nth-of-type(3) {
-      animation-delay: -0.9s;
-    }
-
-    &:nth-of-type(4) {
-      animation-delay: -0.8s;
-    }
-  }
-
-  @keyframes loader-animation {
-    0%,
-    40%,
-    100% {
-      transform: scaleY(0.4);
-    }
-    20% {
-      transform: scaleY(1);
-    }
-  }
-}
diff --git a/packages/marketplace/src/styles/blocks/standalone-app-detail.scss b/packages/marketplace/src/styles/blocks/standalone-app-detail.scss
deleted file mode 100644
index eec25e08e5..0000000000
--- a/packages/marketplace/src/styles/blocks/standalone-app-detail.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-@import '../base/colors.scss';
-@import '../base/screen-size.scss';
-@import '../base/browser.scss';
-
-.preview {
-  position: relative;
-  top: 2px;
-}
-
-.check {
-  position: relative;
-  top: 2px;
-  left: 2px;
-  color: $reapit-green;
-}
-
-.tag {
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  background: $grey-light;
-  margin: 0.5rem 0.5rem 0 0;
-}
-
-.container {
-  height: 100%;
-  margin-bottom: auto;
-  @include for-mobile-only {
-    display: flex;
-    flex-direction: column-reverse;
-  }
-  @include for-ie-only {
-    min-width: 1024px;
-  }
-}
-
-.containerHeader {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.appIconContainer {
-  width: 96px;
-  height: auto;
-  margin: 0 auto;
-}
-
-.headerContent {
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-  align-items: center;
-  text-align: center;
-}
-
-.containerOuterHeader {
-  @include for-tablet-and-below {
-    flex-direction: column;
-  }
-}
-
-.buttonGroup {
-  display: flex;
-  flex-direction: column;
-
-  @include for-mobile-only {
-    > button {
-      width: 50%;
-    }
-
-    flex-direction: row;
-  }
-}
diff --git a/packages/marketplace/src/styles/elements/link.scss b/packages/marketplace/src/styles/elements/link.scss
deleted file mode 100644
index c1d39c5fa8..0000000000
--- a/packages/marketplace/src/styles/elements/link.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import '../../styles/base/colors.scss';
-
-.link {
-  color: $reapit-mid-blue;
-  font-weight: bold;
-}
-.hyperlinked {
-  color: $reapit-mid-blue;
-  text-decoration: underline;
-  font-weight: bold;
-}
diff --git a/packages/marketplace/src/styles/index.scss b/packages/marketplace/src/styles/index.scss
deleted file mode 100644
index 1b2a0ce5c3..0000000000
--- a/packages/marketplace/src/styles/index.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
-
-#root {
-  height: 100%;
-}
-
-.fade-enter {
-  opacity: 0;
-  transform: scale(0.9);
-}
-.fade-enter-active {
-  opacity: 1;
-  transform: translateX(0);
-  transition: opacity 300ms, transform 300ms;
-}
-.fade-exit {
-  opacity: 1;
-}
-.fade-exit-active {
-  opacity: 0;
-  transform: scale(0.9);
-  transition: opacity 300ms, transform 300ms;
-}
diff --git a/packages/marketplace/src/styles/pages/app-permission-content.scss b/packages/marketplace/src/styles/pages/app-permission-content.scss
deleted file mode 100644
index c8ee28d058..0000000000
--- a/packages/marketplace/src/styles/pages/app-permission-content.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.permissionBlock {
-  margin-bottom: 15px
-}
-
-.installButtonContainer {
-  display: flex;
-}
-
-.installButton {
-  margin: 0 1rem;
-  width: 100%;
-
-  &:last-child {
-    margin: 0 0 0 1rem;
-  }
-}
-
-.permissionList {
-  padding: 0 2rem 2rem 2rem;
-}
-
-.permissionListItem {
-  list-style-type: circle;
-}
diff --git a/packages/marketplace/src/styles/pages/apps.scss b/packages/marketplace/src/styles/pages/apps.scss
deleted file mode 100644
index c90cef9cee..0000000000
--- a/packages/marketplace/src/styles/pages/apps.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.app-list {
-  width: auto;
-  /* Hide scrollbar. only show window scrollbar */
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-  // this is to negate body overflow caused by padding: 1rem in FlexContainerResponsive without affecting other pages
-  margin: -1rem;
-  // then add padding in section itself
-  padding: 1rem;
-}
-/* Hide scrollbar for Chrome, Safari and Opera */
-.app-list::-webkit-scrollbar {
-  display: none;
-}
-
diff --git a/packages/marketplace/src/styles/pages/help.scss b/packages/marketplace/src/styles/pages/help.scss
deleted file mode 100644
index 01ce5efe42..0000000000
--- a/packages/marketplace/src/styles/pages/help.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@import '../base/colors.scss';
-@import '../base/browser.scss';
-
-.wrapBoxContent {
-  height: 100%;
-  border: 2px solid $grey-light;
-}
-
-.image {
-  width: 100%;
-  height: auto;
-}
-
-.button {
-  min-width: 8rem;
-  width: 35%;
-}
diff --git a/packages/marketplace/src/styles/pages/settings.scss b/packages/marketplace/src/styles/pages/settings.scss
deleted file mode 100644
index 03eb8fe283..0000000000
--- a/packages/marketplace/src/styles/pages/settings.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../../styles/base/colors.scss';
-
-.user-info-section {
-  color: $grey;
-}
diff --git a/packages/marketplace/src/styles/pages/welcome.scss b/packages/marketplace/src/styles/pages/welcome.scss
deleted file mode 100644
index b8d5754cf6..0000000000
--- a/packages/marketplace/src/styles/pages/welcome.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.graphic {
-  width: 100%;
-  height: auto;
-}
-
-.container {
-  display: flex;
-  margin: 0 auto;
-  width: 100%;
-
-  @media (min-width: 769px) {
-    width: 80%;
-  }
-}
-
-.content {
-  @media (min-width: 769px) {
-    max-width: 375px;
-  }
-}