diff --git a/packages/compass-collections-ddl/config/webpack.dev.config.js b/packages/compass-collections-ddl/config/webpack.dev.config.js
index 0caba4ff8ee..d8b99f247fe 100644
--- a/packages/compass-collections-ddl/config/webpack.dev.config.js
+++ b/packages/compass-collections-ddl/config/webpack.dev.config.js
@@ -93,6 +93,9 @@ const config = {
         .on('close', () => process.exit(0))
         .on('error', spawnError => console.error(spawnError)); // eslint-disable-line no-console
     }
+  },
+  externals: {
+    'mongodb-client-encryption': 'commonjs2 mongodb-client-encryption'
   }
 };
 
diff --git a/packages/compass-collections-ddl/electron/renderer/index.js b/packages/compass-collections-ddl/electron/renderer/index.js
index 4d11445f5a3..286670a22a6 100644
--- a/packages/compass-collections-ddl/electron/renderer/index.js
+++ b/packages/compass-collections-ddl/electron/renderer/index.js
@@ -1,16 +1,18 @@
+/* eslint-disable no-console */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import app from 'hadron-app';
 import AppRegistry from 'hadron-app-registry';
 import { AppContainer } from 'react-hot-loader';
 import DatabasePlugin, { activate } from 'plugin';
-import { activate as daActivate } from '@mongodb-js/compass-deployment-awareness';
 import { NamespaceStore } from 'mongodb-reflux-store';
-import CollectionStore from './stores/collection-store';
 import CollectionModel from 'mongodb-collection-model';
 import CreateCollectionPlugin from 'components/create-collection-plugin';
 import DropCollectionPlugin from 'components/drop-collection-plugin';
 
+import CollectionStore from './mocks/collection-store';
+import TextWriteButton from './mocks/text-write-button';
+
 // Import global less file. Note: these styles WILL NOT be used in compass, as compass provides its own set
 // of global styles. If you are wishing to style a given component, you should be writing a less file per
 // component as per the CSS Modules ICSS spec. @see src/components/toggle-button for an example.
@@ -24,10 +26,10 @@ global.hadronApp.appRegistry = appRegistry;
 
 appRegistry.registerStore('App.NamespaceStore', NamespaceStore);
 appRegistry.registerStore('App.CollectionStore', CollectionStore);
+appRegistry.registerComponent('DeploymentAwareness.TextWriteButton', TextWriteButton);
 
 // Activate our plugin with the Hadron App Registry
 activate(appRegistry);
-daActivate(appRegistry);
 appRegistry.onActivated();
 
 // Since we are using HtmlWebpackPlugin WITHOUT a template,
@@ -64,10 +66,11 @@ import Connection from 'mongodb-connection-model';
 import DataService from 'mongodb-data-service';
 
 const connection = new Connection({
-  hostname: '127.0.0.1',
+  hostname: 'localhost',
   port: 27017,
   ns: 'admin'
 });
+
 const dataService = new DataService(connection);
 
 appRegistry.emit('data-service-initialized', dataService);
@@ -76,12 +79,18 @@ dataService.connect((error, ds) => {
   dataService.instance({}, (err, data) => {
     const dbs = data.databases;
     dbs.forEach((db) => {
-      db.collections = db.collections.map((collection) => {
-        return new CollectionModel(collection);
-      });
+      db.collections = db.collections
+        .filter(({ name }) => name && !name.startsWith('system.'))
+        .map((collection) => {
+          return new CollectionModel(collection);
+        });
     });
 
-    if (err) console.log(err);
+    if (err) {
+      console.log(err);
+      process.exit(1);
+    }
+
     appRegistry.emit('instance-refreshed', {
       instance: {
         databases: {
@@ -90,7 +99,18 @@ dataService.connect((error, ds) => {
         dataLake: { isDataLake: false }
       }
     });
-    appRegistry.emit('database-changed', 'echo');
+
+
+    dataService.client.client.db('admin').command({buildinfo: 1}, (buildInfoError, info) => {
+      if (buildInfoError) {
+        console.log(buildInfoError);
+        return;
+      }
+
+      appRegistry.emit('server-version-changed', info.version);
+    });
+
+    appRegistry.emit('select-database', 'test');
   });
 });
 
diff --git a/packages/compass-collections-ddl/electron/renderer/stores/collection-store.js b/packages/compass-collections-ddl/electron/renderer/mocks/collection-store.js
similarity index 100%
rename from packages/compass-collections-ddl/electron/renderer/stores/collection-store.js
rename to packages/compass-collections-ddl/electron/renderer/mocks/collection-store.js
diff --git a/packages/compass-collections-ddl/electron/renderer/mocks/text-write-button.js b/packages/compass-collections-ddl/electron/renderer/mocks/text-write-button.js
new file mode 100644
index 00000000000..d72222ced89
--- /dev/null
+++ b/packages/compass-collections-ddl/electron/renderer/mocks/text-write-button.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TextButton } from 'hadron-react-buttons';
+import { Tooltip } from 'hadron-react-components';
+
+/**
+ * The wrapper class.
+ */
+const WRAPPER = 'tooltip-button-wrapper';
+
+/**
+  * Button component that is aware of the write state of the application.
+  * This button contains only text, no icons, no animations.
+  */
+class TextWriteButton extends React.Component {
+   static displayName = 'TextWriteButton';
+
+   static propTypes = {
+     className: PropTypes.string.isRequired,
+     clickHandler: PropTypes.func.isRequired,
+     dataTestId: PropTypes.string,
+     isCollectionLevel: PropTypes.bool,
+     text: PropTypes.string.isRequired,
+     tooltipId: PropTypes.string.isRequired
+   }
+
+   /**
+    * Subscribe to the state changing stores.
+    */
+   componentDidMount() {
+   }
+
+   /**
+    * Unsubscribe from the stores.
+    */
+   componentWillUnmount() {
+     this.unsubscribeWriteState();
+   }
+
+   /**
+    * Determine if the application is in a writable state.
+    *
+    * @returns {Boolean} If the application is writable.
+    */
+   isWritable() {
+     const isWritable = true;
+     return isWritable;
+   }
+
+   /**
+    * Handle write state changes.
+    *
+    * @param {Object} state - The write state.
+    */
+   writeStateChanged(state) {
+     this.setState(state);
+   }
+
+   /**
+    * Get the tooltip text.
+    *
+    * @returns {String} The tooltip text.
+    */
+   tooltipText() {
+     if (!this.isWritable()) {
+       return 'Not writable';
+     }
+   }
+
+   /**
+    * Render the component.
+    *
+    * @returns {React.Component} The rendered component.
+    */
+   render() {
+     const tooltip = (this.isWritable()) ? null : (<Tooltip id={this.props.tooltipId} />);
+     return (
+       <div className={WRAPPER} data-tip={this.tooltipText()} data-for={this.props.tooltipId}>
+         <TextButton
+           className={this.props.className}
+           dataTestId={this.props.dataTestId}
+           disabled={!this.isWritable()}
+           clickHandler={this.props.clickHandler}
+           text={this.props.text} />
+         {tooltip}
+       </div>
+     );
+   }
+}
+
+export default TextWriteButton;
diff --git a/packages/compass-collections-ddl/electron/renderer/stores/deployment-state-store.js b/packages/compass-collections-ddl/electron/renderer/stores/deployment-state-store.js
deleted file mode 100644
index f723a4b5f8b..00000000000
--- a/packages/compass-collections-ddl/electron/renderer/stores/deployment-state-store.js
+++ /dev/null
@@ -1,36 +0,0 @@
-const Reflux = require('reflux');
-const StateMixin = require('reflux-state-mixin');
-
-/**
- * The default description.
- */
-const DEFAULT_DESCRIPTION = 'Topology type not yet discovered.';
-
-/**
- * Deployment State store.
- */
-const DeploymentStateStore = Reflux.createStore({
-  /**
-   * adds a state to the store, similar to React.Component's state
-   * @see https://github.com/yonatanmn/Super-Simple-Flux#reflux-state-mixin
-   *
-   * If you call `this.setState({...})` this will cause the store to trigger
-   * and push down its state as props to connected components.
-   */
-  mixins: [StateMixin.store],
-
-  /**
-   * Initialize the Deployment State store state. The returned object must
-   * contain all keys that you might want to modify with this.setState().
-   *
-   * @return {Object} initial store state.
-   */
-  getInitialState() {
-    return {
-      isWritable: true,
-      description: DEFAULT_DESCRIPTION
-    };
-  }
-});
-
-module.exports = DeploymentStateStore;
diff --git a/packages/compass-collections-ddl/package-lock.json b/packages/compass-collections-ddl/package-lock.json
index d1c29af536f..42855430b03 100644
--- a/packages/compass-collections-ddl/package-lock.json
+++ b/packages/compass-collections-ddl/package-lock.json
@@ -8,7 +8,6 @@
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
       "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
-      "dev": true,
       "requires": {
         "@babel/highlight": "^7.8.3"
       }
@@ -99,6 +98,35 @@
         "@babel/types": "^7.8.3"
       }
     },
+    "@babel/helper-module-imports": {
+      "version": "7.13.12",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz",
+      "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==",
+      "requires": {
+        "@babel/types": "^7.13.12"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+          "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
+        },
+        "@babel/types": {
+          "version": "7.14.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.2.tgz",
+          "integrity": "sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==",
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "to-fast-properties": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+        }
+      }
+    },
     "@babel/helper-split-export-declaration": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz",
@@ -129,7 +157,6 @@
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.8.3.tgz",
       "integrity": "sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==",
-      "dev": true,
       "requires": {
         "chalk": "^2.0.0",
         "esutils": "^2.0.2",
@@ -146,7 +173,6 @@
       "version": "7.8.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
       "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.2"
       }
@@ -216,6 +242,71 @@
         }
       }
     },
+    "@emotion/cache": {
+      "version": "10.0.29",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
+      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
+      "requires": {
+        "@emotion/sheet": "0.9.4",
+        "@emotion/stylis": "0.8.5",
+        "@emotion/utils": "0.11.3",
+        "@emotion/weak-memoize": "0.2.5"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/serialize": {
+      "version": "0.11.16",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+      "requires": {
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/unitless": "0.7.5",
+        "@emotion/utils": "0.11.3",
+        "csstype": "^2.5.7"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "2.6.17",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
+          "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
+        }
+      }
+    },
+    "@emotion/sheet": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
+      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@eslint/eslintrc": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
@@ -342,6 +433,216 @@
       "integrity": "sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==",
       "dev": true
     },
