diff --git a/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx b/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx
index 5aa9cbeb12..58bbe98fae 100644
--- a/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx
+++ b/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx
@@ -8,10 +8,13 @@ import ClientAppDetail, {
   handleCloseInstallConfirmationModal,
   handleInstallAppButtonClick,
   renderAppHeaderButtonGroup,
+  handleApplyAppDetailsFromLocalStorage,
 } from '../client-app-detail'
 import { Button } from '@reapit/elements'
 import Routes from '@/constants/routes'
 import appState from '@/reducers/__stubs__/app-state'
+import { developerApplyAppDetails } from '@/actions/developer'
+import { AppDetailData } from '@/reducers/client/app-detail'
 
 describe('ClientAppDetail', () => {
   let store
@@ -169,4 +172,18 @@ describe('ClientAppDetail', () => {
       expect(mockFunction).toBeCalledWith(true)
     })
   })
+
+  describe('handleApplyAppDetailsFromLocalStorage', () => {
+    it('should run correctly', () => {
+      const dispatch = jest.fn()
+      const appId = 'appId'
+      const value = { id: 'appId' } as AppDetailData
+      const stringValue = JSON.stringify(value)
+      const spyLocalStorageGetItem = jest.spyOn(window.localStorage, 'getItem').mockImplementation(() => stringValue)
+      const fn = handleApplyAppDetailsFromLocalStorage(dispatch, appId)
+      fn()
+      expect(spyLocalStorageGetItem).toBeCalledWith('developer-preview-app')
+      expect(dispatch).toBeCalledWith(developerApplyAppDetails(value))
+    })
+  })
 })
diff --git a/packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx b/packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx
index 5bbc5ce8bd..1a0540ab6e 100644
--- a/packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx
+++ b/packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx
@@ -36,7 +36,7 @@ export const handleInstallAppButtonClick = (setIsVisibleInstallConfirmation: (is
   }
 }
 
