diff --git a/packages/elements/src/components/HelpGuide/help-guide.stories.tsx b/packages/elements/src/components/HelpGuide/help-guide.stories.tsx
index 6c266020b4..445c7b6b91 100644
--- a/packages/elements/src/components/HelpGuide/help-guide.stories.tsx
+++ b/packages/elements/src/components/HelpGuide/help-guide.stories.tsx
@@ -5,20 +5,21 @@ import { useHelpGuideContext } from './context'
 import { Button } from '../Button'
 
 const imageUrl = 'https://1001freedownloads.s3.amazonaws.com/vector/thumb/63319/Placeholder.png'
+const contentStyles = {
+  maxWidth: '390px',
+}
 
 const ComponentA = () => {
   const context = useHelpGuideContext()
   return (
-    <div>
+    <div style={contentStyles}>
       <p className="mb-5">
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt ipsa minima hic rerum. Aspernatur laborum eum
         vel necessitatibus dolorum alias. Sunt necessitatibus nisi repellat perspiciatis quam, iusto, fugit expedita
         cupiditate quisquam totam voluptates? Facilis laudantium dolores tempora aspernatur natus minus, soluta aliquam?
         Similique mollitia, placeat architecto eum dolores quam, omnis quidem iste vero tempora ipsum repellendus
         voluptas, aliquam rerum molestias iure quasi totam assumenda quo veritatis. Corporis debitis, veniam sit earum
-        vero id impedit odio totam itaque numquam omnis non repellat fugiat nostrum nam minima modi, dignissimos ut
-        quibusdam praesentium sunt in beatae at nemo! Inventore blanditiis expedita pariatur amet laboriosam culpa,
-        nihil sed rerum natus et recusandae hic est error ab accusantium impedit earum vero quae. Alias quae
+        vero id impedit odio totam itaque
       </p>
       <Button type="button" variant="primary" onClick={context.goNext}>
         Next
@@ -31,7 +32,7 @@ const ComponentB = () => {
   const context = useHelpGuideContext()
 
   return (
-    <div>
+    <div style={contentStyles}>
       <p className="mb-5">
         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita consequatur molestias! Magnam in
         inventore, sunt fuga minus nihil pariatur facilis nobis modi debitis aspernatur perspiciatis quo officiis sit
@@ -51,7 +52,7 @@ const ComponentC = () => {
   const context = useHelpGuideContext()
 
   return (
-    <div>
+    <div style={contentStyles}>
       <p className="mb-5">
         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo expedita consequatur molestias! Magnam in
         inventore, sunt fuga minus nihil pariatur facilis nobis modi debitis aspernatur perspiciatis quo officiis sit
@@ -72,35 +73,35 @@ storiesOf('HelpGuide', module).add('Primary', () => {
         component={ComponentA}
         heading="Heading-1"
         subHeading="SubHeading-1"
-        graphic={<img src={imageUrl} />}
+        graphic={<img width="200px" src={imageUrl} />}
       />
       <HelpGuide.Step
         id="step-2"
         component={ComponentB}
         heading="Heading-2"
         subHeading="SubHeading-2"
-        graphic={<img src={imageUrl} />}
+        graphic={<img width="200px" src={imageUrl} />}
       />
       <HelpGuide.Step
         id="step-3"
         component={ComponentB}
         heading="Heading-3"
         subHeading="SubHeading-3"
-        graphic={<img src={imageUrl} />}
+        graphic={<img width="200px" src={imageUrl} />}
       />
       <HelpGuide.Step
         id="step-4"
         component={ComponentB}
         heading="Heading-4"
         subHeading="SubHeading-4"
-        graphic={<img src={imageUrl} />}
+        graphic={<img width="200px" src={imageUrl} />}
       />
       <HelpGuide.Step
         id="step-5"
         component={ComponentC}
         heading="Heading-5"
         subHeading="SubHeading-5"
-        graphic={<img src={imageUrl} />}
+        graphic={<img width="200px" src={imageUrl} />}
       />
     </HelpGuide>
   )
diff --git a/packages/elements/src/styles/components/help-guide.scss b/packages/elements/src/styles/components/help-guide.scss
index 497feebf2b..37a1660ddf 100644
--- a/packages/elements/src/styles/components/help-guide.scss
+++ b/packages/elements/src/styles/components/help-guide.scss
@@ -29,7 +29,7 @@
 .helpguide-component {
   display: flex;
   @media (min-width: 769px) {
-    max-width: 375px;
+    max-width: 500px;
   }
 }
 
diff --git a/packages/marketplace/src/components/pages/developer-welcome.tsx b/packages/marketplace/src/components/pages/developer-welcome.tsx
index dd8b70150e..a62c03f126 100644
--- a/packages/marketplace/src/components/pages/developer-welcome.tsx
+++ b/packages/marketplace/src/components/pages/developer-welcome.tsx
@@ -21,7 +21,7 @@ export type DeveloperWelcomeMessageProps = DevelopeWelcomeMappedActions
 export const Welcome = () => {
   const { goNext } = useHelpGuideContext()
   return (
-    <div>
+    <div className={styles.content}>
       <p className="mb-5">
         Thank you for registering as a Reapit Foundations Developer. Within this portal, you will have access to
         detailed documentation on all our APIs, full access to Reapit elements and Sandbox data. All available to assist
@@ -42,7 +42,7 @@ export const Documentation = () => {
   const { goNext, goPrev } = useHelpGuideContext()
 
   return (
-    <div>
+    <div className={styles.content}>
       <p className="mb-5">
         As Developers, we know detailed documentation and support is paramount when building any application. Therefore,
         we have created various sections to provide additional help and support. Each section can be accessed from the
@@ -102,7 +102,7 @@ export const Documentation = () => {
 export const Submitting = () => {
   const { goNext, goPrev } = useHelpGuideContext()
   return (
-    <div>
+    <div className={styles.content}>
       <p className="mb-5">
         Once you are ready to go, you will need to submit your App. Using the &lsquo;Submit App&rsquo; option on the
         left, you will need to tell us about your Application, such as what permissions it requires, the type of
@@ -130,7 +130,7 @@ export const Submitting = () => {
 export const Managing = () => {
   const { goNext, goPrev } = useHelpGuideContext()
   return (
-    <div>
+    <div className={styles.content}>
       <p className="mb-5">
         If you need to make a change to your App, such as update a screenshot, edit text, or request additional
         permissions, you can do so by clicking &lsquo;Edit App&rsquo; from the &lsquo;Apps&rsquo; page. Any change will
@@ -154,7 +154,7 @@ export const Managing = () => {
 export const Support = ({ onAccept }) => {
   const { goPrev } = useHelpGuideContext()
   return (
-    <div>
+    <div className={styles.content}>
       <p className="mb-5">
         You are currently logged into our alpha release of Reapit Foundations and we are continuing to update, add
         additional features and address any issues that may appear. In the meantime, if you would like to request a
diff --git a/packages/marketplace/src/styles/pages/developer-welcome.scss b/packages/marketplace/src/styles/pages/developer-welcome.scss
index 410f287a75..a88c27877c 100644
--- a/packages/marketplace/src/styles/pages/developer-welcome.scss
+++ b/packages/marketplace/src/styles/pages/developer-welcome.scss
@@ -8,3 +8,9 @@
   margin: 0 auto;
   width: 100%;
 }
+
+.content {
+  @media (min-width: 769px) {
+    max-width: 375px;
+  }
+}
diff --git a/packages/marketplace/src/tests/badges/badge-branches.svg b/packages/marketplace/src/tests/badges/badge-branches.svg
index 2d974aed70..3b6e3389d0 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="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h117v20H0z"/><path fill="#e05d44" d="M117 0h53v20H117z"/><path fill="url(#b)" d="M0 0h170v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" 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">71.26%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">71.26%</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="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h117v20H0z"/><path fill="#e05d44" d="M117 0h53v20H117z"/><path fill="url(#b)" d="M0 0h170v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" 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">71.27%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">71.27%</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 c7541db731..8d4fa62df5 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="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h117v20H0z"/><path fill="#e05d44" d="M117 0h53v20H117z"/><path fill="url(#b)" d="M0 0h170v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" 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">73.87%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">73.87%</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="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="170" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h117v20H0z"/><path fill="#e05d44" d="M117 0h53v20H117z"/><path fill="url(#b)" d="M0 0h170v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" 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">73.91%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">73.91%</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 ce56eec2f6..6d5e3f10f5 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="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="146" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h93v20H0z"/><path fill="#4c1" d="M93 0h53v20H93z"/><path fill="url(#b)" d="M0 0h146v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" 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.43%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">90.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="140" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="140" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h93v20H0z"/><path fill="#4c1" d="M93 0h47v20H93z"/><path fill="url(#b)" d="M0 0h140v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" 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="1155" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="370">90.4%</text><text x="1155" y="140" transform="scale(.1)" textLength="370">90.4%</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 64deab931d..290fb53ec2 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="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h129v20H0z"/><path fill="#dfb317" d="M129 0h53v20H129z"/><path fill="url(#b)" d="M0 0h182v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" 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.62%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">89.62%</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="182" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="182" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><path fill="#555" d="M0 0h129v20H0z"/><path fill="#dfb317" d="M129 0h53v20H129z"/><path fill="url(#b)" d="M0 0h182v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" 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.59%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">89.59%</text></g> </svg>
\ No newline at end of file