+    "@leafygreen-ui/badge": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/badge/-/badge-4.0.3.tgz",
+      "integrity": "sha512-CAEavAfcM8G6TaFW6LLQ+YGXa8ODxxjtu06uCxg61MjSZJQ7FvGVlvVfd2T6Mz9A6Jm6ZDmW8JpqHrjau/DDkQ==",
+      "requires": {
+        "@leafygreen-ui/lib": "^7.0.0",
+        "@leafygreen-ui/palette": "^3.2.1"
+      }
+    },
+    "@leafygreen-ui/box": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/box/-/box-3.0.4.tgz",
+      "integrity": "sha512-/qMa1zPvsUBwtLfmpHy5WLAL5gfYs6Kh4ynnHV6Pd4lmcHQFAI44C3s/8/QSmsO1GZXcAWQuW31dvZCqoexyqg==",
+      "requires": {
+        "@leafygreen-ui/lib": "^7.0.0",
+        "lodash": "^4.17.21"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        }
+      }
+    },
+    "@leafygreen-ui/emotion": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/emotion/-/emotion-3.0.1.tgz",
+      "integrity": "sha512-h0VaYrbwC7jNpGKXq81qu4QveT9lyPQFDRrcePIL+UoDA8nLRzs+5T2oxyJkHqulmgHrRTmLEXv2pIuJinbKHA==",
+      "requires": {
+        "create-emotion": "^10.0.7",
+        "create-emotion-server": "10.0.27",
+        "emotion": "^10.0.7"
+      }
+    },
+    "@leafygreen-ui/hooks": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/hooks/-/hooks-6.0.1.tgz",
+      "integrity": "sha512-u0Egx2IWGK4LNMsEbB49atD7MMv20Z6TuY0iGwtjwDMfSbaN5yLG4hvok7qG7kyHNUFbLlN2Yz15rk7/mPvcHQ==",
+      "requires": {
+        "lodash": "^4.17.21"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        }
+      }
+    },
+    "@leafygreen-ui/icon": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/icon/-/icon-11.0.0.tgz",
+      "integrity": "sha512-FeMK9pIpIsK++wqWLhVCuAk0mDSJLlmey8C01L/nqVopR3H9a3zcGGFIX182Mbah6BA9+DLLQW+X2sj3qmQdIg==",
+      "requires": {
+        "@leafygreen-ui/lib": "^7.0.0"
+      }
+    },
+    "@leafygreen-ui/interaction-ring": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/interaction-ring/-/interaction-ring-1.0.3.tgz",
+      "integrity": "sha512-D1/Jtt/WAj+sHzc0e51BdhtqJ0lCfx1759UMKhK7MOADS8/DG68ybRlaAO4wbaZ9dvumJr5eDS9Rt/Zghkuaaw==",
+      "requires": {
+        "@leafygreen-ui/emotion": "^3.0.1",
+        "@leafygreen-ui/leafygreen-provider": "^2.0.3",
+        "@leafygreen-ui/lib": "^7.0.0",
+        "@leafygreen-ui/palette": "^3.2.1"
+      }
+    },
+    "@leafygreen-ui/leafygreen-provider": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/leafygreen-provider/-/leafygreen-provider-2.1.0.tgz",
+      "integrity": "sha512-GEEH8IFJvEc9zXTjVouFjbEZPdiF1ZNb0hI0P5bE1f8pRoIStbvuHEAZNoGdCRU27hgn7DbREqoyp9J05ewUEw==",
+      "requires": {
+        "@leafygreen-ui/hooks": "^6.0.0",
+        "@leafygreen-ui/lib": "^7.0.0"
+      }
+    },
+    "@leafygreen-ui/lib": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-7.0.0.tgz",
+      "integrity": "sha512-ZIqfa+XLD77KEDSPZPtuLxk2VuktFfLFghUViZEBissQ790gq2V9BXAzRgU5MCtaP6HlJ+kQ2BA5iv6iD5KgIQ==",
+      "requires": {
+        "@leafygreen-ui/emotion": "^3.0.1",
+        "facepaint": "^1.2.1",
+        "polished": "^2.3.0",
+        "prop-types": "^15.0.0"
+      }
+    },
+    "@leafygreen-ui/palette": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/palette/-/palette-3.2.1.tgz",
+      "integrity": "sha512-E7gAN6eEWqsNIQrySABesXckJDJMLnzr3Z0BDQOBEmUdnYzXefvBY1e/zhHE6jb4rxwiOWnzwi1Zb2me50nOmQ=="
+    },
+    "@leafygreen-ui/popover": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/popover/-/popover-7.2.0.tgz",
+      "integrity": "sha512-FHWr8f04B8thhVwJ6yqD0KKsWqwmupDN+hCD0AExYaVLxeANhrjnPtkkiAc174HG3zencrlsR4kZexCxDCKXfQ==",
+      "requires": {
+        "@leafygreen-ui/hooks": "^6.0.1",
+        "@leafygreen-ui/leafygreen-provider": "^2.1.0",
+        "@leafygreen-ui/lib": "^7.0.0",
+        "@leafygreen-ui/portal": "^3.1.2",
+        "lodash": "^4.17.21",
+        "react-transition-group": "^4.4.1"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+          "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+          "requires": {
+            "@babel/runtime": "^7.8.7",
+            "csstype": "^3.0.2"
+          },
+          "dependencies": {
+            "@babel/runtime": {
+              "version": "7.14.0",
+              "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
+              "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
+              "requires": {
+                "regenerator-runtime": "^0.13.4"
+              }
+            }
+          }
+        },
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        },
+        "react-transition-group": {
+          "version": "4.4.1",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+          "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "dom-helpers": "^5.0.1",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+        }
+      }
+    },
+    "@leafygreen-ui/portal": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/portal/-/portal-3.1.2.tgz",
+      "integrity": "sha512-AcpDz3iKcZ1+IdClyAO0f5z0m+1PBCQyvkC5kckqbhgZNi4QX0v6chFp7l7EvaW1hXyyPSDP1SQcBwlvHMqKhQ==",
+      "requires": {
+        "@leafygreen-ui/lib": "^7.0.0"
+      }
+    },
+    "@leafygreen-ui/text-input": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/text-input/-/text-input-6.0.2.tgz",
+      "integrity": "sha512-bnhhU3IRNQrrUZf2ri4TcIh1YW6VQpfumfxQVhqmTkQO7Ju1mG6KrcyHaakOAKyAHFunly/XBTaS/lfSGT+LcQ==",
+      "requires": {
+        "@leafygreen-ui/icon": "^11.0.0",
+        "@leafygreen-ui/interaction-ring": "^1.0.3",
+        "@leafygreen-ui/lib": "^7.0.0",
+        "@leafygreen-ui/palette": "^3.2.1",
+        "@leafygreen-ui/typography": "^8.0.1"
+      }
+    },
+    "@leafygreen-ui/tokens": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/tokens/-/tokens-0.5.1.tgz",
+      "integrity": "sha512-ggfkuG7TEGoRjve1qGpWlvLpIRqcMjdpjwd9KqwOL/JFdnyIuxvVnCwC4tnUqncszWCOBtsdeqJ6ZkuU3BIMtA==",
+      "requires": {
+        "@leafygreen-ui/lib": "^7.0.0"
+      }
+    },
+    "@leafygreen-ui/tooltip": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/tooltip/-/tooltip-6.2.1.tgz",
+      "integrity": "sha512-VCH1XwFE4ckkCIeDva63EWdI41H6rNd0XEEZ8HMSwvq3rc71ll9JaeNHGTcUftCaPHKpDXKHNjnBdUDwPVUZWg==",
+      "requires": {
+        "@leafygreen-ui/hooks": "^6.0.1",
+        "@leafygreen-ui/icon": "^11.0.0",
+        "@leafygreen-ui/lib": "^7.0.0",
+        "@leafygreen-ui/palette": "^3.2.1",
+        "@leafygreen-ui/popover": "^7.2.0",
+        "@leafygreen-ui/tokens": "^0.5.1",
+        "lodash": "^4.17.21"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        }
+      }
+    },
+    "@leafygreen-ui/typography": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/typography/-/typography-8.0.1.tgz",
+      "integrity": "sha512-H2ti9wrYumWeuNg0HBKc+ROec5J63oRxf9MFCqDBFv/zonz/Yg7xqYLq5lI4GDBLA9LjhrtoA5MX7ktX/1JTOA==",
+      "requires": {
+        "@leafygreen-ui/box": "^3.0.4",
+        "@leafygreen-ui/icon": "^11.0.0",
+        "@leafygreen-ui/lib": "^7.0.0",
+        "@leafygreen-ui/palette": "^3.2.1",
+        "@leafygreen-ui/tokens": "^0.5.1"
+      }
+    },
     "@mongodb-js/compass-deployment-awareness": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/@mongodb-js/compass-deployment-awareness/-/compass-deployment-awareness-10.1.0.tgz",
@@ -457,8 +758,7 @@
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
     "@types/prop-types": {
       "version": "15.7.3",
@@ -2014,6 +2314,89 @@
         "babel-runtime": "^6.22.0"
       }
     },
+    "babel-plugin-emotion": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.2.2.tgz",
+      "integrity": "sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/serialize": "^0.11.16",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      },
+      "dependencies": {
+        "find-root": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+          "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
+    "babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      },
+      "dependencies": {
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+          "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-even-better-errors": "^2.3.0",
+            "lines-and-columns": "^1.1.6"
+          }
+        },
+        "path-type": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+        }
+      }
+    },
     "babel-plugin-minify-builtins": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-minify-builtins/-/babel-plugin-minify-builtins-0.2.0.tgz",
@@ -2144,8 +2527,7 @@
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
-      "dev": true
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
     },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
@@ -3372,8 +3754,7 @@
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
     },
     "camel-case": {
       "version": "3.0.0",
@@ -3478,7 +3859,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -3489,7 +3869,6 @@
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-          "dev": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
@@ -3498,7 +3877,6 @@
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-          "dev": true,
           "requires": {
             "color-name": "1.1.3"
           }
@@ -3506,8 +3884,7 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-          "dev": true
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
         }
       }
     },
@@ -4138,7 +4515,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
       "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.1"
       },
@@ -4146,8 +4522,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
         }
       }
     },
@@ -4203,8 +4578,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
     "cosmiconfig": {
       "version": "5.2.1",
@@ -4256,6 +4630,28 @@
         "elliptic": "^6.0.0"
       }
     },
+    "create-emotion": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-10.0.27.tgz",
+      "integrity": "sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==",
+      "requires": {
+        "@emotion/cache": "^10.0.27",
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/sheet": "0.9.4",
+        "@emotion/utils": "0.11.3"
+      }
+    },
+    "create-emotion-server": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/create-emotion-server/-/create-emotion-server-10.0.27.tgz",
+      "integrity": "sha512-1EbZgdjiho9ue1BSTpAez8SIdfbTXomtz0bg+LPOEvf/5OV7xqCGJaoSCDCB+y7kZ73hwoEhLsoPmqKSGIQMXg==",
+      "requires": {
+        "@emotion/utils": "0.11.3",
+        "html-tokenize": "^2.0.0",
+        "multipipe": "^1.0.2",
+        "through": "^2.3.8"
+      }
+    },
     "create-hash": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
@@ -4671,8 +5067,7 @@
     "csstype": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==",
-      "dev": true
+      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -5629,6 +6024,48 @@
       "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
       "dev": true
     },
+    "duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=",
+      "requires": {
+        "readable-stream": "^2.0.2"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+        },
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
     "duplexify": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
@@ -5962,6 +6399,15 @@
       "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
       "dev": true
     },
+    "emotion": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/emotion/-/emotion-10.0.27.tgz",
+      "integrity": "sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==",
+      "requires": {
+        "babel-plugin-emotion": "^10.0.27",
+        "create-emotion": "^10.0.27"
+      }
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -6289,7 +6735,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "requires": {
         "is-arrayish": "^0.2.1"
       }
@@ -6345,8 +6790,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
       "version": "1.14.1",
