diff --git a/examples/catalog/__tests__/components/search/__snapshots__/Form.test.tsx.snap b/examples/catalog/__tests__/components/search/__snapshots__/Form.test.tsx.snap
index d0c55115..53e378dd 100644
--- a/examples/catalog/__tests__/components/search/__snapshots__/Form.test.tsx.snap
+++ b/examples/catalog/__tests__/components/search/__snapshots__/Form.test.tsx.snap
@@ -11,57 +11,18 @@ exports[`📸 of Form component with empty 1`] = `
       <input
         aria-label="Search"
         class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
-        name="q"
+        name="search#q"
         placeholder="Search"
         type="text"
         value=""
       />
       <button
         class="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
+        type="button"
       >
         Search
       </button>
     </div>
-    <div
-      class="inline-block my-6 float-right"
-    >
-      <label
-        for="field-order-by"
-      >
-        Order by:
-      </label>
-      <select
-        class="bg-white"
-        id="field-order-by"
-        name="sort"
-      >
-        <option
-          value="score:desc"
-        >
-          Relevance
-        </option>
-        <option
-          value="title_string:asc"
-        >
-          Name Ascending
-        </option>
-        <option
-          value="title_string:desc"
-        >
-          Name Descending
-        </option>
-        <option
-          value="metadata_modified:desc"
-        >
-          Last Modified
-        </option>
-        <option
-          value="views_recent:desc"
-        >
-          Popular
-        </option>
-      </select>
-    </div>
   </form>
 </div>
 `;
@@ -77,57 +38,18 @@ exports[`📸 of Form component with query 1`] = `
       <input
         aria-label="Search"
         class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
-        name="q"
+        name="search#q"
         placeholder="Search"
         type="text"
         value=""
       />
       <button
         class="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
+        type="button"
       >
         Search
       </button>
     </div>
-    <div
-      class="inline-block my-6 float-right"
-    >
-      <label
-        for="field-order-by"
-      >
-        Order by:
-      </label>
-      <select
-        class="bg-white"
-        id="field-order-by"
-        name="sort"
-      >
-        <option
-          value="score:desc"
-        >
-          Relevance
-        </option>
-        <option
-          value="title_string:asc"
-        >
-          Name Ascending
-        </option>
-        <option
-          value="title_string:desc"
-        >
-          Name Descending
-        </option>
-        <option
-          value="metadata_modified:desc"
-        >
-          Last Modified
-        </option>
-        <option
-          value="views_recent:desc"
-        >
-          Popular
-        </option>
-      </select>
-    </div>
   </form>
 </div>
 `;