-export const handleApplyAppDetailsFromLocalStorage = (dispatch: Dispatch, appid?: string) => () => {
+export const handleApplyAppDetailsFromLocalStorage = (dispatch: Dispatch, appId?: string) => () => {
   try {
     const appDataString = localStorage.getItem('developer-preview-app')
     if (!appDataString) {
@@ -44,7 +44,7 @@ export const handleApplyAppDetailsFromLocalStorage = (dispatch: Dispatch, appid?
     }
 
     const appData = JSON.parse(appDataString)
-    if (appData.id !== appid) {
+    if (appData.id !== appId) {
       throw 'No app preview'
     }
 
@@ -94,7 +94,7 @@ export const renderAppHeaderButtonGroup = (
 
 const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
   const dispatch = useDispatch()
-  const { id: appid } = useParams()
+  const { appId } = useParams()
 
   const [isVisibleInstallConfirmation, setIsVisibleInstallConfirmation] = React.useState(false)
   const [isVisibleUninstallConfirmation, setIsVisibleUninstallConfirmation] = React.useState(false)
@@ -129,7 +129,7 @@ const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
   const unfetched = Object.keys(appDetailData).length === 0
   const { id = '', installedOn = '' } = appDetailData
 
-  React.useEffect(handleApplyAppDetailsFromLocalStorage(dispatch, appid), [dispatch])
+  React.useEffect(handleApplyAppDetailsFromLocalStorage(dispatch, appId), [dispatch])
 
   if (error) return <Alert message={error} type="danger"></Alert>
   if (isLoadingAppDetail || unfetched) {
diff --git a/packages/marketplace/src/components/pages/developer-submit-app/__test__/developer-submit-app.test.tsx b/packages/marketplace/src/components/pages/developer-submit-app/__test__/developer-submit-app.test.tsx
index 651814373d..71abca9a76 100644
--- a/packages/marketplace/src/components/pages/developer-submit-app/__test__/developer-submit-app.test.tsx
+++ b/packages/marketplace/src/components/pages/developer-submit-app/__test__/developer-submit-app.test.tsx
@@ -20,6 +20,7 @@ import DeveloperSubmitApp, {
   handleGoBackToApps,
   handleOnSubmitAnotherApp,
   generateInitialValues,
+  handleOpenAppPreview,
 } from '../developer-submit-app'
 import { getMockRouterProps } from '@/utils/mock-helper'
 import { FIELD_ERROR_DESCRIPTION } from '@/constants/form'
@@ -292,4 +293,18 @@ describe('DeveloperSubmitApp', () => {
       })
     })
   })
+
+  describe('handleOpenAppPreview', () => {
+    it('should run correctly', () => {
+      const params = { appDetails: {}, values: {}, scopes: [], appId: 'appId' }
+      const spyLocalStorageSetItem = jest.spyOn(window.localStorage, 'setItem')
+      const spyOpenUrl = jest.spyOn(window, 'open')
+      const expected = JSON.stringify({ scopes: [] })
+
+      const fn = handleOpenAppPreview(params)
+      fn()
+      expect(spyLocalStorageSetItem).toBeCalledWith('developer-preview-app', expected)
+      expect(spyOpenUrl).toBeCalledWith('developer/apps/appId/preview', '_blank')
+    })
+  })
 })
diff --git a/packages/marketplace/src/components/pages/developer-submit-app/developer-submit-app.tsx b/packages/marketplace/src/components/pages/developer-submit-app/developer-submit-app.tsx
index 652c124c44..1f034eba65 100644
--- a/packages/marketplace/src/components/pages/developer-submit-app/developer-submit-app.tsx
+++ b/packages/marketplace/src/components/pages/developer-submit-app/developer-submit-app.tsx
@@ -279,18 +279,18 @@ export const handleOnSubmitAnotherApp = (dispatch: Dispatch) => {
 export type HandleOpenAppPreview = {
   scopes: ScopeModel[]
   values: FormikValues
-  appid?: string
+  appId?: string
   appDetails?: AppDetailModel & { apiKey?: string }
 }
 
-export const handleOpenAppPreview = ({ appDetails, values, scopes, appid }: HandleOpenAppPreview) => () => {
+export const handleOpenAppPreview = ({ appDetails, values, scopes, appId }: HandleOpenAppPreview) => () => {
   const appDetailState = {
     ...appDetails,
     ...values,
     scopes: scopes.filter(scope => values.scopes.includes(scope.name)),
   }
 
-  const url = `developer/apps/${appid}/preview`
+  const url = `developer/apps/${appId}/preview`
   localStorage.setItem('developer-preview-app', JSON.stringify(appDetailState))
   window.open(url, '_blank')
 }
@@ -403,7 +403,7 @@ export const DeveloperSubmitApp: React.FC<DeveloperSubmitAppProps> = () => {
                               appDetails: appDetailState?.appDetailData?.data,
                               values,
                               scopes,
-                              appid,
+                              appId: appid,
                             })}
                             variant="primary"
                             type="button"
diff --git a/packages/marketplace/src/constants/routes.ts b/packages/marketplace/src/constants/routes.ts
index 82382ea2b6..a7545b9c3d 100644
--- a/packages/marketplace/src/constants/routes.ts
+++ b/packages/marketplace/src/constants/routes.ts
@@ -25,7 +25,7 @@ const Routes = {
   SETTINGS: '/developer/settings',
   SUBMIT_APP: '/developer/submit-app',
   DEVELOPER_HELP: '/developer/help',
-  DEVELOPER_APP_PREVIEW: '/developer/apps/:id/preview',
+  DEVELOPER_APP_PREVIEW: '/developer/apps/:appId/preview',
   CLIENT_HELP: '/client/help',
   REGISTER: '/register',
   REGISTER_CONFIRM: '/register/confirm',
diff --git a/packages/marketplace/src/core/__tests__/__snapshots__/router.tsx.snap b/packages/marketplace/src/core/__tests__/__snapshots__/router.tsx.snap
index 40a3a6962b..e655d4c366 100644
--- a/packages/marketplace/src/core/__tests__/__snapshots__/router.tsx.snap
+++ b/packages/marketplace/src/core/__tests__/__snapshots__/router.tsx.snap
@@ -389,7 +389,7 @@ exports[`Router should match a snapshot 1`] = `
               }
             }
             exact={true}
-            path="/developer/apps/:id/preview"
+            path="/developer/apps/:appId/preview"
           />
           <Component
             allow="ADMIN"
diff --git a/packages/marketplace/src/selector/client-app-detail.ts b/packages/marketplace/src/selector/client-app-detail.ts
index 33b9f0c6de..af512c8e37 100644
--- a/packages/marketplace/src/selector/client-app-detail.ts
+++ b/packages/marketplace/src/selector/client-app-detail.ts
@@ -17,5 +17,5 @@ export const selectAppDetailLoading = (state: ReduxState) => {
 }
 
 export const selectAppDetailError = (state: ReduxState): string | null => {
-  return state.client.appDetail.error || null
+  return state?.client?.appDetail?.error || null
 }
diff --git a/packages/marketplace/src/tests/badges/badge-branches.svg b/packages/marketplace/src/tests/badges/badge-branches.svg
index 7b0822daf2..e7ac5f6d41 100644
--- a/packages/marketplace/src/tests/badges/badge-branches.svg
+++ b/packages/marketplace/src/tests/badges/badge-branches.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">70.79%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">70.79%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:branches</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">70.86%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">70.86%</text></g></svg>
\ No newline at end of file
diff --git a/packages/marketplace/src/tests/badges/badge-functions.svg b/packages/marketplace/src/tests/badges/badge-functions.svg
index c445c4ddea..c2c0a69339 100644
--- a/packages/marketplace/src/tests/badges/badge-functions.svg
+++ b/packages/marketplace/src/tests/badges/badge-functions.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">79.43%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">79.43%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="53" height="20" fill="#e05d44"/><rect width="170" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="595" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="595" y="140" transform="scale(.1)" textLength="1070">Coverage:functions</text><text x="1425" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">79.51%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">79.51%</text></g></svg>
\ No newline at end of file
diff --git a/packages/marketplace/src/tests/badges/badge-lines.svg b/packages/marketplace/src/tests/badges/badge-lines.svg
index c676371ebd..8ef1721576 100644
--- a/packages/marketplace/src/tests/badges/badge-lines.svg
+++ b/packages/marketplace/src/tests/badges/badge-lines.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="53" height="20" fill="#4c1"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="1185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">90.76%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">90.76%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="146" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="53" height="20" fill="#4c1"/><rect width="146" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="475" y="140" transform="scale(.1)" textLength="830">Coverage:lines</text><text x="1185" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">90.88%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">90.88%</text></g></svg>
\ No newline at end of file
diff --git a/packages/marketplace/src/tests/badges/badge-statements.svg b/packages/marketplace/src/tests/badges/badge-statements.svg
index 5b09f408d0..126ee22a7a 100644
--- a/packages/marketplace/src/tests/badges/badge-statements.svg
+++ b/packages/marketplace/src/tests/badges/badge-statements.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="182" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="129" height="20" fill="#555"/><rect x="129" width="53" height="20" fill="#dfb317"/><rect width="182" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="1545" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="430">89.79%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">89.79%</text></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="176" height="20"><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="176" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="129" height="20" fill="#555"/><rect x="129" width="47" height="20" fill="#dfb317"/><rect width="176" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text x="655" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="655" y="140" transform="scale(.1)" textLength="1190">Coverage:statements</text><text x="1515" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="370">89.9%</text><text x="1515" y="140" transform="scale(.1)" textLength="370">89.9%</text></g></svg>
\ No newline at end of file