diff --git a/packages/aml-checklist/src/tests/badges/badge-branches.svg b/packages/aml-checklist/src/tests/badges/badge-branches.svg
index 1841575331..370f6e69c2 100644
--- a/packages/aml-checklist/src/tests/badges/badge-branches.svg
+++ b/packages/aml-checklist/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="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">59.68%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">59.68%</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">59.68%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">59.68%</text></g></svg>
\ No newline at end of file
diff --git a/packages/aml-checklist/src/tests/badges/badge-functions.svg b/packages/aml-checklist/src/tests/badges/badge-functions.svg
index f0913f1675..feacf72ed6 100644
--- a/packages/aml-checklist/src/tests/badges/badge-functions.svg
+++ b/packages/aml-checklist/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="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="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">73.96%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">73.96%</text></g></svg>
\ No newline at end of file
diff --git a/packages/aml-checklist/src/tests/badges/badge-lines.svg b/packages/aml-checklist/src/tests/badges/badge-lines.svg
index 405d2cd4ad..bf924f2a5d 100644
--- a/packages/aml-checklist/src/tests/badges/badge-lines.svg
+++ b/packages/aml-checklist/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="#dfb317"/><rect width="146" height="20" fill="url(#s)"/></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">85.52%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">85.52%</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="#dfb317"/><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">85.53%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">85.53%</text></g></svg>
\ No newline at end of file
diff --git a/packages/aml-checklist/src/tests/badges/badge-statements.svg b/packages/aml-checklist/src/tests/badges/badge-statements.svg
index a922f827b5..63241aa06b 100644
--- a/packages/aml-checklist/src/tests/badges/badge-statements.svg
+++ b/packages/aml-checklist/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="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">85.31%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">85.31%</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="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">85.33%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">85.33%</text></g></svg>
\ No newline at end of file
diff --git a/packages/cognito-auth/src/tests/badges/badge-branches.svg b/packages/cognito-auth/src/tests/badges/badge-branches.svg
index 12eba5ffec..0d78516ea1 100644
--- a/packages/cognito-auth/src/tests/badges/badge-branches.svg
+++ b/packages/cognito-auth/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="152" 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="152" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="35" height="20" fill="#dfb317"/><rect width="152" height="20" fill="url(#s)"/></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="1335" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="250">80%</text><text x="1335" y="140" transform="scale(.1)" textLength="250">80%</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="152" 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="152" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="117" height="20" fill="#555"/><rect x="117" width="35" height="20" fill="#dfb317"/><rect width="152" 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="1335" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="250">80%</text><text x="1335" y="140" transform="scale(.1)" textLength="250">80%</text></g></svg>
\ No newline at end of file
diff --git a/packages/cognito-auth/src/tests/badges/badge-functions.svg b/packages/cognito-auth/src/tests/badges/badge-functions.svg
index b8555f62e1..e1117ddc0c 100644
--- a/packages/cognito-auth/src/tests/badges/badge-functions.svg
+++ b/packages/cognito-auth/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="#4c1"/><rect width="170" height="20" fill="url(#s)"/></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">93.55%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">93.55%</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="#4c1"/><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">93.55%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">93.55%</text></g></svg>
\ No newline at end of file
diff --git a/packages/cognito-auth/src/tests/badges/badge-lines.svg b/packages/cognito-auth/src/tests/badges/badge-lines.svg
index 809ca2829b..e9f8d67338 100644
--- a/packages/cognito-auth/src/tests/badges/badge-lines.svg
+++ b/packages/cognito-auth/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="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">95.63%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">95.63%</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">95.63%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">95.63%</text></g></svg>
\ No newline at end of file
diff --git a/packages/cognito-auth/src/tests/badges/badge-statements.svg b/packages/cognito-auth/src/tests/badges/badge-statements.svg
index 2c3c91c6ee..ee9caa3ac5 100644
--- a/packages/cognito-auth/src/tests/badges/badge-statements.svg
+++ b/packages/cognito-auth/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="#4c1"/><rect width="182" height="20" fill="url(#s)"/></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">95.65%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">95.65%</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="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="#4c1"/><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">95.65%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">95.65%</text></g></svg>
\ No newline at end of file
diff --git a/packages/elements/src/components/HtmlRender/__stubs__/html.ts b/packages/elements/src/components/HtmlRender/__stubs__/html.ts
index 4eb52ce993..a10f69bf81 100644
--- a/packages/elements/src/components/HtmlRender/__stubs__/html.ts
+++ b/packages/elements/src/components/HtmlRender/__stubs__/html.ts
@@ -24,7 +24,7 @@ export const htmlElements: Element[] = [
       },
       {
         type: 'text',
-        content: ' ...and I liked it. ',
+        content: '...and I liked it. ',
       },
     ],
   },
diff --git a/packages/elements/src/components/HtmlRender/__tests__/__snapshots__/index.tsx.snap b/packages/elements/src/components/HtmlRender/__tests__/__snapshots__/index.tsx.snap
index 93b8f29a4e..31ba97e2f9 100644
--- a/packages/elements/src/components/HtmlRender/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/elements/src/components/HtmlRender/__tests__/__snapshots__/index.tsx.snap
@@ -2,111 +2,78 @@
 
 exports[`HTMLRender should render match to snapshot 1`] = `
 <Component
-  className=""
+  className="html-render"
 >
-  
-        
   <div
     key="1"
     style={Object {}}
   >
-    
-          
     <b
       key="1"
       style={Object {}}
     >
       bold
     </b>
-    
-        
   </div>
-  
-        
   <div
     key="3"
     style={Object {}}
   >
-    
-          
     <i
       key="1"
       style={Object {}}
     >
       italic
     </i>
-    
-        
   </div>
-  
-        
   <div
     key="5"
     style={Object {}}
   >
-    
-          
     <u
       key="1"
       style={Object {}}
     >
       underline
     </u>
-    
-        
   </div>
-  
-        
   <Component
     key="7"
     style={Object {}}
   >
     heading
   </Component>
-  
-        
   <div
     key="9"
     style={Object {}}
   >
-    
-          
     <ul
       key="1"
       style={Object {}}
     >
-      
-            
       <li
         key="1"
         style={Object {}}
       >
         bullet points
       </li>
-      
-            
       <li
         key="3"
         style={Object {}}
       >
         bullet points
       </li>
-      
-          
     </ul>
-    
-        
   </div>
-  
-
 </Component>
 `;
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag a 1`] = `
 <a
-  id="some-id"
   key="0"
+  rel="noopener"
   style={Object {}}
+  target="_blank"
 >
   Test Text
 </a>
@@ -114,7 +81,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag b 1`] = `
 <b
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -124,7 +90,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag blockquote 1`] = `
 <blockquote
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -135,7 +100,7 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag h1 1`] = `
 <h4
   className="title is-4  "
-  id="some-id"
+  id=""
 >
   Test Text
 </h4>
@@ -144,7 +109,7 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag h2 1`] = `
 <h5
   className="title is-5  "
-  id="some-id"
+  id=""
 >
   Test Text
 </h5>
@@ -152,7 +117,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag hr 1`] = `
 <hr
-  id="some-id"
   key="0"
   style={Object {}}
 />
@@ -160,7 +124,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag i 1`] = `
 <i
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -170,7 +133,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag li 1`] = `
 <li
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -180,7 +142,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag ol 1`] = `
 <ol
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -190,7 +151,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag p 1`] = `
 <p
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -200,7 +160,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag pre 1`] = `
 <pre
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -210,7 +169,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag u 1`] = `
 <u
-  id="some-id"
   key="0"
   style={Object {}}
 >
@@ -220,7 +178,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne
 
 exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag ul 1`] = `
 <ul
-  id="some-id"
   key="0"
   style={Object {}}
 >
