diff --git a/__tests__/components/search/Input.test.tsx b/__tests__/components/search/Input.test.tsx
new file mode 100644
index 00000000..111b6986
--- /dev/null
+++ b/__tests__/components/search/Input.test.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import renderer from 'react-test-renderer'
+import Input from '../../../components/search/Input'
+
+test('📸 of Input component with empty', ()  => {
+  const query = {}
+  const tree = renderer.create(<Input query={query} />).toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
+test('📸 of Input component with query', ()  => {
+  const query = {
+    q: 'gdp'
+  }
+  const tree = renderer.create(<Input query={query} />).toJSON()
+  expect(tree).toMatchSnapshot()
+})
diff --git a/__tests__/components/search/Item.test.tsx b/__tests__/components/search/Item.test.tsx
deleted file mode 100644
index cda1194c..00000000
--- a/__tests__/components/search/Item.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import renderer from 'react-test-renderer'
-import Item from '../../../components/search/Item'
-
-test('📸 of Item component', ()  => {
-  const datapackage = {
-    name: 'test',
-    title: 'Title',
-    description: 'A description.',
-    organization: {
-      title: 'test org',
-      name: 'test-org'
-    }
-  }
-  const tree = renderer.create(<Item datapackage={datapackage} />).toJSON()
-  expect(tree).toMatchSnapshot()
-})
diff --git a/__tests__/components/search/List.test.tsx b/__tests__/components/search/List.test.tsx
new file mode 100644
index 00000000..3a47743c
--- /dev/null
+++ b/__tests__/components/search/List.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import renderer from 'react-test-renderer'
+import List from '../../../components/search/List'
+
+test('📸 of Input component with empty', ()  => {
+  const datapackages = [
+    {
+      name: 'test',
+      title: 'Title',
+      description: 'A description.',
+      organization: {
+        title: 'test org',
+        name: 'test-org'
+      }
+    }
+  ]
+  const tree = renderer.create(<List datapackages={datapackages} />).toJSON()
+  expect(tree).toMatchSnapshot()
+})
diff --git a/__tests__/components/search/Sort.test.tsx b/__tests__/components/search/Sort.test.tsx
new file mode 100644
index 00000000..179811fe
--- /dev/null
+++ b/__tests__/components/search/Sort.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import renderer from 'react-test-renderer'
+import Sort from '../../../components/search/Sort'
+
+test('📸 of Input component with empty', ()  => {
+  const tree = renderer.create(<Sort />).toJSON()
+  expect(tree).toMatchSnapshot()
+})
diff --git a/__tests__/components/search/__snapshots__/Input.test.tsx.snap b/__tests__/components/search/__snapshots__/Input.test.tsx.snap
new file mode 100644
index 00000000..b8e409a6
--- /dev/null
+++ b/__tests__/components/search/__snapshots__/Input.test.tsx.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`📸 of Input component with empty 1`] = `
+<form
+  className="flex items-center"
+  onSubmit={[Function]}
+>
+  <input
+    aria-label="Search"
+    className="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"
+    onChange={[Function]}
+    placeholder="Search"
+    type="text"
+  />
+  <button
+    className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
+    onClick={[Function]}
+  >
+    Search
+  </button>
+</form>
+`;
+
+exports[`📸 of Input component with query 1`] = `
+<form
+  className="flex items-center"
+  onSubmit={[Function]}
+>
+  <input
+    aria-label="Search"
+    className="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"
+    onChange={[Function]}
+    placeholder="Search"
+    type="text"
+    value="gdp"
+  />
+  <button
+    className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
+    onClick={[Function]}
+  >
+    Search
+  </button>
+</form>
+`;
diff --git a/__tests__/components/search/__snapshots__/Item.test.tsx.snap b/__tests__/components/search/__snapshots__/Item.test.tsx.snap
deleted file mode 100644
index 12170243..00000000
--- a/__tests__/components/search/__snapshots__/Item.test.tsx.snap
+++ /dev/null
@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`📸 of Item component 1`] = `
-<div
-  className="mb-6"
->
-  <h3
-    className="text-xl font-semibold"
-  >
-    <a
-      className="text-primary"
-      href="/@test-org/test"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-    >
-      Title
-    </a>
-  </h3>
-  <a
-    className="text-gray-500 block mt-1"
-    href="/@test-org"
-    onClick={[Function]}
-    onMouseEnter={[Function]}
-  >
-    test org
-  </a>
-  <div
-    className="leading-relaxed mt-2"
-  >
-    A description.
-  </div>
-</div>
-`;
diff --git a/__tests__/components/search/__snapshots__/List.test.tsx.snap b/__tests__/components/search/__snapshots__/List.test.tsx.snap
new file mode 100644
index 00000000..452ebe70
--- /dev/null
+++ b/__tests__/components/search/__snapshots__/List.test.tsx.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`📸 of Input component with empty 1`] = `
+<ul>
+  <div
+    className="mb-6"
+  >
+    <h3
+      className="text-xl font-semibold"
+    >
+      <a
+        className="text-primary"
+        href="/@test-org/test"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+      >
+        Title
+      </a>
+    </h3>
+    <a
+      className="text-gray-500 block mt-1"
+      href="/@test-org"
+      onClick={[Function]}
+      onMouseEnter={[Function]}
+    >
+      test org
+    </a>
+    <div
+      className="leading-relaxed mt-2"
+    >
+      A description.
+    </div>
+  </div>
+</ul>
+`;
diff --git a/__tests__/components/search/__snapshots__/Sort.test.tsx.snap b/__tests__/components/search/__snapshots__/Sort.test.tsx.snap
new file mode 100644
index 00000000..44dbe74d
--- /dev/null
+++ b/__tests__/components/search/__snapshots__/Sort.test.tsx.snap
@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`📸 of Input component with empty 1`] = `
+<div
+  className="inline-block my-6 float-right"
+>
+  <label
+    htmlFor="field-order-by"
+  >
+    Order by:
+  </label>
+  <select
+    className="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>
+`;
diff --git a/__tests__/pages/__snapshots__/index.test.tsx.snap b/__tests__/pages/__snapshots__/index.test.tsx.snap
index b65c9a23..8f1a5aa8 100644
--- a/__tests__/pages/__snapshots__/index.test.tsx.snap
+++ b/__tests__/pages/__snapshots__/index.test.tsx.snap
@@ -1,24 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`📸 of Home page 1`] = `
-Array [
+<div
+  className="container mx-auto"
+>
   <nav
-    className="flex items-center justify-between flex-wrap bg-white p-6"
+    className="flex items-center justify-between flex-wrap bg-white p-4 border-b border-gray-200"
   >
     <div
       className="flex items-center flex-shrink-0 text-gray-700 mr-6"
     >
-      <span
-        className="font-semibold text-xl tracking-tight"
-      >
-        Portal
-      </span>
+      <img
+        alt="portal logo"
+        src="/images/logo.svg"
+        width="40"
+      />
     </div>
     <div
-      className="block lg:hidden"
+      className="block lg:hidden mx-4"
     >
       <button
-        className="flex items-center px-3 py-2 border rounded text-gray-700 border-teal-400 hover:text-black hover:border-black"
+        className="flex items-center px-3 py-2 border rounded text-gray-700 border-orange-400 hover:text-black hover:border-black"
+        onClick={[Function]}
       >
         <svg
           className="fill-current h-3 w-3"
@@ -35,55 +38,41 @@ Array [
       </button>
     </div>
     <div
-      className="w-full block flex-grow lg:flex lg:items-center lg:w-auto"
+      className="hidden lg:block"
     >
-      <div
-        className="text-sm lg:flex-grow"
+      <a
+        className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6"
+        href="/search"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
       >
-        <a
-          className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-4"
-          href="/search"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-        >
-          Search
-        </a>
-        <a
-          className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-4"
-          href="http://tech.datopian.com/frontend/"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          target="_blank"
-        >
-          Docs
-        </a>
-      </div>
-      <div>
-        <a
-          className="inline-block text-sm px-4 py-2 leading-none border rounded text-black border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0"
-          href="https://github.com/datopian/portal"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-        >
-          Code
-        </a>
-      </div>
+        Search
+      </a>
+      <a
+        className="block mt-4 lg:inline-block lg:mt-0 text-gray-700 hover:text-black mr-6"
+        href="http://tech.datopian.com/frontend/"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+        target="_blank"
+      >
+        Docs
+      </a>
+      <a
+        className="inline-block text-sm px-4 py-2 leading-none border rounded text-white bg-black border-black hover:border-gray-700 hover:text-gray-700 hover:bg-white mt-4 lg:mt-0"
+        href="https://github.com/datopian/portal"
+        onClick={[Function]}
+        onMouseEnter={[Function]}
+      >
+        GitHub
+      </a>
     </div>
-  </nav>,
+  </nav>
   <section
-    className="flex mt-10 ml-40 justify-center"
+    className="flex justify-center items-center flex-col mt-8 mx-4 lg:flex-row"
   >
     <div>
-      <img
-        src="/banner.png"
-        width="500"
-      />
-    </div>
-    <div
-      className="mx-32"
-    >
       <h1
-        className="text-4xl font-thin"
+        className="text-4xl mb-3 font-thin"
       >
         Find, Share and Publish 
         <br />
@@ -95,23 +84,126 @@ Array [
         </span>
       </h1>
       <p
-        className="text-md font-light w-4/5"
+        className="text-md font-light mb-3 w-4/5"
       >
         At Datahub, we have over thousands of datasets for free and a Premium Data Service for additional or customised data with guaranteed updates.
       </p>
       <form
+        className="flex items-center"
         onSubmit={[Function]}
       >
         <input
           aria-label="Search"
-          className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal"
+          className="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"
           onChange={[Function]}
           placeholder="Search"
           type="text"
         />
+        <button
+          className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
+          onClick={[Function]}
+        >
+          Search
+        </button>
       </form>
     </div>
-  </section>,
-]
+    <div
+      className="mt-4"
+    >
+      <img
+        className="w-4/5"
+        src="/images/banner.svg"
+      />
+    </div>
+  </section>
+  <section
+    className="my-10 mx-4 lg:my-20"
+  >
+    <h1
+      className="text-2xl font-thin mb-4"
+    >
+      Recent Datasets
+    </h1>
+    <div
+      className="flex flex-col lg:flex-row"
+    >
+      <div
+        className="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm"
+      >
+        <h1
+          className="text-2xl font-thin"
+        >
+          Our World in Data - COVID 19
+        </h1>
+        <p
+          className="text-gray-500"
+        >
+          Dataset
+        </p>
+        <p>
+          data collected and managed by Our World in Data - COVID 19 pulled from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus
+        </p>
+        <a
+          className="pt-3 flex justify-end text-orange-500"
+          href="/"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+        >
+           View Dataset 
+        </a>
+      </div>
+      <div
+        className="border px-4 mb-4 mr-3 border-gray-100 w-5/6  shadow-sm"
+      >
+        <h1
+          className="text-2xl font-thin"
+        >
+          Our World in Data - COVID 19
+        </h1>
+        <p
+          className="text-gray-500"
+        >
+          Dataset
+        </p>
+        <p>
+          data collected and managed by Our World in Data - COVID 19 pulled from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus
+        </p>
+        <a
+          className="pt-3 flex justify-end  text-orange-500"
+          href="/"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+        >
+           View Dataset 
+        </a>
+      </div>
+      <div
+        className="border px-4 mb-4 border-gray-100 w-5/6 shadow-sm"
+      >
+        <h1
+          className="text-2xl font-thin"
+        >
+          Our World in Data - COVID 19
+        </h1>
+        <p
+          className="text-gray-500 mb-2"
+        >
+          Dataset
+        </p>
+        <p>
+          data collected and managed by Our World in Data - COVID 19 pulled from GitHub on 06/10/2020 https://ourworldindata.org/coronavirus
+        </p>
+        <a
+          className="pt-3 flex justify-end  text-orange-500"
+          href="/"
+          onClick={[Function]}
+          onMouseEnter={[Function]}
+        >
+           View Dataset 
+        </a>
+      </div>
+    </div>
+  </section>
+</div>
 `;