diff --git a/dist/index.cjs.js b/dist/index.cjs.js
index ae300a11..314e3e5f 100644
--- a/dist/index.cjs.js
+++ b/dist/index.cjs.js
@@ -312,7 +312,9 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
     className: "text-1xl font-bold mb-2"
   }, "Size")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
     className: "text-1xl font-bold mb-2"
-  }, "Last Changed")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
+  }, "Created")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
+    className: "text-1xl font-bold mb-2"
+  }, "Updated")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
     className: "text-1xl font-bold mb-2"
   }, "Download"))), resources.map(function (resource, index) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -320,19 +322,21 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
       className: "grid grid-cols-7 gap-4"
     }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
       className: "text-1xl"
-    }, resource.name)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
+    }, resource.title || resource.name)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
       className: "text-1xl"
     }, resource.description || "No description")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
       className: "text-1xl"
-    }, resource.size && filesize__default['default'](resource.size, {
+    }, resource.size ? filesize__default['default'](resource.size, {
       bits: true
-    }))), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
+    }) : 0)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
       className: "text-1xl"
-    }, resource.updated)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
+    }, resource.created && timeago__namespace.format(resource.created))), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
+      className: "text-1xl"
+    }, resource.updated && timeago__namespace.format(resource.updated))), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
       className: "text-1xl"
     }, /*#__PURE__*/React__default['default'].createElement("a", {
       className: "text-yellow-600",
-      href: "/dataset/".concat(resource.path)
+      href: resource.path
     }, resource.format))));
   })));
 };
diff --git a/dist/index.esm.js b/dist/index.esm.js
index b20f6e9f..d87c02ad 100644
--- a/dist/index.esm.js
+++ b/dist/index.esm.js
@@ -278,7 +278,9 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
     className: "text-1xl font-bold mb-2"
   }, "Size")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
     className: "text-1xl font-bold mb-2"
-  }, "Last Changed")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+  }, "Created")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+    className: "text-1xl font-bold mb-2"
+  }, "Updated")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
     className: "text-1xl font-bold mb-2"
   }, "Download"))), resources.map(function (resource, index) {
     return /*#__PURE__*/React.createElement("div", {
@@ -286,19 +288,21 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
       className: "grid grid-cols-7 gap-4"
     }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
       className: "text-1xl"
-    }, resource.name)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+    }, resource.title || resource.name)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
       className: "text-1xl"
     }, resource.description || "No description")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
       className: "text-1xl"
-    }, resource.size && filesize(resource.size, {
+    }, resource.size ? filesize(resource.size, {
       bits: true
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+    }) : 0)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
       className: "text-1xl"
-    }, resource.updated)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+    }, resource.created && timeago.format(resource.created))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+      className: "text-1xl"
+    }, resource.updated && timeago.format(resource.updated))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
       className: "text-1xl"
     }, /*#__PURE__*/React.createElement("a", {
       className: "text-yellow-600",
-      href: "/dataset/".concat(resource.path)
+      href: resource.path
     }, resource.format))));
   })));
 };
diff --git a/src/components/dataset/ResourceInfo.js b/src/components/dataset/ResourceInfo.js
index 04eac149..782e5aa5 100644
--- a/src/components/dataset/ResourceInfo.js
+++ b/src/components/dataset/ResourceInfo.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import filesize from 'filesize'
+import * as timeago from 'timeago.js';
 import PropTypes from 'prop-types';
 
 /**
@@ -22,7 +23,10 @@ const ResourcesInfo = ({ resources }) => {
                         <h3 className="text-1xl font-bold mb-2">Size</h3>
                     </div>
                     <div>
-                        <h3 className="text-1xl font-bold mb-2">Last Changed</h3>
+                        <h3 className="text-1xl font-bold mb-2">Created</h3>
+                    </div>
+                    <div>
+                        <h3 className="text-1xl font-bold mb-2">Updated</h3>
                     </div>
                     <div>
                         <h3 className="text-1xl font-bold mb-2">Download</h3>
@@ -33,20 +37,24 @@ const ResourcesInfo = ({ resources }) => {
                     return (
                         <div key={`${index}_${resource.name}`} className="grid grid-cols-7 gap-4">
                             <div>
-                                <h3 className="text-1xl">{resource.name}</h3>
+                                <h3 className="text-1xl">{resource.title || resource.name}</h3>
                             </div>
                             <div>
                                 <h3 className="text-1xl">{resource.description || "No description"}</h3>
                             </div>
                             <div>
-                                <h3 className="text-1xl">{resource.size && filesize(resource.size, { bits: true })}</h3>
+                                <h3 className="text-1xl">{resource.size ? filesize(resource.size, { bits: true }) : 0}</h3>
                             </div>
                             <div>
-                                <h3 className="text-1xl">{resource.updated}</h3>
+                                <h3 className="text-1xl">{resource.created && timeago.format(resource.created)}</h3>
+                            </div>
+                            <div>
+                                <h3 className="text-1xl">{resource.updated && timeago.format(resource.updated)}</h3>
                             </div>
                             <div>
                                 <h3 className="text-1xl">
-                                    <a className="text-yellow-600" href={`/dataset/${resource.path}`}>
+                                    {/* We assume that resource.path is a URL but not relative path. */}
+                                    <a className="text-yellow-600" href={resource.path}>
                                         {resource.format}
                                     </a>
                                 </h3>