@@ -7177,8 +7621,7 @@
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
     },
     "etag": {
       "version": "1.8.1",
@@ -7508,6 +7951,11 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
       "dev": true
     },
+    "facepaint": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/facepaint/-/facepaint-1.2.1.tgz",
+      "integrity": "sha512-oNvBekbhsm/0PNSOWca5raHNAi6dG960Bx6LJgxDPNF59WpuspgQ17bN5MKwOr7JcFdQYc7StW3VZ28DBZLavQ=="
+    },
     "fast-deep-equal": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
@@ -9371,8 +9819,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-symbols": {
       "version": "1.0.1",
@@ -9703,6 +10150,52 @@
         }
       }
     },
+    "html-tokenize": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-tokenize/-/html-tokenize-2.0.1.tgz",
+      "integrity": "sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==",
+      "requires": {
+        "buffer-from": "~0.1.1",
+        "inherits": "~2.0.1",
+        "minimist": "~1.2.5",
+        "readable-stream": "~1.0.27-1",
+        "through2": "~0.4.1"
+      },
+      "dependencies": {
+        "buffer-from": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz",
+          "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg=="
+        },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+        },
+        "object-keys": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz",
+          "integrity": "sha1-KKaq50KN0sOpLz2V8hM13SBOAzY="
+        },
+        "through2": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-0.4.2.tgz",
+          "integrity": "sha1-2/WGYDEVHsg1K7bE22SiKSqEC5s=",
+          "requires": {
+            "readable-stream": "~1.0.17",
+            "xtend": "~2.1.1"
+          }
+        },
+        "xtend": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz",
+          "integrity": "sha1-bv7MKk2tjmlixJAbM3znuoe10os=",
+          "requires": {
+            "object-keys": "~0.4.0"
+          }
+        }
+      }
+    },
     "html-webpack-plugin": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
@@ -10405,8 +10898,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
       "version": "1.3.5",
@@ -10588,8 +11080,7 @@
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-      "dev": true
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
     },
     "is-binary-path": {
       "version": "1.0.1",
@@ -10895,8 +11386,7 @@
     "isarray": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
-      "dev": true
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
     },
     "isbinaryfile": {
       "version": "3.0.3",
@@ -11146,8 +11636,7 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
       "version": "3.7.0",
@@ -11245,8 +11734,7 @@
     "json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "json-schema": {
       "version": "0.2.3",
@@ -11928,8 +12416,7 @@
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
-      "dev": true
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
     },
     "load-json-file": {
       "version": "1.1.0",
@@ -13071,7 +13558,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -15334,6 +15820,15 @@
         }
       }
     },
+    "multipipe": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-1.0.2.tgz",
+      "integrity": "sha1-zBPv2DPJzamfIk+GhGG44aP9k50=",
+      "requires": {
+        "duplexer2": "^0.1.2",
+        "object-assign": "^4.1.0"
+      }
+    },
     "mute-stream": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
@@ -15951,8 +16446,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-component": {
       "version": "0.0.3",
@@ -16425,7 +16919,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "requires": {
         "callsites": "^3.0.0"
       }
@@ -16556,8 +17049,7 @@
     "path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
-      "dev": true
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
     },
     "path-to-regexp": {
       "version": "1.8.0",
@@ -16720,6 +17212,14 @@
         "semver-compare": "^1.0.0"
       }
     },
