diff --git a/package.json b/package.json
index 6a1a62f57..3d33084e9 100644
--- a/package.json
+++ b/package.json
@@ -76,8 +76,8 @@
     "@babel/runtime": "^7.2.0",
     "@commitlint/cli": "7.2.1",
     "@commitlint/config-conventional": "7.1.2",
-    "@material-ui/core": "3.1.0",
-    "@material-ui/icons": "3.0.1",
+    "@material-ui/core": "3.9.0",
+    "@material-ui/icons": "3.0.2",
     "@verdaccio/types": "4.1.4",
     "autosuggest-highlight": "3.1.1",
     "babel-core": "7.0.0-bridge.0",
diff --git a/src/webui/components/Versions/index.js b/src/webui/components/Versions/index.js
index e6517b43a..bea3ae6c4 100644
--- a/src/webui/components/Versions/index.js
+++ b/src/webui/components/Versions/index.js
@@ -3,37 +3,49 @@
  * @flow
  */
 
-import React from 'react';
-import List from '@material-ui/core/List/index';
-import ListItem from '@material-ui/core/ListItem/index';
-
 import { DetailContextConsumer } from '../../pages/version/index';
+import { formatDateDistance } from '../../utils/package';
+import { Heading, Spacer, ListItemText } from './styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import React from 'react';
 
-class Versions extends React.Component<any, any> {
+class Versions extends React.PureComponent {
   render() {
-    return (
-      // $FlowFixMe
-      <DetailContextConsumer>
-        {({ packageMeta }) => {
-          const { versions } = packageMeta;
-          if (versions) {
-            return this.renderVersions(versions);
-          }
-        }}
-      </DetailContextConsumer>
-    );
+    return <DetailContextConsumer>{({ packageMeta }) => this.renderContent(packageMeta['dist-tags'], packageMeta.versions)}</DetailContextConsumer>;
   }
 
+  renderPackageList = (packages: object, isVersion: boolean = false) => (
+    <List>
+      {Object.keys(packages)
+        .reverse()
+        .map(version => (
+          <ListItem key={version}>
+            <ListItemText>{version}</ListItemText>
+            <Spacer />
+            <ListItemText>{isVersion ? `${formatDateDistance('2017-10-26T09:03:15.044Z')} ago` : packages[version]}</ListItemText>
+          </ListItem>
+        ))}
+    </List>
+  );
+
   // $FlowFixMe
-  renderVersions(versions) {
-    return (
-      <List>
-        {Object.keys(versions).map(version => (
-          <ListItem key={version}>{versions[version].name}</ListItem>
-        ))}
-      </List>
-    );
-  }
+  renderContent = (distTags, versions) => (
+    <>
+      {distTags && (
+        <>
+          <Heading variant={'subheading'}>{'Current Tags'}</Heading>
+          {this.renderPackageList(distTags)}
+        </>
+      )}
+      {versions && (
+        <>
+          <Heading variant={'subheading'}>{'Version History'}</Heading>
+          {this.renderPackageList(versions, true)}
+        </>
+      )}
+    </>
+  );
 }
 
 export default Versions;
diff --git a/src/webui/components/Versions/styles.js b/src/webui/components/Versions/styles.js
new file mode 100644
index 000000000..8a2655ca9
--- /dev/null
+++ b/src/webui/components/Versions/styles.js
@@ -0,0 +1,23 @@
+import styled from 'react-emotion';
+import Typography from '@material-ui/core/Typography';
+import { default as MuiListItemText } from '@material-ui/core/ListItemText';
+
+export const Heading = styled(Typography)`
+  font-weight: 700;
+`;
+
+export const Spacer = styled('div')`
+    flex: 1 1 auto;
+    border-bottom: 1px dotted rgba(0, 0, 0, .2);
+    white-space: nowrap;
+    height: 0.5em;
+`;
+
+export const ListItemText = styled(MuiListItemText)`
+    && {
+      flex: none;
+      color: black;
+      opacity: .6;
+    }
+`;
+
diff --git a/yarn.lock b/yarn.lock
index 01cf38413..aa110d803 100644
Binary files a/yarn.lock and b/yarn.lock differ