diff --git a/packages/elements/src/components/HtmlRender/__tests__/index.tsx b/packages/elements/src/components/HtmlRender/__tests__/index.tsx
index d22d8d1080..6a1142be31 100644
--- a/packages/elements/src/components/HtmlRender/__tests__/index.tsx
+++ b/packages/elements/src/components/HtmlRender/__tests__/index.tsx
@@ -122,11 +122,11 @@ describe('getChildren', () => {
 
 describe('getAttributes', () => {
   it('should get the tag attributes if there are any, kill any styles add an index as key', () => {
-    const attributes = {
-      style: 'width: 100px',
-      id: 'my-id',
-      src: 'some-src',
-    }
+    const attributes = [
+      { key: 'id', value: 'my-id' },
+      { key: 'src', value: 'some-src' },
+      { key: 'style', value: 'width: "10px"' },
+    ]
     const index = 0
     const expected = {
       id: 'my-id',
diff --git a/packages/elements/src/components/HtmlRender/html-render.stories.tsx b/packages/elements/src/components/HtmlRender/html-render.stories.tsx
index 92c40bcac3..82228ec3c2 100644
--- a/packages/elements/src/components/HtmlRender/html-render.stories.tsx
+++ b/packages/elements/src/components/HtmlRender/html-render.stories.tsx
@@ -5,6 +5,7 @@ import { HTMLRender } from '.'
 const html = `
     <h1>heading h1</h1>
     <h2>heading h2</h2>
+    <b>Bold with entities&nbsp;</b>
     <div>
         <b>bold</b>
     </div>
@@ -12,6 +13,7 @@ const html = `
     <div><u>underline</u></div>
     <pre>pre tag</pre>
     <strike>strike</strike>
+    <p><a href="http://google.com">Link</a></p>
     <div>
         <ul>
             <li>bullet points</li>
diff --git a/packages/elements/src/components/HtmlRender/index.tsx b/packages/elements/src/components/HtmlRender/index.tsx
index f864cf7b7f..7f12b3b6b9 100644
--- a/packages/elements/src/components/HtmlRender/index.tsx
+++ b/packages/elements/src/components/HtmlRender/index.tsx
@@ -9,7 +9,11 @@ export interface HTMLRenderProps {
   className?: string
 }
 
-export const HTMLRender: React.SFC<HTMLRenderProps> = ({ html, diffing = false, className = '' }: HTMLRenderProps) => {
+export const HTMLRender: React.SFC<HTMLRenderProps> = ({
+  html,
+  diffing = false,
+  className = 'html-render',
+}: HTMLRenderProps) => {
   const jsonElements = parse(html)
   return <Content className={className}>{renderer(jsonElements, diffing)}</Content>
 }
diff --git a/packages/elements/src/components/HtmlRender/utils.tsx b/packages/elements/src/components/HtmlRender/utils.tsx
index ce15a4887b..689448df93 100644
--- a/packages/elements/src/components/HtmlRender/utils.tsx
+++ b/packages/elements/src/components/HtmlRender/utils.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { H4, H5 } from '../Typography'
+import { H4, H5, H6 } from '../Typography'
 
 export interface Element {
   type: string
@@ -10,7 +10,10 @@ export interface Element {
 }
 
 const sortContentType = (domItem: Element, index: number, diffing: boolean) => {
-  return domItem.type === 'text' ? domItem.content || null : rendererModule.sortTags(domItem, index, diffing)
+  // using DOMParse to parse HTML entities like &nbsp;
+  return domItem.type === 'text'
+    ? new DOMParser().parseFromString(domItem.content || '', 'text/html').documentElement.textContent || null
+    : rendererModule.sortTags(domItem, index, diffing)
 }
 
 const getChildren = (domTag: Element, diffing: boolean) => {
@@ -20,8 +23,16 @@ const getChildren = (domTag: Element, diffing: boolean) => {
 }
 
 const getAttributes = (domTag: Element, index: number) => {
-  const attributes = domTag.attributes || {}
-  return { ...attributes, style: {}, key: index }
+  const attributes = domTag.attributes || []
+  // convert to react-compatible props
+  const reactPropsAttributes = Array.from(attributes as { [key: string]: any }[]).reduce(
+    (acc, { key, value }) => ({
+      ...acc,
+      [key]: value,
+    }),
+    {},
+  )
+  return { ...reactPropsAttributes, key: index, style: {} }
 }
 
 const sortTags = (domTag: Element, index: number, diffing: boolean) => {
@@ -34,7 +45,11 @@ const sortTags = (domTag: Element, index: number, diffing: boolean) => {
     case 'p':
       return <p {...attributes}>{children}</p>
     case 'a':
-      return <a {...attributes}>{children}</a>
+      return (
+        <a target="_blank" rel="noopener" {...attributes}>
+          {children}
+        </a>
+      )
     case 'b':
       return <b {...attributes}>{children}</b>
     case 'u':
@@ -49,6 +64,8 @@ const sortTags = (domTag: Element, index: number, diffing: boolean) => {
       return <H4 {...attributes}>{children}</H4>
     case 'h2':
       return <H5 {...attributes}>{children}</H5>
+    case 'h6':
+      return <H6 {...attributes}>{children}</H6>
     case 'i':
       return <i {...attributes}>{children}</i>
     case 'strike':
diff --git a/packages/elements/src/styles/components/html-render.scss b/packages/elements/src/styles/components/html-render.scss
new file mode 100644
index 0000000000..35e81491b7
--- /dev/null
+++ b/packages/elements/src/styles/components/html-render.scss
@@ -0,0 +1,20 @@
+@import '../base/colors.scss';
+
+.html-render {
+  & a {
+    color: $reapit-mid-blue;
+    font-weight: bold;
+  }
+  & ul,
+  & ol {
+    margin-top: 0;
+    margin-left: 0;
+    list-style-position: inside;
+    & li div {
+      display: inline-block;
+    }
+  }
+  & p {
+    margin: 1rem 0;
+  }
+}
diff --git a/packages/elements/src/styles/index.scss b/packages/elements/src/styles/index.scss
index 44c31a0e4e..eea8b5b1b1 100644
--- a/packages/elements/src/styles/index.scss
+++ b/packages/elements/src/styles/index.scss
@@ -32,3 +32,4 @@
 @import './components/notification.scss';
 @import './components/upload-progress.scss';
 @import './components/dropdown-select.scss';
+@import './components/html-render.scss';
diff --git a/packages/elements/src/styles/vendor/pell.scss b/packages/elements/src/styles/vendor/pell.scss
index 6278003435..158d8008a9 100644
--- a/packages/elements/src/styles/vendor/pell.scss
+++ b/packages/elements/src/styles/vendor/pell.scss
@@ -14,6 +14,7 @@ $pell-content-padding: 10px !default;
   border-radius: 0;
   overflow: hidden;
   color: $black;
+  height: 180px;
 
   &--is-danger {
     border: 1px solid $reapit-red;
@@ -24,6 +25,8 @@ $pell-content-padding: 10px !default;
   outline: none;
   padding: $pell-content-padding;
   min-height: $pell-content-height;
+  height: 75%;
+  overflow-y: scroll;
   box-sizing: border-box;
   background-color: $white;
 
@@ -31,11 +34,20 @@ $pell-content-padding: 10px !default;
     box-shadow: 0 0 0 0.125em rgba(35, 164, 222, 0.25);
   }
 
+  p {
+    margin: 1rem 0;
+  }
+
+  a {
+    color: $reapit-mid-blue;
+    font-weight: bold;
+  }
+
   h1 {
     display: block;
-    font-size: 2em;
-    margin-block-start: 0.67em;
-    margin-block-end: 0.67em;
+    font-size: 3rem;
+    margin-block-start: 0.67rem;
+    margin-block-end: 0.67rem;
     margin-inline-start: 0px;
     margin-inline-end: 0px;
     font-weight: bold;
@@ -43,9 +55,19 @@ $pell-content-padding: 10px !default;
 
   h2 {
     display: block;
-    font-size: 1.5em;
-    margin-block-start: 0.83em;
-    margin-block-end: 0.83em;
+    font-size: 2.5rem;
+    margin-block-start: 0.83rem;
+    margin-block-end: 0.83rem;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+  }
+
+  h6 {
+    display: block;
+    font-size: 1rem;
+    margin-block-start: 0.83rem;
+    margin-block-end: 0.83rem;
     margin-inline-start: 0px;
     margin-inline-end: 0px;
     font-weight: bold;
@@ -66,6 +88,8 @@ $pell-content-padding: 10px !default;
   background-color: $white;
   border-bottom: 1px solid $grey;
   padding-left: 8px;
+  min-height: $pell-button-height;
+  height: 25%;
 }
 
 .pell-button {
diff --git a/packages/elements/src/tests/badges/badge-branches.svg b/packages/elements/src/tests/badges/badge-branches.svg
index 83425e4d6d..f06a38b897 100644
--- a/packages/elements/src/tests/badges/badge-branches.svg
+++ b/packages/elements/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="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">77.03%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">77.03%</text></g></svg>
+<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">77.27%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">77.27%</text></g></svg>
\ No newline at end of file
diff --git a/packages/elements/src/tests/badges/badge-functions.svg b/packages/elements/src/tests/badges/badge-functions.svg
index 873b73dc00..85e1e96737 100644
--- a/packages/elements/src/tests/badges/badge-functions.svg
+++ b/packages/elements/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="#4c1"/><rect width="170" height="20" fill="url(#s)"/></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">95.22%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">95.22%</text></g></svg>
+<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="#4c1"/><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">95.28%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">95.28%</text></g></svg>
\ No newline at end of file
diff --git a/packages/elements/src/tests/badges/badge-lines.svg b/packages/elements/src/tests/badges/badge-lines.svg
index 354672e6b8..298b94a7b3 100644
--- a/packages/elements/src/tests/badges/badge-lines.svg
+++ b/packages/elements/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="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">96.57%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">96.57%</text></g></svg>
+<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">96.48%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">96.48%</text></g></svg>
\ No newline at end of file
diff --git a/packages/elements/src/tests/badges/badge-statements.svg b/packages/elements/src/tests/badges/badge-statements.svg
index 84474b83ab..0d530fb661 100644
--- a/packages/elements/src/tests/badges/badge-statements.svg
+++ b/packages/elements/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="#4c1"/><rect width="182" height="20" fill="url(#s)"/></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">96.42%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">96.42%</text></g></svg>
+<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="#4c1"/><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">96.34%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">96.34%</text></g></svg>
\ No newline at end of file
diff --git a/packages/geo-diary/src/tests/badges/badge-branches.svg b/packages/geo-diary/src/tests/badges/badge-branches.svg
index df74ce7f38..0edb0ed13a 100644
--- a/packages/geo-diary/src/tests/badges/badge-branches.svg
+++ b/packages/geo-diary/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="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">66.75%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">66.75%</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">66.75%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">66.75%</text></g></svg>
\ No newline at end of file
diff --git a/packages/geo-diary/src/tests/badges/badge-functions.svg b/packages/geo-diary/src/tests/badges/badge-functions.svg
index 2d5651c6b0..1ea3d37ae5 100644
--- a/packages/geo-diary/src/tests/badges/badge-functions.svg
+++ b/packages/geo-diary/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="#dfb317"/><rect width="170" height="20" fill="url(#s)"/></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">81.55%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">81.55%</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="#dfb317"/><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">81.64%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">81.64%</text></g></svg>
\ No newline at end of file
diff --git a/packages/geo-diary/src/tests/badges/badge-lines.svg b/packages/geo-diary/src/tests/badges/badge-lines.svg
index d3fdd87a0c..fe6d765a55 100644
--- a/packages/geo-diary/src/tests/badges/badge-lines.svg
+++ b/packages/geo-diary/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="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">91.75%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">91.75%</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">91.76%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">91.76%</text></g></svg>
\ No newline at end of file
diff --git a/packages/geo-diary/src/tests/badges/badge-statements.svg b/packages/geo-diary/src/tests/badges/badge-statements.svg
index 8cf520cfd6..259fe655b7 100644
--- a/packages/geo-diary/src/tests/badges/badge-statements.svg
+++ b/packages/geo-diary/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="#4c1"/><rect width="182" height="20" fill="url(#s)"/></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">90.88%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">90.88%</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="#4c1"/><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">90.9%</text><text x="1515" y="140" transform="scale(.1)" textLength="370">90.9%</text></g></svg>
\ No newline at end of file
diff --git a/packages/lifetime-legal/src/tests/badges/badge-branches.svg b/packages/lifetime-legal/src/tests/badges/badge-branches.svg
index 5f09a4a1d5..2f3c50ba7f 100644
--- a/packages/lifetime-legal/src/tests/badges/badge-branches.svg
+++ b/packages/lifetime-legal/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="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">61.92%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">61.92%</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">61.92%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">61.92%</text></g></svg>
\ No newline at end of file
diff --git a/packages/lifetime-legal/src/tests/badges/badge-functions.svg b/packages/lifetime-legal/src/tests/badges/badge-functions.svg
index d190e8880b..cf054ef37d 100644
--- a/packages/lifetime-legal/src/tests/badges/badge-functions.svg
+++ b/packages/lifetime-legal/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="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">75.68%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">75.68%</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">75.78%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">75.78%</text></g></svg>
\ No newline at end of file
diff --git a/packages/lifetime-legal/src/tests/badges/badge-lines.svg b/packages/lifetime-legal/src/tests/badges/badge-lines.svg
index 2ffb61ddaa..a5cdb8e49b 100644
--- a/packages/lifetime-legal/src/tests/badges/badge-lines.svg
+++ b/packages/lifetime-legal/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="#dfb317"/><rect width="146" height="20" fill="url(#s)"/></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">88.27%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">88.27%</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="#dfb317"/><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">88.28%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">88.28%</text></g></svg>
\ No newline at end of file
diff --git a/packages/lifetime-legal/src/tests/badges/badge-statements.svg b/packages/lifetime-legal/src/tests/badges/badge-statements.svg
index 7260adc429..ae50f399e8 100644
--- a/packages/lifetime-legal/src/tests/badges/badge-statements.svg
+++ b/packages/lifetime-legal/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="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">87.65%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">87.65%</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="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">87.67%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">87.67%</text></g></svg>
\ No newline at end of file
diff --git a/packages/marketplace/src/actions/__tests__/developer.ts b/packages/marketplace/src/actions/__tests__/developer.ts
index 3d79ce0c6c..a9d472fcf0 100644
--- a/packages/marketplace/src/actions/__tests__/developer.ts
+++ b/packages/marketplace/src/actions/__tests__/developer.ts
@@ -8,12 +8,16 @@ import {
   fetchBilling,
   fetchBillingSuccess,
   fetchBillingFailure,
+  fetchMonthlyBilling,
+  fetchMonthlyBillingSuccess,
+  fetchMonthlyBillingFailure,
 } from '../developer'
 import ActionTypes from '../../constants/action-types'
 import { appsDataStub } from '../../sagas/__stubs__/apps'
 import { CreateDeveloperModel } from '@reapit/foundations-ts-definitions'
 import { appPermissionStub } from '@/sagas/__stubs__/app-permission'
 import { billing } from '@/sagas/__stubs__/billing'
+import { monthlyBillingData } from '@/sagas/__stubs__/monthly-billing'
 
 describe('developer actions', () => {
   it('should create a developerLoading action', () => {
@@ -70,7 +74,26 @@ describe('developer actions', () => {
   })
 
   it('should create a fetchBillingFailure action', () => {
-    expect(fetchBillingFailure.type).toEqual(ActionTypes.DEVELOPER_FETCH_BILLING_FAILURE)
+    expect(fetchBillingFailure.type).toEqual(ActionTypes.DEVELOPER_FETCH_BILLING_FAILED)
     expect(fetchBillingFailure('error').data).toEqual('error')
   })
+
+  it('should create a fetchMonthlyBilling action', () => {
+    const params = {
+      applicationId: ['applicationId'],
+      month: 'month',
+    }
+    expect(fetchMonthlyBilling.type).toEqual(ActionTypes.DEVELOPER_FETCH_MONTHLY_BILLING)
+    expect(fetchMonthlyBilling(params).data).toEqual(params)
+  })
+
+  it('should create a fetchMonthlyBillingSuccess action', () => {
+    expect(fetchMonthlyBillingSuccess.type).toEqual(ActionTypes.DEVELOPER_FETCH_MONTHLY_BILLING_SUCCESS)
+    expect(fetchMonthlyBillingSuccess(monthlyBillingData).data).toEqual(monthlyBillingData)
+  })
+
+  it('should create a fetchMonthlyBillingFailure action', () => {
+    expect(fetchMonthlyBillingFailure.type).toEqual(ActionTypes.DEVELOPER_FETCH_MONTHLY_BILLING_FAILED)
+    expect(fetchMonthlyBillingFailure('error').data).toEqual('error')
+  })
 })
diff --git a/packages/marketplace/src/actions/developer.ts b/packages/marketplace/src/actions/developer.ts
index bbf7c0612d..20872e9fb1 100644
--- a/packages/marketplace/src/actions/developer.ts
+++ b/packages/marketplace/src/actions/developer.ts
@@ -1,11 +1,12 @@
 // TODO: WILL MOVE ALL DEVELOPER ACTIONS TO HERE
 import { actionCreator } from '../utils/actions'
 import ActionTypes from '../constants/action-types'
-import { DeveloperItem, DeveloperRequestParams, Billing, AppDetailData } from '../reducers/developer'
+import { DeveloperItem, DeveloperRequestParams, Billing, AppDetailData, MonthlyBilling } from '../reducers/developer'
 import { CreateDeveloperModel, DeveloperModel } from '@reapit/foundations-ts-definitions'
 import { FormState } from '@/types/core'
 import { FetchBillingParams } from '@/sagas/api'
 import { FetchAppDetailParams } from '@/services/apps'
+import { FetchMonthlyBillingParams } from '@/services/billings'
 
 // Developer App Detail
 export const developerFetchAppDetail = actionCreator<FetchAppDetailParams>(ActionTypes.DEVELOPER_FETCH_APP_DETAIL)
@@ -25,4 +26,9 @@ export const fetchMyIdentity = actionCreator<void>(ActionTypes.DEVELOPER_FETCH_M
 export const setMyIdentity = actionCreator<DeveloperModel>(ActionTypes.DEVELOPER_SET_MY_IDENTITY)
 export const fetchBilling = actionCreator<FetchBillingParams>(ActionTypes.DEVELOPER_FETCH_BILLING)
 export const fetchBillingSuccess = actionCreator<Billing>(ActionTypes.DEVELOPER_FETCH_BILLING_SUCCESS)
-export const fetchBillingFailure = actionCreator<unknown>(ActionTypes.DEVELOPER_FETCH_BILLING_FAILURE)
+export const fetchBillingFailure = actionCreator<unknown>(ActionTypes.DEVELOPER_FETCH_BILLING_FAILED)
+export const fetchMonthlyBilling = actionCreator<FetchMonthlyBillingParams>(ActionTypes.DEVELOPER_FETCH_MONTHLY_BILLING)
+export const fetchMonthlyBillingSuccess = actionCreator<MonthlyBilling>(
+  ActionTypes.DEVELOPER_FETCH_MONTHLY_BILLING_SUCCESS,
+)
+export const fetchMonthlyBillingFailure = actionCreator<unknown>(ActionTypes.DEVELOPER_FETCH_MONTHLY_BILLING_FAILED)
diff --git a/packages/marketplace/src/components/pages/__tests__/developer-home.tsx b/packages/marketplace/src/components/pages/__tests__/developer-home.tsx
index 72a7efba64..d6b4b3b761 100644
--- a/packages/marketplace/src/components/pages/__tests__/developer-home.tsx
+++ b/packages/marketplace/src/components/pages/__tests__/developer-home.tsx
@@ -26,6 +26,8 @@ describe('DeveloperHome', () => {
           requestsByPeriod: [],
         },
         isServiceChartLoading: false,
+        isMonthlyBillingLoading: false,
+        monthlyBilling: null,
         loading: false,
         isVisible: false,
         developerAppDetail: {
@@ -65,6 +67,8 @@ describe('DeveloperHome', () => {
     const mockProps: DeveloperProps = {
       developerState: {
         isServiceChartLoading: false,
+        isMonthlyBillingLoading: false,
+        monthlyBilling: null,
         myIdentity: {},
         error: null,
         billing: {
diff --git a/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-list.tsx.snap b/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-list.tsx.snap
index f0a38af0a2..ebaebc269c 100644
--- a/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-list.tsx.snap
+++ b/packages/marketplace/src/components/ui/__tests__/__snapshots__/app-list.tsx.snap
@@ -9,7 +9,7 @@ exports[`AppList should match a snapshot 1`] = `
     Title
   </Component>
   <Component
-    className=" "
+    className="undefined "
     data-test="app-list-container"
   >
     <Component
@@ -97,7 +97,7 @@ exports[`AppList should match a snapshot when use empty infoType 1`] = `
     Title
   </Component>
   <Component
-    className=" "
+    className="undefined "
     data-test="app-list-container"
   >
     <Component
diff --git a/packages/marketplace/src/components/ui/app-list.tsx b/packages/marketplace/src/components/ui/app-list.tsx
index 9a5793e723..be0d21eb2b 100644
--- a/packages/marketplace/src/components/ui/app-list.tsx
+++ b/packages/marketplace/src/components/ui/app-list.tsx
@@ -50,7 +50,10 @@ 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={`${styles.flexGrow} ${loading ? styles.contentIsLoading : ''}`}
+          data-test="app-list-container"
+        >
           {list.map(app => (
             <WrapperContainer key={app.id}>
               <AppCard
diff --git a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/__snapshots__/cost-explorer-table.test.tsx.snap b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/__snapshots__/cost-explorer-table.test.tsx.snap
index 7be085a629..df78e64abd 100644
--- a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/__snapshots__/cost-explorer-table.test.tsx.snap
+++ b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/__snapshots__/cost-explorer-table.test.tsx.snap
@@ -1,152 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CostExplorerTable should match a snapshot 1`] = `
-<Fragment>
-  <Component
-    bordered={true}
-    columns={
-      Array [
-        Object {
-          "Footer": "Total",
-          "Header": "Resource",
-          "accessor": "resource",
-          "columnProps": Object {
-            "className": "capitalize",
-            "width": 200,
-          },
-        },
-        Object {
-          "Footer": [Function],
-          "Header": "Endpoints",
-          "accessor": [Function],
-        },
-        Object {
-          "Footer": [Function],
-          "Header": "API Calls",
-          "accessor": [Function],
-        },
-        Object {
-          "Footer": [Function],
-          "Header": "Cost",
-          "accessor": [Function],
-        },
-      ]
-    }
-    data={
-      Array [
-        Object {
-          "apiCalls": 1440,
-          "cost": 784,
-          "endpoints": 3,
-          "resource": "contacts",
-          "subRows": Array [
-            Object {
-              "apiCalls": 440,
-              "cost": 84,
-              "endpoints": 1,
-              "resource": "/contacts",
-            },
-            Object {
-              "apiCalls": 1200,
-              "cost": 500,
-              "endpoints": 1,
-              "resource": "/contacts/{ID}",
-            },
-            Object {
-              "apiCalls": 800,
-              "cost": 200,
-              "endpoints": 1,
-              "resource": "/contacts/{ID}",
-            },
-          ],
-        },
-        Object {
-          "apiCalls": 4000,
-          "cost": 567,
-          "endpoints": 9,
-          "resource": "properties",
-          "subRows": Array [
-            Object {
-              "apiCalls": 1000,
-              "cost": 400,
-              "endpoints": 3,
-              "resource": "/properties",
-            },
-            Object {
-              "apiCalls": 1000,
-              "cost": 100,
-              "endpoints": 3,
-              "resource": "/properties/{ID}",
-            },
-            Object {
-              "apiCalls": 2000,
-              "cost": 67,
-              "endpoints": 3,
-              "resource": "/properties/{ID}",
-            },
-          ],
-        },
-        Object {
-          "apiCalls": 6000,
-          "cost": 594,
-          "endpoints": 5,
-          "resource": "developers",
-          "subRows": Array [
-            Object {
-              "apiCalls": 2000,
-              "cost": 200,
-              "endpoints": 1,
-              "resource": "/developers",
-            },
-            Object {
-              "apiCalls": 3000,
-              "cost": 200,
-              "endpoints": 3,
-              "resource": "/developers/{ID}",
-            },
-            Object {
-              "apiCalls": 1000,
-              "cost": 194,
-              "endpoints": 2,
-              "resource": "/developers/{ID}",
-            },
-          ],
-        },
-        Object {
-          "apiCalls": 1500,
-          "cost": 200,
-          "endpoints": 10,
-          "resource": "customers",
-          "subRows": Array [
-            Object {
-              "apiCalls": 500,
-              "cost": 50,
-              "endpoints": 5,
-              "resource": "/customers",
-            },
-            Object {
-              "apiCalls": 1000,
-              "cost": 50,
-              "endpoints": 1,
-              "resource": "/customers/{ID}",
-            },
-            Object {
-              "apiCalls": 500,
-              "cost": 100,
-              "endpoints": 4,
-              "resource": "/customers/{ID}",
-            },
-          ],
-        },
-      ]
+<ContextProvider
+  value={
+    Object {
+      "store": Object {
+        "clearActions": [Function],
+        "dispatch": [Function],
+        "getActions": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Subscription {
+        "handleChangeWrapper": [Function],
+        "listeners": Object {
+          "notify": [Function],
+        },
+        "onStateChange": [Function],
+        "parentSub": undefined,
+        "store": Object {
+          "clearActions": [Function],
+          "dispatch": [Function],
+          "getActions": [Function],
+          "getState": [Function],
+          "replaceReducer": [Function],
+          "subscribe": [Function],
+        },
+        "unsubscribe": null,
+      },
     }
-    expandable={true}
-    scrollable={true}
-  />
-  <p
-    className="mt-5"
-  >
-    *All charges are subject to VAT. Your totals for each month will be sent to our Accounts Department and you will be automatically invoiced at the end of each billing period.
-  </p>
-</Fragment>
+  }
+>
+  <CostExplorerTable />
+</ContextProvider>
 `;
diff --git a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/__snapshots__/cost-explorer.test.tsx.snap b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/__snapshots__/cost-explorer.test.tsx.snap
index 71572faa07..4a2b9309b8 100644
--- a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/__snapshots__/cost-explorer.test.tsx.snap
+++ b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/__snapshots__/cost-explorer.test.tsx.snap
@@ -1,39 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CostCalculator should match a snapshot 1`] = `
-<Fragment>
-  <Component>
-    Cost Explorer: Cost & Usage
-  </Component>
-  <Component>
-    <Component
-      className="is-half-desktop"
-    >
-      <Component>
-        <Component
-          className="is-one-quarter"
-        >
-          <Component>
-            Month
-          </Component>
-        </Component>
-        <Component>
-          <CostFilterForm
-            initialValues={
-              Object {
-                "createdMonth": "2019-10",
-              }
-            }
-            onSave={[Function]}
-          />
-        </Component>
-      </Component>
-    </Component>
-  </Component>
-  <Component>
-    <Component>
-      <CostExplorerTable />
-    </Component>
-  </Component>
-</Fragment>
+<ContextProvider
+  value={
+    Object {
+      "store": Object {
+        "clearActions": [Function],
+        "dispatch": [Function],
+        "getActions": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Subscription {
+        "handleChangeWrapper": [Function],
+        "listeners": Object {
+          "notify": [Function],
+        },
+        "onStateChange": [Function],
+        "parentSub": undefined,
+        "store": Object {
+          "clearActions": [Function],
+          "dispatch": [Function],
+          "getActions": [Function],
+          "getState": [Function],
+          "replaceReducer": [Function],
+          "subscribe": [Function],
+        },
+        "unsubscribe": null,
+      },
+    }
+  }
+>
+  <CostExplorer />
+</ContextProvider>
 `;
diff --git a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/__snapshots__/cost-filter-form.test.tsx.snap b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/__snapshots__/cost-filter-form.test.tsx.snap
index c1ffde5b20..c8ba208b3e 100644
--- a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/__snapshots__/cost-filter-form.test.tsx.snap
+++ b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/__snapshots__/cost-filter-form.test.tsx.snap
@@ -1,30 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CostFilterForm should match a snapshot 1`] = `
-<Formik
-  initialValues={
+<ContextProvider
+  value={
     Object {
-      "createdMonth": "2020-04",
+      "store": Object {
+        "clearActions": [Function],
+        "dispatch": [Function],
+        "getActions": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "subscription": Subscription {
+        "handleChangeWrapper": [Function],
+        "listeners": Object {
+          "notify": [Function],
+        },
+        "onStateChange": [Function],
+        "parentSub": undefined,
+        "store": Object {
+          "clearActions": [Function],
+          "dispatch": [Function],
+          "getActions": [Function],
+          "getState": [Function],
+          "replaceReducer": [Function],
+          "subscribe": [Function],
+        },
+        "unsubscribe": null,
+      },
     }
   }
-  onSubmit={[Function]}
 >
-  <Form>
-    <Component
-      id="createdMonth"
-      name="createdMonth"
-      reactDatePickerProps={
-        Object {
-          "dateFormat": "MMMM YYYY",
-          "showMonthDropdown": true,
-          "showMonthYearPicker": true,
-        }
+  <CostFilterForm
+    initialValues={
+      Object {
+        "createdMonth": "2020-04",
       }
-      useCustomInput={false}
-    />
-    <FormikConnect(Function)
-      onSave={[Function]}
-    />
-  </Form>
-</Formik>
+    }
+    onSave={[MockFunction]}
+  />
+</ContextProvider>
 `;
diff --git a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/cost-explorer-table.test.tsx b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/cost-explorer-table.test.tsx
index ae34a51955..af4fdd6327 100644
--- a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/cost-explorer-table.test.tsx
+++ b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/cost-explorer-table.test.tsx
@@ -1,9 +1,33 @@
 import * as React from 'react'
 import { shallow } from 'enzyme'
-import CostExplorerTable from '../cost-explorer-table'
+import CostExplorerTable, { prepareTableData } from '../cost-explorer-table'
+import { monthlyBillingData, tableData } from '@/sagas/__stubs__/monthly-billing'
+
+import { ReduxState } from '@/types/core'
+import configureStore from 'redux-mock-store'
+import * as ReactRedux from 'react-redux'
+import { developerState } from '@/sagas/__stubs__/developer'
+
+const mockState = {
+  developer: developerState,
+} as ReduxState
 
 describe('CostExplorerTable', () => {
   it('should match a snapshot', () => {
-    expect(shallow(<CostExplorerTable />)).toMatchSnapshot()
+    const mockStore = configureStore()
+    const store = mockStore(mockState)
+    expect(
+      shallow(
+        <ReactRedux.Provider store={store}>
+          <CostExplorerTable />
+        </ReactRedux.Provider>,
+      ),
+    ).toMatchSnapshot()
+  })
+})
+
+describe('prepareTableData', () => {
+  it('should run correctly', () => {
+    expect(prepareTableData(monthlyBillingData.requestsByService)).toEqual(tableData)
   })
 })
diff --git a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/cost-explorer.test.tsx b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/cost-explorer.test.tsx
index 099786b6d6..d63473122f 100644
--- a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/cost-explorer.test.tsx
+++ b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/cost-explorer.test.tsx
@@ -1,11 +1,34 @@
 import * as React from 'react'
 import { shallow } from 'enzyme'
-import CostExplorer, { prepareFilterFormInitialValues, CostFilterFormValues, handleOnSave } from '../cost-explorer'
+import CostExplorer, {
+  prepareFilterFormInitialValues,
+  CostFilterFormValues,
+  handleOnSave,
+  handleFetchMonthlyBilling,
+} from '../cost-explorer'
+import { fetchMonthlyBilling } from '@/actions/developer'
+import * as ReactRedux from 'react-redux'
+import configureStore from 'redux-mock-store'
+import { developerState } from '@/sagas/__stubs__/developer'
+import { ReduxState } from '@/types/core'
+
+const mockState = {
+  developer: developerState,
+} as ReduxState
 
 describe('CostCalculator', () => {
   const mockCreatedMonth = '2020-04'
+  const mockStore = configureStore()
+  const store = mockStore(mockState)
+
   it('should match a snapshot', () => {
-    expect(shallow(<CostExplorer />)).toMatchSnapshot()
+    expect(
+      shallow(
+        <ReactRedux.Provider store={store}>
+          <CostExplorer />
+        </ReactRedux.Provider>,
+      ),
+    ).toMatchSnapshot()
   })
 
   describe('prepareInitialValues', () => {
@@ -20,13 +43,28 @@ describe('CostCalculator', () => {
 
   describe('handleOnSave', () => {
     it('should run correctly', () => {
-      const mockSetCreatedMonth = jest.fn()
+      const setCreatedMonth = jest.fn()
+      const dispatch = jest.fn()
       const mockFormValues: CostFilterFormValues = {
         createdMonth: mockCreatedMonth,
       }
-      const fn = handleOnSave(mockSetCreatedMonth)
+      const myAppIds = ['']
+      const fn = handleOnSave({ setCreatedMonth, dispatch, myAppIds })
       fn(mockFormValues)
-      expect(mockSetCreatedMonth).toBeCalledWith(mockCreatedMonth)
+      expect(setCreatedMonth).toBeCalledWith(mockCreatedMonth)
+      expect(dispatch).toBeCalledWith(fetchMonthlyBilling({ month: mockCreatedMonth, applicationId: myAppIds }))
+    })
+  })
+
+  describe('handleFetchMonthlyBilling', () => {
+    it('should run correctly', () => {
+      const month = '2020-05'
+      const applicationId = ['applicationId']
+      const dispatch = jest.fn()
+
+      const fn = handleFetchMonthlyBilling({ dispatch, month, applicationId })
+      fn()
+      expect(dispatch).toBeCalledWith(fetchMonthlyBilling({ month, applicationId }))
     })
   })
 })
diff --git a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/cost-filter-form.test.tsx b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/cost-filter-form.test.tsx
index e51156d301..9e762025d2 100644
--- a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/cost-filter-form.test.tsx
+++ b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/__test__/cost-filter-form.test.tsx
@@ -2,16 +2,36 @@ import * as React from 'react'
 import { shallow } from 'enzyme'
 import CostFilterForm, { CostFilterFormProps, handleAutoSave } from '../cost-filter-form'
 import { CostFilterFormValues } from '../cost-explorer'
+import { ReduxState } from '@/types/core'
+import configureStore from 'redux-mock-store'
+import * as ReactRedux from 'react-redux'
+import * as redux from 'react-redux'
+import { developerState } from '@/sagas/__stubs__/developer'
+
+const mockState = {
+  developer: developerState,
+} as ReduxState
 
 describe('CostFilterForm', () => {
+  const mockStore = configureStore()
+  const store = mockStore(mockState)
+
   const mockProps: CostFilterFormProps = {
     initialValues: {
       createdMonth: '2020-04',
     },
     onSave: jest.fn(),
   }
+  const spy = jest.spyOn(redux, 'useSelector')
+  spy.mockReturnValue(true)
   it('should match a snapshot', () => {
-    expect(shallow(<CostFilterForm {...mockProps} />)).toMatchSnapshot()
+    expect(
+      shallow(
+        <ReactRedux.Provider store={store}>
+          <CostFilterForm {...mockProps} />
+        </ReactRedux.Provider>,
+      ),
+    ).toMatchSnapshot()
   })
 
   describe('handleAutoSave', () => {
diff --git a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/cost-explorer-table.tsx b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/cost-explorer-table.tsx
index e162e2a6af..a13120ee9d 100644
--- a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/cost-explorer-table.tsx
+++ b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/cost-explorer-table.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react'
 import { formatNumber, formatCurrency } from '@/utils/number-formatter'
-import { Table } from '@reapit/elements'
+import { Table, Loader } from '@reapit/elements'
+import { useSelector } from 'react-redux'
+import { selectMonthlyBilling, selectMonthlyBillingLoading } from '@/selector/developer'
+import { EndpointBilling } from '@/reducers/developer'
 
 export type CostExplorerTableProps = {}
 
@@ -12,118 +15,30 @@ export type TableRow = {
   subRows?: TableRow[]
 }
 
-// We'll need to use this fake data until APIs are ready
-export const tableData: TableRow[] = [
-  {
-    resource: 'contacts',
-    endpoints: 3,
-    apiCalls: 1440,
-    cost: 784,
-    subRows: [
-      {
-        resource: '/contacts',
-        endpoints: 1,
-        apiCalls: 440,
-        cost: 84,
-      },
-      {
-        resource: '/contacts/{ID}',
-        endpoints: 1,
-        apiCalls: 1200,
-        cost: 500,
-      },
-      {
-        resource: '/contacts/{ID}',
-        endpoints: 1,
-        apiCalls: 800,
-        cost: 200,
-      },
-    ],
-  },
-  {
-    resource: 'properties',
-    endpoints: 9,
-    apiCalls: 4000,
-    cost: 567,
-    subRows: [
-      {
-        resource: '/properties',
-        endpoints: 3,
-        apiCalls: 1000,
-        cost: 400,
-      },
-      {
-        resource: '/properties/{ID}',
-        endpoints: 3,
-        apiCalls: 1000,
-        cost: 100,
-      },
-      {
-        resource: '/properties/{ID}',
-        endpoints: 3,
-        apiCalls: 2000,
-        cost: 67,
-      },
-    ],
-  },
-  {
-    resource: 'developers',
-    endpoints: 5,
-    apiCalls: 6000,
-    cost: 594,
-    subRows: [
-      {
-        resource: '/developers',
-        endpoints: 1,
-        apiCalls: 2000,
-        cost: 200,
-      },
-      {
-        resource: '/developers/{ID}',
-        endpoints: 3,
-        apiCalls: 3000,
-        cost: 200,
-      },
-      {
-        resource: '/developers/{ID}',
-        endpoints: 2,
-        apiCalls: 1000,
-        cost: 194,
-      },
-    ],
-  },
-  {
-    resource: 'customers',
-    endpoints: 10,
-    apiCalls: 1500,
-    cost: 200,
-    subRows: [
-      {
-        resource: '/customers',
-        endpoints: 5,
-        apiCalls: 500,
-        cost: 50,
-      },
-      {
-        resource: '/customers/{ID}',
-        endpoints: 1,
-        apiCalls: 1000,
-        cost: 50,
-      },
-      {
-        resource: '/customers/{ID}',
-        endpoints: 4,
-        apiCalls: 500,
-        cost: 100,
-      },
-    ],
-  },
-]
+export const prepareTableData = data => {
+  const preparedData = data.map(({ requestsByEndpoint, ...row }) => {
+    const subRows = requestsByEndpoint.map((request: EndpointBilling) => {
+      return {
+        serviceName: request.endpoint,
+        requestCount: request.requestCount,
+        cost: request.cost,
+      }
+    })
+    return { ...row, subRows }
+  })
+  return preparedData
+}
+
+interface PrepareTableColumns {
+  totalCost: number
+  totalEndpoints: number
+  totalRequests: number
+}
 
-export const tableColumns = [
+export const prepareTableColumns = ({ totalCost, totalEndpoints, totalRequests }: PrepareTableColumns) => [
   {
     Header: 'Resource',
-    accessor: 'resource',
+    accessor: 'serviceName',
     columnProps: {
       className: 'capitalize',
       width: 200,
@@ -133,39 +48,39 @@ export const tableColumns = [
   {
     Header: 'Endpoints',
     accessor: row => {
-      return formatNumber(row.endpoints)
-    },
-    Footer: info => {
-      const totalEndpoints = info.rows.reduce((sum, row) => row.original.endpoints + sum, 0)
-      return formatNumber(totalEndpoints)
+      return row.endpointCount && formatNumber(row.endpointCount)
     },
+    Footer: formatNumber(totalEndpoints),
   },
   {
     Header: 'API Calls',
     accessor: row => {
-      return formatNumber(row.apiCalls)
-    },
-    Footer: info => {
-      const totalApiCalls = info.rows.reduce((sum, row) => row.original.apiCalls + sum, 0)
-      return formatNumber(totalApiCalls)
+      return row.requestCount && formatNumber(row.requestCount)
     },
+    Footer: formatNumber(totalRequests),
   },
   {
     Header: 'Cost',
     accessor: row => {
-      return formatCurrency(row.cost)
-    },
-    Footer: info => {
-      const totalCost = info.rows.reduce((sum, row) => row.original.cost + sum, 0)
-      return formatCurrency(totalCost)
+      return row.cost && formatCurrency(row.cost)
     },
+    Footer: formatCurrency(totalCost),
   },
 ]
 
 const CostExplorerTable: React.FC<CostExplorerTableProps> = () => {
+  const monthlyBilling = useSelector(selectMonthlyBilling)
+  const isLoading = useSelector(selectMonthlyBillingLoading)
+
+  if (isLoading || !monthlyBilling) return <Loader />
+
+  const { totalCost, totalEndpoints, totalRequests } = monthlyBilling
+  const columns = prepareTableColumns({ totalCost, totalEndpoints, totalRequests })
+  const tableData = prepareTableData(monthlyBilling.requestsByService)
+
   return (
     <>
-      <Table bordered scrollable expandable columns={tableColumns} data={tableData} />
+      <Table bordered scrollable expandable columns={columns} data={tableData} />
       <p className="mt-5">
         *All charges are subject to VAT. Your totals for each month will be sent to our Accounts Department and you will
         be automatically invoiced at the end of each billing period.
diff --git a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/cost-explorer.tsx b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/cost-explorer.tsx
index 0f45910a4d..c80d518d71 100644
--- a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/cost-explorer.tsx
+++ b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/cost-explorer.tsx
@@ -3,6 +3,11 @@ import { H4, Grid, H6, GridItem, DATE_TIME_FORMAT } from '@reapit/elements'
 import CostFilterForm from './cost-filter-form'
 import dayjs from 'dayjs'
 import CostExplorerTable from './cost-explorer-table'
+import { useDispatch, useSelector } from 'react-redux'
+import { Dispatch } from 'redux'
+import { fetchMonthlyBilling } from '@/actions/developer'
+import { selectDeveloperApps } from '@/selector'
+import { AppSummaryModel } from '@reapit/foundations-ts-definitions'
 
 export type CostExplorerProps = {}
 
@@ -18,17 +23,45 @@ export const prepareFilterFormInitialValues = (createdMonth: string) => {
   }
 }
 
-export const handleOnSave = (setCreatedMonth: (createdMonth: string) => void) => {
+interface HandleOnSave {
+  setCreatedMonth: (createdMonth: string) => void
+  dispatch: Dispatch
+  myAppIds: string[]
+}
+
+export const handleOnSave = ({ setCreatedMonth, dispatch, myAppIds }: HandleOnSave) => {
   return (values: CostFilterFormValues) => {
     const { createdMonth } = values
     setCreatedMonth(createdMonth)
+    const month = dayjs(createdMonth).format(DATE_TIME_FORMAT.YYYY_MM)
+    dispatch(fetchMonthlyBilling({ month, applicationId: myAppIds }))
   }
 }
 
+interface HandleFetchMonthlyBilling {
+  month: string
+  applicationId: string[]
+  dispatch: Dispatch
+}
+
+export const handleFetchMonthlyBilling = ({ dispatch, month, applicationId }: HandleFetchMonthlyBilling) => () => {
+  dispatch(fetchMonthlyBilling({ month, applicationId }))
+}
+
 const CostExplorer: React.FC<CostExplorerProps> = () => {
+  const dispatch = useDispatch()
+  const myApps = useSelector(selectDeveloperApps)
+  const myAppIds = myApps.map((item: AppSummaryModel) => item.id) as string[]
+
   const [createdMonth, setCreatedMonth] = React.useState(dayjs().format(DATE_TIME_FORMAT.YYYY_MM))
   const initialValues = React.useMemo(prepareFilterFormInitialValues(createdMonth), [createdMonth])
-  const onSave = React.useCallback(handleOnSave(setCreatedMonth), [])
+
+  React.useEffect(handleFetchMonthlyBilling({ month: createdMonth, applicationId: myAppIds, dispatch }), [
+    myApps.length,
+  ])
+
+  const onSave = React.useCallback(handleOnSave({ setCreatedMonth, dispatch, myAppIds }), [myAppIds, dispatch])
+
   return (
     <>
       <H4>Cost Explorer: Cost & Usage</H4>
diff --git a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/cost-filter-form.tsx b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/cost-filter-form.tsx
index d80b01d588..6b029ed1e0 100644
--- a/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/cost-filter-form.tsx
+++ b/packages/marketplace/src/components/ui/developer-analytics/billing/cost-explorer/cost-filter-form.tsx
@@ -2,6 +2,8 @@ import * as React from 'react'
 import { Formik, Form, DatePicker, DATE_TIME_FORMAT } from '@reapit/elements'
 import FormikAutoSave from '@/components/hocs/formik-auto-save'
 import { CostFilterFormValues } from './cost-explorer'
+import { useSelector } from 'react-redux'
+import { selectMyIdentity } from '@/selector'
 
 export type CostFilterFormProps = {
   initialValues: CostFilterFormValues
@@ -15,6 +17,11 @@ export const handleAutoSave = (onSave: (values: CostFilterFormValues) => void) =
 }
 
 const CostFilterForm: React.FC<CostFilterFormProps> = ({ initialValues, onSave }) => {
+  const myIdentity = useSelector(selectMyIdentity)
+
+  const minDate = myIdentity.created && new Date(myIdentity?.created)
+  const maxDate = new Date()
+
   return (
     <Formik initialValues={initialValues} onSubmit={() => {}}>
       <Form>
@@ -26,6 +33,8 @@ const CostFilterForm: React.FC<CostFilterFormProps> = ({ initialValues, onSave }
             showMonthYearPicker: true,
             dateFormat: DATE_TIME_FORMAT.MMMM_YYYY,
             showMonthDropdown: true,
+            minDate: minDate,
+            maxDate: maxDate,
           }}
         />
         <FormikAutoSave onSave={handleAutoSave(onSave)} />
diff --git a/packages/marketplace/src/components/ui/diff-render-html.tsx b/packages/marketplace/src/components/ui/diff-render-html.tsx
index 4c21ea15dc..6695ac1c00 100644
--- a/packages/marketplace/src/components/ui/diff-render-html.tsx
+++ b/packages/marketplace/src/components/ui/diff-render-html.tsx
@@ -8,7 +8,6 @@ export interface DiffRenderHTMLProps {
 }
 
 const DiffRenderHTML = ({ currentString, changedString }: DiffRenderHTMLProps) => {
-  console.log(currentString, changedString)
   const isDiff = currentString !== changedString
   return (
     <div className={styles.container}>
diff --git a/packages/marketplace/src/constants/action-types.ts b/packages/marketplace/src/constants/action-types.ts
index 66f36b94e2..8e6b6b8eac 100644
--- a/packages/marketplace/src/constants/action-types.ts
+++ b/packages/marketplace/src/constants/action-types.ts
@@ -9,7 +9,10 @@ const ActionTypes = {
   DEVELOPER_SET_MY_IDENTITY: 'DEVELOPER_SET_MY_IDENTITY',
   DEVELOPER_FETCH_BILLING: 'DEVELOPER_FETCH_BILLING',
   DEVELOPER_FETCH_BILLING_SUCCESS: 'DEVELOPER_FETCH_BILLING_SUCCESS',
-  DEVELOPER_FETCH_BILLING_FAILURE: 'DEVELOPER_FETCH_BILLING_FAILURE',
+  DEVELOPER_FETCH_BILLING_FAILED: 'DEVELOPER_FETCH_BILLING_FAILED',
+  DEVELOPER_FETCH_MONTHLY_BILLING: 'DEVELOPER_FETCH_MONTHLY_BILLING',
+  DEVELOPER_FETCH_MONTHLY_BILLING_SUCCESS: 'DEVELOPER_FETCH_MONTHLY_BILLING_SUCCESS',
+  DEVELOPER_FETCH_MONTHLY_BILLING_FAILED: 'DEVELOPER_FETCH_MONTHLY_BILLING_FAILED',
   // CLIENT PORTAL
 
   // ADMIN PORTAL
diff --git a/packages/marketplace/src/reducers/__tests__/developer.ts b/packages/marketplace/src/reducers/__tests__/developer.ts
index 048be6b4cc..fbad16f88e 100644
--- a/packages/marketplace/src/reducers/__tests__/developer.ts
+++ b/packages/marketplace/src/reducers/__tests__/developer.ts
@@ -3,6 +3,7 @@ import { ActionType } from '../../types/core'
 import ActionTypes from '../../constants/action-types'
 import { appsDataStub } from '../../sagas/__stubs__/apps'
 import { billing } from '@/sagas/__stubs__/billing'
+import { monthlyBillingData } from '@/sagas/__stubs__/monthly-billing'
 
 describe('developer reducer', () => {
   it('should return default state if action not matched', () => {
@@ -89,9 +90,9 @@ describe('developer reducer', () => {
     expect(newState).toEqual(expected)
   })
 
-  it('should set fetchBillingFailure when call DEVELOPER_FETCH_BILLING_FAILURE is called', () => {
+  it('should set fetchBillingFailure when call DEVELOPER_FETCH_BILLING_FAILED is called', () => {
     const newState = developerReducer(undefined, {
-      type: ActionTypes.DEVELOPER_FETCH_BILLING_FAILURE as ActionType,
+      type: ActionTypes.DEVELOPER_FETCH_BILLING_FAILED as ActionType,
       data: 'error',
     })
     const expected = {
@@ -101,4 +102,40 @@ describe('developer reducer', () => {
     }
     expect(newState).toEqual(expected)
   })
+
+  it('should set fetchMonthlyBillingFailure when call DEVELOPER_FETCH_MONTHLY_BILLING_FAILED is called', () => {
+    const newState = developerReducer(undefined, {
+      type: ActionTypes.DEVELOPER_FETCH_MONTHLY_BILLING_FAILED as ActionType,
+      data: null,
+    })
+    const expected = {
+      ...defaultState,
+      isMonthlyBillingLoading: false,
+    }
+    expect(newState).toEqual(expected)
+  })
+
+  it('should set fetchMonthlyBilling when call DEVELOPER_FETCH_MONTHLY_BILLING is called', () => {
+    const newState = developerReducer(undefined, {
+      type: ActionTypes.DEVELOPER_FETCH_MONTHLY_BILLING as ActionType,
+      data: null,
+    })
+    const expected = {
+      ...defaultState,
+      isMonthlyBillingLoading: true,
+    }
+    expect(newState).toEqual(expected)
+  })
+  it('should set fetchMonthlyBillingSuccess when call DEVELOPER_FETCH_MONTHLY_BILLING_SUCCESS is called', () => {
+    const newState = developerReducer(undefined, {
+      type: ActionTypes.DEVELOPER_FETCH_MONTHLY_BILLING_SUCCESS as ActionType,
+      data: monthlyBillingData,
+    })
+    const expected = {
+      ...defaultState,
+      monthlyBilling: monthlyBillingData,
+      isMonthlyBillingLoading: false,
+    }
+    expect(newState).toEqual(expected)
+  })
 })
diff --git a/packages/marketplace/src/reducers/developer.ts b/packages/marketplace/src/reducers/developer.ts
index a21a58210f..9c07d58979 100644
--- a/packages/marketplace/src/reducers/developer.ts
+++ b/packages/marketplace/src/reducers/developer.ts
@@ -12,6 +12,9 @@ import {
   developerFetchAppDetail,
   developerFetchAppDetailSuccess,
   developerFetchAppDetailFailed,
+  fetchMonthlyBilling,
+  fetchMonthlyBillingSuccess,
+  fetchMonthlyBillingFailure,
 } from '@/actions/developer'
 import {
   PagedResultAppSummaryModel_,
@@ -49,6 +52,28 @@ export type Billing = {
   requestsByPeriod: RequestByPeriod[]
 }
 
+export type EndpointBilling = {
+  cost: number
+  endpoint: number
+  requestCount: number
+}
+
+export type RequestBilling = {
+  cost: number
+  endpointCount: number
+  requestCount: number
+  serviceName: string
+  requestsByEndpoint: EndpointBilling[]
+}
+
+export type MonthlyBilling = {
+  period: string
+  totalCost: number
+  totalEndpoints: number
+  totalRequests: number
+  requestsByService: RequestBilling[]
+}
+
 export interface DeveloperState {
   loading: boolean
   developerAppDetail: DeveloperAppDetailState
@@ -59,6 +84,8 @@ export interface DeveloperState {
   billing: Billing | null
   isServiceChartLoading: boolean
   error: unknown
+  isMonthlyBillingLoading: boolean
+  monthlyBilling: MonthlyBilling | null
 }
 
 export type AppDetailData = (AppDetailModel & { apiKey?: string }) | null
@@ -83,6 +110,8 @@ export const defaultState: DeveloperState = {
   billing: null,
   isServiceChartLoading: true,
   error: null,
+  isMonthlyBillingLoading: true,
+  monthlyBilling: null,
 }
 
 const developerReducer = (state: DeveloperState = defaultState, action: Action<any>): DeveloperState => {
@@ -172,11 +201,26 @@ const developerReducer = (state: DeveloperState = defaultState, action: Action<a
   if (isType(action, fetchBillingSuccess)) {
     return {
       ...state,
-      billing: action.data || null,
+      billing: action.data,
       isServiceChartLoading: false,
     }
   }
 
+  if (isType(action, fetchMonthlyBilling)) {
+    return {
+      ...state,
+      isMonthlyBillingLoading: true,
+    }
+  }
+
+  if (isType(action, fetchMonthlyBillingSuccess)) {
+    return {
+      ...state,
+      isMonthlyBillingLoading: false,
+      monthlyBilling: action.data || null,
+    }
+  }
+
   if (isType(action, fetchBillingFailure)) {
     return {
       ...state,
@@ -185,6 +229,13 @@ const developerReducer = (state: DeveloperState = defaultState, action: Action<a
     }
   }
 
+  if (isType(action, fetchMonthlyBillingFailure)) {
+    return {
+      ...state,
+      isMonthlyBillingLoading: false,
+    }
+  }
+
   return state
 }
 
diff --git a/packages/marketplace/src/sagas/__stubs__/developer.ts b/packages/marketplace/src/sagas/__stubs__/developer.ts
index e4a8f573ce..145a51699d 100644
--- a/packages/marketplace/src/sagas/__stubs__/developer.ts
+++ b/packages/marketplace/src/sagas/__stubs__/developer.ts
@@ -103,4 +103,6 @@ export const developerState: DeveloperState = {
   isVisible: false,
   billing: billing,
   isServiceChartLoading: false,
+  isMonthlyBillingLoading: false,
+  monthlyBilling: null,
 }
diff --git a/packages/marketplace/src/sagas/__stubs__/monthly-billing.ts b/packages/marketplace/src/sagas/__stubs__/monthly-billing.ts
new file mode 100644
index 0000000000..a9796ecb5e
--- /dev/null
+++ b/packages/marketplace/src/sagas/__stubs__/monthly-billing.ts
@@ -0,0 +1,39 @@
+import { MonthlyBilling } from '@/reducers/developer'
+
+export const monthlyBillingData: MonthlyBilling = {
+  period: '2020-05',
+  requestsByService: [
+    {
+      cost: 0.05,
+      endpointCount: 1,
+      requestCount: 4,
+      requestsByEndpoint: [
+        {
+          cost: 0.05,
+          endpoint: 2,
+          requestCount: 4,
+        },
+      ],
+      serviceName: 'offices',
+    },
+  ],
+  totalCost: 0.05,
+  totalEndpoints: 1,
+  totalRequests: 4,
+}
+
+export const tableData = [
+  {
+    cost: 0.05,
+    endpointCount: 1,
+    requestCount: 4,
+    subRows: [
+      {
+        cost: 0.05,
+        serviceName: 2,
+        requestCount: 4,
+      },
+    ],
+    serviceName: 'offices',
+  },
+]
diff --git a/packages/marketplace/src/sagas/__tests__/developer.ts b/packages/marketplace/src/sagas/__tests__/developer.ts
index 6ffdf5adf4..ca27060d8a 100644
--- a/packages/marketplace/src/sagas/__tests__/developer.ts
+++ b/packages/marketplace/src/sagas/__tests__/developer.ts
@@ -9,6 +9,8 @@ import {
   setMyIdentity,
   fetchBillingFailure,
   fetchBillingSuccess,
+  fetchMonthlyBillingSuccess,
+  fetchMonthlyBillingFailure,
 } from '@/actions/developer'
 import developerSagas, {
   developerDataFetch,
@@ -19,6 +21,8 @@ import developerSagas, {
   fetchBillingSagasListen,
   fetchMyIdentitySagas,
   fetchBillingSagas,
+  fetchMonthlyBillingSagasListen,
+  fetchMonthlyBillingSagas,
 } from '../developer'
 import ActionTypes from '@/constants/action-types'
 import { generateHeader, URLS } from '@/constants/api'
@@ -33,6 +37,8 @@ import { selectDeveloperId } from '@/selector/developer'
 import api, { FetchBillingParams } from '../api'
 import { developerIdentity } from '../__stubs__/developer-identity'
 import { billing } from '../__stubs__/billing'
+import { FetchMonthlyBillingParams, fetchMonthlyBilling } from '@/services/billings'
+import { monthlyBillingData } from '../__stubs__/monthly-billing'
 
 jest.mock('@reapit/elements')
 
@@ -192,6 +198,34 @@ describe('fetchBillingSagas', () => {
   })
 })
 
+describe('fetchMonthlyBillingSagas', () => {
+  const params = {
+    month: '2020-01',
+    applicationId: ['1', '2'],
+  } as FetchMonthlyBillingParams
+  const gen = cloneableGenerator(fetchMonthlyBillingSagas as any)({ data: params })
+  expect(gen.next().value).toEqual(call(fetchMonthlyBilling, params))
+  it('api call success', () => {
+    const clone = gen.clone()
+    expect(clone.next(monthlyBillingData).value).toEqual(put(fetchMonthlyBillingSuccess(monthlyBillingData)))
+    expect(clone.next().done).toEqual(true)
+  })
+  it('api call error', () => {
+    const clone = gen.clone()
+    // @ts-ignore
+    expect(clone.throw('error').value).toEqual(put(fetchMonthlyBillingFailure('error')))
+    expect(clone.next().value).toEqual(
+      put(
+        errorThrownServer({
+          type: 'SERVER',
+          message: errorMessages.DEFAULT_SERVER_ERROR,
+        }),
+      ),
+    )
+    expect(clone.next().done).toEqual(true)
+  })
+})
+
 describe('developer thunks', () => {
   describe('developerRequestDataListen', () => {
     it('should request data listen', () => {
@@ -228,6 +262,16 @@ describe('developer thunks', () => {
     })
   })
 
+  describe('fetchMonthlyBillingSagasListen', () => {
+    it('should trigger developerCreact action', () => {
+      const gen = fetchMonthlyBillingSagasListen()
+      expect(gen.next().value).toEqual(
+        takeLatest(ActionTypes.DEVELOPER_FETCH_MONTHLY_BILLING, fetchMonthlyBillingSagas),
+      )
+      expect(gen.next().done).toBe(true)
+    })
+  })
+
   describe('developerSagas', () => {
     it('should listen developer request data & create app action', () => {
       const gen = developerSagas()
@@ -238,6 +282,7 @@ describe('developer thunks', () => {
           fork(developerCreateListen),
           fork(fetchMyIdentitySagasListen),
           fork(fetchBillingSagasListen),
+          fork(fetchMonthlyBillingSagasListen),
         ]),
       )
       expect(gen.next().done).toBe(true)
diff --git a/packages/marketplace/src/sagas/developer.ts b/packages/marketplace/src/sagas/developer.ts
index c9fc56b416..ad32e20164 100644
--- a/packages/marketplace/src/sagas/developer.ts
+++ b/packages/marketplace/src/sagas/developer.ts
@@ -10,6 +10,8 @@ import {
   setMyIdentity,
   fetchBillingSuccess,
   fetchBillingFailure,
+  fetchMonthlyBillingSuccess,
+  fetchMonthlyBillingFailure,
 } from '@/actions/developer'
 import { APPS_PER_PAGE } from '@/constants/paginator'
 import { DeveloperItem, DeveloperRequestParams } from '@/reducers/developer'
@@ -20,6 +22,7 @@ import { URLS, generateHeader } from '@/constants/api'
 import { Action } from '@/types/core'
 import { selectDeveloperId } from '@/selector'
 import api, { FetchBillingParams } from './api'
+import { FetchMonthlyBillingParams, fetchMonthlyBilling } from '@/services/billings'
 
 export const developerDataFetch = function*({ data }) {
   yield put(developerLoading(true))
@@ -129,6 +132,22 @@ export const fetchBillingSagas = function*({ data }: Action<FetchBillingParams>)
   }
 }
 
+export const fetchMonthlyBillingSagas = function*({ data }: Action<FetchMonthlyBillingParams>) {
+  try {
+    const billingResponse = yield call(fetchMonthlyBilling, data)
+    yield put(fetchMonthlyBillingSuccess(billingResponse))
+  } catch (err) {
+    logger(err)
+    yield put(fetchMonthlyBillingFailure(err))
+    yield put(
+      errorThrownServer({
+        type: 'SERVER',
+        message: errorMessages.DEFAULT_SERVER_ERROR,
+      }),
+    )
+  }
+}
+
 export const developerRequestDataListen = function*() {
   yield takeLatest<Action<DeveloperRequestParams>>(ActionTypes.DEVELOPER_REQUEST_DATA, developerDataFetch)
 }
@@ -145,12 +164,17 @@ export const fetchBillingSagasListen = function*() {
   yield takeLatest(ActionTypes.DEVELOPER_FETCH_BILLING, fetchBillingSagas)
 }
 
+export const fetchMonthlyBillingSagasListen = function*() {
+  yield takeLatest(ActionTypes.DEVELOPER_FETCH_MONTHLY_BILLING, fetchMonthlyBillingSagas)
+}
+
 const developerSagas = function*() {
   yield all([
     fork(developerRequestDataListen),
     fork(developerCreateListen),
     fork(fetchMyIdentitySagasListen),
     fork(fetchBillingSagasListen),
+    fork(fetchMonthlyBillingSagasListen),
   ])
 }
 
diff --git a/packages/marketplace/src/selector/__tests__/developer.ts b/packages/marketplace/src/selector/__tests__/developer.ts
index 3f2f35aeeb..23b01f5299 100644
--- a/packages/marketplace/src/selector/__tests__/developer.ts
+++ b/packages/marketplace/src/selector/__tests__/developer.ts
@@ -8,6 +8,8 @@ import {
   selectBilling,
   selectDeveloperLoading,
   selectIsServiceChartLoading,
+  selectMonthlyBilling,
+  selectMonthlyBillingLoading,
 } from '../developer'
 
 describe('selectDeveloperId', () => {
@@ -169,3 +171,40 @@ describe('selectIsServiceChartLoading', () => {
     expect(result).toEqual(undefined)
   })
 })
+
+describe('selectMonthlyBillingLoading', () => {
+  it('should run correctly', () => {
+    const input = {
+      developer: {
+        isMonthlyBillingLoading: true,
+      },
+    } as ReduxState
+    const result = selectMonthlyBillingLoading(input)
+    expect(result).toEqual(true)
+  })
+
+  it('should run correctly and return null', () => {
+    const input = {} as ReduxState
+    const result = selectMonthlyBillingLoading(input)
+    expect(result).toEqual(undefined)
+  })
+})
+
+describe('selectMonthlyBilling', () => {
+  it('should run correctly', () => {
+    const input = {
+      developer: {
+        isServiceChartLoading: false,
+        monthlyBilling: {},
+      },
+    } as ReduxState
+    const result = selectMonthlyBilling(input)
+    expect(result).toEqual(input.developer.monthlyBilling)
+  })
+
+  it('should run correctly and return undefined', () => {
+    const input = {} as ReduxState
+    const result = selectMonthlyBilling(input)
+    expect(result).toEqual(undefined)
+  })
+})
diff --git a/packages/marketplace/src/selector/developer.ts b/packages/marketplace/src/selector/developer.ts
index 452340f456..bf295863c9 100644
--- a/packages/marketplace/src/selector/developer.ts
+++ b/packages/marketplace/src/selector/developer.ts
@@ -1,7 +1,7 @@
 // TODO: Will move all developerSelector to here for reusable
 import { ReduxState } from '@/types/core'
 import { AppSummaryModel, DeveloperModel } from '@reapit/foundations-ts-definitions'
-import { Billing } from '@/reducers/developer'
+import { Billing, MonthlyBilling } from '@/reducers/developer'
 
 export const selectDeveloperId = (state: ReduxState) => {
   return state.auth.loginSession?.loginIdentity.developerId
@@ -34,3 +34,11 @@ export const selectDeveloperLoading = (state: ReduxState): boolean => {
 export const selectIsServiceChartLoading = (state: ReduxState): boolean => {
   return state.developer?.isServiceChartLoading
 }
+
+export const selectMonthlyBilling = (state: ReduxState): MonthlyBilling | null => {
+  return state.developer?.monthlyBilling
+}
+
+export const selectMonthlyBillingLoading = (state: ReduxState): boolean => {
+  return state.developer?.isMonthlyBillingLoading
+}
diff --git a/packages/marketplace/src/services/__tests__/billings.ts b/packages/marketplace/src/services/__tests__/billings.ts
new file mode 100644
index 0000000000..ceabd24099
--- /dev/null
+++ b/packages/marketplace/src/services/__tests__/billings.ts
@@ -0,0 +1,21 @@
+import { fetchMonthlyBilling } from '../billings'
+import { generateHeader, URLS } from '@/constants/api'
+import { fetcher, setQueryParams } from '@reapit/elements'
+
+describe('should fetchMonthlyBilling run correctly', () => {
+  it('fetcher should be called', () => {
+    const applicationId = ['applicationId']
+    const month = '2020-05'
+    const headers = generateHeader(window.reapit.config.marketplaceApiKey)
+    const url = `${URLS.trafficEvents}/billing/${month}?${setQueryParams({ applicationId })}`
+
+    fetchMonthlyBilling({ applicationId, month }).then(() => {
+      expect(fetcher).toBeCalledWith({
+        headers,
+        url,
+        api: window.reapit.config.marketplaceApiUrl,
+        method: 'GET',
+      })
+    })
+  })
+})
diff --git a/packages/marketplace/src/services/billings.ts b/packages/marketplace/src/services/billings.ts
new file mode 100644
index 0000000000..678a21f00b
--- /dev/null
+++ b/packages/marketplace/src/services/billings.ts
@@ -0,0 +1,24 @@
+import { fetcher, setQueryParams } from '@reapit/elements'
+import { generateHeader, URLS } from '@/constants/api'
+import { logger } from 'logger'
+
+export interface FetchMonthlyBillingParams {
+  applicationId: string[]
+  month: string
+}
+
+export const fetchMonthlyBilling = async (params: FetchMonthlyBillingParams) => {
+  try {
+    const { month, applicationId } = params
+    const response = await fetcher({
+      url: `${URLS.trafficEvents}/billing/${month}?${setQueryParams({ applicationId })}`,
+      api: window.reapit.config.marketplaceApiUrl,
+      method: 'GET',
+      headers: generateHeader(window.reapit.config.marketplaceApiKey),
+    })
+    return response
+  } catch (error) {
+    logger(error)
+    throw new Error(error)
+  }
+}
diff --git a/packages/marketplace/src/styles/blocks/app-list.scss b/packages/marketplace/src/styles/blocks/app-list.scss
index 9ccd7c6b1e..d104b5a1fd 100644
--- a/packages/marketplace/src/styles/blocks/app-list.scss
+++ b/packages/marketplace/src/styles/blocks/app-list.scss
@@ -3,7 +3,7 @@
   margin-bottom: 1.5rem;
 }
 
-.loader-container {
+.loaderContainer {
   position: absolute;
   left: 0;
   right: 0;
@@ -14,6 +14,11 @@
   align-items: center;
 }
 
-.content-is-loading {
+.contentIsLoading {
   opacity: 0.75;
 }
+
+// to fix old chrome/safari flex-box bug
+.flexGrow {
+  flex: 1 0;
+}
diff --git a/packages/marketplace/src/styles/blocks/diff-render-html.scss b/packages/marketplace/src/styles/blocks/diff-render-html.scss
index eb45616e32..af07421541 100644
--- a/packages/marketplace/src/styles/blocks/diff-render-html.scss
+++ b/packages/marketplace/src/styles/blocks/diff-render-html.scss
@@ -8,6 +8,24 @@
   color: $black;
   display: flex;
   align-items: center;
+
+  & a {
+    color: $reapit-mid-blue;
+    font-weight: bold;
+  }
+
+  & ul,
+  & ol {
+    margin-top: 0;
+    margin-left: 0;
+    list-style-position: inside;
+    & li div {
+      display: inline-block;
+    }
+  }
+  & p {
+    margin: 1rem 0;
+  }
 }
 
 .green {
diff --git a/packages/marketplace/src/tests/badges/badge-branches.svg b/packages/marketplace/src/tests/badges/badge-branches.svg
index 39ed6b3ad1..d18757b266 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">69.92%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">69.92%</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.22%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">70.22%</text></g></svg>
diff --git a/packages/marketplace/src/tests/badges/badge-functions.svg b/packages/marketplace/src/tests/badges/badge-functions.svg
index e2f0d126c2..093a78a753 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">74.39%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">74.39%</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">74.63%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">74.63%</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 8183f9991f..b4b6b01b63 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="#dfb317"/><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">89.99%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">89.99%</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="#dfb317"/><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">89.67%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">89.67%</text></g></svg>
diff --git a/packages/marketplace/src/tests/badges/badge-statements.svg b/packages/marketplace/src/tests/badges/badge-statements.svg
index 1db8ad2977..81fc7449c4 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.08%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">89.08%</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="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">88.78%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">88.78%</text></g></svg>
diff --git a/packages/smb-onboarder/src/tests/badges/badge-branches.svg b/packages/smb-onboarder/src/tests/badges/badge-branches.svg
index 4d573bf8e6..de2c16937b 100644
--- a/packages/smb-onboarder/src/tests/badges/badge-branches.svg
+++ b/packages/smb-onboarder/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="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">62.83%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">62.83%</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">62.83%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">62.83%</text></g></svg>
\ No newline at end of file
diff --git a/packages/smb-onboarder/src/tests/badges/badge-functions.svg b/packages/smb-onboarder/src/tests/badges/badge-functions.svg
index dc8f3c869b..fe55805dd8 100644
--- a/packages/smb-onboarder/src/tests/badges/badge-functions.svg
+++ b/packages/smb-onboarder/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="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">75.82%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">75.82%</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">75.97%</text><text x="1425" y="140" transform="scale(.1)" textLength="430">75.97%</text></g></svg>
\ No newline at end of file
diff --git a/packages/smb-onboarder/src/tests/badges/badge-lines.svg b/packages/smb-onboarder/src/tests/badges/badge-lines.svg
index a584cb676a..66d7062bdb 100644
--- a/packages/smb-onboarder/src/tests/badges/badge-lines.svg
+++ b/packages/smb-onboarder/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="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">91.08%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">91.08%</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">91.09%</text><text x="1185" y="140" transform="scale(.1)" textLength="430">91.09%</text></g></svg>
\ No newline at end of file
diff --git a/packages/smb-onboarder/src/tests/badges/badge-statements.svg b/packages/smb-onboarder/src/tests/badges/badge-statements.svg
index 22984a95a2..2dfcd00acd 100644
--- a/packages/smb-onboarder/src/tests/badges/badge-statements.svg
+++ b/packages/smb-onboarder/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="#4c1"/><rect width="182" height="20" fill="url(#s)"/></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">90.26%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">90.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="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="#4c1"/><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">90.29%</text><text x="1545" y="140" transform="scale(.1)" textLength="430">90.29%</text></g></svg>
\ No newline at end of file
diff --git a/packages/web-components/src/search-widget/client/components/search-widget.svelte b/packages/web-components/src/search-widget/client/components/search-widget.svelte
index 1fc5d21b2e..1f78831432 100644
--- a/packages/web-components/src/search-widget/client/components/search-widget.svelte
+++ b/packages/web-components/src/search-widget/client/components/search-widget.svelte
@@ -64,7 +64,7 @@
   <SearchForm />
   <div class="search-widget-items-container">
     <div class="search-widget-items">
-      {#if $searchWidgetStore.properties.length && !$searchWidgetStore.isLoading}
+      {#if $searchWidgetStore.resultsMessage && !$searchWidgetStore.isLoading}
         <div class="search-widget-heading">
           <h2 class={primaryHeading}>{$searchWidgetStore.resultsMessage}</h2>
         </div>
diff --git a/packages/web-components/src/search-widget/client/utils/__tests__/search-helper.ts b/packages/web-components/src/search-widget/client/utils/__tests__/search-helper.ts
index 56b5a25845..0b230c2e82 100644
--- a/packages/web-components/src/search-widget/client/utils/__tests__/search-helper.ts
+++ b/packages/web-components/src/search-widget/client/utils/__tests__/search-helper.ts
@@ -83,5 +83,19 @@ describe('Search-Helper', () => {
       const result = getResultMessage(input)
       expect(result).toEqual('1 Property For Sale in mockSearchKeyword')
     })
+    it('should return correctly when totalCount = 0 and isRental false', () => {
+      const input = {
+        properties: {
+          _embedded: [],
+          totalCount: 0,
+        },
+        searchKeyword: 'mockSearchKeyword',
+        searchType: 'Sale' as 'Rent' | 'Sale',
+      }
+      const result = getResultMessage(input)
+      expect(result).toEqual(
+        "We couldn't find any properties that match your search criteria, please refine your search",
+      )
+    })
   })
 })
diff --git a/packages/web-components/src/search-widget/client/utils/search-helper.ts b/packages/web-components/src/search-widget/client/utils/search-helper.ts
index 8fad467bc8..bf9dad92ab 100644
--- a/packages/web-components/src/search-widget/client/utils/search-helper.ts
+++ b/packages/web-components/src/search-widget/client/utils/search-helper.ts
@@ -127,5 +127,5 @@ export const getResultMessage = ({
     }
     return `${resultsMessage}${filterMessages.length > 0 ? `: ${filterMessages.join(', ')}` : ''}`
   }
-  return ''
+  return "We couldn't find any properties that match your search criteria, please refine your search"
 }