+    "polished": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-2.3.3.tgz",
+      "integrity": "sha512-59V4fDbdxtH4I1m9TWxFsoGJbC8nnOpUYo5uFmvMfKp9Qh+6suo4VMUle1TGIIUZIGxfkW+Rs485zPk0wcwR2Q==",
+      "requires": {
+        "@babel/runtime": "^7.2.0"
+      }
+    },
     "portfinder": {
       "version": "1.0.25",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
@@ -18972,8 +19472,7 @@
     "process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "dev": true
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
     "process-on-spawn": {
       "version": "1.0.0",
@@ -19059,7 +19558,6 @@
       "version": "15.7.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
       "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -19458,8 +19956,7 @@
     "react-is": {
       "version": "16.12.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
-      "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==",
-      "dev": true
+      "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
     },
     "react-lifecycles-compat": {
       "version": "3.0.4",
@@ -19595,7 +20092,6 @@
       "version": "1.0.34",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
       "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
-      "dev": true,
       "requires": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.1",
@@ -20053,8 +20549,7 @@
     "regenerator-runtime": {
       "version": "0.13.3",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
-      "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==",
-      "dev": true
+      "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
     },
     "regenerator-transform": {
       "version": "0.10.1",
@@ -20292,7 +20787,6 @@
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.15.1.tgz",
       "integrity": "sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==",
-      "dev": true,
       "requires": {
         "path-parse": "^1.0.6"
       }
@@ -21887,8 +22381,7 @@
     "string_decoder": {
       "version": "0.10.31",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
-      "dev": true
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
     },
     "stringstream": {
       "version": "0.0.6",
@@ -21994,7 +22487,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -22316,8 +22808,7 @@
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
-      "dev": true
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
     },
     "through2": {
       "version": "0.6.5",
@@ -22799,8 +23290,7 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "util.promisify": {
       "version": "1.0.1",
@@ -24916,8 +25406,7 @@
     "yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
     },
     "yargs": {
       "version": "15.1.0",
diff --git a/packages/compass-collections-ddl/package.json b/packages/compass-collections-ddl/package.json
index a3f0b223d82..64d63bd83e4 100644
--- a/packages/compass-collections-ddl/package.json
+++ b/packages/compass-collections-ddl/package.json
@@ -128,7 +128,7 @@
     "reflux-state-mixin": "^0.8.0",
     "resolve": "^1.15.1",
     "rimraf": "^3.0.2",
-    "semver": "^5.4.1",
+    "semver": "^5.7.1",
     "shebang-loader": "0.0.1",
     "sinon": "^9.0.0",
     "sinon-chai": "^3.5.0",
@@ -144,6 +144,10 @@
     "xvfb-maybe": "^0.2.1"
   },
   "dependencies": {
+    "@leafygreen-ui/badge": "^4.0.3",
+    "@leafygreen-ui/icon": "^11.0.0",
+    "@leafygreen-ui/text-input": "^6.0.2",
+    "@leafygreen-ui/tooltip": "^6.2.1",
     "async": "^3.1.1",
     "lodash.assign": "^4.2.0",
     "lodash.find": "^4.6.0",
diff --git a/packages/compass-collections-ddl/src/components/collation/collation.jsx b/packages/compass-collections-ddl/src/components/collation/collation.jsx
index 8c44f5c15ef..75430d77c69 100644
--- a/packages/compass-collections-ddl/src/components/collation/collation.jsx
+++ b/packages/compass-collections-ddl/src/components/collation/collation.jsx
@@ -51,11 +51,11 @@ class Collation extends PureComponent {
     const options = COLLATION_OPTIONS.map((element) => {
       return (
         <div key={element.field} className={classnames(styles['collation-field'])}>
-          <p className={classnames(styles['collation-label'])}>{element.label}</p>
+          <p className={classnames(styles['collation-label'])}>{element.field}</p>
           <Select
             value={this.props.collation[element.field]}
             name={element.field}
-            placeholder={`Select a ${element.field}`}
+            placeholder={'Select a value'}
             options={this.getDropdownFieldsSelect(element.values)}
             onChange={this.onChangeCollationOption.bind(this, element.field)}
             className={classnames(styles['collation-select'])}
diff --git a/packages/compass-collections-ddl/src/components/collections-table/collection-properties.jsx b/packages/compass-collections-ddl/src/components/collections-table/collection-properties.jsx
new file mode 100644
index 00000000000..953ea18184d
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/collections-table/collection-properties.jsx
@@ -0,0 +1,92 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import styles from './collection-properties.less';
+
+import {
+  PROPERTIES_CAPPED,
+  PROPERTIES_COLLATION,
+  PROPERTIES_READ_ONLY,
+  PROPERTIES_TIME_SERIES,
+  PROPERTIES_VIEW
+} from '../../modules/collections';
+
+import PropertyBadge from './property-badge';
+import Icon from '@leafygreen-ui/icon';
+
+export default class CollectionProperties extends PureComponent {
+  static propTypes = {
+    collection: PropTypes.shape({
+      Properties: PropTypes.array.isRequired,
+      _id: PropTypes.string.isRequired
+    }).isRequired
+  }
+
+  renderProperty = (property) => {
+    const { name, options } = property || {};
+
+    if (name === PROPERTIES_COLLATION) {
+      return (<PropertyBadge
+        label="Collation"
+        variant="darkgray"
+        tooltip={this.renderOptions(options)}
+      />);
+    }
+
+    if (name === PROPERTIES_VIEW) {
+      return (<PropertyBadge
+        label="View"
+        icon={<Icon glyph="Visibility" />}
+        variant="darkgray"
+        tooltip={this.renderOptions(options)} />);
+    }
+
+    if (name === PROPERTIES_CAPPED) {
+      return (<PropertyBadge
+        label="Capped"
+        variant="darkgray"
+        tooltip={this.renderOptions(options)} />);
+    }
+
+    if (name === PROPERTIES_TIME_SERIES) {
+      return (<PropertyBadge
+        label="Time-series"
+        variant="darkgray"
+        tooltip={this.renderOptions(options)} />);
+    }
+
+    if (name === PROPERTIES_READ_ONLY) {
+      return (<PropertyBadge
+        label="Read-only"
+        variant="lightgray"
+        tooltip={this.renderOptions(options)} />);
+    }
+  }
+
+  renderOptions(options) {
+    const entries = Object.entries(options || {});
+
+    if (!entries.length) {
+      return;
+    }
+
+    return (<div>{entries.map(
+      ([key, value]) => {
+        return <div key={key}><b>{key}</b>: {`${value}`}</div>;
+      }
+    )}</div>);
+  }
+
+  render() {
+    const properties = (this.props.collection.Properties || []);
+    const propertyElements = properties.map((property, i) => {
+      return (
+        <div key={`${this.props.collection._id}-prop-${i}`}
+          className={styles['collection-properties-property']}>
+          {this.renderProperty(property)}
+        </div>
+      );
+    });
+
+    return <div className={styles['collection-properties']}>{propertyElements}</div>;
+  }
+}
diff --git a/packages/compass-collections-ddl/src/components/collections-table/collection-properties.less b/packages/compass-collections-ddl/src/components/collections-table/collection-properties.less
new file mode 100644
index 00000000000..da9f984e330
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/collections-table/collection-properties.less
@@ -0,0 +1,11 @@
+.collection-properties {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  flex-wrap: wrap;
+
+  &-property {
+    display: inline-flex;
+    margin: 3px;
+  }
+}
diff --git a/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx b/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
index da8a5a7c183..3036965b542 100644
--- a/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
+++ b/packages/compass-collections-ddl/src/components/collections-table/collections-table.jsx
@@ -1,15 +1,13 @@
 import React, { PureComponent } from 'react';
-import ReactTooltip from 'react-tooltip';
 import PropTypes from 'prop-types';
 import numeral from 'numeral';
 import assign from 'lodash.assign';
-import isEmpty from 'lodash.isempty';
 import isNaN from 'lodash.isnan';
-import classnames from 'classnames';
-import { SortableTable, InfoSprinkle } from 'hadron-react-components';
+import { SortableTable } from 'hadron-react-components';
 import dropCollectionStore from 'stores/drop-collection';
-
 import styles from './collections-table.less';
+import CollectionProperties from './collection-properties';
+
 
 /**
  * The name constant.
@@ -50,36 +48,6 @@ const PROPS = 'Properties';
  * Dash constant.
  */
 const DASH = '-';
-
-/**
- * Tooltip ID constant.
- */
-const TOOLTIP_ID = 'collation-property';
-
-/**
- * The help URL for collation.
- */
-const HELP_URL_COLLATION = 'https://docs.mongodb.com/master/reference/collation/';
-
-/**
- * Collation option mappings.
- */
-const COLLATION_OPTIONS = {
-  locale: 'Locale',
-  caseLevel: 'Case Level',
-  caseFirst: 'Case First',
-  strength: 'Strength',
-  numericOrdering: 'Numeric Ordering',
-  alternate: 'Alternate',
-  maxVariable: 'MaxVariable',
-  normalization: 'Normalization',
-  backwards: 'Backwards',
-  version: 'Version'
-};
-
-/**
- * The collections table component.
- */
 class CollectionsTable extends PureComponent {
   static displayName = 'CollectionsTableComponent';
 
@@ -126,24 +94,6 @@ class CollectionsTable extends PureComponent {
     this.props.showCollection(name);
   }
 
-  /**
-   * Render the collation properties.
-   *
-   * @param {Object} properties - The properties.
-   *
-   * @returns {Object} The mapped properties.
-   */
-  renderCollationOptions(properties) {
-    let collation = '';
-    Object.keys(properties).forEach((key) => {
-      if (collation !== '') {
-        collation = `${collation}<br />`;
-      }
-      collation = `${collation}${COLLATION_OPTIONS[key]}: ${properties[key]}`;
-    });
-    return collation;
-  }
-
   /**
    * Render the collection link.
    *
@@ -155,47 +105,22 @@ class CollectionsTable extends PureComponent {
     const collName = coll[NAME];
     let viewInfo = null;
 
-    if (coll.view_on) {
+    if (coll.type === 'view' && coll.view_on) {
       viewInfo = <span className={styles['collections-table-view-on']}>(view on: {coll.view_on})</span>;
     }
 
     return (
-      <span>
+      <div>
         <a
-          className={classnames(styles['collections-table-link'])}
+          className={styles['collections-table-link']}
           onClick={this.onNameClicked.bind(this, collName)}>
           {collName}
         </a>
         {viewInfo}
-      </span>
+      </div>
     );
   }
 
-  /**
-   * Render the collation properties.
-   *
-   * @param {Object} properties - The properties.
-   *
-   * @returns {Component} The component.
-   */
-  renderProperty(properties) {
-    if (!isEmpty(properties)) {
-      const tooltipOptions = {
-        'data-tip': this.renderCollationOptions(properties),
-        'data-for': TOOLTIP_ID,
-        'data-effect': 'solid',
-        'data-border': true
-      };
-      return (
-        <div {...tooltipOptions} className={styles['collections-table-property']}>
-          <span className={styles['collections-table-tooltip']}>Collation</span>
-          <ReactTooltip id={TOOLTIP_ID} html />
-          <InfoSprinkle helpLink={HELP_URL_COLLATION} onClickHandler={this.props.openLink} />
-        </div>
-      );
-    }
-  }
-
   /**
    * Render Collections Table component.
    *
@@ -214,7 +139,7 @@ class CollectionsTable extends PureComponent {
         [NUM_INDEX]: isNaN(coll[NUM_INDEX]) ? DASH : coll[NUM_INDEX],
         [TOT_INDEX_SIZE]: isNaN(coll[TOT_INDEX_SIZE]) ?
           DASH : numeral(coll[TOT_INDEX_SIZE]).format('0.0 b'),
-        [PROPS]: this.renderProperty(coll.Properties)
+        [PROPS]: <CollectionProperties collection={coll} />
       });
     });
 
diff --git a/packages/compass-collections-ddl/src/components/collections-table/collections-table.less b/packages/compass-collections-ddl/src/components/collections-table/collections-table.less
index e9c40c443fa..0a1e0af12f5 100644
--- a/packages/compass-collections-ddl/src/components/collections-table/collections-table.less
+++ b/packages/compass-collections-ddl/src/components/collections-table/collections-table.less
@@ -6,23 +6,6 @@
     cursor: pointer;
   }
 
-  &-property {
-    cursor: default;
-    color: #545383;
-    background-color: #E6E4ED;
-    font-size: 11px;
-    font-weight: bold;
-    border-radius: 20px;
-    padding: 3px 10px;
-    min-width: 30px;
-    margin-right: 15px;
-    white-space: nowrap;
-  }
-
-  &-tooltip {
-    text-transform: uppercase;
-  }
-
   &-view-on {
     display: block;
   }
diff --git a/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx b/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
new file mode 100644
index 00000000000..7029006a168
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/collections-table/property-badge.jsx
@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Badge from '@leafygreen-ui/badge';
+import Tooltip from '@leafygreen-ui/tooltip';
+import styles from './property-badge.less';
+
+export default class PropertyBadge extends PureComponent {
+  static displayName = 'PropertyBadge';
+
+  static propTypes = {
+    label: PropTypes.string.isRequired,
+    variant: PropTypes.string.isRequired,
+    tooltip: PropTypes.element,
+    icon: PropTypes.element
+  }
+
+  renderBadge = () => {
+    const space = this.props.icon ? (<span>&nbsp;</span>) : '';
+    return (
+      <div className={styles['property-badge']}>
+        <Badge variant={this.props.variant}>{this.props.icon}{space}{this.props.label}</Badge>
+      </div>
+    );
+  }
+
+  render() {
+    if (!this.props.tooltip) {
+      return this.renderBadge();
+    }
+
+    return (<Tooltip
+      align="top"
+      justify="start"
+      trigger={this.renderBadge()}
+      triggerEvent="hover"
+      darkMode
+    >{this.props.tooltip}</Tooltip>);
+  }
+}
diff --git a/packages/compass-collections-ddl/src/components/collections-table/property-badge.less b/packages/compass-collections-ddl/src/components/collections-table/property-badge.less
new file mode 100644
index 00000000000..5a43b175284
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/collections-table/property-badge.less
@@ -0,0 +1,4 @@
+.property-badge {
+  white-space: nowrap;
+  display: inline-flex;
+}
diff --git a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
index 0d309fa1465..bad15efe14f 100644
--- a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
+++ b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.jsx
@@ -1,11 +1,13 @@
-import classnames from 'classnames';
 import Collation from 'components/collation';
+import TimeSeries from 'components/time-series';
 import { TextButton } from 'hadron-react-buttons';
-import { ModalCheckbox, ModalInput, ModalStatusMessage } from 'hadron-react-components';
+import { ModalCheckbox, ModalStatusMessage } from 'hadron-react-components';
 import { createCollection } from 'modules/create-collection';
 import { changeCappedSize } from 'modules/create-collection/capped-size';
 import { changeCollationOption } from 'modules/create-collection/collation';
+import { changeTimeSeriesOption } from 'modules/create-collection/time-series';
 import { toggleIsCapped } from 'modules/create-collection/is-capped';
+import { toggleIsTimeSeries } from 'modules/create-collection/is-time-series';
 import { toggleIsCustomCollation } from 'modules/create-collection/is-custom-collation';
 import { changeCollectionName } from 'modules/create-collection/name';
 import { clearError } from 'modules/error';
@@ -16,7 +18,8 @@ import React, { PureComponent } from 'react';
 import { Modal } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import styles from './create-collection-modal.less';
-
+import TextInput from '@leafygreen-ui/text-input';
+import hasTimeSeriesSupport from '../../modules/has-time-series-support';
 
 /**
  * The help icon for capped collections url.
@@ -28,6 +31,11 @@ const HELP_URL_CAPPED = 'https://docs.mongodb.com/manual/core/capped-collections
  */
 const HELP_URL_COLLATION = 'https://docs.mongodb.com/master/reference/collation/';
 
+/**
+ * The help URL for time series.
+ */
+const HELP_URL_TIME_SERIES = 'https://docs.mongodb.com/manual/reference/method/db.createCollection/';
+
 /**
  * The modal to create a collection.
  */
@@ -37,6 +45,7 @@ class CreateCollectionModal extends PureComponent {
   static propTypes = {
     isCapped: PropTypes.bool.isRequired,
     isCustomCollation: PropTypes.bool.isRequired,
+    isTimeSeries: PropTypes.bool.isRequired,
     isRunning: PropTypes.bool.isRequired,
     isVisible: PropTypes.bool.isRequired,
     name: PropTypes.string.isRequired,
@@ -47,11 +56,14 @@ class CreateCollectionModal extends PureComponent {
     changeCappedSize: PropTypes.func.isRequired,
     changeCollectionName: PropTypes.func.isRequired,
     changeCollationOption: PropTypes.func.isRequired,
+    changeTimeSeriesOption: PropTypes.func.isRequired,
     createCollection: PropTypes.func.isRequired,
     toggleIsCapped: PropTypes.func.isRequired,
     toggleIsCustomCollation: PropTypes.func.isRequired,
+    toggleIsTimeSeries: PropTypes.func.isRequired,
     toggleIsVisible: PropTypes.func.isRequired,
-    clearError: PropTypes.func
+    clearError: PropTypes.func,
+    serverVersion: PropTypes.string.isRequired
   }
 
   /**
@@ -86,6 +98,10 @@ class CreateCollectionModal extends PureComponent {
     this.props.toggleIsCustomCollation(!this.props.isCustomCollation);
   }
 
+  onToggleIsTimeSeries = () => {
+    this.props.toggleIsTimeSeries(!this.props.isTimeSeries);
+  }
+
   /**
    * When user hits enter to submit the form we need to prevent the default bhaviour.
    *
@@ -119,12 +135,25 @@ class CreateCollectionModal extends PureComponent {
   renderCappedSize() {
     if (this.props.isCapped) {
       return (
-        <div className={classnames(styles['create-collection-modal-is-capped-wrapper'])}>
-          <ModalInput
-            id="capped-size-value"
-            name="Maximum Size (Bytes)"
+        <div className="form-group">
+          <TextInput
+            label="size"
+            type="number"
+            description="Maximum size in bytes for the capped collection."
+            onChange={this.onCappedSizeChange}
             value={this.props.cappedSize}
-            onChangeHandler={this.onCappedSizeChange} />
+          />
+        </div>
+      );
+    }
+  }
+
+
+  renderTimeSeries() {
+    if (this.props.isTimeSeries) {
+      return (
+        <div className={styles['create-collection-modal-is-time-series-wrapper']}>
+          <TimeSeries changeTimeSeriesOption={this.props.changeTimeSeriesOption} />
         </div>
       );
     }
@@ -145,6 +174,46 @@ class CreateCollectionModal extends PureComponent {
     }
   }
 
+  renderCappedSizeCheckbox() {
+    return (<div><ModalCheckbox
+      name="Capped Collection"
+      titleClassName={styles['create-collection-modal-is-capped']}
+      checked={this.props.isCapped}
+      helpUrl={HELP_URL_CAPPED}
+      onClickHandler={this.onToggleIsCapped}
+      onLinkClickHandler={this.props.openLink} />
+    {this.renderCappedSize()}
+    </div>);
+  }
+
+  renderTimeSeriesCheckbox() {
+    if (!hasTimeSeriesSupport(this.props.serverVersion)) {
+      return;
+    }
+
+    return (<div>
+      <ModalCheckbox
+        name="Time-Series"
+        titleClassName={styles['create-collection-time-series']}
+        checked={this.props.isTimeSeries}
+        helpUrl={HELP_URL_TIME_SERIES}
+        onClickHandler={this.onToggleIsTimeSeries}
+        onLinkClickHandler={this.props.openLink} />
+      {this.renderTimeSeries()}</div>);
+  }
+
+  renderCustomCollationCheckbox() {
+    return (<div>
+      <ModalCheckbox
+        name="Use Custom Collation"
+        titleClassName={styles['create-collection-modal-is-custom-collation']}
+        checked={this.props.isCustomCollation}
+        helpUrl={HELP_URL_COLLATION}
+        onClickHandler={this.onToggleIsCustomCollation}
+        onLinkClickHandler={this.props.openLink} />
+      {this.renderCollation()}</div>);
+  }
+
   /**
    * Render the modal dialog.
    *
@@ -156,7 +225,7 @@ class CreateCollectionModal extends PureComponent {
         show={this.props.isVisible}
         backdrop="static"
         onHide={this.onHide}
-        dialogClassName={classnames(styles['create-collection-modal'])}>
+        dialogClassName={styles['create-collection-modal']}>
 
         <Modal.Header>
           <Modal.Title>Create Collection</Modal.Title>
@@ -168,29 +237,19 @@ class CreateCollectionModal extends PureComponent {
             onSubmit={this.onFormSubmit}
             data-test-id="create-collection-modal">
 
-            <ModalInput
-              autoFocus
-              id="create-collection-name"
-              name="Collection Name"
-              value={this.props.name}
-              onChangeHandler={this.onNameChange} />
             <div className="form-group">
-              <ModalCheckbox
-                name="Capped Collection"
-                titleClassName={classnames(styles['create-collection-modal-is-capped'])}
-                checked={this.props.isCapped}
-                helpUrl={HELP_URL_CAPPED}
-                onClickHandler={this.onToggleIsCapped}
-                onLinkClickHandler={this.props.openLink} />
-              {this.renderCappedSize()}
-              <ModalCheckbox
-                name="Use Custom Collation"
-                titleClassName={classnames(styles['create-collection-modal-is-custom-collation'])}
-                checked={this.props.isCustomCollation}
-                helpUrl={HELP_URL_COLLATION}
-                onClickHandler={this.onToggleIsCustomCollation}
-                onLinkClickHandler={this.props.openLink} />
-              {this.renderCollation()}
+              <TextInput
+                id="create-collection-name"
+                autoFocus
+                label="Collection Name"
+                onChange={this.onNameChange}
+                value={this.props.name}
+              />
+            </div>
+            <div className="form-group">
+              {this.renderCappedSizeCheckbox()}
+              {this.renderCustomCollationCheckbox()}
+              {this.renderTimeSeriesCheckbox()}
             </div>
             {this.props.error ?
               <ModalStatusMessage
@@ -231,12 +290,14 @@ class CreateCollectionModal extends PureComponent {
 const mapStateToProps = (state) => ({
   isCapped: state.isCapped,
   isCustomCollation: state.isCustomCollation,
+  isTimeSeries: state.isTimeSeries,
   isRunning: state.isRunning,
   isVisible: state.isVisible,
   name: state.name,
   collation: state.collation,
   cappedSize: state.cappedSize,
-  error: state.error
+  error: state.error,
+  serverVersion: state.serverVersion
 });
 
 /**
@@ -249,9 +310,11 @@ const MappedCreateCollectionModal = connect(
     changeCappedSize,
     changeCollectionName,
     changeCollationOption,
+    changeTimeSeriesOption,
     createCollection,
     openLink,
     toggleIsCapped,
+    toggleIsTimeSeries,
     toggleIsCustomCollation,
     toggleIsVisible,
     clearError
diff --git a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.less b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.less
index a3ced1d9712..6a7e8608919 100644
--- a/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.less
+++ b/packages/compass-collections-ddl/src/components/create-collection-modal/create-collection-modal.less
@@ -19,14 +19,13 @@
     overflow: auto;
   }
 
-  p {
+  label > p {
+    margin-left: 5px;
     font-weight: bold;
     display: inline-block;
   }
 
   &-is-capped {
-    margin-left: 5px;
-
     &-wrapper {
 
       :global {
@@ -50,8 +49,4 @@
       }
     }
   }
-
-  &-is-custom-collation {
-    margin-left: 5px;
-  }
 }
diff --git a/packages/compass-collections-ddl/src/components/time-series/index.js b/packages/compass-collections-ddl/src/components/time-series/index.js
new file mode 100644
index 00000000000..1a551e9fcc7
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/time-series/index.js
@@ -0,0 +1,2 @@
+import TimeSeries from './time-series';
+export default TimeSeries;
diff --git a/packages/compass-collections-ddl/src/components/time-series/time-series.jsx b/packages/compass-collections-ddl/src/components/time-series/time-series.jsx
new file mode 100644
index 00000000000..61bd98ccc1c
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/time-series/time-series.jsx
@@ -0,0 +1,72 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import TextInput from '@leafygreen-ui/text-input';
+
+import styles from './time-series.less';
+
+const TIME_FIELD_INPUT_DESCRIPTION = 'Specify which field should be used ' +
+  'as timeField for the time-series collection. ' +
+  'This field must have a BSON type date.';
+
+const META_FIELD_INPUT_DESCRIPTION = 'The metaField is the designated field ' +
+  'for metadata.';
+
+const EXPIRE_AFTER_SECONDS_DESCRIPTION = 'The expireAfterSeconds field enables ' +
+  'automatic deletion of documents older than the specified number of seconds.';
+
+class TimeSeries extends PureComponent {
+  static displayName = 'TimeSeriesComponent';
+
+  static propTypes = {
+    changeTimeSeriesOption: PropTypes.func.isRequired
+  }
+
+  onChangeTimeSeriesOption(field, value) {
+    this.props.changeTimeSeriesOption(field, value.value);
+  }
+
+  render() {
+    return (
+      <div className={styles['time-series']}>
+        <div className="form-group">
+          <TextInput
+            label="timeField"
+            description={TIME_FIELD_INPUT_DESCRIPTION}
+            onChange={event => {
+              this.props.changeTimeSeriesOption('timeField', event.target.value);
+            }}
+          />
+        </div>
+
+        <div className="form-group">
+          <TextInput
+            label="metaField"
+            description={META_FIELD_INPUT_DESCRIPTION}
+            optional
+            onChange={event => {
+              this.props.changeTimeSeriesOption('metaField', event.target.value);
+            }}
+          />
+        </div>
+
+        <div className="form-group">
+          <TextInput
+            label="expireAfterSeconds"
+            description={EXPIRE_AFTER_SECONDS_DESCRIPTION}
+            optional
+            type="number"
+            onChange={event => {
+              this.props.changeTimeSeriesOption(
+                'expireAfterSeconds',
+                event.target.value ?
+                  +event.target.value : null
+              );
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default TimeSeries;
diff --git a/packages/compass-collections-ddl/src/components/time-series/time-series.less b/packages/compass-collections-ddl/src/components/time-series/time-series.less
new file mode 100644
index 00000000000..da05f374fc6
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/time-series/time-series.less
@@ -0,0 +1,8 @@
+.time-series {
+  display: block;
+
+  :global(p) {
+      display: block;
+      margin: 0;
+  }
+}
diff --git a/packages/compass-collections-ddl/src/components/time-series/time-series.spec.js b/packages/compass-collections-ddl/src/components/time-series/time-series.spec.js
new file mode 100644
index 00000000000..97871b151dc
--- /dev/null
+++ b/packages/compass-collections-ddl/src/components/time-series/time-series.spec.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import TimeSeries from 'components/time-series';
+import styles from './time-series.less';
+
+describe('TimeSeries [Component]', () => {
+  let component;
+  let changeTimeSeriesOptionSpy;
+
+  beforeEach(() => {
+    changeTimeSeriesOptionSpy = sinon.spy();
+    component = mount(
+      <TimeSeries changeTimeSeriesOption={changeTimeSeriesOptionSpy} />
+    );
+  });
+
+  afterEach(() => {
+    changeTimeSeriesOptionSpy = null;
+    component = null;
+  });
+
+  it('renders the correct root classname', () => {
+    expect(component.find(`.${styles['time-series']}`)).to.be.present();
+  });
+});
diff --git a/packages/compass-collections-ddl/src/components/toolbar/toolbar.spec.js b/packages/compass-collections-ddl/src/components/toolbar/toolbar.spec.js
index badeb66d13c..1230ad0f9d3 100644
--- a/packages/compass-collections-ddl/src/components/toolbar/toolbar.spec.js
+++ b/packages/compass-collections-ddl/src/components/toolbar/toolbar.spec.js
@@ -15,6 +15,7 @@ describe('Toolbar [Component]', () => {
         <Toolbar
           isReadonly
           databaseName="test"
+          isDataLake={false}
           open={openSpy} />
       );
     });
@@ -43,6 +44,7 @@ describe('Toolbar [Component]', () => {
         <Toolbar
           isReadonly={false}
           databaseName="test"
+          isDataLake={false}
           open={openSpy} />
       );
     });
diff --git a/packages/compass-collections-ddl/src/constants/collation.js b/packages/compass-collections-ddl/src/constants/collation.js
index badad5d8006..8e3a5a67839 100644
--- a/packages/compass-collections-ddl/src/constants/collation.js
+++ b/packages/compass-collections-ddl/src/constants/collation.js
@@ -2,7 +2,6 @@ const LOADING_STATE = null;
 const COLLATION_OPTIONS = [
   {
     field: 'locale',
-    label: 'Locale',
     values: [
       {value: 'af', label: 'af - Afrikaans'},
       {value: 'sq', label: 'sq - Albanian'},
@@ -163,25 +162,21 @@ const COLLATION_OPTIONS = [
   {field: 'strength', label: 'Strength', values: [1, 2, 3, 4, 5]},
   {
     field: 'caseLevel',
-    label: 'Use Case-Level',
     values: [{value: true, label: 'true'}, {value: false, label: 'false'}]
   },
   {field: 'caseFirst', label: 'Case First', values: ['upper', 'lower', 'off']},
   {
     field: 'numericOrdering',
-    label: 'Numeric Ordering',
     values: [{value: true, label: 'true'}, {value: false, label: 'false'}]
   },
   {field: 'alternate', label: 'Alternate', values: ['non-ignorable', 'shifted']},
   {field: 'maxVariable', label: 'Max-Variable', values: ['punct', 'space']},
   {
     field: 'backwards',
-    label: 'Backwards',
     values: [{value: true, label: 'true'}, {value: false, label: 'false'}]
   },
   {
     field: 'normalization',
-    label: 'Normalization',
     values: [{value: true, label: 'true'}, {value: false, label: 'false'}]
   }
 ];
diff --git a/packages/compass-collections-ddl/src/modules/collections.js b/packages/compass-collections-ddl/src/modules/collections.js
index d25aa9ed7f7..25c88dd70ec 100644
--- a/packages/compass-collections-ddl/src/modules/collections.js
+++ b/packages/compass-collections-ddl/src/modules/collections.js
@@ -2,6 +2,7 @@ import { parallel } from 'async';
 import zipObject from 'lodash.zipobject';
 import sortByOrder from 'lodash.sortbyorder';
 import { INITIAL_STATE as COLUMNS } from 'modules/columns';
+import { isEmpty } from 'lodash';
 
 /**
  * Need extra columns to map.
@@ -15,6 +16,12 @@ const EXTRA_COLUMNS = COLUMNS.concat([
   'pipeline'
 ]);
 
+export const PROPERTIES_COLLATION = 'collation';
+export const PROPERTIES_TIME_SERIES = 'time-series';
+export const PROPERTIES_CAPPED = 'capped';
+export const PROPERTIES_VIEW = 'view';
+export const PROPERTIES_READ_ONLY = 'readonly';
+
 /**
  * The module prefix.
  */
@@ -75,6 +82,47 @@ const sort = (collections, column, order) => {
   return sortByOrder(collections, column || NAME, order || ASC);
 };
 
+function getProperties(coll) {
+  const properties = [];
+
+  if (!isEmpty(coll.collation)) {
+    properties.push({
+      name: PROPERTIES_COLLATION,
+      options: coll.collation
+    });
+  }
+
+  if (coll.type === 'timeseries') {
+    properties.push({
+      name: PROPERTIES_TIME_SERIES,
+      options: {}
+    });
+  }
+
+  if (coll.type === 'view') {
+    properties.push({
+      name: PROPERTIES_VIEW,
+      options: {}
+    });
+  }
+
+  if (coll.capped) {
+    properties.push({
+      name: PROPERTIES_CAPPED,
+      options: {}
+    });
+  }
+
+  if (coll.readonly) {
+    properties.push({
+      name: PROPERTIES_READ_ONLY,
+      options: {}
+    });
+  }
+
+  return properties;
+}
+
 /**
  * Load collections to the UI friendly form.
  *
@@ -83,23 +131,24 @@ const sort = (collections, column, order) => {
  * @return {Array} The mapped collections for the UI.
  */
 export const load = (collections) => {
-  return collections.map((coll) => {
-    return zipObject(EXTRA_COLUMNS, [
-      coll.name,
-      coll.document_count,
-      coll.size / coll.document_count,
-      coll.size,
-      coll.index_count,
-      coll.index_size,
-      coll.collation,
-      coll.ns || coll._id,
-      coll.readonly,
-      coll.is_capped || coll.capped,
-      coll.view_on,
-      coll.type,
-      coll.pipeline
-    ]);
-  });
+  return collections
+    .map((coll) => {
+      return zipObject(EXTRA_COLUMNS, [
+        coll.name, // Collection Name
+        coll.document_count, // Documents
+        coll.size / coll.document_count, // Avg. Document Size
+        coll.size, // Total Document Size
+        coll.index_count, // Num. Indexes
+        coll.index_size, // Total Index Size
+        getProperties(coll), // Properties
+        coll.ns || coll._id, // _id
+        coll.readonly, // readonly
+        coll.is_capped || coll.capped, // capped
+        coll.view_on, // view_on
+        coll.type, // type
+        coll.pipeline // pipeline
+      ]);
+    });
 };
 
 /**
diff --git a/packages/compass-collections-ddl/src/modules/collections.spec.js b/packages/compass-collections-ddl/src/modules/collections.spec.js
index b4e573d467e..7b95098a29d 100644
--- a/packages/compass-collections-ddl/src/modules/collections.spec.js
+++ b/packages/compass-collections-ddl/src/modules/collections.spec.js
@@ -37,7 +37,7 @@ const SPOTIFY_MAPPED = {
   'Total Document Size': 200,
   'Num. Indexes': 1,
   'Total Index Size': 15,
-  'Properties': { locale: 'se' },
+  'Properties': [{ name: 'collation', options: { locale: 'se' }}],
   '_id': undefined,
   'readonly': undefined,
   'capped': undefined,
@@ -52,7 +52,7 @@ const SOUNDCLOUD_MAPPED = {
   'Total Document Size': 20000,
   'Num. Indexes': 2,
   'Total Index Size': 20,
-  'Properties': { locale: 'de' },
+  'Properties': [{ name: 'collation', options: { locale: 'de' }}],
   '_id': undefined,
   'readonly': undefined,
   'capped': undefined,
@@ -67,7 +67,7 @@ const DEEZER_MAPPED = {
   'Total Document Size': 20,
   'Num. Indexes': 3,
   'Total Index Size': 1,
-  'Properties': { locale: 'us' },
+  'Properties': [{ name: 'collation', options: { locale: 'us' }}],
   '_id': undefined,
   'readonly': undefined,
   'capped': undefined,
@@ -78,6 +78,51 @@ const DEEZER_MAPPED = {
 
 describe('collections module', () => {
   describe('#reducer', () => {
+    it('parses properties', () => {
+      const parseProperties = (coll) => {
+        return reducer(undefined, loadCollections([
+          coll
+        ]))[0].Properties;
+      };
+
+      expect(parseProperties({
+        name: 'coll1', readonly: true
+      })).to.deep.equal([
+        { name: 'readonly', options: {} }
+      ]);
+
+      expect(parseProperties({
+        name: 'coll1', type: 'timeseries'
+      })).to.deep.equal([
+        { name: 'time-series', options: {} }
+      ]);
+
+      expect(parseProperties({
+        name: 'coll1', capped: true,
+      })).to.deep.equal([
+        { name: 'capped', options: {} }
+      ]);
+
+      expect(parseProperties({
+        name: 'coll1', collation: { locale: 'se' }
+      })).to.deep.equal([
+        { name: 'collation', options: { locale: 'se' }}
+      ]);
+
+      expect(parseProperties({
+        name: 'coll1', type: 'view'
+      })).to.deep.equal([
+        { name: 'view', options: {} }
+      ]);
+
+      expect(parseProperties({
+        name: 'coll1', type: 'view', readonly: true
+      })).to.deep.equal([
+        { name: 'view', options: {} },
+        { name: 'readonly', options: {} }
+      ]);
+    });
+
     context('when an action is provided', () => {
       context('when the action is LOAD_COLLECTIONS', () => {
         const collections = [ SPOTIFY, SOUNDCLOUD, DEEZER ];
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/index.js b/packages/compass-collections-ddl/src/modules/create-collection/index.js
index d4bb5bff569..63723aeaf98 100644
--- a/packages/compass-collections-ddl/src/modules/create-collection/index.js
+++ b/packages/compass-collections-ddl/src/modules/create-collection/index.js
@@ -1,34 +1,44 @@
 import { combineReducers } from 'redux';
-import dataService from 'modules/data-service';
+import dataService from '../data-service';
+import serverVersion from '../server-version';
 import cappedSize, {
   INITIAL_STATE as CAPPED_SIZE_INITIAL_STATE
-} from 'modules/create-collection/capped-size';
+} from '../create-collection/capped-size';
 import isCapped, {
   INITIAL_STATE as IS_CAPPED_INITIAL_STATE
-} from 'modules/create-collection/is-capped';
+} from '../create-collection/is-capped';
 import isCustomCollation, {
   INITIAL_STATE as IS_CUSTOM_COLLATION_INITIAL_STATE
-} from 'modules/create-collection/is-custom-collation';
+} from '../create-collection/is-custom-collation';
+import isTimeSeries, {
+  INITIAL_STATE as IS_TIME_SERIES_INITIAL_STATE
+} from '../create-collection/is-time-series';
 import isRunning, {
   toggleIsRunning,
   INITIAL_STATE as IS_RUNNING_INITIAL_STATE
-} from 'modules/is-running';
+} from '../is-running';
 import isVisible, {
   INITIAL_STATE as IS_VISIBLE_INITIAL_STATE
-} from 'modules/is-visible';
+} from '../is-visible';
 import collation, {
   INITIAL_STATE as COLLATION_INITIAL_STATE
-} from 'modules/create-collection/collation';
+} from '../create-collection/collation';
+import timeSeries, {
+  INITIAL_STATE as TIME_SERIES_INITIAL_STATE
+} from '../create-collection/time-series';
 import name, {
   INITIAL_STATE as NAME_INITIAL_STATE
-} from 'modules/create-collection/name';
+} from '../create-collection/name';
 import databaseName, {
   INITIAL_STATE as DATABASE_NAME_INITIAL_STATE
-} from 'modules/database-name';
+} from '../database-name';
 import error, {
   clearError, handleError, INITIAL_STATE as ERROR_INITIAL_STATE
-} from 'modules/error';
-import { reset, RESET } from 'modules/reset';
+} from '../error';
+import { reset, RESET } from '../reset';
+
+import createDebug from 'debug';
+const debug = createDebug('compass-collections-ddl:create-collection');
 
 /**
  * Open action name.
@@ -44,10 +54,13 @@ const reducer = combineReducers({
   isCustomCollation,
   isRunning,
   isVisible,
+  isTimeSeries,
   name,
   databaseName,
   error,
   collation,
+  timeSeries,
+  serverVersion,
   dataService
 });
 
@@ -60,31 +73,28 @@ const reducer = combineReducers({
  * @returns {Object} The new state.
  */
 const rootReducer = (state, action) => {
+  const resetState = {
+    ...state,
+    cappedSize: CAPPED_SIZE_INITIAL_STATE,
+    isCapped: IS_CAPPED_INITIAL_STATE,
+    isCustomCollation: IS_CUSTOM_COLLATION_INITIAL_STATE,
+    isTimeSeries: IS_TIME_SERIES_INITIAL_STATE,
+    isRunning: IS_RUNNING_INITIAL_STATE,
+    isVisible: IS_VISIBLE_INITIAL_STATE,
+    name: NAME_INITIAL_STATE,
+    databaseName: DATABASE_NAME_INITIAL_STATE,
+    error: ERROR_INITIAL_STATE,
+    collation: COLLATION_INITIAL_STATE,
+    timeSeries: TIME_SERIES_INITIAL_STATE
+  };
+
   if (action.type === RESET) {
-    return {
-      ...state,
-      cappedSize: CAPPED_SIZE_INITIAL_STATE,
-      isCapped: IS_CAPPED_INITIAL_STATE,
-      isCustomCollation: IS_CUSTOM_COLLATION_INITIAL_STATE,
-      isRunning: IS_RUNNING_INITIAL_STATE,
-      isVisible: IS_VISIBLE_INITIAL_STATE,
-      name: NAME_INITIAL_STATE,
-      databaseName: DATABASE_NAME_INITIAL_STATE,
-      error: ERROR_INITIAL_STATE,
-      collation: COLLATION_INITIAL_STATE
-    };
+    return resetState;
   } else if (action.type === OPEN) {
     return {
-      ...state,
+      ...resetState,
       isVisible: true,
-      databaseName: action.databaseName,
-      cappedSize: CAPPED_SIZE_INITIAL_STATE,
-      isCapped: IS_CAPPED_INITIAL_STATE,
-      isCustomCollation: IS_CUSTOM_COLLATION_INITIAL_STATE,
-      isRunning: IS_RUNNING_INITIAL_STATE,
-      name: NAME_INITIAL_STATE,
-      error: ERROR_INITIAL_STATE,
-      collation: COLLATION_INITIAL_STATE
+      databaseName: action.databaseName
     };
   }
   return reducer(state, action);
@@ -101,6 +111,7 @@ export default rootReducer;
  * @return {Object} The result.
  */
 const stopWithError = (dispatch, err) => {
+  debug('create collection failed', err);
   dispatch(toggleIsRunning(false));
   return dispatch(handleError(err));
 };
@@ -117,26 +128,42 @@ export const open = (dbName) => ({
   databaseName: dbName
 });
 
-/**
- * The create collection action.
- *
- * @returns {Function} The thunk function.
- */
+
+function buildOptions(state) {
+  const cappedOptions = state.isCapped ? {
+    capped: true,
+    size: parseInt(state.cappedSize, 10)
+  } : {};
+
+  const collationOptions = state.isCustomCollation ? {
+    collation: state.collation
+  } : {};
+
+  const timeSeriesOptions = state.isTimeSeries ? {
+    timeseries: state.timeSeries
+  } : {};
+
+  return {
+    ...collationOptions,
+    ...cappedOptions,
+    ...timeSeriesOptions
+  };
+}
+
 export const createCollection = () => {
   return (dispatch, getState) => {
     const state = getState();
     const ds = state.dataService.dataService;
     const collectionName = state.name;
     const dbName = state.databaseName;
-    const coll = state.collation;
+    const namespace = `${dbName}.${collectionName}`;
 
     dispatch(clearError());
 
-    let options = state.isCapped ? { capped: true, size: parseInt(state.cappedSize, 10) } : {};
-    options = state.isCustomCollation ? { ...options, collation: coll } : options;
     try {
+      const options = buildOptions(state);
       dispatch(toggleIsRunning(true));
-      ds.createCollection(`${dbName}.${collectionName}`, options, (e) => {
+      ds.createCollection(namespace, options, (e) => {
         if (e) {
           return stopWithError(dispatch, e);
         }
@@ -148,3 +175,5 @@ export const createCollection = () => {
     }
   };
 };
+
+
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/index.spec.js b/packages/compass-collections-ddl/src/modules/create-collection/index.spec.js
index d813fb7b37e..d9888fe3054 100644
--- a/packages/compass-collections-ddl/src/modules/create-collection/index.spec.js
+++ b/packages/compass-collections-ddl/src/modules/create-collection/index.spec.js
@@ -1,6 +1,20 @@
-import reducer from 'modules/create-collection';
+import sinon from 'sinon';
+import reducer, { createCollection as makeCreateCollection } from './index';
 import { reset } from 'modules/reset';
 
+import {
+  CLEAR_ERROR,
+  HANDLE_ERROR
+} from '../error';
+
+import {
+  TOGGLE_IS_RUNNING
+} from '../is-running';
+
+import {
+  RESET
+} from '../reset';
+
 describe('create collection module', () => {
   describe('#reducer', () => {
     context('when an action is provided', () => {
@@ -11,6 +25,8 @@ describe('create collection module', () => {
           expect(reducer({ dataService: dataService }, reset())).to.deep.equal({
             cappedSize: '',
             collation: {},
+            isTimeSeries: false,
+            timeSeries: {},
             dataService: 'data-service',
             error: null,
             isCapped: false,
@@ -26,38 +42,169 @@ describe('create collection module', () => {
   });
 
   describe('#createCollection', () => {
-    context('when no error exists in the state', () => {
-      context('when the collection name is valid', () => {
-        context('when the collection contains no special options', () => {
-          context('when the create is a success', () => {
+    let appRegistryEmitSpy;
+    const hadronAppBkp = global.hadronApp;
 
-          });
+    beforeEach(() => {
+      appRegistryEmitSpy = sinon.spy();
+      global.hadronApp = {
+        appRegistry: {emit: appRegistryEmitSpy}
+      };
+    });
 
-          context('when the create errors', () => {
+    afterEach(() => {
+      global.hadronApp = hadronAppBkp;
+    });
 
-          });
-        });
+    const testCreateCollection = (createCollectionSpy, state) => {
+      const dispatched = [];
+      makeCreateCollection()(
+        (evt) => { dispatched.push(evt); },
+        () => ({
+          dataService: {
+            dataService: {
+              createCollection: createCollectionSpy
+            }
+          },
+          ...state
+        })
+      );
 
-        context('when the collection is capped', () => {
-          context('when the create is a success', () => {
+      return dispatched;
+    };
 
-          });
+    it('creates a simple collection', () => {
+      const createCollectionSpy = sinon.spy(
+        (ns, options, cb) => cb(null, {})
+      );
 
-          context('when the create errors', () => {
+      const dispatched = testCreateCollection(createCollectionSpy, {
+        databaseName: 'db1',
+        name: 'coll1'
+      });
 
-          });
-        });
+      expect(createCollectionSpy).have.been.calledWith('db1.coll1', {});
+      expect(dispatched).to.deep.equal(
+        [
+          { type: CLEAR_ERROR },
+          { type: TOGGLE_IS_RUNNING, isRunning: true },
+          { type: RESET }
+        ]
+      );
+    });
 
-        context('when the collection has a collation', () => {
-          context('when the create is a success', () => {
+    it('creates a capped collection', () => {
+      const createCollectionSpy = sinon.spy(
+        (ns, options, cb) => cb(null, {})
+      );
 
-          });
+      const dispatched = testCreateCollection(createCollectionSpy, {
+        databaseName: 'db1',
+        name: 'coll1',
+        isCapped: true,
+        cappedSize: '123'
+      });
+
+      expect(createCollectionSpy).have.been.calledWith('db1.coll1', {
+        capped: true,
+        size: 123
+      });
 
-          context('when the create errors', () => {
+      expect(dispatched).to.deep.equal(
+        [
+          { type: CLEAR_ERROR },
+          { type: TOGGLE_IS_RUNNING, isRunning: true },
+          { type: RESET }
+        ]
+      );
+    });
 
-          });
-        });
+    it('creates a time-series collection', () => {
+      const createCollectionSpy = sinon.spy(
+        (ns, options, cb) => cb(null, {})
+      );
+
+      const dispatched = testCreateCollection(createCollectionSpy, {
+        databaseName: 'db1',
+        name: 'coll1',
+        isTimeSeries: true,
+        timeSeries: { timeField: 't' }
       });
+
+      expect(createCollectionSpy).have.been.calledWith('db1.coll1', {
+        timeseries: { timeField: 't' }
+      });
+
+      expect(dispatched).to.deep.equal(
+        [
+          { type: CLEAR_ERROR },
+          { type: TOGGLE_IS_RUNNING, isRunning: true },
+          { type: RESET }
+        ]
+      );
+    });
+
+    it('creates a time-series collection with collation', () => {
+      const createCollectionSpy = sinon.spy(
+        (ns, options, cb) => cb(null, {})
+      );
+
+      const dispatched = testCreateCollection(createCollectionSpy, {
+        databaseName: 'db1',
+        name: 'coll1',
+        isCustomCollation: true,
+        collation: { locale: 'es' }
+      });
+
+      expect(createCollectionSpy).have.been.calledWith('db1.coll1', {
+        collation: { locale: 'es' }
+      });
+
+      expect(dispatched).to.deep.equal(
+        [
+          { type: CLEAR_ERROR },
+          { type: TOGGLE_IS_RUNNING, isRunning: true },
+          { type: RESET }
+        ]
+      );
+    });
+
+    it('handles errors from data service', () => {
+      const err = new Error('error');
+      const createCollectionSpy = sinon.spy(
+        (ns, options, cb) => cb(err)
+      );
+
+      const dispatched = testCreateCollection(createCollectionSpy, {});
+
+
+      expect(dispatched).to.deep.equal(
+        [
+          { type: CLEAR_ERROR },
+          { type: TOGGLE_IS_RUNNING, isRunning: true },
+          { type: TOGGLE_IS_RUNNING, isRunning: false },
+          { type: HANDLE_ERROR, error: err }
+        ]
+      );
+    });
+
+    it('handles synchronous exceptions', () => {
+      const err = new Error('error');
+      const createCollectionSpy = sinon.spy(
+        () => { throw err; }
+      );
+
+      const dispatched = testCreateCollection(createCollectionSpy, {});
+
+
+      expect(dispatched).to.deep.equal(
+        [
+          { type: CLEAR_ERROR },
+          { type: TOGGLE_IS_RUNNING, isRunning: true },
+          { type: TOGGLE_IS_RUNNING, isRunning: false },
+          { type: HANDLE_ERROR, error: err }
+        ]
+      );
     });
   });
 });
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/is-time-series.js b/packages/compass-collections-ddl/src/modules/create-collection/is-time-series.js
new file mode 100644
index 00000000000..3d076f00cd8
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/create-collection/is-time-series.js
@@ -0,0 +1,36 @@
+/**
+ * Change is time-series action name.
+ */
+export const TOGGLE_IS_TIME_SERIES = 'ddl/create-collection/is-time-series/TOGGLE_IS_TIME_SERIES';
+
+/**
+ * The initial state of the is writable attribute.
+ */
+export const INITIAL_STATE = false;
+
+/**
+ * Reducer function for handle state changes to is time-series.
+ *
+ * @param {Boolean} state - The is time-series state.
+ * @param {Object} action - The action.
+ *
+ * @returns {Array} The new state.
+ */
+export default function reducer(state = INITIAL_STATE, action) {
+  if (action.type === TOGGLE_IS_TIME_SERIES) {
+    return action.isTimeSeries;
+  }
+  return state;
+}
+
+/**
+ * The toggle is time-series action creator.
+ *
+ * @param {Boolean} isTimeSeries - Is time-series.
+ *
+ * @returns {Object} The action.
+ */
+export const toggleIsTimeSeries = (isTimeSeries) => ({
+  type: TOGGLE_IS_TIME_SERIES,
+  isTimeSeries: isTimeSeries
+});
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/is-time-series.spec.js b/packages/compass-collections-ddl/src/modules/create-collection/is-time-series.spec.js
new file mode 100644
index 00000000000..2beddebb373
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/create-collection/is-time-series.spec.js
@@ -0,0 +1,30 @@
+import reducer, {
+  INITIAL_STATE,
+  toggleIsTimeSeries,
+  TOGGLE_IS_TIME_SERIES
+} from 'modules/create-collection/is-time-series';
+
+describe('create collection is capped module', () => {
+  describe('#reducer', () => {
+    context('when an action is provided', () => {
+      it('returns the new state', () => {
+        expect(reducer(undefined, toggleIsTimeSeries(true))).to.equal(true);
+      });
+    });
+
+    context('when an action is not provided', () => {
+      it('returns the default state', () => {
+        expect(reducer(undefined, {})).to.equal(INITIAL_STATE);
+      });
+    });
+  });
+
+  describe('#toggleIsTimeSeries', () => {
+    it('returns the action', () => {
+      expect(toggleIsTimeSeries(false)).to.deep.equal({
+        type: TOGGLE_IS_TIME_SERIES,
+        isTimeSeries: false
+      });
+    });
+  });
+});
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/time-series.js b/packages/compass-collections-ddl/src/modules/create-collection/time-series.js
new file mode 100644
index 00000000000..a27cfdae57f
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/create-collection/time-series.js
@@ -0,0 +1,38 @@
+/**
+ * Change timeseries option action name.
+ */
+export const CHANGE_TIME_SERIES_OPTION = 'ddl/create-collection/timeseries/CHANGE_TIME_SERIES_OPTION';
+
+/**
+ * The initial state of the timeseries.
+ */
+export const INITIAL_STATE = {};
+
+/**
+ * Reducer function for handle state changes to timeseries.
+ *
+ * @param {Array} state - The timeseries state.
+ * @param {Object} action - The action.
+ *
+ * @returns {Array} The new state.
+ */
+export default function reducer(state = INITIAL_STATE, action) {
+  if (action.type === CHANGE_TIME_SERIES_OPTION) {
+    return { ...state, [action.field]: action.value };
+  }
+  return state;
+}
+
+/**
+ * The change capped size action creator.
+ *
+ * @param {String} field - The timeseries option.
+ * @param {String} value - The timeseries option value.
+ *
+ * @returns {Object} The action.
+ */
+export const changeTimeSeriesOption = (field, value) => ({
+  type: CHANGE_TIME_SERIES_OPTION,
+  field: field,
+  value: value
+});
diff --git a/packages/compass-collections-ddl/src/modules/create-collection/time-series.spec.js b/packages/compass-collections-ddl/src/modules/create-collection/time-series.spec.js
new file mode 100644
index 00000000000..ecd717f1ecc
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/create-collection/time-series.spec.js
@@ -0,0 +1,32 @@
+import reducer, {
+  INITIAL_STATE,
+  changeTimeSeriesOption,
+  CHANGE_TIME_SERIES_OPTION
+} from 'modules/create-collection/time-series';
+
+describe('create collection time-series module', () => {
+  describe('#reducer', () => {
+    context('when an action is provided', () => {
+      it('returns the new state', () => {
+        expect(reducer(undefined, changeTimeSeriesOption('locale', 'ar'))).
+          to.deep.equal({ locale: 'ar' });
+      });
+    });
+
+    context('when an action is not provided', () => {
+      it('returns the default state', () => {
+        expect(reducer(undefined, {})).to.equal(INITIAL_STATE);
+      });
+    });
+  });
+
+  describe('#changeTimeSeriesOption', () => {
+    it('returns the action', () => {
+      expect(changeTimeSeriesOption('locale', 'ar')).to.deep.equal({
+        type: CHANGE_TIME_SERIES_OPTION,
+        field: 'locale',
+        value: 'ar'
+      });
+    });
+  });
+});
diff --git a/packages/compass-collections-ddl/src/modules/has-time-series-support.js b/packages/compass-collections-ddl/src/modules/has-time-series-support.js
new file mode 100644
index 00000000000..e1311c313da
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/has-time-series-support.js
@@ -0,0 +1,11 @@
+import semver from 'semver';
+
+const MIN_TIME_SERIES_SERVER_VERSION = '5.0.0-alpha0';
+
+export default function hasTimeSeriesSupport(serverVersion) {
+  try {
+    return semver.gte(serverVersion, MIN_TIME_SERIES_SERVER_VERSION);
+  } catch (e) {
+    return true;
+  }
+}
diff --git a/packages/compass-collections-ddl/src/modules/has-time-series-support.spec.js b/packages/compass-collections-ddl/src/modules/has-time-series-support.spec.js
new file mode 100644
index 00000000000..02f9d60ab6b
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/has-time-series-support.spec.js
@@ -0,0 +1,19 @@
+import hasTimeSeriesSupport from './has-time-series-support';
+
+describe('hasTimeSeriesSupport', () => {
+  describe('returns false for < 5.0', () => {
+    expect(hasTimeSeriesSupport('5.0.0')).to.be.true;
+  });
+
+  describe('returns true for >= 5.0', () => {
+    expect(hasTimeSeriesSupport('5.0.0')).to.be.true;
+    expect(hasTimeSeriesSupport('5.0.0-alpha0-277-g02d6940')).to.be.true;
+  });
+
+  describe('returns true for invalid versions', () => {
+    expect(hasTimeSeriesSupport('')).to.be.true;
+    expect(hasTimeSeriesSupport('notasemver')).to.be.true;
+    expect(hasTimeSeriesSupport(undefined)).to.be.true;
+    expect(hasTimeSeriesSupport(null)).to.be.true;
+  });
+});
diff --git a/packages/compass-collections-ddl/src/modules/index.js b/packages/compass-collections-ddl/src/modules/index.js
index faa946ccac7..4422252e27d 100644
--- a/packages/compass-collections-ddl/src/modules/index.js
+++ b/packages/compass-collections-ddl/src/modules/index.js
@@ -1,34 +1,34 @@
 import { combineReducers } from 'redux';
-import appRegistry from 'modules/app-registry';
-import dataService from 'modules/data-service';
+import appRegistry from './app-registry';
+import dataService from './data-service';
 import columns, {
   INITIAL_STATE as COLUMNS_INITIAL_STATE
-} from 'modules/columns';
+} from './columns';
 import collections, {
   INITIAL_STATE as COLLECTIONS_INITIAL_STATE
-} from 'modules/collections';
+} from './collections';
 import databases, {
   INITIAL_STATE as DATABASES_INITIAL_STATE
-} from 'modules/databases';
+} from './databases';
 import databaseName, {
   INITIAL_STATE as DATABASE_NAME_INITIAL_STATE
-} from 'modules/database-name';
+} from './database-name';
 import isReadonly, {
   INITIAL_STATE as READONLY_INITIAL_STATE
-} from 'modules/is-readonly';
+} from './is-readonly';
 import isWritable, {
   INITIAL_STATE as WRITABLE_INITIAL_STATE
-} from 'modules/is-writable';
+} from './is-writable';
 import sortColumn, {
   INITIAL_STATE as SORT_COLUMN_INITIAL_STATE
-} from 'modules/sort-column';
+} from './sort-column';
 import sortOrder, {
   INITIAL_STATE as SORT_ORDER_INITIAL_STATE
-} from 'modules/sort-order';
+} from './sort-order';
 import isDataLake, {
   INITIAL_STATE as DATA_LAKE_INITIAL_STATE
-} from 'modules/is-data-lake';
-import { RESET } from 'modules/reset';
+} from './is-data-lake';
+import { RESET } from './reset';
 
 /**
  * The main reducer.
diff --git a/packages/compass-collections-ddl/src/modules/server-version.js b/packages/compass-collections-ddl/src/modules/server-version.js
new file mode 100644
index 00000000000..581853b40eb
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/server-version.js
@@ -0,0 +1,41 @@
+/**
+ * The prefix.
+ */
+const PREFIX = 'collections-ddl';
+
+/**
+  * Server version changed action.
+  */
+export const SERVER_VERSION_CHANGED = `${PREFIX}/server-version/SERVER_VERSION_CHANGED`;
+
+/**
+  * The initial state.
+  */
+export const INITIAL_STATE = '4.0.0';
+
+/**
+  * Reducer function for handle state changes to server version.
+  *
+  * @param {String} state - The version state.
+  * @param {Object} action - The action.
+  *
+  * @returns {String} The new state.
+  */
+export default function reducer(state = INITIAL_STATE, action) {
+  if (action.type === SERVER_VERSION_CHANGED) {
+    return action.version || state;
+  }
+  return state;
+}
+
+/**
+  * Action creator for server version changed events.
+  *
+  * @param {String} version - The version value.
+  *
+  * @returns {Object} The server version changed action.
+  */
+export const serverVersionChanged = (version) => ({
+  type: SERVER_VERSION_CHANGED,
+  version: version
+});
diff --git a/packages/compass-collections-ddl/src/modules/server-version.spec.js b/packages/compass-collections-ddl/src/modules/server-version.spec.js
new file mode 100644
index 00000000000..40082b4a64c
--- /dev/null
+++ b/packages/compass-collections-ddl/src/modules/server-version.spec.js
@@ -0,0 +1,29 @@
+import reducer, {
+  serverVersionChanged,
+  SERVER_VERSION_CHANGED
+} from './server-version';
+
+describe('server version module', () => {
+  describe('#serverVersionChanged', () => {
+    it('returns the SERVER_VERSION_CHANGED action', () => {
+      expect(serverVersionChanged('3.0.0')).to.deep.equal({
+        type: SERVER_VERSION_CHANGED,
+        version: '3.0.0'
+      });
+    });
+  });
+
+  describe('#reducer', () => {
+    context('when the action is not server version changed', () => {
+      it('returns the default state', () => {
+        expect(reducer(undefined, { type: 'test' })).to.equal('4.0.0');
+      });
+    });
+
+    context('when the action is server version changed', () => {
+      it('returns the new state', () => {
+        expect(reducer(undefined, serverVersionChanged('3.0.0'))).to.equal('3.0.0');
+      });
+    });
+  });
+});
diff --git a/packages/compass-collections-ddl/src/stores/create-collection.js b/packages/compass-collections-ddl/src/stores/create-collection.js
index 43441ca66a2..5cb34df9172 100644
--- a/packages/compass-collections-ddl/src/stores/create-collection.js
+++ b/packages/compass-collections-ddl/src/stores/create-collection.js
@@ -1,7 +1,8 @@
 import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
-import { dataServiceConnected } from 'modules/data-service';
-import reducer, { open } from 'modules/create-collection';
+import { dataServiceConnected } from '../modules/data-service';
+import { serverVersionChanged } from '../modules/server-version';
+import reducer, { open } from '../modules/create-collection';
 
 const store = createStore(reducer, applyMiddleware(thunk));
 
@@ -16,6 +17,10 @@ store.onActivated = (appRegistry) => {
     store.dispatch(dataServiceConnected(error, dataService));
   });
 
+  appRegistry.on('server-version-changed', (version) => {
+    store.dispatch(serverVersionChanged(version));
+  });
+
   /**
    * When needing to create a collection from elsewhere, the app registry
    * event is emitted.
diff --git a/packages/compass-collections-ddl/src/stores/store.spec.js b/packages/compass-collections-ddl/src/stores/store.spec.js
index c4235a545c9..851b5f0ea6c 100644
--- a/packages/compass-collections-ddl/src/stores/store.spec.js
+++ b/packages/compass-collections-ddl/src/stores/store.spec.js
@@ -34,6 +34,7 @@ describe('DdlStore [Store]', () => {
 
     context('when the instance store triggers', () => {
       const coll = {
+        _id: 'coll1',
         name: 'spotify',
         document_count: 10,
         size: 200,
diff --git a/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.jsx b/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.jsx
index fc63d1088ea..6bff98d33d5 100644
--- a/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.jsx
+++ b/packages/compass-sidebar/src/components/sidebar-collection/sidebar-collection.jsx
@@ -23,7 +23,7 @@ class SidebarCollection extends PureComponent {
     sourcePipeline: PropTypes.array,
     pipeline: PropTypes.any, // undefined or array if view
     collections: PropTypes.array.isRequired,
-    type: PropTypes.oneOf(['collection', 'view']),
+    type: PropTypes.string,
     isDataLake: PropTypes.bool.isRequired
   };