diff --git a/frontend/src/js/component/wb-collection-fields.js b/frontend/src/js/component/wb-collection-fields.js
new file mode 100644
index 0000000..7f2d93a
--- /dev/null
+++ b/frontend/src/js/component/wb-collection-fields.js
@@ -0,0 +1,76 @@
+import { h, Component } from 'preact';
+import WBTable from 'wb-table';
+import makeArvadosRequest from 'make-arvados-request';
+import arvadosTypeName from 'arvados-type-name';
+import arvadosObjectName from 'arvados-object-name';
+import urlForObject from 'url-for-object';
+import wbFormatDate from 'wb-format-date';
+import WBNameAndUuid from 'wb-name-and-uuid';
+import WBAccordion from 'wb-accordion';
+
+class WBCollectionFields extends Component {
+  componentDidMount() {
+    this.prepareRows();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.props = nextProps;
+    this.prepareRows();
+  }
+
+  prepareRows() {
+    let { uuid, app } = this.props;
+    let { arvHost, arvToken } = app.state;
+
+    let item;
+    let prom = makeArvadosRequest(arvHost, arvToken,
+      '/arvados/v1/collections/' + uuid);
+    prom = prom.then(xhr => (item = xhr.response));
+
+    prom = prom.then(() => {
+      let rows = [
+        [ 'Name', item.name ],
+        [ 'Description', item.description || (<i>{ String(item.description) }</i>) ],
+        [ 'Properties', (
+          <WBAccordion names={ ['Properties'] } cardHeaderClass="card-header-sm">
+            <pre class="word-wrap">{ JSON.stringify(item.properties, null, 2) }</pre>
+          </WBAccordion>
+        ) ],
+        [ 'Portable Data Hash', item.portable_data_hash ],
+        [ 'Replication Desired', item.replication_desired ? item.replication_desired : (
+          <i>{ String(item.replication_desired) }</i>
+        ) ],
+        [ 'Replication Confirmed', item.replication_confirmed ? item.replication_confirmed : (
+          <i>{ String(item.replication_confirmed) }</i>
+        ) ],
+        [ 'Replication Confirmed At', wbFormatDate(item.replication_confirmed_at) ],
+        [ 'Trash At', wbFormatDate(item.trash_at) ],
+        [ 'Delete At', wbFormatDate(item.delete_at) ],
+        [ 'Is Trashed', String(item.is_trashed) ],
+        [ 'Current Version UUID', (
+          <WBNameAndUuid app={ app } uuid={ item.current_version_uuid } />
+        ) ],
+        [ 'Version', item.version ],
+        [ 'Preserve Version', String(item.preserve_version) ],
+        [ 'File Count', item.file_count ],
+        [ 'Total Size', filesize(item.file_size_total) ]
+      ];
+      this.setState({ 'rows': rows });
+    });
+  }
+
+  render({}, { rows }) {
+    return (
+      rows ? (
+        <WBTable columns={ [ "Name", "Value" ] }
+          headerClasses={ [ "col-sm-2", "col-sm-4" ] }
+          rows={ rows }
+          verticalHeader={ true } />
+      ) : (
+        <div>Loading...</div>
+      )
+    );
+  }
+}
+
+export default WBCollectionFields;
diff --git a/frontend/src/js/component/wb-common-fields.js b/frontend/src/js/component/wb-common-fields.js
index 10e2b70..65bf0ce 100644
--- a/frontend/src/js/component/wb-common-fields.js
+++ b/frontend/src/js/component/wb-common-fields.js
@@ -5,6 +5,7 @@ import arvadosTypeName from 'arvados-type-name';
 import arvadosObjectName from 'arvados-object-name';
 import urlForObject from 'url-for-object';
 import wbFormatDate from 'wb-format-date';
