diff --git a/components/directory-ratings.tsx b/components/directory-ratings.tsx
new file mode 100644
index 00000000..a2a38b68
--- /dev/null
+++ b/components/directory-ratings.tsx
@@ -0,0 +1,40 @@
+import { FunctionComponent } from 'react';
+
+const DirectoryRatings: FunctionComponent = function () {
+  return (
+    <div className='d-flex flex-wrap justify-content-between'>
+      <div>
+        <a href='https://www.g2.com/products/mockoon-mockoon' target='_blank'>
+          <img
+            src='/images/directories/g2.png'
+            alt='G2 rating 4.5'
+            width='150'
+            className='img-fluid'
+          />
+        </a>
+      </div>
+      <div>
+        <a href='https://www.capterra.com/p/211671/Mockoon/' target='_blank'>
+          <img
+            src='/images/directories/capterra.png'
+            alt='Capterra rating 4.5'
+            width='150'
+            className='img-fluid'
+          />
+        </a>
+      </div>
+      <div>
+        <a href='https://www.producthunt.com/products/mockoon' target='_blank'>
+          <img
+            src='/images/directories/producthunt.png'
+            alt='Producthunt rating 5'
+            width='150'
+            className='img-fluid'
+          />
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default DirectoryRatings;
diff --git a/components/hero.tsx b/components/hero.tsx
index 17ed5847..5a3da9a2 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -10,6 +10,7 @@ const Hero: FunctionComponent<{
   mainPictureWidth?: number;
   mainPictureHeight?: number;
   mainPictureSkewed?: boolean;
+  children?: React.ReactNode;
 }> = function ({
   title,
   subtitle,
@@ -19,7 +20,8 @@ const Hero: FunctionComponent<{
   mainPictureAlt,
   mainPictureWidth,
   mainPictureHeight,
-  mainPictureSkewed
+  mainPictureSkewed,
+  children
 }) {
   mainPictureSkewed = mainPictureSkewed ?? true;
 
@@ -90,6 +92,7 @@ const Hero: FunctionComponent<{
               </div>
             )}
             {ctaContent}
+            <div className='mt-8'>{children}</div>
           </div>
           {mainPicture && (
             <div className='col-12 col-lg-6 mt-10 mt-lg-0'>
diff --git a/pages/cloud.tsx b/pages/cloud.tsx
index 53348b6d..0897532d 100644
--- a/pages/cloud.tsx
+++ b/pages/cloud.tsx
@@ -1,5 +1,6 @@
 import AlternatedFeatures from '../components/alternated-features';
 import CompanyLogos from '../components/company-logos';
+import DirectoryRatings from '../components/directory-ratings';
 import Hero from '../components/hero';
 import Meta from '../components/meta';
 import OssCloudComparison from '../components/oss-cloud-comparison';
@@ -106,7 +107,9 @@ export default function () {
         mainPicture='/images/cloud-hero.svg'
         mainPictureAlt='Mockoon logo in the cloud interconnected with other services'
         mainPictureSkewed={false}
-      />
+      >
+        <DirectoryRatings />
+      </Hero>
 
       <section className='py-6 py-md-8 border-top bg-gradient-light-white'>
         <CompanyLogos />
diff --git a/pages/index.tsx b/pages/index.tsx
index ff168657..6a1f6c47 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,6 +2,7 @@ import { FunctionComponent, useEffect, useState } from 'react';
 import AlternatedFeatures from '../components/alternated-features';
 import Card from '../components/card';
 import CompanyLogos from '../components/company-logos';
+import DirectoryRatings from '../components/directory-ratings';
 import Hero from '../components/hero';
 import Meta from '../components/meta';
 import Quote from '../components/quote';
@@ -178,7 +179,9 @@ const HomePage: FunctionComponent = function () {
         mainPictureAlt='Mockoon screenshot with people working'
         mainPictureWidth={1200}
         mainPictureHeight={783}
-      />
+      >
+        <DirectoryRatings />
+      </Hero>
       <section>
         <div className='container'>
           <Quote colorScheme='warning'>
diff --git a/public/images/directories/capterra.png b/public/images/directories/capterra.png
new file mode 100644
index 00000000..ee54ae7d
Binary files /dev/null and b/public/images/directories/capterra.png differ
diff --git a/public/images/directories/g2.png b/public/images/directories/g2.png
new file mode 100644
index 00000000..7dc78439
Binary files /dev/null and b/public/images/directories/g2.png differ
diff --git a/public/images/directories/producthunt.png b/public/images/directories/producthunt.png
new file mode 100644
index 00000000..49c4b160
Binary files /dev/null and b/public/images/directories/producthunt.png differ