diff --git a/components/home/Recent.tsx b/components/home/Recent.tsx
index 821904b8..37f9f4a2 100644
--- a/components/home/Recent.tsx
+++ b/components/home/Recent.tsx
@@ -1,19 +1,28 @@
 import Link from 'next/link';
 
-function Recent() {
+function Recent({ datapackages }) {
   return (
     <section className="my-10 mx-4 lg:my-20">
       <h1 className="text-2xl font-thin mb-4">Recent Datasets</h1>
-      <div>
-        <div className="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm">
-          <h1 className="text-2xl font-thin">Title</h1>
-          <p className="text-gray-500">Description</p>
-          <Link href="/">
-            <a className="pt-3 flex justify-end text-orange-500">
-              View Dataset
-            </a>
-          </Link>
-        </div>
+      <div className="flex flex-col lg:flex-row">
+        {datapackages.map((resource, index) => (
+          <div
+            key={index}
+            className="border px-4 mb-4 mr-3 border-gray-100 w-5/6 shadow-sm"
+          >
+            <h1 className="text-2xl font-thin">{resource.title}</h1>
+            <p className="text-gray-500">{resource.organization.description}</p>
+            <Link
+              href={`/@${
+                resource.organization ? resource.organization.name : 'dataset'
+              }/${resource.name}`}
+            >
+              <a className="pt-3 flex justify-end text-orange-500">
+                View Dataset
+              </a>
+            </Link>
+          </div>
+        ))}
       </div>
     </section>
   );
diff --git a/mocks/index.js b/mocks/index.js
index d894908a..017f19ed 100644
--- a/mocks/index.js
+++ b/mocks/index.js
@@ -58,63 +58,64 @@ const population = {
   },
 };
 
-const recentDataset = {
-  license_title: 'Creative Commons Attribution',
-  maintainer: '',
-  relationships_as_object: [],
-  private: false,
-  maintainer_email: '',
-  num_tags: 0,
-  id: '9b960530-728c-4a07-8f96-c5f89b545d05',
-  metadata_created: '2020-06-19T07:30:03.796668',
-  metadata_modified: '2020-06-19T07:30:11.392832',
-  author: '',
-  author_email: '',
-  state: 'active',
-  version: '',
-  creator_user_id: '0d23e029-ddd5-4909-a2cd-5af7fe8d6e9c',
-  type: 'dataset',
-  resources: [
-    {
-      mimetype: null,
-      cache_url: null,
-      hash: '',
-      description: '',
-      name: 'gettyimages-954867550.jpg',
-      format: 'JPEG',
-      url:
-        'https://demo.ckan.org/pl/dataset/9b960530-728c-4a07-8f96-c5f89b545d05/resource/ac28179c-023e-4c17-af3c-00cbb81f5dcb/download/gettyimages-954867550.jpg',
-      datastore_active: false,
-      cache_last_updated: null,
-      package_id: '9b960530-728c-4a07-8f96-c5f89b545d05',
-      created: '2020-06-19T07:30:10.786597',
-      state: 'active',
-      mimetype_inner: null,
-      last_modified: null,
-      position: 0,
-      revision_id: 'a810e134-79ba-4ab7-a7c4-f60e2fb21d40',
-      url_type: 'upload',
-      id: 'ac28179c-023e-4c17-af3c-00cbb81f5dcb',
-      resource_type: null,
-      size: null,
+const recentDataset = [
+  {
+    name: 'gdp',
+    title: 'Country, Regional and World GDP (Gross Domestic Product)',
+    notes:
+      'Country, regional and world GDP in current US Dollars ($). Regional means collections of countries e.g. Europe & Central Asia. Data is sourced from the World Bank and turned into a standard normalized CSV.',
+    resources: [
+      {
+        name: 'gdp',
+        id: 'gdp',
+        title: 'GDP data',
+        format: 'csv',
+        created: '2019-03-07T12:00:36.273495',
+        last_modified: '2020-05-07T12:00:36.273495',
+        datastore_active: false,
+        url: 'http://mock.filestore/gdp.csv',
+      },
+    ],
+    organization: {
+      title: 'World Bank',
+      name: 'world-bank',
+      description:
+        'The World Bank is an international financial institution that provides loans and grants to the governments of poorer countries for the purpose of pursuing capital projects.',
+      created: '2019-03-07T11:51:13.758844',
+      image_url:
+        'https://github.com/datahq/frontend/raw/master/public/img/avatars/world-bank.jpg',
     },
-  ],
-  num_resources: 1,
-  tags: [],
-  groups: [],
-  license_id: 'cc-by',
-  relationships_as_subject: [],
-  organization: null,
-  name: 'sdfasdasda',
-  isopen: true,
-  url: '',
-  notes: 'sdf',
-  owner_org: null,
-  extras: [],
-  license_url: 'http://www.opendefinition.org/licenses/cc-by',
-  title: 'sdf',
-  revision_id: 'a810e134-79ba-4ab7-a7c4-f60e2fb21d40',
-};
+    metadata_created: '2019-03-07T11:56:19.696257',
+    metadata_modified: '2019-03-07T12:03:58.817280',
+  },
+  {
+    name: 'population',
+    title: 'World population data',
+    notes:
+      'Population figures for countries, regions (e.g. Asia) and the world. Data comes originally from World Bank and has been converted into standard CSV.',
+    resources: [
+      {
+        name: 'population',
+        id: 'population',
+        title: 'Population data',
+        format: 'csv',
+        created: '2019-03-07T12:00:36.273495',
+        last_modified: '2020-05-07T12:00:36.273495',
+        datastore_active: true,
+        url: 'http://mock.filestore/population.csv',
+      },
+    ],
+    organization: {
+      title: 'World Bank',
+      name: 'world-bank',
+      description:
+        'The World Bank is an international financial institution that provides loans and grants to the governments of poorer countries for the purpose of pursuing capital projects.',
+      created: '2019-03-07T11:51:13.758844',
+      image_url:
+        'https://github.com/datahq/frontend/raw/master/public/img/avatars/world-bank.jpg',
+    },
+  },
+];
 
 module.exports.initMocks = function () {
   // Uncomment this line if you want to record API calls
@@ -173,14 +174,11 @@ module.exports.initMocks = function () {
     .reply(200, {
       success: true,
       result: {
-        success: true,
-        result: {
-          count: 1923,
-          sort: 'metadata_created desc',
-          facets: {},
-          results: [recentDataset],
-          search_facets: {},
-        },
+        count: 2,
+        sort: 'metadata_created desc',
+        facets: {},
+        results: recentDataset,
+        search_facets: {},
       },
     });
 
diff --git a/pages/index.tsx b/pages/index.tsx
index b4224ece..1897b09e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,10 +4,8 @@ import Nav from '../components/home/Nav';
 import Recent from '../components/home/Recent';
 import Input from '../components/search/Input';
 import config from '../config/';
-import utils from '../utils';
-import { util } from 'prettier';
 
-function Home() {
+function Home({ datapackages }) {
   return (
     <div className="container mx-auto">
       <Head>
@@ -32,7 +30,7 @@ function Home() {
           <img src="/images/banner.svg" className="w-4/5" />
         </div>
       </section>
-      <Recent />
+      <Recent datapackages={datapackages} />
     </div>
   );
 }
@@ -44,8 +42,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     )}/api/3/action/package_search?sort=metadata_created%20desc`
   );
   const ckanResult = (await res.json()).result;
-  const datapackages = ckanResult;
-  console.log(datapackages);
+  const datapackages = ckanResult.results;
   return {
     props: {
       datapackages,