+import WBNameAndUuid from 'wb-name-and-uuid';
 
 class WBCommonFields extends Component {
   componentDidMount() {
@@ -31,44 +32,21 @@ class WBCommonFields extends Component {
 
     prom = prom.then(xhr => (item = xhr.response));
 
-    prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
-      '/arvados/v1/' + arvadosTypeName(item.owner_uuid) +
-      's/' + item.owner_uuid));
-
-    prom = prom.then(xhr => (owner = xhr.response));
-
-    prom = prom.then(() => makeArvadosRequest(arvHost, arvToken,
-      '/arvados/v1/users/' + item.modified_by_user_uuid));
-
-    prom = prom.then(xhr => (modifiedByUser = xhr.response));
-
     prom = prom.then(() => {
       let rows = [
         [ 'UUID', item.uuid ],
         [ 'Kind', item.kind ],
         [ 'Owner', (
-          <div>
-            <div>
-              <a href={ urlForObject(owner) }>{ arvadosObjectName(owner) }</a>
-            </div>
-            <div>
-              { item.owner_uuid }
-            </div>
-          </div>
+          <WBNameAndUuid app={ app } uuid={ item.owner_uuid } />
         ) ],
         [ 'Created at', wbFormatDate(item.created_at) ],
         [ 'Modified at', wbFormatDate(item.modified_at) ],
         [ 'Modified by User', (
-          <div>
-            <div>
-              <a href={ urlForObject(modifiedByUser) }>{ arvadosObjectName(modifiedByUser) }</a>
-            </div>
-            <div>
-              { item.modified_by_user_uuid }
-            </div>
-          </div>
+          <WBNameAndUuid app={ app } uuid={ item.modified_by_user_uuid } />
+        ) ],
+        [ 'Modified by Client', (
+          <WBNameAndUuid app={ app } uuid={ item.modified_by_client_uuid } />
         ) ],
-        [ 'Modified by Client', item.modified_by_client_uuid ],
         [ 'API Url', (
           <a href={ 'https://' + app.state.arvHost + '/arvados/v1' + item.href }>
             { 'https://' + app.state.arvHost + '/arvados/v1' + item.href }
diff --git a/frontend/src/js/misc/url-for-object.js b/frontend/src/js/misc/url-for-object.js
index b2258e7..eaba75c 100644
--- a/frontend/src/js/misc/url-for-object.js
+++ b/frontend/src/js/misc/url-for-object.js
@@ -11,7 +11,7 @@ function urlForObject(item) {
   else if (objectType === 'workflow')
     return ('https://wb.arkau.roche.com/workflows/' + item.uuid);
   else if (objectType === 'collection')
-    return ('https://wb.arkau.roche.com/collections/' + item.uuid);
+    return ('/collection/' + item.uuid);
   else if (objectType === 'container')
     return ('https://wb.arkau.roche.com/containers/' + item.uuid);
 }
diff --git a/frontend/src/js/misc/wb-format-date.js b/frontend/src/js/misc/wb-format-date.js
index 5ef86a9..467b571 100644
--- a/frontend/src/js/misc/wb-format-date.js
+++ b/frontend/src/js/misc/wb-format-date.js
@@ -1,4 +1,10 @@
+import { h } from 'preact';
+
 function wbFormatDate(dateStr) {
+  if (!dateStr)
+    return (
+      <i>{ String(dateStr) }</i>
+    );
   let date = new Date(dateStr);
   return date.toLocaleString();
 }
diff --git a/frontend/src/js/page/wb-app.js b/frontend/src/js/page/wb-app.js
index 47d3311..75fda85 100644
--- a/frontend/src/js/page/wb-app.js
+++ b/frontend/src/js/page/wb-app.js
@@ -4,6 +4,7 @@ import WBBrowse from 'wb-browse';
 import WBSignIn from 'wb-sign-in';
 import WBLandingPage from 'wb-landing-page';
 import WBProcessView from 'wb-process-view';
+import WBCollectionView from 'wb-collection-view';
 import arvadosTypeName from 'arvados-type-name';
 
 class WBApp extends Component {
@@ -62,6 +63,8 @@ class WBApp extends Component {
           app={ this } />
 
         <WBProcessView path="/process/:uuid" app={ this } />
+
+        <WBCollectionView path="/collection/:uuid" app={ this } />
       </Router>
     );
   }
diff --git a/frontend/src/js/page/wb-collection-view.js b/frontend/src/js/page/wb-collection-view.js
new file mode 100644
index 0000000..deedd14
--- /dev/null
+++ b/frontend/src/js/page/wb-collection-view.js
@@ -0,0 +1,29 @@
+import { h, Component } from 'preact';
+import WBNavbarCommon from 'wb-navbar-common';
+import WBArvadosCrumbs from 'wb-arvados-crumbs';
+import WBCommonFields from 'wb-common-fields';
+import WBCollectionFields from 'wb-collection-fields';
+
+class WBCollectionView extends Component {
+  render({ app, uuid }, {}) {
+    return (
+      <div>
+        <WBNavbarCommon app={ app } />
+
+        <WBArvadosCrumbs app={ app } uuid={ uuid } />
+
+        <div class="my-2">
+          This is the collection view for { uuid }
+        </div>
+
+        <h2>Common Fields</h2>
+        <WBCommonFields app={ app } uuid={ uuid } />
+
+        <h2>Collection Fields</h2>
+        <WBCollectionFields app={ app } uuid={ uuid } />
+      </div>
+    );
+  }
+}
+
+export default WBCollectionView;