diff --git a/examples/catalog/components/home/Hero.tsx b/examples/catalog/components/home/Hero.tsx
new file mode 100644
index 00000000..07479ae0
--- /dev/null
+++ b/examples/catalog/components/home/Hero.tsx
@@ -0,0 +1,7 @@
+import Template from './HeroTemplate';
+
+const Hero: React.FC = () => {
+  return <Template />;
+};
+
+export default Hero;
diff --git a/examples/catalog/components/home/HeroTemplate.tsx b/examples/catalog/components/home/HeroTemplate.tsx
new file mode 100644
index 00000000..c56beb03
--- /dev/null
+++ b/examples/catalog/components/home/HeroTemplate.tsx
@@ -0,0 +1,130 @@
+import useTranslation from 'next-translate/useTranslation';
+import SearchForm from '../search/Form';
+
+export default function Example() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="relative bg-white overflow-hidden">
+      <div
+        className="hidden lg:block lg:absolute lg:inset-0"
+        aria-hidden="true"
+      >
+        <svg
+          className="absolute top-0 left-1/2 transform translate-x-64 -translate-y-8"
+          width={640}
+          height={784}
+          fill="none"
+          viewBox="0 0 640 784"
+        >
+          <defs>
+            <pattern
+              id="9ebea6f4-a1f5-4d96-8c4e-4c2abf658047"
+              x={118}
+              y={0}
+              width={20}
+              height={20}
+              patternUnits="userSpaceOnUse"
+            >
+              <rect
+                x={0}
+                y={0}
+                width={4}
+                height={4}
+                className="text-gray-200"
+                fill="currentColor"
+              />
+            </pattern>
+          </defs>
+          <rect
+            y={72}
+            width={640}
+            height={640}
+            className="text-gray-50"
+            fill="currentColor"
+          />
+          <rect
+            x={118}
+            width={404}
+            height={784}
+            fill="url(#9ebea6f4-a1f5-4d96-8c4e-4c2abf658047)"
+          />
+        </svg>
+      </div>
+
+      <div className="relative pt-6 pb-16 sm:pb-24 lg:pb-32">
+        <main className="mt-16 mx-auto max-w-7xl px-4 sm:mt-24 sm:px-6 lg:mt-32">
+          <div className="lg:grid lg:grid-cols-12 lg:gap-8">
+            <div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
+              <h1>
+                <span className="block text-sm font-semibold uppercase tracking-wide text-gray-500 sm:text-base lg:text-sm xl:text-base">
+                  Quality Data ready to Integrate
+                </span>
+                <span className="mt-1 block text-4xl tracking-tight font-extrabold sm:text-5xl xl:text-6xl">
+                  <span className="block text-gray-900">Find and Share</span>
+                  <span className="block text-indigo-600">Quality Data</span>
+                </span>
+              </h1>
+              <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+                {t(`common:description`)}
+              </p>
+              <div className="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
+                <SearchForm />
+              </div>
+            </div>
+            <div className="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
+              <svg
+                className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-8 scale-75 origin-top sm:scale-100 lg:hidden"
+                width={640}
+                height={784}
+                fill="none"
+                viewBox="0 0 640 784"
+                aria-hidden="true"
+              >
+                <defs>
+                  <pattern
+                    id="4f4f415c-a0e9-44c2-9601-6ded5a34a13e"
+                    x={118}
+                    y={0}
+                    width={20}
+                    height={20}
+                    patternUnits="userSpaceOnUse"
+                  >
+                    <rect
+                      x={0}
+                      y={0}
+                      width={4}
+                      height={4}
+                      className="text-gray-200"
+                      fill="currentColor"
+                    />
+                  </pattern>
+                </defs>
+                <rect
+                  y={72}
+                  width={640}
+                  height={640}
+                  className="text-gray-50"
+                  fill="currentColor"
+                />
+                <rect
+                  x={118}
+                  width={404}
+                  height={784}
+                  fill="url(#4f4f415c-a0e9-44c2-9601-6ded5a34a13e)"
+                />
+              </svg>
+              <div className="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
+                <img
+                  className="w-full"
+                  src="/images/banner.svg"
+                  alt="banner_img"
+                />
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/catalog/cypress/integration/pages/homepage-spec.js b/examples/catalog/cypress/integration/pages/homepage-spec.js
index 4bec2407..913c05e5 100644
--- a/examples/catalog/cypress/integration/pages/homepage-spec.js
+++ b/examples/catalog/cypress/integration/pages/homepage-spec.js
@@ -4,7 +4,7 @@ describe('Test Home Page', () => {
   });
 
   it('renders the hero title', () => {
-    cy.contains('Find, Share and Publish Quality Data with Datahub');
+    cy.contains('Find and Share');
   });
 
   it('checks that a search form exists', () => {
diff --git a/examples/catalog/pages/index.tsx b/examples/catalog/pages/index.tsx
index be35cfaa..579c4278 100644
--- a/examples/catalog/pages/index.tsx
+++ b/examples/catalog/pages/index.tsx
@@ -2,11 +2,11 @@ import { GetServerSideProps } from 'next';
 import Head from 'next/head';
 import { initializeApollo } from '../lib/apolloClient';
 import RecentDataset from '../components/home/Recent';
-import SearchForm from '../components/search/Form';
 import { SEARCH_QUERY } from '../graphql/queries';
 import { loadNamespaces } from './_app';
 import useTranslation from 'next-translate/useTranslation';
 import NavBar from '../components/home/Nav';
+import Hero from '../components/home/Hero';
 
 const Home: React.FC<{ locale: any; locales: any }> = ({
   locale,
@@ -21,21 +21,7 @@ const Home: React.FC<{ locale: any; locales: any }> = ({
           <link rel="icon" href="/favicon.ico" />
         </Head>
         <NavBar />
-        <section className="flex justify-center items-center flex-col mt-8 mx-4 lg:flex-row">
-          <div>
-            <h1 className="text-4xl mb-3 font-thin">
-              Find, Share and Publish <br /> Quality Data with{' '}
-              <span className="text-orange-500">Datahub</span>
-            </h1>
-            <p className="text-md font-light mb-3 w-4/5">
-              {t(`common:description`)}
-            </p>
-            <SearchForm />
-          </div>
-          <div className="mt-4">
-            <img src="/images/banner.svg" className="w-4/5" alt="banner_img" />
-          </div>
-        </section>
+        <Hero />
         <RecentDataset />
       </div>
     </>