diff --git a/frontend/src/metabase/admin/databases/containers/DatabaseListApp.jsx b/frontend/src/metabase/admin/databases/containers/DatabaseListApp.jsx
index 2c68cd70ca786..9f52b35ddeb85 100644
--- a/frontend/src/metabase/admin/databases/containers/DatabaseListApp.jsx
+++ b/frontend/src/metabase/admin/databases/containers/DatabaseListApp.jsx
@@ -158,7 +158,7 @@ export default class DatabaseList extends Component {
                 })}
               >
                 <a
-                  className="text-grey-2 text-brand-hover no-decoration"
+                  className="text-light text-brand-hover no-decoration"
                   onClick={() => this.props.addSampleDataset()}
                 >{t`Bring the sample dataset back`}</a>
               </span>
diff --git a/frontend/src/metabase/admin/datamodel/components/ObjectActionSelect.jsx b/frontend/src/metabase/admin/datamodel/components/ObjectActionSelect.jsx
index e8f857284c07f..d93fd995bb9a1 100644
--- a/frontend/src/metabase/admin/datamodel/components/ObjectActionSelect.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/ObjectActionSelect.jsx
@@ -29,7 +29,7 @@ export default class ObjectActionsSelect extends Component {
         <PopoverWithTrigger
           ref="popover"
           triggerElement={
-            <span className="text-grey-1 text-grey-4-hover">
+            <span className="text-light text-medium-hover">
               <Icon name={"ellipsis"} />
             </span>
           }
diff --git a/frontend/src/metabase/admin/datamodel/components/database/ColumnsList.jsx b/frontend/src/metabase/admin/datamodel/components/database/ColumnsList.jsx
index bb1f42b6263fd..434f90b16d4d9 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/ColumnsList.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/ColumnsList.jsx
@@ -15,7 +15,7 @@ export default class ColumnsList extends Component {
     return (
       <div id="ColumnsList" className="my3">
         <h2 className="px1 text-orange">{t`Columns`}</h2>
-        <div className="text-uppercase text-grey-3 py1">
+        <div className="text-uppercase text-medium py1">
           <div
             style={{ minWidth: 420 }}
             className="float-left px1"
diff --git a/frontend/src/metabase/admin/datamodel/components/database/MetadataHeader.jsx b/frontend/src/metabase/admin/datamodel/components/database/MetadataHeader.jsx
index 576498b45fc25..860afd6b47549 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/MetadataHeader.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/MetadataHeader.jsx
@@ -84,7 +84,7 @@ export default class MetadataHeader extends Component {
     return (
       <div className="MetadataEditor-header flex align-center flex-no-shrink">
         <div className="MetadataEditor-headerSection py2 h2">
-          <span className="text-grey-4">{t`Current database:`}</span>{" "}
+          <span className="text-medium">{t`Current database:`}</span>{" "}
           {this.renderDbSelector()}
         </div>
         <div className="MetadataEditor-headerSection flex flex-align-right align-center flex-no-shrink">
diff --git a/frontend/src/metabase/admin/datamodel/components/database/MetadataSchema.jsx b/frontend/src/metabase/admin/datamodel/components/database/MetadataSchema.jsx
index 0ef17b9b7e743..313e5b514d6e7 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/MetadataSchema.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/MetadataSchema.jsx
@@ -39,7 +39,7 @@ export default class MetadataSchema extends Component {
           </div>
         </div>
         <table className="mt2 full">
-          <thead className="text-uppercase text-grey-3 py1">
+          <thead className="text-uppercase text-medium py1">
             <tr>
               <th className={tdClassName}>{t`Column`}</th>
               <th className={tdClassName}>{t`Data Type`}</th>
diff --git a/frontend/src/metabase/admin/datamodel/components/database/MetadataTable.jsx b/frontend/src/metabase/admin/datamodel/components/database/MetadataTable.jsx
index def501db12b99..4e0dc0db7f36b 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/MetadataTable.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/MetadataTable.jsx
@@ -79,7 +79,7 @@ export default class MetadataTable extends Component {
     if (this.props.tableMetadata.visibility_type) {
       subTypes = (
         <span id="VisibilitySubTypes" className="border-left mx2">
-          <span className="mx2 text-uppercase text-grey-3">{t`Why Hide?`}</span>
+          <span className="mx2 text-uppercase text-medium">{t`Why Hide?`}</span>
           {this.renderVisibilityType(t`Technical Data`, "technical")}
           {this.renderVisibilityType(t`Irrelevant/Cruft`, "cruft")}
         </span>
@@ -117,7 +117,7 @@ export default class MetadataTable extends Component {
             placeholder={t`No table description yet`}
           />
         </div>
-        <div className="MetadataTable-header flex align-center py2 text-grey-3">
+        <div className="MetadataTable-header flex align-center py2 text-medium">
           <span className="mx1 text-uppercase">{t`Visibility`}</span>
           {this.renderVisibilityWidget()}
           <span className="flex-align-right flex align-center">
diff --git a/frontend/src/metabase/admin/datamodel/components/database/MetricsList.jsx b/frontend/src/metabase/admin/datamodel/components/database/MetricsList.jsx
index 7b58dfbfa1724..bd48ca1ad4016 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/MetricsList.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/MetricsList.jsx
@@ -50,7 +50,7 @@ export default class MetricsList extends Component {
           </tbody>
         </table>
         {tableMetadata.metrics.length === 0 && (
-          <div className="flex layout-centered m4 text-grey-3">
+          <div className="flex layout-centered m4 text-medium">
             {t`Create metrics to add them to the View dropdown in the query builder`}
           </div>
         )}
diff --git a/frontend/src/metabase/admin/datamodel/components/database/SegmentsList.jsx b/frontend/src/metabase/admin/datamodel/components/database/SegmentsList.jsx
index 3801e7abed03e..316e0353c29c9 100644
--- a/frontend/src/metabase/admin/datamodel/components/database/SegmentsList.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/database/SegmentsList.jsx
@@ -50,7 +50,7 @@ export default class SegmentsList extends Component {
           </tbody>
         </table>
         {tableMetadata.segments.length === 0 && (
-          <div className="flex layout-centered m4 text-grey-3">
+          <div className="flex layout-centered m4 text-medium">
             {t`Create segments to add them to the Filter dropdown in the query builder`}
           </div>
         )}
diff --git a/frontend/src/metabase/admin/datamodel/components/revisions/Revision.jsx b/frontend/src/metabase/admin/datamodel/components/revisions/Revision.jsx
index 688c901b64c01..c2f0b0638b601 100644
--- a/frontend/src/metabase/admin/datamodel/components/revisions/Revision.jsx
+++ b/frontend/src/metabase/admin/datamodel/components/revisions/Revision.jsx
@@ -72,7 +72,7 @@ export default class Revision extends Component {
           />
         </div>
         <div className="flex-full mt1 mb4">
-          <div className="flex mb1 text-grey-4">
+          <div className="flex mb1 text-medium">
             <span className="">
               <strong>{this.getName()}</strong> {this.getAction()}
             </span>
diff --git a/frontend/src/metabase/admin/datamodel/containers/FieldApp.jsx b/frontend/src/metabase/admin/datamodel/containers/FieldApp.jsx
index 2814efbc573ed..bdc10d3171b94 100644
--- a/frontend/src/metabase/admin/datamodel/containers/FieldApp.jsx
+++ b/frontend/src/metabase/admin/datamodel/containers/FieldApp.jsx
@@ -284,7 +284,7 @@ export const BackButton = ({ databaseId, tableId }) => (
 );
 
 const SelectSeparator = () => (
-  <Icon name="chevronright" size={12} className="mx2 text-grey-3" />
+  <Icon name="chevronright" size={12} className="mx2 text-medium" />
 );
 
 export class FieldHeader extends Component {
@@ -469,7 +469,7 @@ export const SectionHeader = ({ title, description }) => (
   <div className="border-bottom py2 mb2">
     <h2 className="text-italic">{title}</h2>
     {description && (
-      <p className="mb0 text-grey-4 mt1 text-paragraph text-measure">
+      <p className="mb0 text-medium mt1 text-paragraph text-measure">
         {description}
       </p>
     )}
@@ -727,7 +727,7 @@ export class FieldRemapping extends Component {
                 {fkMappingField ? (
                   fkMappingField.display_name
                 ) : (
-                  <span className="text-grey-1">{t`Choose a field`}</span>
+                  <span className="text-light">{t`Choose a field`}</span>
                 )}
               </SelectButton>
             }
diff --git a/frontend/src/metabase/admin/people/components/GroupDetail.jsx b/frontend/src/metabase/admin/people/components/GroupDetail.jsx
index add1f3a65aec1..a0f7c6cb46efd 100644
--- a/frontend/src/metabase/admin/people/components/GroupDetail.jsx
+++ b/frontend/src/metabase/admin/people/components/GroupDetail.jsx
@@ -118,7 +118,7 @@ const AddUserRow = ({
           <div className="bg-medium p1 px2 mr1 rounded flex align-center">
             {user.common_name}
             <Icon
-              className="pl1 cursor-pointer text-slate text-grey-4-hover"
+              className="pl1 cursor-pointer text-slate text-medium-hover"
               name="close"
               onClick={() => onRemoveUserFromSelection(user)}
             />
@@ -147,7 +147,7 @@ const UserRow = ({ user, showRemoveButton, onRemoveUserClicked }) => (
         className="text-right cursor-pointer"
         onClick={onRemoveUserClicked.bind(null, user)}
       >
-        <Icon name="close" className="text-grey-1" size={16} />
+        <Icon name="close" className="text-light" size={16} />
       </td>
     ) : null}
   </tr>
diff --git a/frontend/src/metabase/admin/people/components/GroupsListing.jsx b/frontend/src/metabase/admin/people/components/GroupsListing.jsx
index d1858b0daf787..a3cd6c2605dd1 100644
--- a/frontend/src/metabase/admin/people/components/GroupsListing.jsx
+++ b/frontend/src/metabase/admin/people/components/GroupsListing.jsx
@@ -79,7 +79,7 @@ function ActionsPopover({ group, onEditGroupClicked, onDeleteGroupClicked }) {
   return (
     <PopoverWithTrigger
       className="block"
-      triggerElement={<Icon className="text-grey-1" name="ellipsis" />}
+      triggerElement={<Icon className="text-light" name="ellipsis" />}
     >
       <ul className="UserActionsSelect">
         <li
diff --git a/frontend/src/metabase/admin/people/components/UserActionsSelect.jsx b/frontend/src/metabase/admin/people/components/UserActionsSelect.jsx
index d1bdb6beeb462..65ab545de807f 100644
--- a/frontend/src/metabase/admin/people/components/UserActionsSelect.jsx
+++ b/frontend/src/metabase/admin/people/components/UserActionsSelect.jsx
@@ -67,7 +67,7 @@ export default class UserActionsSelect extends Component {
         ref="popover"
         className="block"
         triggerElement={
-          <span className="text-grey-1">
+          <span className="text-light">
             <Icon name={"ellipsis"} />
           </span>
         }
diff --git a/frontend/src/metabase/admin/people/components/UserGroupSelect.jsx b/frontend/src/metabase/admin/people/components/UserGroupSelect.jsx
index 880a55b0dd444..602a9485d40b4 100644
--- a/frontend/src/metabase/admin/people/components/UserGroupSelect.jsx
+++ b/frontend/src/metabase/admin/people/components/UserGroupSelect.jsx
@@ -69,10 +69,10 @@ export default class UserGroupSelect extends Component {
         ref="popover"
         triggerElement={
           <div className="flex align-center">
-            <span className="mr1 text-grey-4">
+            <span className="mr1 text-medium">
               <GroupSummary groups={groups} selectedGroups={user.memberships} />
             </span>
-            <Icon className="text-grey-2" name="chevrondown" size={10} />
+            <Icon className="text-light" name="chevrondown" size={10} />
           </div>
         }
         triggerClasses="AdminSelectBorderless py1"
diff --git a/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx b/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx
index 61d01a5c14d3b..dee048a4d68e9 100644
--- a/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx
+++ b/frontend/src/metabase/admin/people/containers/PeopleListingApp.jsx
@@ -514,7 +514,7 @@ export default class PeopleListingApp extends Component {
                               <Tooltip tooltip={t`Reactivate this account`}>
                                 <Icon
                                   name="refresh"
-                                  className="text-grey-1 text-brand-hover cursor-pointer"
+                                  className="text-light text-brand-hover cursor-pointer"
                                   size={20}
                                   onClick={() =>
                                     this.props.showModal({
diff --git a/frontend/src/metabase/admin/permissions/components/PermissionsGrid.jsx b/frontend/src/metabase/admin/permissions/components/PermissionsGrid.jsx
index 5e8d9a83d508a..3c8178bf81f47 100644
--- a/frontend/src/metabase/admin/permissions/components/PermissionsGrid.jsx
+++ b/frontend/src/metabase/admin/permissions/components/PermissionsGrid.jsx
@@ -71,7 +71,7 @@ const PermissionsHeader = ({ permissions, isFirst, isLast }) => (
         }}
       >
         {permission.header && (
-          <h5 className="my1 text-centered text-grey-3 text-uppercase text-light">
+          <h5 className="my1 text-centered text-medium text-uppercase text-light">
             {permission.header}
           </h5>
         )}
@@ -117,12 +117,17 @@ const EntityHeader = ({
   isLast,
 }) => (
   <div className="flex flex-column">
-    <div className={cx("relative flex", { "align-self-center mb1": isColumn })}>
+    <div
+      className={cx("relative flex", {
+        "align-self-center mb1": isColumn,
+        "align-center": !isColumn,
+      })}
+    >
       <Icon name={icon} className="mr1" />
-      <div className="flex-full">
+      <div>
         <h4>{entity.name}</h4>
         {entity.subtitle && (
-          <div className="mt1 h5 text-monospace text-normal text-grey-2 text-uppercase">
+          <div className="mt1 h5 text-monospace text-normal text-light text-uppercase">
             {entity.subtitle}
           </div>
         )}
diff --git a/frontend/src/metabase/admin/settings/components/SettingHeader.jsx b/frontend/src/metabase/admin/settings/components/SettingHeader.jsx
index 40f71a1539df0..2694aa222e168 100644
--- a/frontend/src/metabase/admin/settings/components/SettingHeader.jsx
+++ b/frontend/src/metabase/admin/settings/components/SettingHeader.jsx
@@ -2,10 +2,10 @@ import React from "react";
 
 const SettingHeader = ({ setting }) => (
   <div>
-    <div className="text-grey-4 text-bold text-uppercase">
+    <div className="text-medium text-bold text-uppercase">
       {setting.display_name}
     </div>
-    <div className="text-grey-4 text-measure my1">
+    <div className="text-medium text-measure my1">
       {setting.description}
       {setting.note && <div>{setting.note}</div>}
     </div>
diff --git a/frontend/src/metabase/admin/settings/components/SettingsSetupList.jsx b/frontend/src/metabase/admin/settings/components/SettingsSetupList.jsx
index e53a0d5a95b0c..a76191d4cf9f1 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsSetupList.jsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsSetupList.jsx
@@ -17,7 +17,7 @@ const TaskList = ({ tasks }) => (
 );
 
 const TaskSectionHeader = ({ name }) => (
-  <h4 className="text-grey-4 text-bold text-uppercase pb2">{name}</h4>
+  <h4 className="text-medium text-bold text-uppercase pb2">{name}</h4>
 );
 
 const TaskSection = ({ name, tasks }) => (
diff --git a/frontend/src/metabase/admin/settings/components/SettingsSingleSignOnForm.jsx b/frontend/src/metabase/admin/settings/components/SettingsSingleSignOnForm.jsx
index ef04708c76492..a64966b0d7111 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsSingleSignOnForm.jsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsSingleSignOnForm.jsx
@@ -116,10 +116,10 @@ export default class SettingsSingleSignOnForm extends Component {
             className="mb2"
           />
           <h2>{t`Sign in with Google`}</h2>
-          <p className="text-grey-4">
+          <p className="text-medium">
             {t`Allows users with existing Metabase accounts to login with a Google account that matches their email address in addition to their Metabase username and password.`}
           </p>
-          <p className="text-grey-4">
+          <p className="text-medium">
             {jt`To allow users to sign in with Google you'll need to give Metabase a Google Developers console application client ID. It only takes a few steps and instructions on how to create a key can be found ${(
               <a
                 className="link"
@@ -139,7 +139,7 @@ export default class SettingsSingleSignOnForm extends Component {
           />
           <div className="py3">
             <div className="flex align-center">
-              <p className="text-grey-4">{t`Allow users to sign up on their own if their Google account email address is from:`}</p>
+              <p className="text-medium">{t`Allow users to sign up on their own if their Google account email address is from:`}</p>
             </div>
             <div className="mt1 bordered rounded inline-block">
               <div className="inline-block px2 h2">@</div>
diff --git a/frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx b/frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx
index 35aa29f65917a..cdb79ec0ee9ac 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsSlackForm.jsx
@@ -239,7 +239,7 @@ export default class SettingsSlackForm extends Component {
             />
             Slack
           </h1>
-          <h3 className="text-grey-1">{t`Answers sent right to your Slack #channels`}</h3>
+          <h3 className="text-light">{t`Answers sent right to your Slack #channels`}</h3>
 
           <div className="pt3">
             <a
diff --git a/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm.jsx b/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm.jsx
index a98cada9c614a..0773fad426a66 100644
--- a/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm.jsx
+++ b/frontend/src/metabase/admin/settings/components/SettingsUpdatesForm.jsx
@@ -21,7 +21,7 @@ export default class SettingsUpdatesForm extends Component {
   renderVersion(version) {
     return (
       <div className="pb3">
-        <h3 className="text-grey-4">
+        <h3 className="text-medium">
           {this.removeVersionPrefixIfNeeded(version.version)}{" "}
           {version.patch ? "(patch release)" : null}
         </h3>
@@ -112,7 +112,7 @@ export default class SettingsUpdatesForm extends Component {
             >{t`Update`}</a>
           </div>
 
-          <div className="text-grey-3">
+          <div className="text-medium">
             <h3 className="py3 text-uppercase">{t`What's Changed:`}</h3>
 
             {this.renderVersion(versionInfo.latest)}
diff --git a/frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx b/frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx
index ca0170a61ee18..64d3a3ba589be 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/CustomGeoJSONWidget.jsx
@@ -255,9 +255,9 @@ const SettingContainer = ({
 }) => (
   <div className={className}>
     {name && (
-      <div className="text-grey-4 text-bold text-uppercase my1">{name}</div>
+      <div className="text-medium text-bold text-uppercase my1">{name}</div>
     )}
-    {description && <div className="text-grey-4 my1">{description}</div>}
+    {description && <div className="text-medium my1">{description}</div>}
     {children}
   </div>
 );
@@ -341,7 +341,7 @@ const EditMap = ({
             )}
           </LoadingAndErrorWrapper>
         ) : (
-          <div className="flex-full flex layout-centered text-bold text-grey-1 text-centered">
+          <div className="flex-full flex layout-centered text-bold text-light text-centered">
             {t`Load a GeoJSON file to see a preview`}
           </div>
         )}
diff --git a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingLegalese.jsx b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingLegalese.jsx
index 6bd1b1d2a2a9e..01bae33b4da44 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingLegalese.jsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingLegalese.jsx
@@ -5,7 +5,7 @@ import { t } from "c-3po";
 const EmbeddingLegalese = ({ onChange }) => (
   <div className="bordered rounded text-measure p4">
     <h3 className="text-brand">{t`Using embedding`}</h3>
-    <p className="text-grey-4" style={{ lineHeight: 1.48 }}>
+    <p className="text-medium" style={{ lineHeight: 1.48 }}>
       {t`By enabling embedding you're agreeing to the embedding license located at`}{" "}
       <a
         className="link"
@@ -15,7 +15,7 @@ const EmbeddingLegalese = ({ onChange }) => (
         metabase.com/license/embedding
       </a>.
     </p>
-    <p className="text-grey-4" style={{ lineHeight: 1.48 }}>
+    <p className="text-medium" style={{ lineHeight: 1.48 }}>
       {t`In plain English, when you embed charts or dashboards from Metabase in your own application, that application isn't subject to the Affero General Public License that covers the rest of Metabase, provided you keep the Metabase logo and the "Powered by Metabase" visible on those embeds. You should, however, read the license text linked above as that is the actual license that you will be agreeing to by enabling this feature.`}
     </p>
     <div className="flex layout-centered mt4">
diff --git a/frontend/src/metabase/admin/settings/components/widgets/LdapGroupMappingsWidget.jsx b/frontend/src/metabase/admin/settings/components/widgets/LdapGroupMappingsWidget.jsx
index 0fbd283ea79f4..368c6de340338 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/LdapGroupMappingsWidget.jsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/LdapGroupMappingsWidget.jsx
@@ -278,10 +278,10 @@ class MappingGroupSelect extends React.Component {
         ref="popover"
         triggerElement={
           <div className="flex align-center">
-            <span className="mr1 text-grey-4">
+            <span className="mr1 text-medium">
               <GroupSummary groups={groups} selectedGroups={selected} />
             </span>
-            <Icon className="text-grey-2" name="chevrondown" size={10} />
+            <Icon className="text-light" name="chevrondown" size={10} />
           </div>
         }
         triggerClasses="AdminSelectBorderless py1"
diff --git a/frontend/src/metabase/admin/settings/components/widgets/PublicLinksListing.jsx b/frontend/src/metabase/admin/settings/components/widgets/PublicLinksListing.jsx
index 87eecc50b87a5..2786326438fc4 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/PublicLinksListing.jsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/PublicLinksListing.jsx
@@ -127,7 +127,7 @@ export default class PublicLinksListing extends Component {
                         >
                           <Icon
                             name="close"
-                            className="text-grey-2 text-grey-4-hover cursor-pointer"
+                            className="text-light text-medium-hover cursor-pointer"
                           />
                         </Confirm>
                       </td>
diff --git a/frontend/src/metabase/auth/containers/LoginApp.jsx b/frontend/src/metabase/auth/containers/LoginApp.jsx
index 4c485df34be55..45ca45d265f52 100644
--- a/frontend/src/metabase/auth/containers/LoginApp.jsx
+++ b/frontend/src/metabase/auth/containers/LoginApp.jsx
@@ -133,7 +133,7 @@ export default class LoginApp extends Component {
                     className="mx1 absolute text-centered left right"
                     style={{ bottom: -8 }}
                   >
-                    <span className="text-bold px3 py2 text-grey-3 bg-white">{t`OR`}</span>
+                    <span className="text-bold px3 py2 text-medium bg-white">{t`OR`}</span>
                   </div>
                 </div>
               )}
@@ -220,7 +220,7 @@ export default class LoginApp extends Component {
                       ? "?email=" + this.state.credentials.username
                       : "")
                   }
-                  className="Grid-cell py2 sm-py0 text-grey-3 md-text-right text-centered flex-full link"
+                  className="Grid-cell py2 sm-py0 text-medium md-text-right text-centered flex-full link"
                   onClick={e => {
                     window.OSX ? window.OSX.resetPassword() : null;
                   }}
diff --git a/frontend/src/metabase/auth/containers/PasswordResetApp.jsx b/frontend/src/metabase/auth/containers/PasswordResetApp.jsx
index d7886045ef34d..68219853dec87 100644
--- a/frontend/src/metabase/auth/containers/PasswordResetApp.jsx
+++ b/frontend/src/metabase/auth/containers/PasswordResetApp.jsx
@@ -146,7 +146,7 @@ export default class PasswordResetApp extends Component {
                 >
                   <h3 className="Login-header Form-offset">{t`New password`}</h3>
 
-                  <p className="Form-offset text-grey-3 mb4">{t`To keep your data secure, passwords ${passwordComplexity}`}</p>
+                  <p className="Form-offset text-medium mb4">{t`To keep your data secure, passwords ${passwordComplexity}`}</p>
 
                   <FormMessage
                     formError={
diff --git a/frontend/src/metabase/collections/containers/CollectionCreate.jsx b/frontend/src/metabase/collections/containers/CollectionCreate.jsx
index 37f12efc9307d..1f35cbca8b996 100644
--- a/frontend/src/metabase/collections/containers/CollectionCreate.jsx
+++ b/frontend/src/metabase/collections/containers/CollectionCreate.jsx
@@ -3,22 +3,30 @@ import { connect } from "react-redux";
 import { goBack } from "react-router-redux";
 
 import CollectionForm from "metabase/containers/CollectionForm";
+import Collections from "metabase/entities/collections";
 
-@connect(null, { goBack })
+const mapStateToProps = (state, props) => ({
+  initialCollectionId: Collections.selectors.getInitialCollectionId(
+    state,
+    props,
+  ),
+});
+
+const mapDispatchToProps = {
+  goBack,
+};
+
+@connect(mapStateToProps, mapDispatchToProps)
 export default class CollectionCreate extends Component {
   render() {
-    const { params } = this.props;
-    const collectionId =
-      params && params.collectionId != null && params.collectionId !== "root"
-        ? parseInt(params.collectionId)
-        : null;
+    const { initialCollectionId, goBack } = this.props;
     return (
       <CollectionForm
         collection={{
-          parent_id: collectionId,
+          parent_id: initialCollectionId,
         }}
-        onSaved={() => this.props.goBack()}
-        onClose={this.props.goBack}
+        onSaved={goBack}
+        onClose={goBack}
       />
     );
   }
diff --git a/frontend/src/metabase/components/AccordianList.jsx b/frontend/src/metabase/components/AccordianList.jsx
index 7468e21a94e8d..80aa0c2431d14 100644
--- a/frontend/src/metabase/components/AccordianList.jsx
+++ b/frontend/src/metabase/components/AccordianList.jsx
@@ -368,7 +368,7 @@ export default class AccordianList extends Component {
                 >
                   {type === "header" ? (
                     alwaysExpanded ? (
-                      <div className="px2 pt2 pb1 h6 text-grey-2 text-uppercase text-bold">
+                      <div className="px2 pt2 pb1 h6 text-light text-uppercase text-bold">
                         {section.name}
                       </div>
                     ) : (
diff --git a/frontend/src/metabase/components/ActivityFeed.js b/frontend/src/metabase/components/ActivityFeed.js
deleted file mode 100644
index e60b68b5d524d..0000000000000
--- a/frontend/src/metabase/components/ActivityFeed.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import HomepageApp from "metabase/home/containers/HomepageApp";
-
-class ActivityFeed extends React.Component {
-  render() {
-    return <HomepageApp />;
-  }
-}
-
-export default ActivityFeed;
diff --git a/frontend/src/metabase/components/AdminEmptyText.jsx b/frontend/src/metabase/components/AdminEmptyText.jsx
index 79270885cfe9a..6df1372edec59 100644
--- a/frontend/src/metabase/components/AdminEmptyText.jsx
+++ b/frontend/src/metabase/components/AdminEmptyText.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 
 const AdminEmptyText = ({ message }) => (
-  <h2 className="text-grey-3">{message}</h2>
+  <h2 className="text-medium">{message}</h2>
 );
 
 AdminEmptyText.propTypes = {
diff --git a/frontend/src/metabase/components/AdminHeader.jsx b/frontend/src/metabase/components/AdminHeader.jsx
index b85e2b86d0839..8b21a6a6a4e85 100644
--- a/frontend/src/metabase/components/AdminHeader.jsx
+++ b/frontend/src/metabase/components/AdminHeader.jsx
@@ -6,7 +6,7 @@ export default class AdminHeader extends Component {
   render() {
     return (
       <div className="MetadataEditor-header clearfix relative flex-no-shrink">
-        <div className="MetadataEditor-headerSection float-left h2 text-grey-4">
+        <div className="MetadataEditor-headerSection float-left h2 text-medium">
           {this.props.title}
         </div>
         <div className="MetadataEditor-headerSection absolute right float-right top bottom flex layout-centered">
diff --git a/frontend/src/metabase/components/BrowseApp.jsx b/frontend/src/metabase/components/BrowseApp.jsx
index 23bc6034a1a07..54b6369eb1217 100644
--- a/frontend/src/metabase/components/BrowseApp.jsx
+++ b/frontend/src/metabase/components/BrowseApp.jsx
@@ -66,7 +66,7 @@ export class SchemaBrowser extends React.Component {
                 </Box>
                 <Grid>
                   {schemas.map(schema => (
-                    <GridItem w={ITEM_WIDTHS}>
+                    <GridItem w={ITEM_WIDTHS} key={schema.id}>
                       <Link
                         to={`/browse/${dbId}/schema/${schema.name}`}
                         mb={1}
@@ -124,7 +124,7 @@ export class TableBrowser extends React.Component {
                     }).getUrl();
 
                     return (
-                      <GridItem w={ITEM_WIDTHS}>
+                      <GridItem w={ITEM_WIDTHS} key={table.id}>
                         <Card
                           hoverable
                           px={1}
@@ -202,7 +202,7 @@ export class DatabaseBrowser extends React.Component {
             return (
               <Grid>
                 {databases.map(database => (
-                  <GridItem w={ITEM_WIDTHS}>
+                  <GridItem w={ITEM_WIDTHS} key={database.id}>
                     <Link to={`browse/${database.id}`}>
                       <Card p={3} hover={{ color: normal.blue }}>
                         <Icon name="database" color={normal.grey2} mb={3} />
diff --git a/frontend/src/metabase/components/BrowserCrumbs.jsx b/frontend/src/metabase/components/BrowserCrumbs.jsx
index 92ba2d1724b62..5baaf90a3867c 100644
--- a/frontend/src/metabase/components/BrowserCrumbs.jsx
+++ b/frontend/src/metabase/components/BrowserCrumbs.jsx
@@ -9,7 +9,7 @@ import colors from "metabase/lib/colors";
 
 const Crumb = ({ children }) => (
   <h5
-    className="text-uppercase text-brand-hover text-grey-3"
+    className="text-uppercase text-brand-hover text-medium"
     style={{ fontWeight: 900 }}
   >
     {children}
diff --git a/frontend/src/metabase/components/BulkActionBar.jsx b/frontend/src/metabase/components/BulkActionBar.jsx
index 9ebcbe6c302d2..335c642994d20 100644
--- a/frontend/src/metabase/components/BulkActionBar.jsx
+++ b/frontend/src/metabase/components/BulkActionBar.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Flex } from "grid-styled";
+import { Box } from "grid-styled";
 import Card from "metabase/components/Card";
 import { Motion, spring } from "react-motion";
 
@@ -29,11 +29,7 @@ const BulkActionBar = ({ children, showing }) => (
           transform: `translateY(${translateY}px)`,
         }}
       >
-        <Card>
-          <Flex align="center" py={2} px={4}>
-            {children}
-          </Flex>
-        </Card>
+        <Card>{children}</Card>
       </FixedBottomBar>
     )}
   </Motion>
diff --git a/frontend/src/metabase/components/ChannelSetupMessage.jsx b/frontend/src/metabase/components/ChannelSetupMessage.jsx
index 154984aeab12c..136d229ce5256 100644
--- a/frontend/src/metabase/components/ChannelSetupMessage.jsx
+++ b/frontend/src/metabase/components/ChannelSetupMessage.jsx
@@ -38,7 +38,7 @@ export default class ChannelSetupMessage extends Component {
       let adminEmail = Settings.get("admin_email");
       content = (
         <div className="mb1">
-          <h4 className="text-grey-4">{t`Your admin's email address`}:</h4>
+          <h4 className="text-medium">{t`Your admin's email address`}:</h4>
           <a className="h2 link no-decoration" href={"mailto:" + adminEmail}>
             {adminEmail}
           </a>
diff --git a/frontend/src/metabase/components/CollectionEmptyState.jsx b/frontend/src/metabase/components/CollectionEmptyState.jsx
index f8965abc07b62..29231f03dd649 100644
--- a/frontend/src/metabase/components/CollectionEmptyState.jsx
+++ b/frontend/src/metabase/components/CollectionEmptyState.jsx
@@ -2,11 +2,15 @@ import React from "react";
 import { Box } from "grid-styled";
 import { t } from "c-3po";
 import RetinaImage from "react-retina-image";
+import { withRouter } from "react-router";
+
 import Subhead from "metabase/components/Subhead";
+import Link from "metabase/components/Link";
 
+import * as Urls from "metabase/lib/urls";
 import { normal } from "metabase/lib/colors";
 
-const CollectionEmptyState = () => {
+const CollectionEmptyState = ({ params }) => {
   return (
     <Box py={2}>
       <Box mb={3}>
@@ -19,12 +23,17 @@ const CollectionEmptyState = () => {
         <Subhead color={normal.grey2}>
           {t`This collection is empty, like a blank canvas`}
         </Subhead>
-        <p className="text-paragraph text-grey-2">
+        <p className="text-paragraph text-medium">
           {t`You can use collections to organize and group dashboards, questions and pulses for your team or yourself`}
         </p>
+        <Link
+          className="link text-bold"
+          mt={2}
+          to={Urls.newCollection(params.collectionId)}
+        >{t`Create a sub collection`}</Link>
       </Box>
     </Box>
   );
 };
 
-export default CollectionEmptyState;
+export default withRouter(CollectionEmptyState);
diff --git a/frontend/src/metabase/components/CollectionItem.jsx b/frontend/src/metabase/components/CollectionItem.jsx
index b823b1ac2080d..4ed2f712ee2ff 100644
--- a/frontend/src/metabase/components/CollectionItem.jsx
+++ b/frontend/src/metabase/components/CollectionItem.jsx
@@ -6,13 +6,28 @@ import Link from "metabase/components/Link";
 
 import colors from "metabase/lib/colors";
 
-const CollectionItem = ({ collection, color, iconName = "all" }) => (
+const CollectionItem = ({
+  collection,
+  color,
+  iconName = "all",
+  highlighted,
+  hovered,
+}) => (
   <Link
     to={`collection/${collection.id}`}
-    bg={colors["bg-medium"]}
-    className="block rounded relative text-brand-hover text-medium"
-    hover={{
-      backgroundColor: colors["bg-medium"],
+    bg={
+      hovered
+        ? colors["brand"]
+        : highlighted ? colors["bg-light"] : colors["bg-medium"]
+    }
+    color={hovered ? "white" : colors["text-medium"]}
+    className="block rounded relative text-brand-hover"
+    style={{
+      borderSize: 1,
+      borderColor: hovered
+        ? colors["brand"]
+        : highlighted ? colors["bg-medium"] : "transparent",
+      borderStyle: hovered ? "solid" : highlighted ? "dotted" : "solid",
     }}
     p={[1, 2]}
   >
diff --git a/frontend/src/metabase/components/CollectionLanding.jsx b/frontend/src/metabase/components/CollectionLanding.jsx
index 764e62227181b..cc17bc901c51d 100644
--- a/frontend/src/metabase/components/CollectionLanding.jsx
+++ b/frontend/src/metabase/components/CollectionLanding.jsx
@@ -1,12 +1,13 @@
 import React from "react";
 import { Box, Flex } from "grid-styled";
-import { t } from "c-3po";
+import { t, msgid, ngettext } from "c-3po";
 import { connect } from "react-redux";
+import { withRouter } from "react-router";
 import _ from "underscore";
+import cx from "classnames";
+
 import listSelect from "metabase/hoc/ListSelect";
 import BulkActionBar from "metabase/components/BulkActionBar";
-import cx from "classnames";
-import { withRouter } from "react-router";
 
 import * as Urls from "metabase/lib/urls";
 import colors, { normal } from "metabase/lib/colors";
@@ -23,6 +24,7 @@ import EntityMenu from "metabase/components/EntityMenu";
 import VirtualizedList from "metabase/components/VirtualizedList";
 import BrowserCrumbs from "metabase/components/BrowserCrumbs";
 import ItemTypeFilterBar from "metabase/components/ItemTypeFilterBar";
+import CollectionEmptyState from "metabase/components/CollectionEmptyState";
 
 import CollectionMoveModal from "metabase/containers/CollectionMoveModal";
 import { entityObjectLoader } from "metabase/entities/containers/EntityObjectLoader";
@@ -45,7 +47,7 @@ const EmptyStateWrapper = ({ children }) => (
   <Flex
     align="center"
     justify="center"
-    py={3}
+    p={5}
     flexDirection="column"
     w={1}
     h={"200px"}
@@ -79,7 +81,7 @@ const QuestionEmptyState = () => (
     <Box>
       <Icon name="beaker" size={32} />
     </Box>
-    <h3>{t`Quesitons are a saved look at your data.`}</h3>
+    <h3>{t`Questions are a saved look at your data.`}</h3>
   </EmptyStateWrapper>
 );
 
@@ -121,6 +123,38 @@ class DefaultLanding extends React.Component {
     moveItems: null,
   };
 
+  handleBulkArchive = async () => {
+    try {
+      await Promise.all(
+        this.props.selected.map(item => item.setArchived(true)),
+      );
+    } finally {
+      this.handleBulkActionSuccess();
+    }
+  };
+
+  handleBulkMoveStart = () => {
+    this.setState({ moveItems: this.props.selected });
+  };
+
+  handleBulkMove = async collection => {
+    try {
+      await Promise.all(
+        this.state.moveItems.map(item => item.setCollection(collection)),
+      );
+      this.setState({ moveItems: null });
+    } finally {
+      this.handleBulkActionSuccess();
+    }
+  };
+
+  handleBulkActionSuccess = () => {
+    // Clear the selection in listSelect
+    // Fixes an issue where things were staying selected when moving between
+    // different collection pages
+    this.props.onSelectNone();
+  };
+
   render() {
     const {
       ancestors,
@@ -135,19 +169,10 @@ class DefaultLanding extends React.Component {
       selected,
       selection,
       onToggleSelected,
-      onSelectNone,
       location,
     } = this.props;
     const { moveItems } = this.state;
 
-    // Call this when finishing a bulk action
-    const onBulkActionSuccess = () => {
-      // Clear the selection in listSelect
-      // Fixes an issue where things were staying selected when moving between
-      // different collection pages
-      onSelectNone();
-    };
-
     const collectionWidth = unpinned.length > 0 ? [1, 1 / 3] : 1;
     const itemWidth = unpinned.length > 0 ? [1, 2 / 3] : 0;
     const collectionGridSize = unpinned.length > 0 ? 1 : [1, 1 / 4];
@@ -158,6 +183,10 @@ class DefaultLanding extends React.Component {
       unpinnedItems = unpinned.filter(u => u.model === location.query.type);
     }
 
+    const collectionIsEmpty = !unpinned.length > 0 && !collections.length > 0;
+    const collectionHasPins = pinned.length > 0;
+    const collectionHasItems = unpinned.length > 0;
+
     return (
       <Box>
         <Box>
@@ -204,7 +233,7 @@ class DefaultLanding extends React.Component {
           </Flex>
           <Box>
             <Box>
-              {pinned.length > 0 ? (
+              {collectionHasPins ? (
                 <Box px={PAGE_PADDING} pt={2} pb={3} bg={colors["bg-medium"]}>
                   <CollectionSectionHeading>{t`Pins`}</CollectionSectionHeading>
                   <PinDropTarget
@@ -256,7 +285,7 @@ class DefaultLanding extends React.Component {
                     <div
                       className={cx(
                         "p2 flex layout-centered",
-                        hovered ? "text-brand" : "text-grey-2",
+                        hovered ? "text-brand" : "text-light",
                       )}
                     >
                       <Icon name="pin" mr={1} />
@@ -268,21 +297,23 @@ class DefaultLanding extends React.Component {
               <Box pt={[1, 2]} px={[2, 4]}>
                 <Grid>
                   <GridItem w={collectionWidth}>
-                    <Box pr={2} className="relative">
-                      <Box py={2}>
-                        <CollectionSectionHeading>
-                          {t`Collections`}
-                        </CollectionSectionHeading>
+                    {!collectionIsEmpty && (
+                      <Box pr={2} className="relative">
+                        <Box py={2}>
+                          <CollectionSectionHeading>
+                            {t`Collections`}
+                          </CollectionSectionHeading>
+                        </Box>
+                        <CollectionList
+                          currentCollection={collection}
+                          collections={collections}
+                          isRoot={collectionId === "root"}
+                          w={collectionGridSize}
+                        />
                       </Box>
-                      <CollectionList
-                        currentCollection={collection}
-                        collections={collections}
-                        isRoot={collectionId === "root"}
-                        w={collectionGridSize}
-                      />
-                    </Box>
+                    )}
                   </GridItem>
-                  {unpinned.length > 0 && (
+                  {collectionHasItems && (
                     <GridItem w={itemWidth}>
                       <Box>
                         <ItemTypeFilterBar />
@@ -333,7 +364,7 @@ class DefaultLanding extends React.Component {
                                   <div
                                     className={cx(
                                       "m2 flex layout-centered",
-                                      hovered ? "text-brand" : "text-grey-2",
+                                      hovered ? "text-brand" : "text-light",
                                     )}
                                   >
                                     {t`Drag here to un-pin`}
@@ -347,63 +378,79 @@ class DefaultLanding extends React.Component {
                     </GridItem>
                   )}
                 </Grid>
+                {unpinned.length === 0 && (
+                  <PinDropTarget pinIndex={null} hideUntilDrag margin={10}>
+                    {({ hovered }) => (
+                      <Flex
+                        align="center"
+                        justify="center"
+                        py={2}
+                        m={2}
+                        color={
+                          hovered ? colors["brand"] : colors["text-medium"]
+                        }
+                      >
+                        {t`Drag here to un-pin`}
+                      </Flex>
+                    )}
+                  </PinDropTarget>
+                )}
+
+                {collectionIsEmpty && (
+                  <Flex align="center" justify="center" w={1}>
+                    <CollectionEmptyState />
+                  </Flex>
+                )}
               </Box>
             </Box>
             <BulkActionBar showing={selected.length > 0}>
-              <Flex align="center">
-                <Flex align="center">
-                  <SelectionControls {...this.props} />
-                  <BulkActionControls
-                    onArchive={
-                      _.all(selected, item => item.setArchived)
-                        ? async () => {
-                            try {
-                              await Promise.all(
-                                selected.map(item => item.setArchived(true)),
-                              );
-                            } finally {
-                              onBulkActionSuccess();
-                            }
-                          }
-                        : null
-                    }
-                    onMove={
-                      _.all(selected, item => item.setCollection)
-                        ? () => {
-                            this.setState({ moveItems: selected });
-                          }
-                        : null
-                    }
-                  />
-                  <Box ml="auto">{t`${selected.length} items selected`}</Box>
-                </Flex>
-              </Flex>
+              {/* NOTE: these padding and grid sizes must be carefully matched
+                   to the main content above to ensure the bulk checkbox lines up */}
+              <Box px={[2, 4]} py={1}>
+                <Grid>
+                  <GridItem w={collectionWidth} />
+                  <GridItem w={itemWidth} px={[1, 2]}>
+                    <Flex align="center" justify="center" px={2}>
+                      <SelectionControls {...this.props} />
+                      <BulkActionControls
+                        onArchive={
+                          _.all(selected, item => item.setArchived)
+                            ? this.handleBulkArchive
+                            : null
+                        }
+                        onMove={
+                          _.all(selected, item => item.setCollection)
+                            ? this.handleBulkMoveStart
+                            : null
+                        }
+                      />
+                      <Box ml="auto">
+                        {ngettext(
+                          msgid`${selected.length} item selected`,
+                          `${selected.length} items selected`,
+                          selected.length,
+                        )}
+                      </Box>
+                    </Flex>
+                  </GridItem>
+                </Grid>
+              </Box>
             </BulkActionBar>
           </Box>
         </Box>
-        {moveItems &&
-          moveItems.length > 0 && (
-            <Modal>
-              <CollectionMoveModal
-                title={
-                  moveItems.length > 1
-                    ? t`Move ${moveItems.length} items?`
-                    : `Move "${moveItems[0].getName()}"?`
-                }
-                onClose={() => this.setState({ moveItems: null })}
-                onMove={async collection => {
-                  try {
-                    await Promise.all(
-                      moveItems.map(item => item.setCollection(collection)),
-                    );
-                    this.setState({ moveItems: null });
-                  } finally {
-                    onBulkActionSuccess();
-                  }
-                }}
-              />
-            </Modal>
-          )}
+        {!_.isEmpty(moveItems) && (
+          <Modal>
+            <CollectionMoveModal
+              title={
+                moveItems.length > 1
+                  ? t`Move ${moveItems.length} items?`
+                  : t`Move "${moveItems[0].getName()}"?`
+              }
+              onClose={() => this.setState({ moveItems: null })}
+              onMove={this.handleBulkMove}
+            />
+          </Modal>
+        )}
         <ItemsDragLayer selected={selected} />
       </Box>
     );
@@ -497,18 +544,20 @@ const SelectionControls = ({
   deselected,
   onSelectAll,
   onSelectNone,
+  size = 18,
 }) =>
   deselected.length === 0 ? (
-    <StackedCheckBox checked onChange={onSelectNone} />
+    <StackedCheckBox checked onChange={onSelectNone} size={size} />
   ) : selected.length === 0 ? (
-    <StackedCheckBox onChange={onSelectAll} />
+    <StackedCheckBox onChange={onSelectAll} size={size} />
   ) : (
-    <StackedCheckBox checked indeterminate onChange={onSelectAll} />
+    <StackedCheckBox checked indeterminate onChange={onSelectAll} size={size} />
   );
 
 @entityObjectLoader({
   entityType: "collections",
   entityId: (state, props) => props.params.collectionId,
+  reload: true,
 })
 class CollectionLanding extends React.Component {
   render() {
diff --git a/frontend/src/metabase/components/CollectionList.jsx b/frontend/src/metabase/components/CollectionList.jsx
index 587dea43b053e..f7faabb255847 100644
--- a/frontend/src/metabase/components/CollectionList.jsx
+++ b/frontend/src/metabase/components/CollectionList.jsx
@@ -32,9 +32,15 @@ class CollectionList extends React.Component {
             .map(collection => (
               <GridItem w={w} key={collection.id}>
                 <CollectionDropTarget collection={collection}>
-                  <ItemDragSource item={collection}>
-                    <CollectionItem collection={collection} />
-                  </ItemDragSource>
+                  {({ highlighted, hovered }) => (
+                    <ItemDragSource item={collection}>
+                      <CollectionItem
+                        collection={collection}
+                        highlighted={highlighted}
+                        hovered={hovered}
+                      />
+                    </ItemDragSource>
+                  )}
                 </CollectionDropTarget>
               </GridItem>
             ))}
@@ -43,13 +49,17 @@ class CollectionList extends React.Component {
               <CollectionDropTarget
                 collection={{ id: currentUser.personal_collection_id }}
               >
-                <CollectionItem
-                  collection={{
-                    name: t`My personal collection`,
-                    id: currentUser.personal_collection_id,
-                  }}
-                  iconName="star"
-                />
+                {({ highlighted, hovered }) => (
+                  <CollectionItem
+                    collection={{
+                      name: t`My personal collection`,
+                      id: currentUser.personal_collection_id,
+                    }}
+                    iconName="star"
+                    highlighted={highlighted}
+                    hovered={hovered}
+                  />
+                )}
               </CollectionDropTarget>
             </GridItem>
           )}
diff --git a/frontend/src/metabase/components/CopyWidget.jsx b/frontend/src/metabase/components/CopyWidget.jsx
index 88b15c1654a7e..3e8921d4c192e 100644
--- a/frontend/src/metabase/components/CopyWidget.jsx
+++ b/frontend/src/metabase/components/CopyWidget.jsx
@@ -16,7 +16,7 @@ export default class CopyWidget extends Component {
     return (
       <div className="flex">
         <input
-          className="flex-full p1 flex align-center text-grey-4 text-bold no-focus border-top border-left border-bottom border-med rounded-left"
+          className="flex-full p1 flex align-center text-medium text-bold no-focus border-top border-left border-bottom border-med rounded-left"
           style={{ borderRight: "none" }}
           type="text"
           value={value}
diff --git a/frontend/src/metabase/components/CreateDashboardModal.jsx b/frontend/src/metabase/components/CreateDashboardModal.jsx
index d1f353ad67215..fd2af6ae0582f 100644
--- a/frontend/src/metabase/components/CreateDashboardModal.jsx
+++ b/frontend/src/metabase/components/CreateDashboardModal.jsx
@@ -14,14 +14,22 @@ import Button from "metabase/components/Button.jsx";
 import CollectionSelect from "metabase/containers/CollectionSelect.jsx";
 
 import Dashboards from "metabase/entities/dashboards";
+import Collections from "metabase/entities/collections";
+
+const mapStateToProps = (state, props) => ({
+  initialCollectionId: Collections.selectors.getInitialCollectionId(
+    state,
+    props,
+  ),
+});
 
 const mapDispatchToProps = {
   createDashboard: Dashboards.actions.create,
   push,
 };
 
-@connect(null, mapDispatchToProps)
 @withRouter
+@connect(mapStateToProps, mapDispatchToProps)
 export default class CreateDashboardModal extends Component {
   constructor(props, context) {
     super(props, context);
@@ -30,13 +38,7 @@ export default class CreateDashboardModal extends Component {
       name: null,
       description: null,
       errors: null,
-      collection_id:
-        props.collectionId != null
-          ? props.collectionId
-          : props.params.collectionId != null &&
-            props.params.collectionId !== "root"
-            ? parseInt(props.params.collectionId)
-            : null,
+      collection_id: props.initialCollectionId,
     };
   }
 
diff --git a/frontend/src/metabase/components/DirectionalButton.jsx b/frontend/src/metabase/components/DirectionalButton.jsx
index 43afe81ad2d9f..ad18f6df6d67f 100644
--- a/frontend/src/metabase/components/DirectionalButton.jsx
+++ b/frontend/src/metabase/components/DirectionalButton.jsx
@@ -5,7 +5,7 @@ import colors from "metabase/lib/colors";
 
 const DirectionalButton = ({ direction = "back", onClick }) => (
   <div
-    className="shadowed cursor-pointer text-brand-hover text-grey-4 flex align-center circle p2 bg-white transition-background transition-color"
+    className="shadowed cursor-pointer text-brand-hover text-medium flex align-center circle p2 bg-white transition-background transition-color"
     onClick={onClick}
     style={{
       border: `1px solid ${colors["border"]}`,
diff --git a/frontend/src/metabase/components/EmptyState.jsx b/frontend/src/metabase/components/EmptyState.jsx
index 672e550968dec..672cb6a8d5f97 100644
--- a/frontend/src/metabase/components/EmptyState.jsx
+++ b/frontend/src/metabase/components/EmptyState.jsx
@@ -53,7 +53,7 @@ const EmptyState = ({
     )}
     <div className="flex justify-center">
       <h2
-        className={cx("text-grey-2 text-normal mt2 mb4", {
+        className={cx("text-light text-normal mt2 mb4", {
           "text-paragraph": smallDescription,
         })}
         style={{ lineHeight: "1.5em" }}
diff --git a/frontend/src/metabase/components/EntityItem.jsx b/frontend/src/metabase/components/EntityItem.jsx
index e341992e3f659..a5c90897f7b27 100644
--- a/frontend/src/metabase/components/EntityItem.jsx
+++ b/frontend/src/metabase/components/EntityItem.jsx
@@ -107,14 +107,6 @@ const EntityItem = ({
       </h3>
 
       <Flex ml="auto" align="center" onClick={e => e.preventDefault()}>
-        {(onFavorite || isFavorite) && (
-          <Icon
-            name={isFavorite ? "star" : "staroutline"}
-            mr={1}
-            className={isFavorite ? "text-gold" : "hover-child"}
-            onClick={onFavorite}
-          />
-        )}
         {actions.length > 0 && (
           <EntityMenu
             className="hover-child"
diff --git a/frontend/src/metabase/components/ExplorePane.jsx b/frontend/src/metabase/components/ExplorePane.jsx
index 4ee8aee50e161..ccd67c6843c60 100644
--- a/frontend/src/metabase/components/ExplorePane.jsx
+++ b/frontend/src/metabase/components/ExplorePane.jsx
@@ -89,10 +89,8 @@ export class ExplorePane extends React.Component {
         )}
         {schemaNames &&
           schemaNames.length > 1 && (
-            <div className="px4 inline-block mb4">
-              <div className="pb1 text-paragraph">
-                Here's the schema I looked at:
-              </div>
+            <div className="flex align-center ml-auto">
+              <div className="mr1">{t`Based on the schema`}</div>
               <Select
                 value={schemaName}
                 onChange={e =>
@@ -119,7 +117,7 @@ export class ExplorePane extends React.Component {
         )}
         {hasMore && (
           <div
-            className="border-top cursor-pointer text-brand-hover flex layout-centered text-grey-2 px2 pt2 mt4"
+            className="border-top cursor-pointer text-brand-hover flex layout-centered text-light px2 pt2 mt4"
             onClick={() => this.setState({ visibleItems: visibleItems + 4 })}
           >
             <Icon name="chevrondown" size={20} />
@@ -158,7 +156,7 @@ export const ExploreList = ({
 export const ExploreOption = ({ option }: { option: Candidate }) => (
   <Link
     to={option.url}
-    className="flex align-center text-bold no-decoration text-grey-5 text-brand-hover bg-light p2 py3"
+    className="flex align-center text-bold no-decoration text-medium text-brand-hover bg-light p2 py3"
   >
     <Icon
       name="bolt"
diff --git a/frontend/src/metabase/components/Favorites.jsx b/frontend/src/metabase/components/Favorites.jsx
deleted file mode 100644
index ff94846ba83c5..0000000000000
--- a/frontend/src/metabase/components/Favorites.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import { Box } from "grid-styled";
-import { Link } from "react-router";
-import Subhead from "metabase/components/Subhead";
-
-class FavoritesLoader extends React.Component {
-  state = {
-    favorites: null,
-    loading: false,
-    error: null,
-  };
-
-  componentWillMount() {
-    this._loadFavorites();
-  }
-
-  async _loadFavorites() {
-    try {
-      this.setState({ loading: true });
-    } catch (error) {
-      this.setState({ error, loading: false });
-    }
-  }
-
-  render() {
-    const { children } = this.props;
-    const { favorites, loading, error } = this.state;
-    return children && children({ favorites, loading, error });
-  }
-}
-
-const Favorites = () => (
-  <Box>
-    <Subhead>Favorites</Subhead>
-    <FavoritesLoader>
-      {({ favorites, loading, error }) => {
-        if (loading) {
-          return <Box>Loading...</Box>;
-        }
-        return favorites.map(favorite => <Link>{favorite.name}</Link>);
-      }}
-    </FavoritesLoader>
-  </Box>
-);
-
-export default Favorites;
diff --git a/frontend/src/metabase/components/FieldSet.jsx b/frontend/src/metabase/components/FieldSet.jsx
index 1aa0b25174f84..e0accef80a857 100644
--- a/frontend/src/metabase/components/FieldSet.jsx
+++ b/frontend/src/metabase/components/FieldSet.jsx
@@ -20,7 +20,7 @@ export default function FieldSet({
   return (
     <fieldset className={cx(className, fieldSetClassName)}>
       {legend && (
-        <legend className="h5 text-bold text-uppercase px1 text-nowrap text-grey-4">
+        <legend className="h5 text-bold text-uppercase px1 text-nowrap text-medium">
           {legend}
         </legend>
       )}
diff --git a/frontend/src/metabase/components/ListFilterWidget.jsx b/frontend/src/metabase/components/ListFilterWidget.jsx
deleted file mode 100644
index ed6152a68455e..0000000000000
--- a/frontend/src/metabase/components/ListFilterWidget.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/* @flow */
-
-// An UI element that is normally right-aligned and showing a currently selected filter together with chevron.
-// Clicking the element will trigger a popover showing all available filter options.
-
-import React, { Component } from "react";
-import Icon from "metabase/components/Icon";
-import PopoverWithTrigger from "./PopoverWithTrigger";
-
-export type ListFilterWidgetItem = {
-  id: string,
-  name: string,
-  icon: string,
-};
-
-export default class ListFilterWidget extends Component {
-  props: {
-    items: ListFilterWidgetItem[],
-    activeItem: ListFilterWidgetItem,
-    onChange: ListFilterWidgetItem => void,
-  };
-
-  popoverRef: PopoverWithTrigger;
-  iconRef: Icon;
-
-  render() {
-    const { items, activeItem, onChange } = this.props;
-    return (
-      <PopoverWithTrigger
-        ref={p => (this.popoverRef = p)}
-        triggerClasses="block ml-auto flex-no-shrink"
-        targetOffsetY={10}
-        triggerElement={
-          <div className="ml2 flex align-center text-brand">
-            <span className="text-bold">{activeItem && activeItem.name}</span>
-            <Icon
-              ref={i => (this.iconRef = i)}
-              className="ml1"
-              name="chevrondown"
-              width="12"
-              height="12"
-            />
-          </div>
-        }
-        target={() => this.iconRef}
-      >
-        <ol className="text-brand mt2 mb1">
-          {items.map((item, index) => (
-            <li
-              key={index}
-              className="cursor-pointer flex align-center brand-hover px2 py1 mb1"
-              onClick={() => {
-                onChange(item);
-                this.popoverRef.close();
-              }}
-            >
-              <Icon className="mr1 text-light-blue" name={item.icon} />
-              <h4 className="List-item-title">{item.name}</h4>
-            </li>
-          ))}
-        </ol>
-      </PopoverWithTrigger>
-    );
-  }
-}
diff --git a/frontend/src/metabase/components/ListSearchField.jsx b/frontend/src/metabase/components/ListSearchField.jsx
index a3dfd9d9f7288..42bd36d679153 100644
--- a/frontend/src/metabase/components/ListSearchField.jsx
+++ b/frontend/src/metabase/components/ListSearchField.jsx
@@ -13,7 +13,7 @@ export default class ListSearchField extends Component {
   };
 
   static defaultProps = {
-    className: "bordered rounded text-grey-2 flex flex-full align-center",
+    className: "bordered rounded text-light flex flex-full align-center",
     inputClassName: "p1 h4 input--borderless text-default flex-full",
     placeholder: t`Find...`,
     searchText: "",
diff --git a/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx b/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx
index 5226f417b1f28..b20891c97f5e3 100644
--- a/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx
+++ b/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx
@@ -115,7 +115,7 @@ export default class LoadingAndErrorWrapper extends Component {
       <div className={this.props.className} style={this.props.style}>
         {error ? (
           <div className={contentClassName}>
-            <h2 className="text-normal text-grey-2 ie-wrap-content-fix">
+            <h2 className="text-normal text-light ie-wrap-content-fix">
               {this.getErrorMessage()}
             </h2>
           </div>
@@ -123,7 +123,7 @@ export default class LoadingAndErrorWrapper extends Component {
           <div className={contentClassName}>
             {loadingScenes && loadingScenes[sceneIndex]}
             {!loadingScenes && showSpinner && <LoadingSpinner />}
-            <h2 className="text-normal text-grey-2 mt1">
+            <h2 className="text-normal text-light mt1">
               {loadingMessages[messageIndex]}
             </h2>
           </div>
diff --git a/frontend/src/metabase/components/ModalContent.jsx b/frontend/src/metabase/components/ModalContent.jsx
index 8f6abe52a2841..93598ba58402d 100644
--- a/frontend/src/metabase/components/ModalContent.jsx
+++ b/frontend/src/metabase/components/ModalContent.jsx
@@ -42,7 +42,7 @@ export default class ModalContent extends Component {
       >
         {onClose && (
           <Icon
-            className="text-grey-2 text-grey-4-hover cursor-pointer absolute m2 p2 top right"
+            className="text-light text-medium-hover cursor-pointer absolute m2 p2 top right"
             name="close"
             size={fullPageModal ? 24 : 16}
             onClick={onClose}
diff --git a/frontend/src/metabase/components/NewsletterForm.jsx b/frontend/src/metabase/components/NewsletterForm.jsx
index 4d874748026d8..2518534306fdc 100644
--- a/frontend/src/metabase/components/NewsletterForm.jsx
+++ b/frontend/src/metabase/components/NewsletterForm.jsx
@@ -63,7 +63,7 @@ export default class NewsletterForm extends Component {
           style={this.styles.label}
           className="absolute text-centered left right"
         >
-          <div className="px3 bg-white h5 text-bold text-grey-4 text-uppercase inline-block">
+          <div className="px3 bg-white h5 text-bold text-medium text-uppercase inline-block">
             <Icon className="mr1 float-left" name="mail" size={16} />
             <span
               className="inline-block"
@@ -76,7 +76,7 @@ export default class NewsletterForm extends Component {
           <div>
             <div
               style={{ color: colors["text-medium"] }}
-              className="text-grey-4 h3 pb3"
+              className="text-medium h3 pb3"
             >
               {t`Get infrequent emails about new releases and feature updates.`}
             </div>
diff --git a/frontend/src/metabase/components/PasswordReveal.jsx b/frontend/src/metabase/components/PasswordReveal.jsx
index 956159a9b8bbb..b238467cd2a58 100644
--- a/frontend/src/metabase/components/PasswordReveal.jsx
+++ b/frontend/src/metabase/components/PasswordReveal.jsx
@@ -23,7 +23,7 @@ const styles = {
 
 const Label = () => (
   <div style={{ top: -12 }} className="absolute text-centered left right">
-    <span className="px1 bg-white h6 text-bold text-grey-3 text-uppercase">
+    <span className="px1 bg-white h6 text-bold text-medium text-uppercase">
       {t`Temporary Password`}
     </span>
   </div>
@@ -48,7 +48,7 @@ export default class PasswordReveal extends Component {
           <input
             ref="input"
             style={styles.input}
-            className="text-grey-2 text-normal mr3 borderless"
+            className="text-light text-normal mr3 borderless"
             value={password}
             onClick={({ target }) =>
               target.setSelectionRange(0, target.value.length)
diff --git a/frontend/src/metabase/components/QuestionIcon.jsx b/frontend/src/metabase/components/QuestionIcon.jsx
deleted file mode 100644
index 9856a926aabdc..0000000000000
--- a/frontend/src/metabase/components/QuestionIcon.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-
-import Icon from "metabase/components/Icon";
-
-import Visualizations from "metabase/visualizations";
-
-const QuestionIcon = ({ question, ...props }) => (
-  <Icon
-    {...props}
-    name={(Visualizations.get(question.display) || {}).iconName || "unknown"}
-  />
-);
-
-export default QuestionIcon;
diff --git a/frontend/src/metabase/components/SchedulePicker.jsx b/frontend/src/metabase/components/SchedulePicker.jsx
index 62e61392ee545..80843cbaa72dd 100644
--- a/frontend/src/metabase/components/SchedulePicker.jsx
+++ b/frontend/src/metabase/components/SchedulePicker.jsx
@@ -205,7 +205,7 @@ export default class SchedulePicker extends Component {
           className="h4 text-bold bg-white"
         />
         {textBeforeSendTime && (
-          <div className="mt2 h4 text-bold text-grey-3 border-top pt2">
+          <div className="mt2 h4 text-bold text-medium border-top pt2">
             {textBeforeSendTime} {hour === 0 ? 12 : hour}:00{" "}
             {amPm ? "PM" : "AM"} {timezone}, {t`your Metabase timezone`}.
           </div>
diff --git a/frontend/src/metabase/components/SearchHeader.jsx b/frontend/src/metabase/components/SearchHeader.jsx
index 902cb36a27310..e2191f793deb5 100644
--- a/frontend/src/metabase/components/SearchHeader.jsx
+++ b/frontend/src/metabase/components/SearchHeader.jsx
@@ -28,7 +28,7 @@ const SearchHeader = ({
       searchText !== "" && (
         <Icon
           name="close"
-          className="cursor-pointer text-grey-2"
+          className="cursor-pointer text-light"
           size={18}
           onClick={resetSearchText}
         />
diff --git a/frontend/src/metabase/components/Select.jsx b/frontend/src/metabase/components/Select.jsx
index 1fb20041ab7e9..e481b6b426e5c 100644
--- a/frontend/src/metabase/components/Select.jsx
+++ b/frontend/src/metabase/components/Select.jsx
@@ -313,7 +313,7 @@ class LegacySelect extends Component {
       <div
         className={cx(
           "flex align-center",
-          !value && (!values || values.length === 0) ? " text-grey-2" : "",
+          !value && (!values || values.length === 0) ? " text-light" : "",
         )}
       >
         {values && values.length !== 0 ? (
diff --git a/frontend/src/metabase/components/SelectButton.jsx b/frontend/src/metabase/components/SelectButton.jsx
index 1a17421adf339..20dd188605b3e 100644
--- a/frontend/src/metabase/components/SelectButton.jsx
+++ b/frontend/src/metabase/components/SelectButton.jsx
@@ -10,7 +10,7 @@ const SelectButton = ({ className, style, children, hasValue = true }) => (
   <div
     style={style}
     className={cx(className, "AdminSelect flex align-center", {
-      "text-grey-3": !hasValue,
+      "text-medium": !hasValue,
     })}
   >
     <span className="AdminSelect-content mr1">{children}</span>
diff --git a/frontend/src/metabase/components/SortableItemList.css b/frontend/src/metabase/components/SortableItemList.css
deleted file mode 100644
index 5b0335d1ec6cc..0000000000000
--- a/frontend/src/metabase/components/SortableItemList.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.SortableItemList-list {
-  overflow-y: auto;
-}
diff --git a/frontend/src/metabase/components/SortableItemList.jsx b/frontend/src/metabase/components/SortableItemList.jsx
deleted file mode 100644
index 17149dc2bfc93..0000000000000
--- a/frontend/src/metabase/components/SortableItemList.jsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-
-import "./SortableItemList.css";
-import { t } from "c-3po";
-import Icon from "metabase/components/Icon.jsx";
-import Radio from "metabase/components/Radio.jsx";
-
-import moment from "moment";
-
-export default class SortableItemList extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = {
-      sort: props.initialSort || "Last Modified",
-    };
-  }
-
-  static propTypes = {
-    items: PropTypes.array.isRequired,
-    clickItemFn: PropTypes.func,
-    showIcons: PropTypes.bool,
-  };
-
-  onClickItem(item) {
-    if (this.props.onClickItemFn) {
-      this.props.onClickItemFn(item);
-    }
-  }
-
-  render() {
-    let items;
-    if (this.state.sort === "Last Modified") {
-      items = this.props.items
-        .slice()
-        .sort((a, b) => b.updated_at - a.updated_at);
-    } else if (this.state.sort === "Alphabetical Order") {
-      items = this.props.items
-        .slice()
-        .sort((a, b) =>
-          a.name.toLowerCase().localeCompare(b.name.toLowerCase()),
-        );
-    }
-
-    return (
-      <div className="SortableItemList">
-        <div className="flex align-center px2 pb3 border-bottom">
-          <h5 className="text-bold text-uppercase text-grey-3 ml2 mt1 mr2">
-            {t`Sort by`}
-          </h5>
-          <Radio
-            value={this.state.sort}
-            options={[
-              "Last Modified",
-              /*"Most Popular",*/ "Alphabetical Order",
-            ]}
-            onChange={sort => this.setState({ sort })}
-            optionNameFn={o => o}
-            optionValueFn={o => o}
-            optionKeyFn={o => o}
-          />
-        </div>
-
-        <ul className="SortableItemList-list px2 pb2">
-          {items.map(item => (
-            <li key={item.id} className="border-row-divider">
-              <a
-                className="no-decoration flex p2"
-                onClick={() => this.onClickItem(item)}
-              >
-                <div className="flex align-center flex-full mr2">
-                  {this.props.showIcons ? (
-                    <div className="mr2">
-                      <Icon name={"illustration-" + item.display} size={48} />
-                    </div>
-                  ) : null}
-                  <div className="text-brand-hover">
-                    <h3 className="mb1">{item.name}</h3>
-                    <h4 className="text-grey-3">
-                      {item.description || t`No description yet`}
-                    </h4>
-                  </div>
-                </div>
-                {item.creator &&
-                  item.updated_at && (
-                    <div className="flex-align-right text-right text-grey-3">
-                      <div className="mb1">
-                        Saved by {item.creator.common_name}
-                      </div>
-                      <div>Modified {moment(item.updated_at).fromNow()}</div>
-                    </div>
-                  )}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
-    );
-  }
-}
diff --git a/frontend/src/metabase/components/TermWithDefinition.jsx b/frontend/src/metabase/components/TermWithDefinition.jsx
deleted file mode 100644
index 11ac2f2d9ee9a..0000000000000
--- a/frontend/src/metabase/components/TermWithDefinition.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import cxs from "cxs";
-import Tooltip from "metabase/components/Tooltip";
-import colors from "metabase/lib/colors";
-
-const termStyles = cxs({
-  textDecoration: "none",
-  borderBottom: `1px dotted ${colors["border"]}`,
-});
-export const TermWithDefinition = ({ children, definition, link }) => (
-  <Tooltip tooltip={definition}>
-    {link ? (
-      <a href={link} className={termStyles} target="_blank">
-        {children}
-      </a>
-    ) : (
-      <span className={termStyles}>{children}</span>
-    )}
-  </Tooltip>
-);
diff --git a/frontend/src/metabase/components/TokenField.jsx b/frontend/src/metabase/components/TokenField.jsx
index 587d80046a73c..0c0b598ab8f49 100644
--- a/frontend/src/metabase/components/TokenField.jsx
+++ b/frontend/src/metabase/components/TokenField.jsx
@@ -563,7 +563,7 @@ export default class TokenField extends Component {
             <span className="text-bold">{valueRenderer(v)}</span>
             {multi && (
               <a
-                className="text-grey-3 text-default-hover px1"
+                className="text-medium text-default-hover px1"
                 onClick={e => {
                   this.removeValue(v);
                   e.preventDefault();
diff --git a/frontend/src/metabase/containers/AddToDashSelectDashModal.jsx b/frontend/src/metabase/containers/AddToDashSelectDashModal.jsx
index a7a45f2bd9b82..764dff34d5396 100644
--- a/frontend/src/metabase/containers/AddToDashSelectDashModal.jsx
+++ b/frontend/src/metabase/containers/AddToDashSelectDashModal.jsx
@@ -3,6 +3,7 @@
 import React, { Component } from "react";
 import { t } from "c-3po";
 
+import Button from "metabase/components/Button";
 import ModalContent from "metabase/components/ModalContent.jsx";
 import DashboardForm from "metabase/containers/DashboardForm.jsx";
 import DashboardPicker from "metabase/containers/DashboardPicker";
@@ -48,11 +49,12 @@ export default class AddToDashSelectDashModal extends Component {
           onClose={this.props.onClose}
         >
           <DashboardPicker onChange={this.addToDashboard} />
-          <button
+          <Button
+            mt={1}
             onClick={() => this.setState({ shouldCreateDashboard: true })}
           >
-            Create New Dashboard
-          </button>
+            {t`Create New Dashboard`}
+          </Button>
         </ModalContent>
       );
     }
diff --git a/frontend/src/metabase/containers/EntitySearch.jsx b/frontend/src/metabase/containers/EntitySearch.jsx
index 89af5acc90257..45f7d09c3251e 100644
--- a/frontend/src/metabase/containers/EntitySearch.jsx
+++ b/frontend/src/metabase/containers/EntitySearch.jsx
@@ -235,8 +235,8 @@ export default class EntitySearch extends Component {
                 <EmptyState
                   message={
                     <div className="mt4">
-                      <h3 className="text-grey-5">{t`No results found`}</h3>
-                      <p className="text-grey-4">{t`Try adjusting your filter to find what you’re looking for.`}</p>
+                      <h3 className="text-medium">{t`No results found`}</h3>
+                      <p className="text-medium">{t`Try adjusting your filter to find what you’re looking for.`}</p>
                     </div>
                   }
                   image="app/img/empty_question"
@@ -287,7 +287,7 @@ export class SearchGroupingOption extends Component {
       <li
         className={cx(
           "my2 cursor-pointer text-uppercase text-small text-green-saturated-hover",
-          { "text-grey-4": !active },
+          { "text-medium": !active },
           { "text-green-saturated": active },
         )}
         onClick={this.onSetGrouping}
@@ -498,7 +498,7 @@ class SearchResultsList extends Component {
           className={cx(
             "mx1 flex align-center justify-center rounded",
             { "cursor-pointer bg-medium text-white": !isInBeginning },
-            { "bg-light text-grey-1": isInBeginning },
+            { "bg-light text-light": isInBeginning },
           )}
           style={{ width: "22px", height: "22px" }}
           onClick={() =>
@@ -511,7 +511,7 @@ class SearchResultsList extends Component {
           className={cx(
             "flex align-center justify-center rounded",
             { "cursor-pointer bg-medium text-white": !isInEnd },
-            { "bg-light text-grey-2": isInEnd },
+            { "bg-light text-light": isInEnd },
           )}
           style={{ width: "22px", height: "22px" }}
           onClick={() => !isInEnd && setCurrentPage(entities, currentPage + 1)}
diff --git a/frontend/src/metabase/containers/ItemName.jsx b/frontend/src/metabase/containers/ItemName.jsx
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/frontend/src/metabase/containers/ItemPicker.jsx b/frontend/src/metabase/containers/ItemPicker.jsx
index 256b4750befa1..d2fa5719a6fcb 100644
--- a/frontend/src/metabase/containers/ItemPicker.jsx
+++ b/frontend/src/metabase/containers/ItemPicker.jsx
@@ -119,7 +119,7 @@ export default class ItemPicker extends React.Component {
               />
               <Icon
                 name="close"
-                className="ml-auto pl2 text-grey-2 text-grey-4-hover cursor-pointer"
+                className="ml-auto pl2 text-light text-medium-hover cursor-pointer"
                 onClick={() =>
                   this.setState({ searchMode: null, searchString: null })
                 }
@@ -130,41 +130,45 @@ export default class ItemPicker extends React.Component {
               <Breadcrumbs crumbs={crumbs} />
               <Icon
                 name="search"
-                className="ml-auto pl2 text-grey-2 text-grey-4-hover cursor-pointer"
+                className="ml-auto pl2 text-light text-medium-hover cursor-pointer"
                 onClick={() => this.setState({ searchMode: true })}
               />
             </Box>
           )}
           <Box className="scroll-y">
             {!searchString
-              ? allCollections.map(collection => (
-                  <Item
-                    item={collection}
-                    name={collection.name}
-                    color={COLLECTION_ICON_COLOR}
-                    icon="all"
-                    selected={
-                      isSelected(collection) && models.has("collection")
-                    }
-                    canSelect={
-                      models.has("collection") && collection.can_edit !== false
-                    }
-                    hasChildren={
-                      (collection.children &&
-                        collection.children.length > 0 &&
-                        // exclude root since we show root's subcollections alongside it
-                        !isRoot(collection)) ||
-                      modelsIncludeNonCollections
-                    }
-                    onChange={collection =>
-                      isRoot(collection)
-                        ? // "root" collection should have `null` id
-                          onChange({ id: null, model: "collection" })
-                        : onChange(collection)
-                    }
-                    onChangeParentId={parentId => this.setState({ parentId })}
-                  />
-                ))
+              ? allCollections.map(collection => {
+                  const hasChildren =
+                    (collection.children &&
+                      collection.children.length > 0 &&
+                      // exclude root since we show root's subcollections alongside it
+                      !isRoot(collection)) ||
+                    // non-collection models are loaded on-demand so we don't know ahead of time
+                    // if they have children, so we have to assume they do
+                    modelsIncludeNonCollections;
+                  // NOTE: this assumes the only reason you'd be selecting a collection is to modify it in some way
+                  const canSelect =
+                    models.has("collection") && collection.can_write;
+                  // only show if collection can be selected or has children
+                  return canSelect || hasChildren ? (
+                    <Item
+                      item={collection}
+                      name={collection.name}
+                      color={COLLECTION_ICON_COLOR}
+                      icon="all"
+                      selected={canSelect && isSelected(collection)}
+                      canSelect={canSelect}
+                      hasChildren={hasChildren}
+                      onChange={collection =>
+                        isRoot(collection)
+                          ? // "root" collection should have `null` id
+                            onChange({ id: null, model: "collection" })
+                          : onChange(collection)
+                      }
+                      onChangeParentId={parentId => this.setState({ parentId })}
+                    />
+                  ) : null;
+                })
               : null}
             {(modelsIncludeNonCollections || searchString) && (
               <EntityListLoader
@@ -241,7 +245,7 @@ const Item = ({
         <Icon
           name="chevronright"
           className={cx(
-            "p1 ml-auto circular text-grey-2 border-grey-2 bordered bg-white-hover cursor-pointer",
+            "p1 ml-auto circular text-light border-grey-2 bordered bg-white-hover cursor-pointer",
             {
               "bg-brand-hover": !canSelect,
             },
diff --git a/frontend/src/metabase/containers/Overworld.jsx b/frontend/src/metabase/containers/Overworld.jsx
index 5c15377586aae..8ea953333352f 100644
--- a/frontend/src/metabase/containers/Overworld.jsx
+++ b/frontend/src/metabase/containers/Overworld.jsx
@@ -17,6 +17,7 @@ import { Grid, GridItem } from "metabase/components/Grid";
 import Icon from "metabase/components/Icon";
 import Link from "metabase/components/Link";
 import Subhead from "metabase/components/Subhead";
+import RetinaImage from "react-retina-image";
 
 import { getUser } from "metabase/home/selectors";
 
@@ -56,13 +57,14 @@ const PAGE_PADDING = [1, 2, 4];
 })
 class Overworld extends React.Component {
   render() {
+    const { user } = this.props;
     return (
       <Box>
         <Flex px={PAGE_PADDING} pt={3} pb={1} align="center">
           <MetabotLogo />
           <Box ml={2}>
-            <Subhead>{Greeting.sayHello(this.props.user.first_name)}</Subhead>
-            <p className="text-paragraph m0 text-grey-3">{t`Don't tell anyone, but you're my favorite.`}</p>
+            <Subhead>{Greeting.sayHello(user.first_name)}</Subhead>
+            <p className="text-paragraph m0 text-medium">{t`Don't tell anyone, but you're my favorite.`}</p>
           </Box>
         </Flex>
         <CollectionItemsLoader collectionId="root">
@@ -78,19 +80,20 @@ class Overworld extends React.Component {
                     return (
                       <Box mx={PAGE_PADDING} mt={2}>
                         <Box mb={1}>
-                          <h4>{t`Not sure where to start?`}</h4>
+                          <h4
+                          >{t`Not sure where to start? Try these x-rays based on your data.`}</h4>
                         </Box>
                         <Card px={3} pb={1}>
                           <ExplorePane
                             candidates={candidates}
                             withMetabot={false}
                             title=""
-                            gridColumns={1 / 3}
+                            gridColumns={[1, 1 / 3]}
                             asCards={false}
                             description={
                               isSample
                                 ? t`Once you connect your own data, I can show you some automatic explorations called x-rays. Here are some examples with sample data.`
-                                : t`I took a look at the data you have connected, and I have some explorations of interesting things I found. Hope you like them!`
+                                : t``
                             }
                           />
                         </Card>
@@ -142,14 +145,32 @@ class Overworld extends React.Component {
           <Box mb={2}>
             <h4>{t`Our analytics`}</h4>
           </Box>
-          <Card p={[2, 3]}>
-            <CollectionList collections={this.props.collections} />
+          <Card p={[1, 2]}>
+            {this.props.collections.filter(
+              c => c.id !== user.personal_collection_id,
+            ).length > 0 ? (
+              <CollectionList collections={this.props.collections} />
+            ) : (
+              <Box className="text-centered">
+                <Box style={{ opacity: 0.5 }}>
+                  <RetinaImage
+                    src="app/img/empty.png"
+                    className="block ml-auto mr-auto"
+                  />
+                </Box>
+                <h3 className="text-medium">
+                  {user.is_superuser
+                    ? t`Save  dashboards, questions, and collections in "Our Analytics"`
+                    : t`Access dashboards, questions, and collections in "Our Analytics"`}
+                </h3>
+              </Box>
+            )}
             <Link
               to="/collection/root"
               color={normal.grey2}
               className="text-brand-hover"
             >
-              <Flex bg={colors["bg-light"]} p={2} my={1} align="center">
+              <Flex color={colors["brand"]} p={2} my={1} align="center">
                 <Box ml="auto" mr="auto">
                   <Flex align="center">
                     <h4>{t`Browse all items`}</h4>
diff --git a/frontend/src/metabase/containers/QuestionListLoader.jsx b/frontend/src/metabase/containers/QuestionListLoader.jsx
deleted file mode 100644
index 2b589c252aaa7..0000000000000
--- a/frontend/src/metabase/containers/QuestionListLoader.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-
-import EntityListLoader from "metabase/entities/containers/EntityListLoader";
-
-const QuestionListLoader = props => (
-  <EntityListLoader entityType="questions" {...props} />
-);
-
-export default QuestionListLoader;
diff --git a/frontend/src/metabase/containers/SaveQuestionModal.jsx b/frontend/src/metabase/containers/SaveQuestionModal.jsx
index 07b23ee78a70b..950495ea9ebac 100644
--- a/frontend/src/metabase/containers/SaveQuestionModal.jsx
+++ b/frontend/src/metabase/containers/SaveQuestionModal.jsx
@@ -32,7 +32,10 @@ export default class SaveQuestionModal extends Component {
               )
             : "",
         description: props.card.description || "",
-        collection_id: props.card.collection_id || null,
+        collection_id:
+          props.card.collection_id === undefined
+            ? props.initialCollectionId
+            : props.card.collection_id,
         saveType: props.originalCard ? "overwrite" : "create",
       },
     };
diff --git a/frontend/src/metabase/containers/UserCollectionList.jsx b/frontend/src/metabase/containers/UserCollectionList.jsx
index 51ab222c6f494..a991108c12235 100644
--- a/frontend/src/metabase/containers/UserCollectionList.jsx
+++ b/frontend/src/metabase/containers/UserCollectionList.jsx
@@ -47,9 +47,9 @@ const UserCollectionList = () => (
                               name="person"
                               mr={1}
                               color={colors["text-medium"]}
-                              size={22}
+                              size={18}
                             />
-                            <h2>{user.common_name}</h2>
+                            <h3>{user.common_name}</h3>
                           </Flex>
                         </Card>
                       </Link>
diff --git a/frontend/src/metabase/containers/dnd/DropArea.jsx b/frontend/src/metabase/containers/dnd/DropArea.jsx
index 5d0647582d3bf..cac0f1a23a05a 100644
--- a/frontend/src/metabase/containers/dnd/DropArea.jsx
+++ b/frontend/src/metabase/containers/dnd/DropArea.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import cx from "classnames";
-import { normal } from "metabase/lib/colors";
 
 const DropTargetBackgroundAndBorder = ({
   highlighted,
@@ -24,8 +23,6 @@ const DropTargetBackgroundAndBorder = ({
       right: -marginRight,
       zIndex: -1,
       boxSizing: "border-box",
-      border: "2px solid transparent",
-      borderColor: hovered & !noDrop ? normal.blue : "transparent",
     }}
   />
 );
diff --git a/frontend/src/metabase/css/admin.css b/frontend/src/metabase/css/admin.css
index 17226a704a117..a886c098e58f2 100644
--- a/frontend/src/metabase/css/admin.css
+++ b/frontend/src/metabase/css/admin.css
@@ -309,3 +309,11 @@
 .AdminTable tbody tr:first-child td {
   padding-top: var(--margin-1);
 }
+
+.AdminLink {
+  opacity: 0.435;
+}
+
+.AdminLink:hover {
+  opacity: 1;
+}
diff --git a/frontend/src/metabase/css/components/dropdown.css b/frontend/src/metabase/css/components/dropdown.css
deleted file mode 100644
index 4916a722f1935..0000000000000
--- a/frontend/src/metabase/css/components/dropdown.css
+++ /dev/null
@@ -1,65 +0,0 @@
-:root {
-  --dropdown-border-color: color(var(--color-accent2) alpha(-94%));
-}
-
-.Dropdown {
-  position: relative;
-}
-
-.Dropdown-content {
-  opacity: 0; /* start invisible */
-  pointer-events: none; /* and without any clicks */
-  z-index: 20;
-  position: absolute;
-  top: 40px;
-  min-width: 200px;
-  margin-top: 18px;
-  border: 1px solid color(var(--color-accent2) alpha(-94%));
-  background-color: var(--color-bg-white);
-  border-radius: 4px;
-  box-shadow: 0 0 2px var(--color-shadow);
-  background-clip: padding-box;
-  padding-top: 1em;
-  padding-bottom: 1em;
-}
-
-.Dropdown-content:before {
-  position: absolute;
-  top: -20px;
-  right: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-right: 5px solid red;
-  content: "";
-  display: block;
-}
-
-/* switching from home rolled to BS logic for dropdowns so we still have both classes */
-.Dropdown.open .Dropdown-content,
-.Dropdown--showing.Dropdown-content {
-  opacity: 1;
-  pointer-events: all;
-  transition: opacity 0.3s linear, margin 0.2s linear;
-  margin-top: 0;
-}
-
-.Dropdown-item {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-  line-height: 1;
-}
-
-.Dropdown .Dropdown-item .link:hover {
-  text-decoration: none;
-}
-
-.Dropdown-item:hover {
-  color: var(--color-text-white);
-  background-color: var(--color-brand);
-}
-
-.Dropdown .Dropdown-item:hover {
-  text-decoration: none;
-}
diff --git a/frontend/src/metabase/css/core/colors.css b/frontend/src/metabase/css/core/colors.css
index 57831b8e92afa..48a9c2da42386 100644
--- a/frontend/src/metabase/css/core/colors.css
+++ b/frontend/src/metabase/css/core/colors.css
@@ -196,37 +196,21 @@
   background-color: var(--color-bg-light);
 }
 
-/* grey */
-.text-grey-1,
-:local(.text-grey-1),
-.text-grey-1-hover:hover {
+.text-light,
+:local(.text-light),
+.text-light-hover:hover {
   color: var(--color-text-light);
 }
 
-.text-grey-2,
-:local(.text-grey-2),
-.text-grey-2-hover:hover {
-  color: var(--color-text-light);
-}
-
-.text-grey-3,
-:local(.text-grey-3),
-.text-grey-3-hover:hover {
-  color: var(--color-text-medium);
-}
-
-.text-grey-4,
-.text-grey-4-hover:hover {
-  color: var(--color-text-medium);
-}
-
-.text-grey-5,
-.text-grey-5-hover:hover {
+.text-medium,
+:local(.text-medium),
+.text-medium-hover:hover {
   color: var(--color-text-medium);
 }
 
 .text-dark,
-:local(.text-dark) {
+:local(.text-dark),
+.text-dark-hover {
   color: var(--color-text-dark);
 }
 
diff --git a/frontend/src/metabase/css/home.css b/frontend/src/metabase/css/home.css
index 169f6bb7b81cd..fdf4c43871576 100644
--- a/frontend/src/metabase/css/home.css
+++ b/frontend/src/metabase/css/home.css
@@ -1,158 +1,7 @@
-:root {
-  --search-bar-color: var(--color-brand);
-  --search-bar-active-color: var(--color-brand);
-  --search-bar-active-border-color: var(--color-brand);
-}
-
 .Nav {
   z-index: 4;
 }
 
-/* temporary css for the navbar and search */
-.search-bar {
-  background-color: color(var(--color-bg-white) alpha(-90%));
-  border-color: transparent;
-  color: white;
-}
-
-.search-bar--active {
-  background-color: color(var(--color-bg-white) alpha(-75%));
-  border-color: var(--color-brand);
-}
-
-.NavItem.NavItem--selected {
-  background-color: color(var(--color-bg-black) alpha(-80%));
-}
-
-.NavItem {
-  justify-content: center;
-}
-
-.NavItem > .Icon {
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-}
-
-@media screen and (--breakpoint-min-sm) {
-  .NavItem {
-    border-radius: 8px;
-  }
-  .NavItem:hover,
-  .NavItem.NavItem--selected {
-    background-color: color(var(--color-bg-white) alpha(-92%));
-  }
-}
-
-.NavNewQuestion {
-  box-shadow: 0px 2px 2px 0px var(--color-shadow);
-}
-.NavNewQuestion:hover {
-  box-shadow: 0px 3px 2px 2px var(--color-shadow);
-  color: var(--color-brand);
-}
-
-.Greeting {
-  padding-top: 2rem;
-  padding-bottom: 3rem;
-}
-
-@media screen and (--breakpoint-min-xl) {
-  .Greeting {
-    padding-top: 6em;
-    padding-bottom: 6em;
-  }
-}
-
-.bullet {
-  position: relative;
-  margin-left: 1.2em;
-}
-.bullet:before {
-  content: "\2022";
-  color: var(--color-brand);
-  position: absolute;
-  top: 0;
-  margin-top: 16px;
-  left: -0.85em;
-}
-
-.NavDropdown {
-  position: relative;
-}
-.NavDropdown.open {
-  z-index: 100;
-}
-.NavDropdown .NavDropdown-content {
-  display: none;
-}
-.NavDropdown.open .NavDropdown-content {
-  display: inherit;
-}
-.NavDropdown .NavDropdown-button {
-  position: relative;
-  border-radius: 8px;
-}
-.NavDropdown .NavDropdown-content {
-  position: absolute;
-  border-radius: 4px;
-  top: 38px;
-  min-width: 200px;
-}
-
-.NavDropdown .NavDropdown-content.NavDropdown-content--dashboards {
-  top: 33px;
-}
-
-.NavDropdown .NavDropdown-button:before,
-.NavDropdown .NavDropdown-content:before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  box-shadow: 0 0 4px var(--color-shadow);
-  background-clip: padding-box;
-}
-
-.NavDropdown .NavDropdown-content:before {
-  z-index: -2;
-  border-radius: 4px;
-}
-.NavDropdown .NavDropdown-button:before {
-  z-index: -1;
-  opacity: 0;
-  border-radius: 8px;
-}
-.NavDropdown.open .NavDropdown-button:before {
-  opacity: 1;
-}
-.NavDropdown .NavDropdown-content-layer {
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-}
-.NavDropdown .NavDropdown-button-layer {
-  position: relative;
-  z-index: 2;
-}
-
-.NavDropdown.open .NavDropdown-button,
-.NavDropdown .NavDropdown-content-layer {
-  background-color: var(--color-brand);
-}
-
-.NavDropdown .NavDropdown-content-layer {
-  padding-top: 10px;
-  border-radius: 4px;
-}
-
-.NavDropdown .DashboardList {
-  min-width: 332px;
-}
-
 .QuestionCircle {
   display: inline-block;
   font-size: 3.25rem;
@@ -163,39 +12,6 @@
   text-align: center;
 }
 
-.IconCircle {
-  line-height: 0;
-  padding: var(--padding-1);
-  border-radius: 99px;
-  border: 1px solid currentcolor;
-}
-
-@keyframes pop {
-  0% {
-    transform: scale(0.75);
-  }
-  75% {
-    transform: scale(1.0625);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-.animate-pop {
-  animation-name: popin;
-  animation-duration: 0.15s;
-  animation-timing-function: ease-out;
-}
-
-.AdminLink {
-  opacity: 0.435;
-}
-
-.AdminLink:hover {
-  opacity: 1;
-}
-
 .break-word {
   word-wrap: break-word;
 }
@@ -208,11 +24,6 @@
   color: var(--color-text-light);
 }
 
-.TableDescription {
-  max-width: 42rem;
-  line-height: 1.4;
-}
-
 .Layout-sidebar {
   min-height: 100vh;
   width: 346px;
@@ -231,38 +42,3 @@
   line-height: 1;
   text-transform: uppercase;
 }
-
-@media screen and (--breakpoint-min-md) {
-  .HomepageGreeting {
-    margin-right: 346px;
-  }
-}
-
-/* there are 5 mav items on mobile, so distribute the items evenly */
-.Nav ul li {
-  flex: 0 20%;
-}
-
-/* on larger screens, things should just flow naturally */
-@media screen and (--breakpoint-min-md) {
-  .Nav ul li {
-    flex: unset;
-  }
-}
-
-/* the logo nav item needs a little bit of additional padding so that it
- * matches up with the other nav items which have 16px icons and 0.75em padding.
- * Since the logo is 32px we cut the padding in half to get 0.375
- * */
-.LogoNavItem {
-  padding-top: 0.375em;
-  padding-bottom: 0.375em;
-}
-
-/* we want to unset the above when we no longer need the nav item to fill the space */
-@media screen and (--breakpoint-min-md) {
-  .LogoNavItem {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-}
diff --git a/frontend/src/metabase/dashboard/components/AddSeriesModal.jsx b/frontend/src/metabase/dashboard/components/AddSeriesModal.jsx
index 1dc6c4b08148f..399d06b955808 100644
--- a/frontend/src/metabase/dashboard/components/AddSeriesModal.jsx
+++ b/frontend/src/metabase/dashboard/components/AddSeriesModal.jsx
@@ -339,7 +339,7 @@ export default class AddSeriesModal extends Component {
                         tooltip={t`We're not sure if this question is compatible`}
                       >
                         <Icon
-                          className="px1 flex-align-right text-grey-2 text-grey-4-hover cursor-pointer flex-no-shrink"
+                          className="px1 flex-align-right text-light text-medium-hover cursor-pointer flex-no-shrink"
                           name="warning"
                           size={20}
                         />
diff --git a/frontend/src/metabase/dashboard/components/ArchiveDashboardModal.jsx b/frontend/src/metabase/dashboard/components/ArchiveDashboardModal.jsx
index 14eba601aa9cc..a1fe47cdd1620 100644
--- a/frontend/src/metabase/dashboard/components/ArchiveDashboardModal.jsx
+++ b/frontend/src/metabase/dashboard/components/ArchiveDashboardModal.jsx
@@ -1,16 +1,14 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { t } from "c-3po";
+
+import Button from "metabase/components/Button";
 import ModalContent from "metabase/components/ModalContent.jsx";
 
 export default class ArchiveDashboardModal extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      error: null,
-    };
-  }
+  state = {
+    error: null,
+  };
 
   static propTypes = {
     dashboard: PropTypes.object.isRequired,
@@ -43,23 +41,15 @@ export default class ArchiveDashboardModal extends Component {
 
     return (
       <ModalContent title={t`Archive Dashboard`} onClose={this.props.onClose}>
-        <div className="Form-inputs mb4">
-          <p>{t`Are you sure you want to do this?`}</p>
-        </div>
+        <p>{t`Are you sure you want to do this?`}</p>
 
-        <div className="Form-actions">
-          <button
-            className="Button Button--danger"
-            onClick={() => this.archiveDashboard()}
-          >
+        <div>
+          <Button danger onClick={() => this.archiveDashboard()}>
             Yes
-          </button>
-          <button
-            className="Button Button--primary ml1"
-            onClick={this.props.onClose}
-          >
+          </Button>
+          <Button primary ml={1} onClick={this.props.onClose}>
             No
-          </button>
+          </Button>
           {formError}
         </div>
       </ModalContent>
diff --git a/frontend/src/metabase/dashboard/components/DashCard.jsx b/frontend/src/metabase/dashboard/components/DashCard.jsx
index ca7fbd0fa8c27..68b669448a759 100644
--- a/frontend/src/metabase/dashboard/components/DashCard.jsx
+++ b/frontend/src/metabase/dashboard/components/DashCard.jsx
@@ -138,7 +138,7 @@ export default class DashCard extends Component {
       >
         <Visualization
           className="flex-full"
-          classNameWidgets={isEmbed && "text-grey-2 text-grey-4-hover"}
+          classNameWidgets={isEmbed && "text-light text-medium-hover"}
           error={errorMessage}
           errorIcon={errorIcon}
           isSlow={isSlow}
@@ -164,7 +164,7 @@ export default class DashCard extends Component {
               />
             ) : isEmbed ? (
               <QueryDownloadWidget
-                className="m1 text-brand-hover text-grey-2"
+                className="m1 text-brand-hover text-light"
                 classNameClose="hover-child"
                 card={dashcard.card}
                 params={params}
@@ -234,7 +234,7 @@ const ChartSettingsButton = ({ series, onReplaceAllVisualizationSettings }) => (
     triggerElement={
       <Icon name="gear" size={HEADER_ICON_SIZE} style={HEADER_ACTION_STYLE} />
     }
-    triggerClasses="text-grey-2 text-grey-4-hover cursor-pointer flex align-center flex-no-shrink mr1"
+    triggerClasses="text-light text-medium-hover cursor-pointer flex align-center flex-no-shrink mr1"
   >
     <ChartSettings
       series={series}
@@ -246,7 +246,7 @@ const ChartSettingsButton = ({ series, onReplaceAllVisualizationSettings }) => (
 
 const RemoveButton = ({ onRemove }) => (
   <a
-    className="text-grey-2 text-grey-4-hover "
+    className="text-light text-medium-hover "
     data-metabase-event="Dashboard;Remove Card Modal"
     onClick={onRemove}
     style={HEADER_ACTION_STYLE}
@@ -258,7 +258,7 @@ const RemoveButton = ({ onRemove }) => (
 const AddSeriesButton = ({ series, onAddSeries }) => (
   <a
     data-metabase-event={"Dashboard;Edit Series Modal;open"}
-    className="text-grey-2 text-grey-4-hover cursor-pointer h3 flex-no-shrink relative mr1"
+    className="text-light text-medium-hover cursor-pointer h3 flex-no-shrink relative mr1"
     onClick={onAddSeries}
     style={HEADER_ACTION_STYLE}
   >
diff --git a/frontend/src/metabase/dashboard/components/Dashboard.jsx b/frontend/src/metabase/dashboard/components/Dashboard.jsx
index b23786c59a397..eedd561e41bda 100644
--- a/frontend/src/metabase/dashboard/components/Dashboard.jsx
+++ b/frontend/src/metabase/dashboard/components/Dashboard.jsx
@@ -283,7 +283,7 @@ export default class Dashboard extends Component {
                   <div className="text-normal mt3 mb1">
                     {t`This dashboard is looking empty.`}
                   </div>
-                  <div className="text-normal text-grey-2">
+                  <div className="text-normal text-light">
                     {t`Add a question to start making it useful!`}
                   </div>
                 </div>
diff --git a/frontend/src/metabase/dashboard/components/DashboardHeader.jsx b/frontend/src/metabase/dashboard/components/DashboardHeader.jsx
index eab5200cc0241..383d9373baae9 100644
--- a/frontend/src/metabase/dashboard/components/DashboardHeader.jsx
+++ b/frontend/src/metabase/dashboard/components/DashboardHeader.jsx
@@ -3,20 +3,21 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { t } from "c-3po";
-import ActionButton from "metabase/components/ActionButton.jsx";
-import AddToDashSelectQuestionModal from "./AddToDashSelectQuestionModal.jsx";
-import ArchiveDashboardModal from "./ArchiveDashboardModal.jsx";
-import Header from "metabase/components/Header.jsx";
-import Icon from "metabase/components/Icon.jsx";
-import ModalWithTrigger from "metabase/components/ModalWithTrigger.jsx";
-import Tooltip from "metabase/components/Tooltip.jsx";
+import ActionButton from "metabase/components/ActionButton";
+import AddToDashSelectQuestionModal from "./AddToDashSelectQuestionModal";
+import ArchiveDashboardModal from "./ArchiveDashboardModal";
+import Header from "metabase/components/Header";
+import Icon from "metabase/components/Icon";
+import ModalWithTrigger from "metabase/components/ModalWithTrigger";
+import Tooltip from "metabase/components/Tooltip";
 import DashboardEmbedWidget from "../containers/DashboardEmbedWidget";
 
 import { getDashboardActions } from "./DashboardActions";
 
-import ParametersPopover from "./ParametersPopover.jsx";
-import Popover from "metabase/components/Popover.jsx";
+import ParametersPopover from "./ParametersPopover";
+import Popover from "metabase/components/Popover";
 
+import * as Urls from "metabase/lib/urls";
 import MetabaseSettings from "metabase/lib/settings";
 
 import cx from "classnames";
@@ -144,8 +145,10 @@ export default class DashboardHeader extends Component {
   }
 
   async onArchive() {
-    await this.props.archiveDashboard(this.props.dashboard.id);
-    this.props.onChangeLocation("/dashboards");
+    const { dashboard } = this.props;
+    // TODO - this should use entity action
+    await this.props.archiveDashboard(dashboard.id);
+    this.props.onChangeLocation(Urls.collection(dashboard.collection_id));
   }
 
   getEditingButtons() {
diff --git a/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx b/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx
index 0e0356286440d..75a02b3545654 100644
--- a/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx
+++ b/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx
@@ -70,12 +70,6 @@ class AutomaticDashboardApp extends React.Component {
     );
     triggerToast(
       <div className="flex align-center">
-        <Icon
-          name="dashboard"
-          size={22}
-          className="mr2"
-          color={colors["text-medium"]}
-        />
         {t`Your dashboard was saved`}
         <Link
           className="link text-bold ml1"
@@ -84,12 +78,20 @@ class AutomaticDashboardApp extends React.Component {
           {t`See it`}
         </Link>
       </div>,
+      { icon: "dashboard" },
     );
 
     this.setState({ savedDashboardId: newDashboard.id });
     MetabaseAnalytics.trackEvent("AutoDashboard", "Save");
   };
 
+  componentWillReceiveProps(nextProps) {
+    // clear savedDashboardId if changing to a different dashboard
+    if (this.props.location.pathname !== nextProps.location.pathname) {
+      this.setState({ savedDashboardId: null });
+    }
+  }
+
   render() {
     const {
       dashboard,
@@ -186,7 +188,7 @@ const TransientTitle = ({ dashboard }) =>
   ) : null;
 
 const TransientFilters = ({ filter, metadata }) => (
-  <div className="mt1 flex align-center text-grey-4 text-bold">
+  <div className="mt1 flex align-center text-medium text-bold">
     {/* $FlowFixMe */}
     {Q.getFilters({ filter }).map((f, index) => (
       <TransientFilter key={index} filter={f} metadata={metadata} />
@@ -240,11 +242,11 @@ const SuggestionsList = ({ suggestions, section }) => (
             className="bg-light rounded flex align-center justify-center text-slate mr1 flex-no-shrink"
             style={{ width: 48, height: 48 }}
           >
-            <Icon name="bolt" className="Icon text-grey-1" size={22} />
+            <Icon name="bolt" className="Icon text-light" size={22} />
           </div>
           <div>
             <h3 className="m0 mb1 ml1">{s.title}</h3>
-            <p className="text-grey-4 ml1 mt0 mb0">{s.description}</p>
+            <p className="text-medium ml1 mt0 mb0">{s.description}</p>
           </div>
         </Link>
       </li>
@@ -255,7 +257,7 @@ const SuggestionsList = ({ suggestions, section }) => (
 const SuggestionsSidebar = ({ related }) => (
   <div className="flex flex-column bg-medium full-height">
     <div className="py2 text-centered my3">
-      <h3 className="text-grey-3">More X-rays</h3>
+      <h3 className="text-medium">More X-rays</h3>
     </div>
     {Object.entries(related).map(([section, suggestions]) => (
       <SuggestionsList section={section} suggestions={suggestions} />
diff --git a/frontend/src/metabase/entities/collections.js b/frontend/src/metabase/entities/collections.js
index 53c9d51bdc740..b6294b124768f 100644
--- a/frontend/src/metabase/entities/collections.js
+++ b/frontend/src/metabase/entities/collections.js
@@ -5,7 +5,7 @@ import colors from "metabase/lib/colors";
 import { CollectionSchema } from "metabase/schema";
 import { createSelector } from "reselect";
 
-import { getUser } from "metabase/selectors/user";
+import { getUser, getUserDefaultCollectionId } from "metabase/selectors/user";
 
 import { t } from "c-3po";
 
@@ -43,6 +43,24 @@ const Collections = createEntity({
           user && user.personal_collection_id,
         ),
     ),
+    getInitialCollectionId: createSelector(
+      [
+        // these are listed in order of priority
+        (state, { collectionId }) => collectionId,
+        (state, { params }) => (params ? params.collectionId : undefined),
+        (state, { location }) =>
+          location && location.query ? location.query.collectionId : undefined,
+        getUserDefaultCollectionId,
+      ],
+      (...collectionIds) => {
+        for (const collectionId of collectionIds) {
+          if (collectionId !== undefined) {
+            return canonicalCollectionId(collectionId);
+          }
+        }
+        return null;
+      },
+    ),
   },
 
   objectSelectors: {
@@ -111,7 +129,7 @@ export const PERSONAL_COLLECTION = {
   name: t`My personal collection`,
   location: "/",
   path: ["root"],
-  can_edit: true,
+  can_write: true,
 };
 
 // fake collection for admins that contains all other user's collections
@@ -120,7 +138,7 @@ export const PERSONAL_COLLECTIONS = {
   name: t`Personal Collections`,
   location: "/",
   path: ["root"],
-  can_edit: false,
+  can_write: false,
 };
 
 type UserId = number;
@@ -202,7 +220,8 @@ function getExpandedCollectionsById(
   // a child of itself
   for (const { id } of collections) {
     const c = collectionsById[id];
-    if (c.path) {
+    // don't add root as parent of itself
+    if (c.path && c.id !== ROOT_COLLECTION.id) {
       let parentId;
       // move personal collections into PERSONAL_COLLECTIONS fake collection
       if (c.personal_owner_id != null) {
@@ -225,9 +244,12 @@ function getExpandedCollectionsById(
     }
   }
 
-  // remove PERSONAL_COLLECTIONS collection if there are none
-  if (collectionsById[PERSONAL_COLLECTIONS.id].children.length === 0) {
+  // remove PERSONAL_COLLECTIONS collection if there are none or just one (the user's own)
+  if (collectionsById[PERSONAL_COLLECTIONS.id].children.length <= 1) {
     delete collectionsById[PERSONAL_COLLECTIONS.id];
+    collectionsById[ROOT_COLLECTION.id].children = collectionsById[
+      ROOT_COLLECTION.id
+    ].children.filter(c => c.id !== PERSONAL_COLLECTIONS.id);
   }
 
   return collectionsById;
diff --git a/frontend/src/metabase/hoc/ListSearch.jsx b/frontend/src/metabase/hoc/ListSearch.jsx
deleted file mode 100644
index 10778576416aa..0000000000000
--- a/frontend/src/metabase/hoc/ListSearch.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-
-import { caseInsensitiveSearch } from "metabase/lib/string";
-import _ from "underscore";
-
-// Higher order component for filtering a list
-//
-// Injects searchText and onSetSearchText props, and filters down a list prop
-// ("list" by default)
-//
-// Composes with EntityListLoader, ListSelect, etc
-const listSearch = ({
-  listProp = "list",
-  properties = ["name"],
-} = {}) => ComposedComponent =>
-  class ListSearch extends React.Component {
-    state = {
-      searchText: "",
-    };
-    render() {
-      const { ...props } = this.props;
-      const { searchText } = this.state;
-      props[listProp] =
-        props[listProp] &&
-        props[listProp].filter(item =>
-          _.any(properties, p => caseInsensitiveSearch(item[p], searchText)),
-        );
-
-      return (
-        <ComposedComponent
-          {...props}
-          searchText={searchText}
-          onSetSearchText={searchText => this.setState({ searchText })}
-        />
-      );
-    }
-  };
-
-export default listSearch;
diff --git a/frontend/src/metabase/home/components/Activity.jsx b/frontend/src/metabase/home/components/Activity.jsx
index 7a31be22737c3..b86041aee7829 100644
--- a/frontend/src/metabase/home/components/Activity.jsx
+++ b/frontend/src/metabase/home/components/Activity.jsx
@@ -528,7 +528,7 @@ export default class Activity extends Component {
                   <div className="text-normal mt3 mb1">
                     {t`Hmmm, looks like nothing has happened yet.`}
                   </div>
-                  <div className="text-normal text-grey-2">
+                  <div className="text-normal text-light">
                     {t`Save a question and get this baby going!`}
                   </div>
                 </div>
diff --git a/frontend/src/metabase/home/components/ActivityItem.jsx b/frontend/src/metabase/home/components/ActivityItem.jsx
index 194cc4039d15c..c67f278a7fcf9 100644
--- a/frontend/src/metabase/home/components/ActivityItem.jsx
+++ b/frontend/src/metabase/home/components/ActivityItem.jsx
@@ -32,11 +32,11 @@ export default class ActivityItem extends Component {
         </span>
 
         <div className="ml2 full flex align-center">
-          <div className="text-grey-4">
+          <div className="text-medium">
             <span className="text-dark">{description.userName}</span>&nbsp;
             {description.summary}
           </div>
-          <div className="flex-align-right text-right text-grey-2">
+          <div className="flex-align-right text-right text-light">
             {description.timeSince}
           </div>
         </div>
diff --git a/frontend/src/metabase/home/components/RecentViews.jsx b/frontend/src/metabase/home/components/RecentViews.jsx
index 6696cf92a6e48..a705a6c774693 100644
--- a/frontend/src/metabase/home/components/RecentViews.jsx
+++ b/frontend/src/metabase/home/components/RecentViews.jsx
@@ -65,9 +65,9 @@ export default class RecentViews extends Component {
             })}
           </ul>
         ) : (
-          <div className="flex flex-column layout-centered text-normal text-grey-2">
+          <div className="flex flex-column layout-centered text-normal text-light">
             <p
-              className="p3 text-centered text-grey-2"
+              className="p3 text-centered text-light"
               style={{ maxWidth: "100%" }}
             >
               {t`You haven't looked at any dashboards or questions recently`}
diff --git a/frontend/src/metabase/home/components/Smile.jsx b/frontend/src/metabase/home/components/Smile.jsx
deleted file mode 100644
index 79c1c09127c4e..0000000000000
--- a/frontend/src/metabase/home/components/Smile.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { Component } from "react";
-
-export default class Smile extends Component {
-  render() {
-    const styles = {
-      width: "48px",
-      height: "48px",
-      backgroundImage: 'url("app/assets/img/smile.svg")',
-    };
-    return <div style={styles} className="hide md-show" />;
-  }
-}
diff --git a/frontend/src/metabase/home/containers/ArchiveApp.jsx b/frontend/src/metabase/home/containers/ArchiveApp.jsx
index f228427d6c02f..2aba7ab44f169 100644
--- a/frontend/src/metabase/home/containers/ArchiveApp.jsx
+++ b/frontend/src/metabase/home/containers/ArchiveApp.jsx
@@ -76,9 +76,11 @@ export default class ArchiveApp extends Component {
           </Card>
         </Box>
         <BulkActionBar showing={selected.length > 0}>
-          <SelectionControls {...this.props} />
-          <BulkActionControls {...this.props} />
-          <Box ml="auto">{t`${selected.length} items selected`}</Box>
+          <Flex align="center" py={2} px={4}>
+            <SelectionControls {...this.props} />
+            <BulkActionControls {...this.props} />
+            <Box ml="auto">{t`${selected.length} items selected`}</Box>
+          </Flex>
         </BulkActionBar>
       </Box>
     );
diff --git a/frontend/src/metabase/home/containers/SearchApp.jsx b/frontend/src/metabase/home/containers/SearchApp.jsx
index 00607785497bc..0201ef6a807fc 100644
--- a/frontend/src/metabase/home/containers/SearchApp.jsx
+++ b/frontend/src/metabase/home/containers/SearchApp.jsx
@@ -65,7 +65,7 @@ export default class SearchApp extends React.Component {
                 <Box>
                   {types.dashboard && (
                     <Box mt={2} mb={3}>
-                      <div className="text-uppercase text-grey-4 text-small text-bold my1">
+                      <div className="text-uppercase text-medium text-small text-bold my1">
                         {t`Dashboards`}
                       </div>
                       <Card px={2}>
@@ -83,7 +83,7 @@ export default class SearchApp extends React.Component {
                   )}
                   {types.collection && (
                     <Box mt={2} mb={3}>
-                      <div className="text-uppercase text-grey-4 text-small text-bold my1">
+                      <div className="text-uppercase text-medium text-small text-bold my1">
                         {t`Collections`}
                       </div>
                       <Card px={2}>
@@ -101,7 +101,7 @@ export default class SearchApp extends React.Component {
                   )}
                   {types.card && (
                     <Box mt={2} mb={3}>
-                      <div className="text-uppercase text-grey-4 text-small text-bold my1">
+                      <div className="text-uppercase text-medium text-small text-bold my1">
                         {t`Questions`}
                       </div>
                       <Card px={2}>
@@ -119,7 +119,7 @@ export default class SearchApp extends React.Component {
                   )}
                   {types.pulse && (
                     <Box mt={2} mb={3}>
-                      <div className="text-uppercase text-grey-4 text-small text-bold my1">
+                      <div className="text-uppercase text-medium text-small text-bold my1">
                         {t`Pulse`}
                       </div>
                       <Card px={2}>
diff --git a/frontend/src/metabase/icon_paths.js b/frontend/src/metabase/icon_paths.js
index ec21e42f56f66..6bf7d0429c295 100644
--- a/frontend/src/metabase/icon_paths.js
+++ b/frontend/src/metabase/icon_paths.js
@@ -236,8 +236,6 @@ export const ICON_PATHS = {
     "M7 12H5.546A3.548 3.548 0 0 0 2 15.553v12.894A3.547 3.547 0 0 0 5.546 32h20.908C28.414 32 30 30.41 30 28.447V15.553A3.547 3.547 0 0 0 26.454 12H25V8.99C25 4.029 20.97 0 16 0c-4.972 0-9 4.025-9 8.99V12zm4-3.766c0-2.338 1.89-4.413 4.219-4.634L16 3.525l.781.075C19.111 3.82 21 5.896 21 8.234V12H11V8.234zm-5 9.537C6 16.793 6.796 16 7.775 16h16.45c.98 0 1.775.787 1.775 1.77v8.46c0 .977-.796 1.77-1.775 1.77H7.775A1.77 1.77 0 0 1 6 26.23v-8.46zM16 25a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
   mail:
     "M1.503 6h28.994C31.327 6 32 6.673 32 7.503v16.06A3.436 3.436 0 0 1 28.564 27H3.436A3.436 3.436 0 0 1 0 23.564V7.504C0 6.673.673 6 1.503 6zm4.403 2.938l10.63 8.052 10.31-8.052H5.906zm-2.9 1.632v11.989c0 .83.674 1.503 1.504 1.503h23.087c.83 0 1.504-.673 1.504-1.503V11.005l-11.666 8.891a1.503 1.503 0 0 1-1.806.013l-12.622-9.34z",
-  mine:
-    "M28.4907419,50 C25.5584999,53.6578499 21.0527692,56 16,56 C10.9472308,56 6.44150015,53.6578499 3.50925809,50 L28.4907419,50 Z M29.8594823,31.9999955 C27.0930063,27.217587 21.922257,24 16,24 C10.077743,24 4.9069937,27.217587 2.1405177,31.9999955 L29.8594849,32 Z M16,21 C19.8659932,21 23,17.1944204 23,12.5 C23,7.80557963 22,3 16,3 C10,3 9,7.80557963 9,12.5 C9,17.1944204 12.1340068,21 16,21 Z",
   moon:
     "M11.6291702,1.84239429e-11 C19.1234093,1.22958025 24.8413559,7.73631246 24.8413559,15.5785426 C24.8413559,24.2977683 17.7730269,31.3660972 9.05380131,31.3660972 C7.28632096,31.3660972 5.58667863,31.0756481 4,30.5398754 C11.5007933,28.2096945 16.9475786,21.2145715 16.9475786,12.9472835 C16.9475786,7.90001143 14.9174312,3.32690564 11.6291702,1.70246039e-11 L11.6291702,1.84239429e-11 Z",
   move:
@@ -340,8 +338,6 @@ export const ICON_PATHS = {
       "M12.3069589,4.52260192 C14.3462632,1.2440969 17.653446,1.24541073 19.691933,4.52260192 L31.2249413,23.0637415 C33.2642456,26.3422466 31.7889628,29 27.9115531,29 L4.08733885,29 C0.218100769,29 -1.26453645,26.3409327 0.77395061,23.0637415 L12.3069589,4.52260192 Z M18.0499318,23.0163223 C18.0499772,23.0222378 18.05,23.0281606 18.05,23.0340907 C18.05,23.3266209 17.9947172,23.6030345 17.8840476,23.8612637 C17.7737568,24.1186089 17.6195847,24.3426723 17.4224081,24.5316332 C17.2266259,24.7192578 16.998292,24.8660439 16.7389806,24.9713892 C16.4782454,25.0773129 16.1979962,25.1301134 15.9,25.1301134 C15.5950083,25.1301134 15.3111795,25.0774024 15.0502239,24.9713892 C14.7901813,24.8657469 14.5629613,24.7183609 14.3703047,24.5298034 C14.177545,24.3411449 14.0258626,24.1177208 13.9159524,23.8612637 C13.8052827,23.6030345 13.75,23.3266209 13.75,23.0340907 C13.75,22.7411889 13.8054281,22.4661013 13.9165299,22.2109786 C14.0264627,21.9585404 14.1779817,21.7374046 14.3703047,21.5491736 C14.5621821,21.3613786 14.7883231,21.2126553 15.047143,21.1034656 C15.3089445,20.9930181 15.593871,20.938068 15.9,20.938068 C16.1991423,20.938068 16.4804862,20.9931136 16.7420615,21.1034656 C17.0001525,21.2123478 17.2274115,21.360472 17.4224081,21.5473437 C17.6191428,21.7358811 17.7731504,21.957652 17.88347,22.2109786 C17.9124619,22.2775526 17.9376628,22.3454862 17.9590769,22.414741 C18.0181943,22.5998533 18.05,22.7963729 18.05,23 C18.05,23.0054459 18.0499772,23.0108867 18.0499318,23.0163223 L18.0499318,23.0163223 Z M17.7477272,14.1749999 L17.7477272,8.75 L14.1170454,8.75 L14.1170454,14.1749999 C14.1170454,14.8471841 14.1572355,15.5139742 14.2376219,16.1753351 C14.3174838,16.8323805 14.4227217,17.5019113 14.5533248,18.1839498 L14.5921937,18.3869317 L17.272579,18.3869317 L17.3114479,18.1839498 C17.442051,17.5019113 17.5472889,16.8323805 17.6271507,16.1753351 C17.7075371,15.5139742 17.7477272,14.8471841 17.7477272,14.1749999 Z",
     attrs: { fillRule: "evenodd" },
   },
-  x:
-    "m11.271709,16 l-3.19744231e-13,4.728291 l4.728291,0 l16,11.271709 l27.271709,2.39808173e-13 l32,4.728291 l20.728291,16 l31.1615012,26.4332102 l26.4332102,31.1615012 l16,20.728291 l5.56678976,31.1615012 l0.838498756,26.4332102 l11.271709,16 z",
   zoom:
     "M12.416 12.454V8.37h3.256v4.083h4.07v3.266h-4.07v4.083h-3.256V15.72h-4.07v-3.266h4.07zm10.389 13.28c-5.582 4.178-13.543 3.718-18.632-1.37-5.58-5.581-5.595-14.615-.031-20.179 5.563-5.563 14.597-5.55 20.178.031 5.068 5.068 5.545 12.985 1.422 18.563l5.661 5.661a2.08 2.08 0 0 1 .003 2.949 2.085 2.085 0 0 1-2.95-.003l-5.651-5.652zm-1.486-4.371c3.895-3.895 3.885-10.218-.021-14.125-3.906-3.906-10.23-3.916-14.125-.021-3.894 3.894-3.885 10.218.022 14.124 3.906 3.907 10.23 3.916 14.124.022z",
   slack: {
diff --git a/frontend/src/metabase/lib/groups.js b/frontend/src/metabase/lib/groups.js
index 1daa340310135..dfdebe013e684 100644
--- a/frontend/src/metabase/lib/groups.js
+++ b/frontend/src/metabase/lib/groups.js
@@ -21,5 +21,5 @@ export function canEditMembership(group) {
 export function getGroupColor(group) {
   return isAdminGroup(group)
     ? "text-purple"
-    : isDefaultGroup(group) ? "text-grey-4" : "text-brand";
+    : isDefaultGroup(group) ? "text-medium" : "text-brand";
 }
diff --git a/frontend/src/metabase/lib/utils.js b/frontend/src/metabase/lib/utils.js
index cc5d8ff6f8e46..e69b7d9f502b7 100644
--- a/frontend/src/metabase/lib/utils.js
+++ b/frontend/src/metabase/lib/utils.js
@@ -48,8 +48,9 @@ let MetabaseUtils = {
   generatePassword: function(complexity) {
     complexity =
       complexity || MetabaseSettings.passwordComplexityRequirements() || {};
-    // fall back to length of 14 if the password_complexity Setting isn't set or total isn't passed in
-    const len = complexity.total || 14;
+    // generated password must be at least `complexity.total`, but can be longer
+    // so hard code a minimum of 14
+    const len = Math.max(complexity.total || 0, 14);
 
     let password = "";
     let tries = 0;
diff --git a/frontend/src/metabase/meta/types/Dashboard.js b/frontend/src/metabase/meta/types/Dashboard.js
index e48cd9358eacb..d09bed096de8e 100644
--- a/frontend/src/metabase/meta/types/Dashboard.js
+++ b/frontend/src/metabase/meta/types/Dashboard.js
@@ -18,6 +18,7 @@ export type Dashboard = {
   show_in_getting_started?: boolean,
   // incomplete
   parameters: Array<Parameter>,
+  collection_id: ?number,
 };
 
 // TODO Atte Keinänen 4/5/16: After upgrading Flow, use spread operator `...Dashboard`
@@ -28,6 +29,7 @@ export type DashboardWithCards = {
   ordered_cards: Array<DashCard>,
   // incomplete
   parameters: Array<Parameter>,
+  collection_id: ?number,
 };
 
 export type DashCardId = number;
diff --git a/frontend/src/metabase/nav/components/ProfileLink.jsx b/frontend/src/metabase/nav/components/ProfileLink.jsx
index 81c71d25c45f5..29a84babb823b 100644
--- a/frontend/src/metabase/nav/components/ProfileLink.jsx
+++ b/frontend/src/metabase/nav/components/ProfileLink.jsx
@@ -89,13 +89,13 @@ export default class ProfileLink extends Component {
                 <h3 className="text-dark mb1">
                   {t`You're on version`} {tag}
                 </h3>
-                <p className="text-grey-3 text-bold">
+                <p className="text-medium text-bold">
                   {t`Built on`} {date}
                 </p>
                 {!/^v\d+\.\d+\.\d+$/.test(tag) && (
                   <div>
                     {_.map(versionExtra, (value, key) => (
-                      <p key={key} className="text-grey-3 text-bold">
+                      <p key={key} className="text-medium text-bold">
                         {capitalize(key)}: {value}
                       </p>
                     ))}
@@ -105,7 +105,7 @@ export default class ProfileLink extends Component {
             </div>
             <div
               style={{ borderWidth: "2px" }}
-              className="p2 h5 text-centered text-grey-3 border-top"
+              className="p2 h5 text-centered text-medium border-top"
             >
               <span className="block">
                 <span className="text-bold">Metabase</span>{" "}
diff --git a/frontend/src/metabase/nav/containers/Navbar.jsx b/frontend/src/metabase/nav/containers/Navbar.jsx
index 32c748ccadf92..4c21e859c7673 100644
--- a/frontend/src/metabase/nav/containers/Navbar.jsx
+++ b/frontend/src/metabase/nav/containers/Navbar.jsx
@@ -248,15 +248,16 @@ export default class Navbar extends Component {
         py={1}
         pr={2}
       >
-        <Box>
-          <Link
-            to="/"
-            data-metabase-event={"Navbar;Logo"}
-            className="LogoNavItem NavItem cursor-pointer relative z2 flex align-center transition-background justify-center"
-          >
-            <LogoIcon dark />
-          </Link>
-        </Box>
+        <Link
+          to="/"
+          data-metabase-event={"Navbar;Logo"}
+          className="relative cursor-pointer z2 rounded flex justify-center transition-background"
+          p={1}
+          mx={1}
+          hover={{ backgroundColor: DefaultSearchColor }}
+        >
+          <LogoIcon dark />
+        </Link>
         <Flex
           className="absolute top left right bottom z1"
           px={4}
diff --git a/frontend/src/metabase/new_query/components/NewQueryOption.jsx b/frontend/src/metabase/new_query/components/NewQueryOption.jsx
index bdaf4ba3e59a6..0412426cffaed 100644
--- a/frontend/src/metabase/new_query/components/NewQueryOption.jsx
+++ b/frontend/src/metabase/new_query/components/NewQueryOption.jsx
@@ -50,7 +50,7 @@ export default class NewQueryOption extends Component {
           <h2 className={cx("transition-all", { "text-brand": hover })}>
             {title}
           </h2>
-          <p className={"text-grey-4 text-small"}>{description}</p>
+          <p className={"text-medium text-small"}>{description}</p>
         </div>
       </Link>
     );
diff --git a/frontend/src/metabase/public/components/EmbedFrame.css b/frontend/src/metabase/public/components/EmbedFrame.css
index e431a2169bfbb..35865ff14f206 100644
--- a/frontend/src/metabase/public/components/EmbedFrame.css
+++ b/frontend/src/metabase/public/components/EmbedFrame.css
@@ -31,7 +31,7 @@
 
 .Theme--night.EmbedFrame .DashCard .Card {
   background-color: var(--color-bg-black);
-  border: 1px solid var(--color-accent2);
+  border: 1px solid var(--color-bg-dark);
 }
 
 .Theme--night.EmbedFrame .enable-dots-onhover .dc-tooltip circle.dot:hover,
diff --git a/frontend/src/metabase/public/components/EmbedFrame.jsx b/frontend/src/metabase/public/components/EmbedFrame.jsx
index 96a9b1c80890f..93a4ae4587f2d 100644
--- a/frontend/src/metabase/public/components/EmbedFrame.jsx
+++ b/frontend/src/metabase/public/components/EmbedFrame.jsx
@@ -143,7 +143,7 @@ export default class EmbedFrame extends Component {
               <LogoBadge dark={theme} />
             )}
             {actionButtons && (
-              <div className="flex-align-right text-grey-3">
+              <div className="flex-align-right text-medium">
                 {actionButtons}
               </div>
             )}
diff --git a/frontend/src/metabase/public/components/LogoBadge.jsx b/frontend/src/metabase/public/components/LogoBadge.jsx
index 2ccdd5dd7f832..83eaa83e9455b 100644
--- a/frontend/src/metabase/public/components/LogoBadge.jsx
+++ b/frontend/src/metabase/public/components/LogoBadge.jsx
@@ -17,7 +17,7 @@ const LogoBadge = ({ dark }: Props) => (
   >
     <LogoIcon size={28} dark={dark} />
     <span className="text-small">
-      <span className="ml1 text-grey-3">Powered by</span>{" "}
+      <span className="ml1 text-medium">Powered by</span>{" "}
       <span className={cx({ "text-brand": !dark }, { "text-white": dark })}>
         Metabase
       </span>
diff --git a/frontend/src/metabase/public/components/widgets/EmbedModalContent.jsx b/frontend/src/metabase/public/components/widgets/EmbedModalContent.jsx
index d08380aa45250..94ef9c5974a38 100644
--- a/frontend/src/metabase/public/components/widgets/EmbedModalContent.jsx
+++ b/frontend/src/metabase/public/components/widgets/EmbedModalContent.jsx
@@ -188,7 +188,7 @@ export default class EmbedModalContent extends Component {
             />
           </h2>
           <Icon
-            className="text-grey-2 text-grey-4-hover cursor-pointer p2 ml-auto"
+            className="text-light text-medium-hover cursor-pointer p2 ml-auto"
             name="close"
             size={24}
             onClick={() => {
@@ -286,7 +286,7 @@ export const EmbedTitle = ({
 }) => (
   <a className="flex align-center" onClick={onClick}>
     <span className="text-brand-hover">Sharing</span>
-    {type && <Icon name="chevronright" className="mx1 text-grey-3" />}
+    {type && <Icon name="chevronright" className="mx1 text-medium" />}
     {type}
   </a>
 );
diff --git a/frontend/src/metabase/public/components/widgets/SharingPane.jsx b/frontend/src/metabase/public/components/widgets/SharingPane.jsx
index 420292342cadd..a588b9a312afa 100644
--- a/frontend/src/metabase/public/components/widgets/SharingPane.jsx
+++ b/frontend/src/metabase/public/components/widgets/SharingPane.jsx
@@ -126,7 +126,7 @@ export default class SharingPane extends Component {
                         "cursor-pointer text-brand-hover text-bold text-uppercase",
                         extension === this.state.extension
                           ? "text-brand"
-                          : "text-grey-2",
+                          : "text-light",
                       )}
                       onClick={() =>
                         this.setState({
diff --git a/frontend/src/metabase/public/containers/PublicQuestion.jsx b/frontend/src/metabase/public/containers/PublicQuestion.jsx
index fe5f9c9e28120..ee0cdd276118d 100644
--- a/frontend/src/metabase/public/containers/PublicQuestion.jsx
+++ b/frontend/src/metabase/public/containers/PublicQuestion.jsx
@@ -167,7 +167,7 @@ export default class PublicQuestion extends Component {
 
     const actionButtons = result && (
       <QueryDownloadWidget
-        className="m1 text-grey-4-hover"
+        className="m1 text-medium-hover"
         uuid={uuid}
         token={token}
         result={result}
diff --git a/frontend/src/metabase/pulse/actions.js b/frontend/src/metabase/pulse/actions.js
index 351dac6936791..6969e6f09a89d 100644
--- a/frontend/src/metabase/pulse/actions.js
+++ b/frontend/src/metabase/pulse/actions.js
@@ -33,6 +33,7 @@ export const fetchPulses = createThunkAction(FETCH_PULSES, function() {
 
 export const setEditingPulse = createThunkAction(SET_EDITING_PULSE, function(
   id,
+  initialCollectionId = null,
 ) {
   return async function(dispatch, getState) {
     if (id != null) {
@@ -50,6 +51,7 @@ export const setEditingPulse = createThunkAction(SET_EDITING_PULSE, function(
       cards: [],
       channels: defaultChannelSpec ? [createChannel(defaultChannelSpec)] : [],
       skip_if_empty: false,
+      collection_id: initialCollectionId,
     };
   };
 });
diff --git a/frontend/src/metabase/pulse/components/CardPicker.jsx b/frontend/src/metabase/pulse/components/CardPicker.jsx
deleted file mode 100644
index f2b90440acf7f..0000000000000
--- a/frontend/src/metabase/pulse/components/CardPicker.jsx
+++ /dev/null
@@ -1,231 +0,0 @@
-/* eslint "react/prop-types": "warn" */
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import ReactDOM from "react-dom";
-import { t } from "c-3po";
-
-import Icon from "metabase/components/Icon.jsx";
-import Popover from "metabase/components/Popover.jsx";
-import Query from "metabase/lib/query";
-
-import _ from "underscore";
-
-export default class CardPicker extends Component {
-  state = {
-    isOpen: false,
-    inputValue: "",
-    inputWidth: 300,
-    collectionId: undefined,
-  };
-
-  static propTypes = {
-    cardList: PropTypes.array.isRequired,
-    onChange: PropTypes.func.isRequired,
-    attachmentsEnabled: PropTypes.bool,
-  };
-
-  componentWillUnmount() {
-    clearTimeout(this._timer);
-  }
-
-  onInputChange = ({ target }) => {
-    this.setState({ inputValue: target.value });
-  };
-
-  onInputFocus = () => {
-    this.setState({ isOpen: true });
-  };
-
-  onInputBlur = () => {
-    // Without a timeout here isOpen gets set to false when an item is clicked
-    // which causes the click handler to not fire. For some reason this even
-    // happens with a 100ms delay, but not 200ms?
-    clearTimeout(this._timer);
-    this._timer = setTimeout(() => {
-      if (!this.state.isClicking) {
-        this.setState({ isOpen: false });
-      } else {
-        this.setState({ isClicking: false });
-      }
-    }, 250);
-  };
-
-  onChange = id => {
-    this.props.onChange(id);
-    ReactDOM.findDOMNode(this.refs.input).blur();
-  };
-
-  renderItem(card) {
-    const { attachmentsEnabled } = this.props;
-    let error;
-    try {
-      if (!attachmentsEnabled && Query.isBareRows(card.dataset_query.query)) {
-        error = t`Raw data cannot be included in pulses`;
-      }
-    } catch (e) {}
-    if (
-      !attachmentsEnabled &&
-      (card.display === "pin_map" ||
-        card.display === "state" ||
-        card.display === "country")
-    ) {
-      error = t`Maps cannot be included in pulses`;
-    }
-
-    if (error) {
-      return (
-        <li key={card.id} className="px2 py1">
-          <h4 className="text-grey-2">{card.name}</h4>
-          <h4 className="text-gold mt1">{error}</h4>
-        </li>
-      );
-    } else {
-      return (
-        <li
-          key={card.id}
-          className="List-item cursor-pointer"
-          onClickCapture={this.onChange.bind(this, card.id)}
-        >
-          <h4 className="List-item-title px2 py1">{card.name}</h4>
-        </li>
-      );
-    }
-  }
-
-  // keep the modal width in sync with the input width :-/
-  componentDidUpdate() {
-    let { scrollWidth } = ReactDOM.findDOMNode(this.refs.input);
-    if (this.state.inputWidth !== scrollWidth) {
-      this.setState({ inputWidth: scrollWidth });
-    }
-  }
-
-  render() {
-    let { cardList } = this.props;
-
-    let { isOpen, inputValue, inputWidth, collectionId } = this.state;
-
-    let cardByCollectionId = _.groupBy(cardList, "collection_id");
-    let collectionIds = Object.keys(cardByCollectionId);
-
-    const collections = _.chain(cardList)
-      .map(card => card.collection)
-      .uniq(c => c && c.id)
-      .filter(c => c)
-      .sortBy("name")
-      // add "Everything else" as the last option for cards without a
-      // collection
-      .concat([{ id: null, name: t`Everything else` }])
-      .value();
-
-    let visibleCardList;
-    if (inputValue) {
-      let searchString = inputValue.toLowerCase();
-      visibleCardList = cardList.filter(
-        card =>
-          ~(card.name || "").toLowerCase().indexOf(searchString) ||
-          ~(card.description || "").toLowerCase().indexOf(searchString),
-      );
-    } else {
-      if (collectionId !== undefined) {
-        visibleCardList = cardByCollectionId[collectionId];
-      } else if (collectionIds.length === 1) {
-        visibleCardList = cardByCollectionId[collectionIds[0]];
-      }
-    }
-
-    const collection = _.findWhere(collections, { id: collectionId });
-    return (
-      <div className="CardPicker flex-full">
-        <input
-          ref="input"
-          className="input no-focus full text-bold"
-          placeholder={t`Type a question name to filter`}
-          value={this.inputValue}
-          onFocus={this.onInputFocus}
-          onBlur={this.onInputBlur}
-          onChange={this.onInputChange}
-        />
-        <Popover
-          isOpen={isOpen && cardList.length > 0}
-          hasArrow={false}
-          tetherOptions={{
-            attachment: "top left",
-            targetAttachment: "bottom left",
-            targetOffset: "0 0",
-          }}
-        >
-          <div
-            className="rounded bordered scroll-y scroll-show"
-            style={{ width: inputWidth + "px", maxHeight: "400px" }}
-          >
-            {visibleCardList &&
-              collectionIds.length > 1 && (
-                <div
-                  className="flex align-center text-slate cursor-pointer border-bottom p2"
-                  onClick={e => {
-                    this.setState({
-                      collectionId: undefined,
-                      isClicking: true,
-                    });
-                  }}
-                >
-                  <Icon name="chevronleft" size={18} />
-                  <h3 className="ml1">{collection && collection.name}</h3>
-                </div>
-              )}
-            {visibleCardList ? (
-              <ul className="List text-brand">
-                {visibleCardList.map(card => this.renderItem(card))}
-              </ul>
-            ) : collections ? (
-              <CollectionList>
-                {collections.map(collection => (
-                  <CollectionListItem
-                    key={collection.id}
-                    collection={collection}
-                    onClick={e => {
-                      this.setState({
-                        collectionId: collection.id,
-                        isClicking: true,
-                      });
-                    }}
-                  />
-                ))}
-              </CollectionList>
-            ) : null}
-          </div>
-        </Popover>
-      </div>
-    );
-  }
-}
-
-const CollectionListItem = ({ collection, onClick }) => (
-  <li
-    className="List-item cursor-pointer flex align-center py1 px2"
-    onClick={onClick}
-  >
-    <Icon
-      name="collection"
-      style={{ color: collection.color }}
-      className="Icon mr2 text-default"
-      size={18}
-    />
-    <h4 className="List-item-title">{collection.name}</h4>
-    <Icon name="chevronright" className="flex-align-right text-grey-2" />
-  </li>
-);
-
-CollectionListItem.propTypes = {
-  collection: PropTypes.object.isRequired,
-  onClick: PropTypes.func.isRequired,
-};
-
-const CollectionList = ({ children }) => (
-  <ul className="List text-brand">{children}</ul>
-);
-
-CollectionList.propTypes = {
-  children: PropTypes.array.isRequired,
-};
diff --git a/frontend/src/metabase/pulse/components/PulseCardPreview.jsx b/frontend/src/metabase/pulse/components/PulseCardPreview.jsx
index e021fbde5553c..2b2c349876262 100644
--- a/frontend/src/metabase/pulse/components/PulseCardPreview.jsx
+++ b/frontend/src/metabase/pulse/components/PulseCardPreview.jsx
@@ -75,7 +75,7 @@ export default class PulseCardPreview extends Component {
         }}
       >
         <div
-          className="absolute p2 text-grey-2"
+          className="absolute p2 text-light"
           style={{
             top: 2,
             right: 2,
@@ -198,7 +198,7 @@ RenderedPulseCardPreviewHeader.propTypes = {
 };
 
 const RenderedPulseCardPreviewMessage = ({ children }) => (
-  <div className="text-grey-4">{children}</div>
+  <div className="text-medium">{children}</div>
 );
 
 RenderedPulseCardPreviewMessage.propTypes = {
diff --git a/frontend/src/metabase/pulse/components/PulseEdit.jsx b/frontend/src/metabase/pulse/components/PulseEdit.jsx
index baeba0a60d96f..25ecad73e11d8 100644
--- a/frontend/src/metabase/pulse/components/PulseEdit.jsx
+++ b/frontend/src/metabase/pulse/components/PulseEdit.jsx
@@ -26,7 +26,20 @@ import cx from "classnames";
 import { connect } from "react-redux";
 import { goBack } from "react-router-redux";
 
-@connect(null, { goBack })
+import Collections from "metabase/entities/collections";
+
+const mapStateToProps = (state, props) => ({
+  initialCollectionId: Collections.selectors.getInitialCollectionId(
+    state,
+    props,
+  ),
+});
+
+const mapDispatchToProps = {
+  goBack,
+};
+
+@connect(mapStateToProps, mapDispatchToProps)
 @withRouter
 export default class PulseEdit extends Component {
   constructor(props) {
@@ -47,12 +60,15 @@ export default class PulseEdit extends Component {
     saveEditingPulse: PropTypes.func.isRequired,
     deletePulse: PropTypes.func.isRequired,
     onChangeLocation: PropTypes.func.isRequired,
-    location: PropTypes.object,
     goBack: PropTypes.func,
+    initialCollectionId: PropTypes.number,
   };
 
   componentDidMount() {
-    this.props.setEditingPulse(this.props.pulseId);
+    this.props.setEditingPulse(
+      this.props.pulseId,
+      this.props.initialCollectionId,
+    );
     this.props.fetchCards();
     this.props.fetchUsers();
     this.props.fetchPulseFormInput();
@@ -123,7 +139,7 @@ export default class PulseEdit extends Component {
   }
 
   render() {
-    const { pulse, formInput, location } = this.props;
+    const { pulse, formInput } = this.props;
     const isValid = pulseIsValid(pulse, formInput.channels);
     const attachmentsEnabled = emailIsEnabled(pulse);
     return (
@@ -152,15 +168,7 @@ export default class PulseEdit extends Component {
         </div>
         <div className="PulseEdit-content pt2 pb4">
           <PulseEditName {...this.props} setPulse={this.setPulse} />
-          <PulseEditCollection
-            {...this.props}
-            setPulse={this.setPulse}
-            initialCollectionId={
-              location.query.collectionId != null
-                ? parseInt(location.query.collectionId)
-                : undefined
-            }
-          />
+          <PulseEditCollection {...this.props} setPulse={this.setPulse} />
           <PulseEditCards
             {...this.props}
             setPulse={this.setPulse}
diff --git a/frontend/src/metabase/pulse/components/PulseEditCards.jsx b/frontend/src/metabase/pulse/components/PulseEditCards.jsx
index 86a5c99901475..8d36c48578971 100644
--- a/frontend/src/metabase/pulse/components/PulseEditCards.jsx
+++ b/frontend/src/metabase/pulse/components/PulseEditCards.jsx
@@ -159,7 +159,7 @@ export default class PulseEditCards extends Component {
     return (
       <div className="py1">
         <h2>{t`Pick your data`}</h2>
-        <p className="mt1 h4 text-bold text-grey-3">
+        <p className="mt1 h4 text-bold text-medium">
           {t`Choose questions you'd like to send in this pulse`}.
         </p>
         <ol className="my3">
diff --git a/frontend/src/metabase/pulse/components/PulseEditChannels.jsx b/frontend/src/metabase/pulse/components/PulseEditChannels.jsx
index cfb60fd8475ef..00a0202ac6749 100644
--- a/frontend/src/metabase/pulse/components/PulseEditChannels.jsx
+++ b/frontend/src/metabase/pulse/components/PulseEditChannels.jsx
@@ -263,7 +263,7 @@ export default class PulseEditChannels extends Component {
         <div className="flex align-center p3 border-row-divider">
           {CHANNEL_ICONS[channelSpec.type] && (
             <Icon
-              className="mr1 text-grey-2"
+              className="mr1 text-light"
               name={CHANNEL_ICONS[channelSpec.type]}
               size={28}
             />
diff --git a/frontend/src/metabase/pulse/components/PulseEditCollection.jsx b/frontend/src/metabase/pulse/components/PulseEditCollection.jsx
index 461801aa9dbec..34f4ae1cd567e 100644
--- a/frontend/src/metabase/pulse/components/PulseEditCollection.jsx
+++ b/frontend/src/metabase/pulse/components/PulseEditCollection.jsx
@@ -6,18 +6,14 @@ import CollectionSelect from "metabase/containers/CollectionSelect";
 
 export default class PulseEditCollection extends React.Component {
   render() {
-    const { pulse, setPulse, initialCollectionId } = this.props;
+    const { pulse, setPulse } = this.props;
     return (
       <Box>
         <h2>{t`Which collection should this pulse live in?`}</h2>
 
         <Box my={2} width={400}>
           <CollectionSelect
-            value={
-              pulse.collection_id !== undefined
-                ? pulse.collection_id
-                : initialCollectionId
-            }
+            value={pulse.collection_id}
             onChange={collection_id =>
               setPulse({
                 ...pulse,
diff --git a/frontend/src/metabase/pulse/components/PulseEditName.jsx b/frontend/src/metabase/pulse/components/PulseEditName.jsx
index 3bf984dfd32e2..27d6c9f670cbb 100644
--- a/frontend/src/metabase/pulse/components/PulseEditName.jsx
+++ b/frontend/src/metabase/pulse/components/PulseEditName.jsx
@@ -33,7 +33,7 @@ export default class PulseEditName extends Component {
     return (
       <div className="py1">
         <h2>{t`Name your pulse`}</h2>
-        <p className="mt1 h4 text-bold text-grey-3">
+        <p className="mt1 h4 text-bold text-medium">
           {t`Give your pulse a name to help others understand what it's about`}.
         </p>
         <div className="my3">
diff --git a/frontend/src/metabase/pulse/components/PulseEditSkip.jsx b/frontend/src/metabase/pulse/components/PulseEditSkip.jsx
index 32e29bf58225a..b178c2e5fa842 100644
--- a/frontend/src/metabase/pulse/components/PulseEditSkip.jsx
+++ b/frontend/src/metabase/pulse/components/PulseEditSkip.jsx
@@ -20,7 +20,7 @@ export default class PulseEditSkip extends Component {
     return (
       <div className="py1">
         <h2>{t`Skip if no results`}</h2>
-        <p className="mt1 h4 text-bold text-grey-3">
+        <p className="mt1 h4 text-bold text-medium">
           {t`Skip a scheduled Pulse if none of its questions have any results`}.
         </p>
         <div className="my3">
diff --git a/frontend/src/metabase/pulse/components/PulseListChannel.jsx b/frontend/src/metabase/pulse/components/PulseListChannel.jsx
index 155a777ec45bf..29a0c21b69f8f 100644
--- a/frontend/src/metabase/pulse/components/PulseListChannel.jsx
+++ b/frontend/src/metabase/pulse/components/PulseListChannel.jsx
@@ -70,7 +70,7 @@ export default class PulseListChannel extends Component {
     }
 
     return (
-      <div className="h4 text-grey-4 py2 flex align-center">
+      <div className="h4 text-medium py2 flex align-center">
         {channelIcon && <Icon className="mr1" name={channelIcon} size={24} />}
         <span>
           {channelVerb + " "}
@@ -105,7 +105,7 @@ export default class PulseListChannel extends Component {
                   channel.channel_type
                 }`}</div>
                 <Icon
-                  className="p2 text-grey-1 text-white-hover cursor-pointer"
+                  className="p2 text-light text-white-hover cursor-pointer"
                   name="close"
                   size={12}
                   onClick={this.unsubscribe}
diff --git a/frontend/src/metabase/pulse/components/WhatsAPulse.jsx b/frontend/src/metabase/pulse/components/WhatsAPulse.jsx
index cfa4f781ba0c2..c57b3844c9abb 100644
--- a/frontend/src/metabase/pulse/components/WhatsAPulse.jsx
+++ b/frontend/src/metabase/pulse/components/WhatsAPulse.jsx
@@ -24,7 +24,7 @@ export default class WhatsAPulse extends Component {
           />
         </div>
         <div
-          className="h3 my3 text-centered text-grey-2 text-bold"
+          className="h3 my3 text-centered text-light text-bold"
           style={{ maxWidth: "500px" }}
         >
           {t`Pulses let you send data from Metabase to email or Slack on the schedule of your choice.`}
diff --git a/frontend/src/metabase/qb/components/actions/GenerateDashboardAction.jsx b/frontend/src/metabase/qb/components/actions/GenerateDashboardAction.jsx
deleted file mode 100644
index b7ff628478a4a..0000000000000
--- a/frontend/src/metabase/qb/components/actions/GenerateDashboardAction.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/* @flow */
-
-import type {
-  ClickAction,
-  ClickActionProps,
-} from "metabase/meta/types/Visualization";
-import StructuredQuery from "metabase-lib/lib/queries/StructuredQuery";
-import { utf8_to_b64url } from "metabase/lib/card";
-import { t } from "c-3po";
-
-export default ({ question, settings }: ClickActionProps): ClickAction[] => {
-  console.log(JSON.stringify(question.query().datasetQuery()));
-  let dashboard_url = "adhoc";
-
-  const query = question.query();
-  if (!(query instanceof StructuredQuery)) {
-    return [];
-  }
-
-  // aggregations
-  if (query.aggregations().length) {
-    return [];
-  }
-  if (question.card().id) {
-    dashboard_url = `/auto/dashboard/question/${question.card().id}`;
-  } else {
-    let encodedQueryDict = utf8_to_b64url(
-      JSON.stringify(question.query().datasetQuery()),
-    );
-    dashboard_url = `/auto/dashboard/adhoc/${encodedQueryDict}`;
-  }
-  return [
-    {
-      name: "generate-dashboard",
-      title: t`See an exploration of this question`,
-      icon: "bolt",
-      url: () => dashboard_url,
-    },
-  ];
-};
diff --git a/frontend/src/metabase/query_builder/components/ActionsWidget.jsx b/frontend/src/metabase/query_builder/components/ActionsWidget.jsx
index daec2564860d0..12215a83a2683 100644
--- a/frontend/src/metabase/query_builder/components/ActionsWidget.jsx
+++ b/frontend/src/metabase/query_builder/components/ActionsWidget.jsx
@@ -190,7 +190,7 @@ export default class ActionsWidget extends Component {
             >
               {PopoverComponent ? (
                 <div>
-                  <div className="flex align-center text-grey-4 p1 px2">
+                  <div className="flex align-center text-medium p1 px2">
                     <Icon
                       name="chevronleft"
                       className="cursor-pointer"
@@ -225,7 +225,7 @@ export default class ActionsWidget extends Component {
                 actions.map((action, index) => (
                   <div
                     key={index}
-                    className="p2 flex align-center text-grey-4 brand-hover cursor-pointer"
+                    className="p2 flex align-center text-medium brand-hover cursor-pointer"
                     onClick={() => this.handleActionClick(index)}
                   >
                     {action.icon && (
diff --git a/frontend/src/metabase/query_builder/components/AddClauseButton.jsx b/frontend/src/metabase/query_builder/components/AddClauseButton.jsx
index 866a2e4e2fc6b..fac84a957e902 100644
--- a/frontend/src/metabase/query_builder/components/AddClauseButton.jsx
+++ b/frontend/src/metabase/query_builder/components/AddClauseButton.jsx
@@ -22,7 +22,7 @@ export default class AddClauseButton extends Component {
     const { text, onClick } = this.props;
 
     const className =
-      "text-grey-2 text-bold flex align-center text-grey-4-hover cursor-pointer no-decoration transition-color";
+      "text-light text-bold flex align-center text-medium-hover cursor-pointer no-decoration transition-color";
     if (onClick) {
       return (
         <a className={className} onClick={onClick}>
diff --git a/frontend/src/metabase/query_builder/components/AggregationPopover.jsx b/frontend/src/metabase/query_builder/components/AggregationPopover.jsx
index 996e17c994391..6cf7e2e07d2a1 100644
--- a/frontend/src/metabase/query_builder/components/AggregationPopover.jsx
+++ b/frontend/src/metabase/query_builder/components/AggregationPopover.jsx
@@ -234,7 +234,7 @@ export default class AggregationPopover extends Component {
     if (editingAggregation) {
       return (
         <div style={{ width: editingAggregation ? 500 : 300 }}>
-          <div className="text-grey-3 p1 py2 border-bottom flex align-center">
+          <div className="text-medium p1 py2 border-bottom flex align-center">
             <a
               className="cursor-pointer flex align-center"
               onClick={this.onClearAggregation}
@@ -306,7 +306,7 @@ export default class AggregationPopover extends Component {
         <div style={{ minWidth: 300 }}>
           <div
             ref={_ => (this._header = _)}
-            className="text-grey-3 p1 py2 border-bottom flex align-center"
+            className="text-medium p1 py2 border-bottom flex align-center"
           >
             <a
               className="cursor-pointer flex align-center"
@@ -339,7 +339,7 @@ export default class AggregationPopover extends Component {
           renderSectionIcon={s => <Icon name={s.icon} size={18} />}
           renderItemExtra={this.renderItemExtra.bind(this)}
           getItemClasses={item =>
-            item.metric && item.metric.archived ? "text-grey-3" : null
+            item.metric && item.metric.archived ? "text-medium" : null
           }
           onChangeSection={index => {
             if (index === customExpressionIndex) {
diff --git a/frontend/src/metabase/query_builder/components/AlertListPopoverContent.jsx b/frontend/src/metabase/query_builder/components/AlertListPopoverContent.jsx
index 1417e6bcb8a39..59e0caff979f5 100644
--- a/frontend/src/metabase/query_builder/components/AlertListPopoverContent.jsx
+++ b/frontend/src/metabase/query_builder/components/AlertListPopoverContent.jsx
@@ -192,7 +192,7 @@ export class AlertListItem extends Component {
 
     return (
       <li
-        className={cx("flex p3 text-grey-4 border-bottom", {
+        className={cx("flex p3 text-medium border-bottom", {
           "bg-light-blue": highlight,
         })}
       >
diff --git a/frontend/src/metabase/query_builder/components/AlertModals.jsx b/frontend/src/metabase/query_builder/components/AlertModals.jsx
index 5b067c24f741a..1cc0616d9c6bc 100644
--- a/frontend/src/metabase/query_builder/components/AlertModals.jsx
+++ b/frontend/src/metabase/query_builder/components/AlertModals.jsx
@@ -652,7 +652,7 @@ export class RawDataAlertTip extends Component {
 
     return (
       <div className="border-row-divider p3 flex align-center">
-        <div className="circle flex align-center justify-center bg-light p2 mr2 text-grey-3">
+        <div className="circle flex align-center justify-center bg-light p2 mr2 text-medium">
           <Icon name="lightbulb" size="20" />
         </div>
         {showMultiSeriesGoalAlert ? (
diff --git a/frontend/src/metabase/query_builder/components/Clearable.jsx b/frontend/src/metabase/query_builder/components/Clearable.jsx
index ff467956e97c2..12c205e56ad92 100644
--- a/frontend/src/metabase/query_builder/components/Clearable.jsx
+++ b/frontend/src/metabase/query_builder/components/Clearable.jsx
@@ -8,7 +8,7 @@ const Clearable = ({ onClear, children, className }) => (
     {children}
     {onClear && (
       <a
-        className="text-grey-2 no-decoration pr1 flex align-center"
+        className="text-light no-decoration pr1 flex align-center"
         onClick={onClear}
       >
         <Icon name="close" size={14} />
diff --git a/frontend/src/metabase/query_builder/components/DataSelector.jsx b/frontend/src/metabase/query_builder/components/DataSelector.jsx
index 302c631e41372..11216c7554caa 100644
--- a/frontend/src/metabase/query_builder/components/DataSelector.jsx
+++ b/frontend/src/metabase/query_builder/components/DataSelector.jsx
@@ -54,7 +54,7 @@ export const SchemaAndSegmentTriggerContent = ({
     );
   } else {
     return (
-      <span className="text-grey-4 no-decoration">{t`Pick a segment or table`}</span>
+      <span className="text-medium no-decoration">{t`Pick a segment or table`}</span>
     );
   }
 };
@@ -70,7 +70,7 @@ export const DatabaseTriggerContent = ({ selectedDatabase }) =>
   selectedDatabase ? (
     <span className="text-grey no-decoration">{selectedDatabase.name}</span>
   ) : (
-    <span className="text-grey-4 no-decoration">{t`Select a database`}</span>
+    <span className="text-medium no-decoration">{t`Select a database`}</span>
   );
 
 export const SchemaTableAndFieldDataSelector = props => (
@@ -85,7 +85,7 @@ export const SchemaTableAndFieldDataSelector = props => (
 export const FieldTriggerContent = ({ selectedDatabase, selectedField }) => {
   if (!selectedField || !selectedField.table) {
     return (
-      <span className="flex-full text-grey-4 no-decoration">{t`Select...`}</span>
+      <span className="flex-full text-medium no-decoration">{t`Select...`}</span>
     );
   } else {
     const hasMultipleSchemas =
@@ -93,7 +93,7 @@ export const FieldTriggerContent = ({ selectedDatabase, selectedField }) => {
       _.uniq(selectedDatabase.tables, t => t.schema).length > 1;
     return (
       <div className="flex-full cursor-pointer">
-        <div className="h6 text-bold text-uppercase text-grey-2">
+        <div className="h6 text-bold text-uppercase text-light">
           {hasMultipleSchemas && selectedField.table.schema + " > "}
           {selectedField.table.display_name}
         </div>
@@ -125,7 +125,7 @@ export const TableTriggerContent = ({ selectedTable }) =>
       {selectedTable.display_name || selectedTable.name}
     </span>
   ) : (
-    <span className="text-grey-4 no-decoration">{t`Select a table`}</span>
+    <span className="text-medium no-decoration">{t`Select a table`}</span>
   );
 
 @connect(state => ({ metadata: getMetadata(state) }), { fetchTableMetadata })
diff --git a/frontend/src/metabase/query_builder/components/ExtendedOptions.jsx b/frontend/src/metabase/query_builder/components/ExtendedOptions.jsx
index b307fe65f1b83..73d116f77b90c 100644
--- a/frontend/src/metabase/query_builder/components/ExtendedOptions.jsx
+++ b/frontend/src/metabase/query_builder/components/ExtendedOptions.jsx
@@ -121,7 +121,7 @@ export default class ExtendedOptions extends Component {
     if ((sortList && sortList.length > 0) || addSortButton) {
       return (
         <div className="pb3">
-          <div className="pb1 h6 text-uppercase text-grey-3 text-bold">{t`Sort`}</div>
+          <div className="pb1 h6 text-uppercase text-medium text-bold">{t`Sort`}</div>
           {sortList}
           {addSortButton}
         </div>
@@ -190,7 +190,7 @@ export default class ExtendedOptions extends Component {
 
           {features.limit && (
             <div>
-              <div className="mb1 h6 text-uppercase text-grey-3 text-bold">{t`Row limit`}</div>
+              <div className="mb1 h6 text-uppercase text-medium text-bold">{t`Row limit`}</div>
               <LimitWidget limit={query.limit()} onChange={this.setLimit} />
             </div>
           )}
@@ -212,7 +212,7 @@ export default class ExtendedOptions extends Component {
     return (
       <div className="GuiBuilder-section GuiBuilder-sort-limit flex align-center">
         <span
-          className={cx("EllipsisButton no-decoration text-grey-1 px1", {
+          className={cx("EllipsisButton no-decoration text-light px1", {
             "cursor-pointer": onClick,
           })}
           onClick={onClick}
diff --git a/frontend/src/metabase/query_builder/components/FieldList.jsx b/frontend/src/metabase/query_builder/components/FieldList.jsx
index eca0c89a8aa02..27b0470943d17 100644
--- a/frontend/src/metabase/query_builder/components/FieldList.jsx
+++ b/frontend/src/metabase/query_builder/components/FieldList.jsx
@@ -116,7 +116,7 @@ export default class FieldList extends Component {
         {item.segment && this.renderSegmentTooltip(item.segment)}
         {item.dimension &&
           item.dimension.tag && (
-            <span className="h5 text-grey-2 px1">{item.dimension.tag}</span>
+            <span className="h5 text-light px1">{item.dimension.tag}</span>
           )}
         {enableSubDimensions &&
         item.dimension &&
diff --git a/frontend/src/metabase/query_builder/components/FieldName.jsx b/frontend/src/metabase/query_builder/components/FieldName.jsx
index 7c178b68f162e..447375b202915 100644
--- a/frontend/src/metabase/query_builder/components/FieldName.jsx
+++ b/frontend/src/metabase/query_builder/components/FieldName.jsx
@@ -76,7 +76,7 @@ export default class FieldName extends Component {
         parts.push(<span key="field">{t`Unknown Field`}</span>);
       }
     } else {
-      parts.push(<span key="field" className={"text-grey-2"}>{t`field`}</span>);
+      parts.push(<span key="field" className={"text-light"}>{t`field`}</span>);
     }
 
     const content = (
diff --git a/frontend/src/metabase/query_builder/components/GuiQueryEditor.jsx b/frontend/src/metabase/query_builder/components/GuiQueryEditor.jsx
index 70f0e54048d20..33c30e1e74b0e 100644
--- a/frontend/src/metabase/query_builder/components/GuiQueryEditor.jsx
+++ b/frontend/src/metabase/query_builder/components/GuiQueryEditor.jsx
@@ -91,7 +91,7 @@ export default class GuiQueryEditor extends Component {
 
   renderAdd(text: ?string, onClick: ?() => void, targetRefName?: string) {
     let className =
-      "AddButton text-grey-2 text-bold flex align-center text-grey-4-hover cursor-pointer no-decoration transition-color";
+      "AddButton text-light text-bold flex align-center text-medium-hover cursor-pointer no-decoration transition-color";
     if (onClick) {
       return (
         <a className={className} onClick={onClick}>
diff --git a/frontend/src/metabase/query_builder/components/NativeQueryEditor.jsx b/frontend/src/metabase/query_builder/components/NativeQueryEditor.jsx
index f509501b973cc..0545a46c17db6 100644
--- a/frontend/src/metabase/query_builder/components/NativeQueryEditor.jsx
+++ b/frontend/src/metabase/query_builder/components/NativeQueryEditor.jsx
@@ -335,7 +335,7 @@ export default class NativeQueryEditor extends Component {
       }
     } else {
       dataSelectors = (
-        <span className="p2 text-grey-4">{t`This question is written in ${query.nativeQueryLanguage()}.`}</span>
+        <span className="p2 text-medium">{t`This question is written in ${query.nativeQueryLanguage()}.`}</span>
       );
     }
 
diff --git a/frontend/src/metabase/query_builder/components/QueryHeader.jsx b/frontend/src/metabase/query_builder/components/QueryHeader.jsx
index 1a29a8461cd55..0ced7080bab49 100644
--- a/frontend/src/metabase/query_builder/components/QueryHeader.jsx
+++ b/frontend/src/metabase/query_builder/components/QueryHeader.jsx
@@ -37,10 +37,16 @@ import {
 import { getUser } from "metabase/home/selectors";
 import { fetchAlertsForQuestion } from "metabase/alert/alert";
 
+import Collections from "metabase/entities/collections";
+
 const mapStateToProps = (state, props) => ({
   questionAlerts: getQuestionAlerts(state),
   visualizationSettings: getVisualizationSettings(state),
   user: getUser(state),
+  initialCollectionId: Collections.selectors.getInitialCollectionId(
+    state,
+    props,
+  ),
 });
 
 const mapDispatchToProps = {
@@ -187,7 +193,7 @@ export default class QueryHeader extends Component {
           form
           key="save"
           ref="saveModal"
-          triggerClasses="h4 text-grey-4 text-brand-hover text-uppercase"
+          triggerClasses="h4 text-medium text-brand-hover text-uppercase"
           triggerElement={t`Save`}
         >
           <SaveQuestionModal
@@ -198,6 +204,7 @@ export default class QueryHeader extends Component {
             saveFn={card => this.onSave(card, false)}
             createFn={this.onCreate}
             onClose={() => this.refs.saveModal && this.refs.saveModal.toggle()}
+            initialCollectionId={this.props.initialCollectionId}
           />
         </ModalWithTrigger>,
       ]);
@@ -238,7 +245,7 @@ export default class QueryHeader extends Component {
           <ActionButton
             key="save"
             actionFn={() => this.onSave(this.props.card, false)}
-            className="cursor-pointer text-brand-hover bg-white text-grey-4 text-uppercase"
+            className="cursor-pointer text-brand-hover bg-white text-medium text-uppercase"
             normalText={t`SAVE CHANGES`}
             activeText={t`Saving…`}
             failedText={t`Save failed`}
@@ -250,7 +257,7 @@ export default class QueryHeader extends Component {
         buttonSections.push([
           <a
             key="cancel"
-            className="cursor-pointer text-brand-hover text-grey-4 text-uppercase"
+            className="cursor-pointer text-brand-hover text-medium text-uppercase"
             onClick={this.onCancel}
           >
             {t`CANCEL`}
@@ -359,6 +366,7 @@ export default class QueryHeader extends Component {
               }}
               onClose={() => this.refs.addToDashSaveModal.toggle()}
               multiStep
+              initiCollectionId={this.props.initiCollectionId}
             />
           </ModalWithTrigger>
         </Tooltip>,
@@ -585,6 +593,7 @@ export default class QueryHeader extends Component {
               this.setState({ modal: null })
             }
             multiStep
+            initiCollectionId={this.props.initiCollectionId}
           />
         </Modal>
       </div>
diff --git a/frontend/src/metabase/query_builder/components/QueryModeButton.jsx b/frontend/src/metabase/query_builder/components/QueryModeButton.jsx
index 315dc59bce972..b3f9d333e583f 100644
--- a/frontend/src/metabase/query_builder/components/QueryModeButton.jsx
+++ b/frontend/src/metabase/query_builder/components/QueryModeButton.jsx
@@ -69,7 +69,7 @@ export default class QueryModeButton extends Component {
             data-metabase-event={"QueryBuilder;Toggle Mode"}
             className={cx("cursor-pointer", {
               "text-brand-hover": onClick,
-              "text-grey-1": !onClick,
+              "text-light": !onClick,
             })}
             onClick={onClick}
           >
diff --git a/frontend/src/metabase/query_builder/components/QueryVisualization.jsx b/frontend/src/metabase/query_builder/components/QueryVisualization.jsx
index 23770d3d46590..2317bd7294154 100644
--- a/frontend/src/metabase/query_builder/components/QueryVisualization.jsx
+++ b/frontend/src/metabase/query_builder/components/QueryVisualization.jsx
@@ -182,7 +182,7 @@ export default class QueryVisualization extends Component {
             className="flex"
             items={messages}
             renderItem={item => (
-              <div className="flex-no-shrink flex align-center mx2 h5 text-grey-4">
+              <div className="flex-no-shrink flex align-center mx2 h5 text-medium">
                 <Icon className="mr1" name={item.icon} size={12} />
                 {item.message}
               </div>
@@ -289,7 +289,7 @@ export default class QueryVisualization extends Component {
 }
 
 export const VisualizationEmptyState = ({ showTutorialLink }) => (
-  <div className="flex full layout-centered text-grey-1 flex-column">
+  <div className="flex full layout-centered text-light flex-column">
     <h1
     >{t`If you give me some data I can show you something cool. Run a Query!`}</h1>
     {showTutorialLink && (
diff --git a/frontend/src/metabase/query_builder/components/RunButton.jsx b/frontend/src/metabase/query_builder/components/RunButton.jsx
index 08409ac0cee29..2f7c0e3660a76 100644
--- a/frontend/src/metabase/query_builder/components/RunButton.jsx
+++ b/frontend/src/metabase/query_builder/components/RunButton.jsx
@@ -40,8 +40,8 @@ export default class RunButton extends Component {
       {
         "RunButton--hidden": !buttonText,
         "Button--primary": isDirty,
-        "text-grey-2": !isDirty,
-        "text-grey-4-hover": !isDirty,
+        "text-light": !isDirty,
+        "text-medium-hover": !isDirty,
       },
     );
     return (
diff --git a/frontend/src/metabase/query_builder/components/SavedQuestionIntroModal.jsx b/frontend/src/metabase/query_builder/components/SavedQuestionIntroModal.jsx
index 32758c6a1a2b3..176e7b1dbb7d0 100644
--- a/frontend/src/metabase/query_builder/components/SavedQuestionIntroModal.jsx
+++ b/frontend/src/metabase/query_builder/components/SavedQuestionIntroModal.jsx
@@ -11,7 +11,7 @@ export default class SavedQuestionIntroModal extends Component {
           <div className="Modal-header Form-header">
             <h2 className="pb2 text-dark">{t`It's okay to play around with saved questions`}</h2>
 
-            <div className="pb1 text-grey-4">{t`You won't make any permanent changes to a saved question unless you click the edit icon in the top-right.`}</div>
+            <div className="pb1 text-medium">{t`You won't make any permanent changes to a saved question unless you click the edit icon in the top-right.`}</div>
           </div>
 
           <div className="Form-actions flex justify-center py1">
diff --git a/frontend/src/metabase/query_builder/components/SelectionModule.jsx b/frontend/src/metabase/query_builder/components/SelectionModule.jsx
index 78e509faac0f4..a3480a2aed029 100644
--- a/frontend/src/metabase/query_builder/components/SelectionModule.jsx
+++ b/frontend/src/metabase/query_builder/components/SelectionModule.jsx
@@ -244,7 +244,7 @@ export default class SelectionModule extends Component {
     if (this.props.remove) {
       remove = (
         <a
-          className="text-grey-2 no-decoration pr1 flex align-center"
+          className="text-light no-decoration pr1 flex align-center"
           onClick={this.props.remove.bind(null, this.props.index)}
         >
           <Icon name="close" size={14} />
diff --git a/frontend/src/metabase/query_builder/components/dataref/DetailPane.jsx b/frontend/src/metabase/query_builder/components/dataref/DetailPane.jsx
index 31d69223eddca..0244946ca5df6 100644
--- a/frontend/src/metabase/query_builder/components/dataref/DetailPane.jsx
+++ b/frontend/src/metabase/query_builder/components/dataref/DetailPane.jsx
@@ -13,7 +13,7 @@ const DetailPane = ({
 }) => (
   <div>
     <h1>{name}</h1>
-    <p className={cx({ "text-grey-3": !description })}>
+    <p className={cx({ "text-medium": !description })}>
       {description || t`No description set.`}
     </p>
     {useForCurrentQuestion && useForCurrentQuestion.length > 0 ? (
diff --git a/frontend/src/metabase/query_builder/components/dataref/TablePane.jsx b/frontend/src/metabase/query_builder/components/dataref/TablePane.jsx
index c2f7081d8dca5..5bcce76067233 100644
--- a/frontend/src/metabase/query_builder/components/dataref/TablePane.jsx
+++ b/frontend/src/metabase/query_builder/components/dataref/TablePane.jsx
@@ -121,7 +121,7 @@ export default class TablePane extends Component {
                 >
                   {fk.origin.table.display_name}
                   {fkCountsByTable[fk.origin.table.id] > 1 ? (
-                    <span className="text-grey-3 text-light h5">
+                    <span className="text-medium text-light h5">
                       {" "}
                       via {fk.origin.display_name}
                     </span>
@@ -145,7 +145,7 @@ export default class TablePane extends Component {
           </ul>
         );
       } else {
-        const descriptionClasses = cx({ "text-grey-3": !table.description });
+        const descriptionClasses = cx({ "text-medium": !table.description });
         description = (
           <p className={descriptionClasses}>
             {table.description || t`No description set.`}
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx
index fcdcf6026e760..3f3a0c7ef912e 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx
+++ b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx
@@ -314,7 +314,7 @@ export default class ExpressionEditorTextfield extends Component {
                   (i === 0 || suggestion.type !== suggestions[i - 1].type) && (
                     <li
                       ref={"header-" + i}
-                      className="mx2 h6 text-uppercase text-bold text-grey-3 py1 pt2"
+                      className="mx2 h6 text-uppercase text-bold text-medium py1 pt2"
                     >
                       {suggestion.type}
                     </li>
@@ -356,7 +356,7 @@ export default class ExpressionEditorTextfield extends Component {
                   <li
                     style={{ paddingTop: 5, paddingBottom: 5 }}
                     onMouseDownCapture={e => this.onShowMoreMouseDown(e)}
-                    className="px2 text-italic text-grey-3 cursor-pointer text-brand-hover"
+                    className="px2 text-italic text-medium cursor-pointer text-brand-hover"
                   >
                     and {suggestions.length - MAX_SUGGESTIONS} more
                   </li>
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExpressionWidget.jsx b/frontend/src/metabase/query_builder/components/expressions/ExpressionWidget.jsx
index 567a0b8634ffc..9a0a9d381ffa0 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExpressionWidget.jsx
+++ b/frontend/src/metabase/query_builder/components/expressions/ExpressionWidget.jsx
@@ -43,7 +43,7 @@ export default class ExpressionWidget extends Component {
     return (
       <div style={{ maxWidth: "600px" }}>
         <div className="p2">
-          <div className="h5 text-uppercase text-grey-3 text-bold">{t`Field formula`}</div>
+          <div className="h5 text-uppercase text-medium text-bold">{t`Field formula`}</div>
           <div>
             <ExpressionEditorTextfield
               expression={expression}
@@ -53,7 +53,7 @@ export default class ExpressionWidget extends Component {
               }
               onError={errorMessage => this.setState({ error: errorMessage })}
             />
-            <p className="h5 text-grey-5">
+            <p className="h5 text-medium">
               {t`Think of this as being kind of like writing a formula in a spreadsheet program: you can use numbers, fields in this table, mathematical symbols like +, and some functions. So you could type something like Subtotal - Cost.`}
               &nbsp;<a
                 className="link"
@@ -63,7 +63,7 @@ export default class ExpressionWidget extends Component {
             </p>
           </div>
 
-          <div className="mt3 h5 text-uppercase text-grey-3 text-bold">{t`Give it a name`}</div>
+          <div className="mt3 h5 text-uppercase text-medium text-bold">{t`Give it a name`}</div>
           <div>
             <input
               className="my1 input block full"
diff --git a/frontend/src/metabase/query_builder/components/expressions/Expressions.jsx b/frontend/src/metabase/query_builder/components/expressions/Expressions.jsx
index 73e0dc9bcdf7e..1e0f66a8c25fe 100644
--- a/frontend/src/metabase/query_builder/components/expressions/Expressions.jsx
+++ b/frontend/src/metabase/query_builder/components/expressions/Expressions.jsx
@@ -26,7 +26,7 @@ export default class Expressions extends Component {
     let sortedNames = _.sortBy(_.keys(expressions), _.identity);
     return (
       <div className="pb3">
-        <div className="pb1 h6 text-uppercase text-grey-3 text-bold">
+        <div className="pb1 h6 text-uppercase text-medium text-bold">
           Custom fields
         </div>
 
@@ -51,7 +51,7 @@ export default class Expressions extends Component {
 
         <a
           data-metabase-event={"QueryBuilder;Show Add Custom Field"}
-          className="text-grey-2 text-bold flex align-center text-grey-4-hover cursor-pointer no-decoration transition-color"
+          className="text-light text-bold flex align-center text-medium-hover cursor-pointer no-decoration transition-color"
           onClick={() => onAddExpression()}
         >
           <IconBorder borderRadius="3px">
diff --git a/frontend/src/metabase/query_builder/components/filters/FilterList.jsx b/frontend/src/metabase/query_builder/components/filters/FilterList.jsx
deleted file mode 100644
index c92425f32e431..0000000000000
--- a/frontend/src/metabase/query_builder/components/filters/FilterList.jsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/* @flow */
-
-import React, { Component } from "react";
-import { findDOMNode } from "react-dom";
-import { t } from "c-3po";
-import FilterWidget from "./FilterWidget.jsx";
-
-import StructuredQuery from "metabase-lib/lib/queries/StructuredQuery";
-import type { Filter } from "metabase/meta/types/Query";
-import Dimension from "metabase-lib/lib/Dimension";
-
-import type { TableMetadata } from "metabase/meta/types/Metadata";
-
-type Props = {
-  query: StructuredQuery,
-  filters: Array<Filter>,
-  removeFilter?: (index: number) => void,
-  updateFilter?: (index: number, filter: Filter) => void,
-  maxDisplayValues?: number,
-  tableMetadata?: TableMetadata, // legacy parameter
-};
-
-type State = {
-  shouldScroll: boolean,
-};
-
-export default class FilterList extends Component {
-  props: Props;
-  state: State;
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      shouldScroll: false,
-    };
-  }
-
-  componentDidUpdate() {
-    this.state.shouldScroll
-      ? (findDOMNode(this).scrollLeft = findDOMNode(this).scrollWidth)
-      : null;
-  }
-
-  componentWillReceiveProps(nextProps: Props) {
-    // only scroll when a filter is added
-    if (nextProps.filters.length > this.props.filters.length) {
-      this.setState({ shouldScroll: true });
-    } else {
-      this.setState({ shouldScroll: false });
-    }
-  }
-
-  componentDidMount() {
-    this.componentDidUpdate();
-  }
-
-  render() {
-    const { query, filters, tableMetadata } = this.props;
-    return (
-      <div className="Query-filterList scroll-x scroll-show">
-        {filters.map((filter, index) => (
-          <FilterWidget
-            key={index}
-            placeholder={t`Item`}
-            // TODO: update widgets that are still passing tableMetadata instead of query
-            query={
-              query || {
-                table: () => tableMetadata,
-                parseFieldReference: fieldRef =>
-                  Dimension.parseMBQL(fieldRef, tableMetadata),
-              }
-            }
-            filter={filter}
-            index={index}
-            removeFilter={this.props.removeFilter}
-            updateFilter={this.props.updateFilter}
-            maxDisplayValues={this.props.maxDisplayValues}
-          />
-        ))}
-      </div>
-    );
-  }
-}
diff --git a/frontend/src/metabase/query_builder/components/filters/FilterPopover.jsx b/frontend/src/metabase/query_builder/components/filters/FilterPopover.jsx
index 83bdbfd1cd452..fd545ddeaf023 100644
--- a/frontend/src/metabase/query_builder/components/filters/FilterPopover.jsx
+++ b/frontend/src/metabase/query_builder/components/filters/FilterPopover.jsx
@@ -331,7 +331,7 @@ export default class FilterPopover extends Component {
             maxWidth: dimension.field().isDate() ? null : 500,
           }}
         >
-          <div className="FilterPopover-header border-bottom text-grey-3 p1 flex align-center">
+          <div className="FilterPopover-header border-bottom text-medium p1 flex align-center">
             <div className="flex py1">
               <a
                 className="cursor-pointer text-purple-hover transition-color flex align-center"
diff --git a/frontend/src/metabase/query_builder/components/filters/FilterWidget.jsx b/frontend/src/metabase/query_builder/components/filters/FilterWidget.jsx
index df66d27f4d240..9664fefce874e 100644
--- a/frontend/src/metabase/query_builder/components/filters/FilterWidget.jsx
+++ b/frontend/src/metabase/query_builder/components/filters/FilterWidget.jsx
@@ -139,7 +139,7 @@ export default class FilterWidget extends Component {
         </div>
         {removeFilter && (
           <a
-            className="text-grey-2 no-decoration px1 flex align-center"
+            className="text-light no-decoration px1 flex align-center"
             onClick={() => removeFilter(index)}
           >
             <Icon name="close" size={14} />
diff --git a/frontend/src/metabase/query_builder/components/filters/pickers/HoursMinutesInput.jsx b/frontend/src/metabase/query_builder/components/filters/pickers/HoursMinutesInput.jsx
index 073fe23793a4f..1ddfaf6e459f4 100644
--- a/frontend/src/metabase/query_builder/components/filters/pickers/HoursMinutesInput.jsx
+++ b/frontend/src/metabase/query_builder/components/filters/pickers/HoursMinutesInput.jsx
@@ -52,7 +52,7 @@ const HoursMinutesInput = ({
     </div>
     {onClear && (
       <Icon
-        className="text-grey-2 cursor-pointer text-grey-4-hover ml-auto"
+        className="text-light cursor-pointer text-medium-hover ml-auto"
         name="close"
         onClick={onClear}
       />
diff --git a/frontend/src/metabase/query_builder/components/template_tags/TagEditorParam.jsx b/frontend/src/metabase/query_builder/components/template_tags/TagEditorParam.jsx
index cc4b2455f0990..2f8a670662fe3 100644
--- a/frontend/src/metabase/query_builder/components/template_tags/TagEditorParam.jsx
+++ b/frontend/src/metabase/query_builder/components/template_tags/TagEditorParam.jsx
@@ -125,7 +125,7 @@ export default class TagEditorParam extends Component {
           <InputBlurChange
             type="text"
             value={tag.display_name}
-            className="AdminSelect p1 text-bold text-grey-4 bordered border-med rounded full"
+            className="AdminSelect p1 text-bold text-medium bordered border-med rounded full"
             onBlurChange={e =>
               this.setParameterAttribute("display_name", e.target.value)
             }
@@ -216,7 +216,7 @@ export default class TagEditorParam extends Component {
               }}
               value={tag.default}
               setValue={value => this.setParameterAttribute("default", value)}
-              className="AdminSelect p1 text-bold text-grey-4 bordered border-med rounded bg-white"
+              className="AdminSelect p1 text-bold text-medium bordered border-med rounded bg-white"
               isEditing
               commitImmediately
             />
diff --git a/frontend/src/metabase/query_builder/containers/ArchiveQuestionModal.jsx b/frontend/src/metabase/query_builder/containers/ArchiveQuestionModal.jsx
index 668ee6a45c833..6f5f69418a3a2 100644
--- a/frontend/src/metabase/query_builder/containers/ArchiveQuestionModal.jsx
+++ b/frontend/src/metabase/query_builder/containers/ArchiveQuestionModal.jsx
@@ -53,7 +53,8 @@ class ArchiveQuestionModal extends Component {
           >{t`Archive`}</Button>,
         ]}
       >
-        <div className="px4 pb4">{t`This question will be removed from any dashboards or pulses using it.`}</div>
+        <div
+        >{t`This question will be removed from any dashboards or pulses using it.`}</div>
       </ModalWithTrigger>
     );
   }
diff --git a/frontend/src/metabase/questions/components/CollectionActions.jsx b/frontend/src/metabase/questions/components/CollectionActions.jsx
deleted file mode 100644
index 0a05aff400a3b..0000000000000
--- a/frontend/src/metabase/questions/components/CollectionActions.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-const CollectionActions = ({ children }) => (
-  <div
-    className="flex align-center"
-    onClick={e => {
-      e.stopPropagation();
-      e.preventDefault();
-    }}
-  >
-    {React.Children.map(children, (child, index) => (
-      <div key={index} className="cursor-pointer text-brand-hover mx1">
-        {child}
-      </div>
-    ))}
-  </div>
-);
-
-export default CollectionActions;
diff --git a/frontend/src/metabase/questions/components/CollectionButtons.jsx b/frontend/src/metabase/questions/components/CollectionButtons.jsx
deleted file mode 100644
index d826ef70bdf9a..0000000000000
--- a/frontend/src/metabase/questions/components/CollectionButtons.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from "react";
-import { Flex } from "grid-styled";
-import { Link } from "react-router";
-import { t } from "c-3po";
-
-import Icon from "metabase/components/Icon";
-import colors from "metabase/lib/colors";
-
-const COLLECTION_ICON_SIZE = 18;
-
-const CollectionButtons = ({ collections, isAdmin, push }) => (
-  <ol>
-    {collections
-      .map(collection => (
-        <CollectionLink {...collection} push={push} isAdmin={isAdmin} />
-      ))
-      .concat(isAdmin ? [<NewCollectionButton push={push} />] : [])
-      .map((element, index) => <li key={index}>{element}</li>)}
-  </ol>
-);
-
-const CollectionLink = ({ name, slug }) => {
-  return (
-    <Link to={`/questions/collections/${slug}`}>
-      <Flex align="center">
-        <Icon name="collection" size={COLLECTION_ICON_SIZE} />
-        <h3>{name}</h3>
-      </Flex>
-    </Link>
-  );
-};
-
-const NewCollectionButton = ({ push }) => (
-  <div onClick={() => push(`/collections/create`)}>
-    <div>
-      <div
-        className="flex align-center justify-center ml-auto mr-auto mb2 mt2"
-        style={{
-          border: `2px solid ${colors["border"]}`,
-          borderRadius: COLLECTION_ICON_SIZE,
-          height: COLLECTION_ICON_SIZE,
-          width: COLLECTION_ICON_SIZE,
-        }}
-      >
-        <Icon name="add" width="32" height="32" />
-      </div>
-    </div>
-    <h3>{t`New collection`}</h3>
-  </div>
-);
-
-export default CollectionButtons;
diff --git a/frontend/src/metabase/questions/components/ExpandingSearchField.jsx b/frontend/src/metabase/questions/components/ExpandingSearchField.jsx
deleted file mode 100644
index 56c989db6b56d..0000000000000
--- a/frontend/src/metabase/questions/components/ExpandingSearchField.jsx
+++ /dev/null
@@ -1,105 +0,0 @@
-/* eslint "react/prop-types": "warn" */
-
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import ReactDOM from "react-dom";
-import { t } from "c-3po";
-import cx from "classnames";
-import { Motion, spring } from "react-motion";
-
-import Icon from "metabase/components/Icon";
-
-import {
-  KEYCODE_FORWARD_SLASH,
-  KEYCODE_ENTER,
-  KEYCODE_ESCAPE,
-} from "metabase/lib/keyboard";
-
-export default class ExpandingSearchField extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = {
-      active: false,
-    };
-  }
-
-  static propTypes = {
-    onSearch: PropTypes.func.isRequired,
-    className: PropTypes.string,
-    defaultValue: PropTypes.string,
-  };
-
-  componentDidMount() {
-    this.listenToSearchKeyDown();
-  }
-
-  componentWillUnMount() {
-    this.stopListenToSearchKeyDown();
-  }
-
-  handleSearchKeydown = e => {
-    if (!this.state.active && e.keyCode === KEYCODE_FORWARD_SLASH) {
-      this.setActive();
-      e.preventDefault();
-    }
-  };
-
-  onKeyPress = e => {
-    if (e.keyCode === KEYCODE_ENTER) {
-      this.props.onSearch(e.target.value);
-    } else if (e.keyCode === KEYCODE_ESCAPE) {
-      this.setInactive();
-    }
-  };
-
-  setActive = () => {
-    ReactDOM.findDOMNode(this.searchInput).focus();
-  };
-
-  setInactive = () => {
-    ReactDOM.findDOMNode(this.searchInput).blur();
-  };
-
-  listenToSearchKeyDown() {
-    window.addEventListener("keydown", this.handleSearchKeydown);
-  }
-
-  stopListenToSearchKeyDown() {
-    window.removeEventListener("keydown", this.handleSearchKeydown);
-  }
-
-  render() {
-    const { className } = this.props;
-    const { active } = this.state;
-    return (
-      <div
-        className={cx(
-          className,
-          "bordered flex align-center pr2 transition-border",
-          { "border-brand": active },
-        )}
-        onClick={this.setActive}
-        style={{ borderRadius: 99 }}
-      >
-        <Icon
-          className={cx("ml2 text-grey-3", { "text-brand": active })}
-          name="search"
-        />
-        <Motion style={{ width: active ? spring(400) : spring(200) }}>
-          {interpolatingStyle => (
-            <input
-              ref={search => (this.searchInput = search)}
-              className="input borderless text-bold"
-              placeholder={t`Search for a question`}
-              style={Object.assign({}, interpolatingStyle, { fontSize: "1em" })}
-              onFocus={() => this.setState({ active: true })}
-              onBlur={() => this.setState({ active: false })}
-              onKeyUp={this.onKeyPress}
-              defaultValue={this.props.defaultValue}
-            />
-          )}
-        </Motion>
-      </div>
-    );
-  }
-}
diff --git a/frontend/src/metabase/reference/Reference.css b/frontend/src/metabase/reference/Reference.css
index b5b0e57b89fcf..6001693df1492 100644
--- a/frontend/src/metabase/reference/Reference.css
+++ b/frontend/src/metabase/reference/Reference.css
@@ -31,7 +31,7 @@
 }
 
 :local(.schemaSeparator) {
-  composes: text-grey-2 mt2 from "style";
+  composes: text-light mt2 from "style";
   margin-left: var(--icon-width);
   font-size: 18px;
 }
diff --git a/frontend/src/metabase/reference/components/GuideDetail.jsx b/frontend/src/metabase/reference/components/GuideDetail.jsx
index dc032bc3ec128..cc51d2c471872 100644
--- a/frontend/src/metabase/reference/components/GuideDetail.jsx
+++ b/frontend/src/metabase/reference/components/GuideDetail.jsx
@@ -150,13 +150,13 @@ const ItemTitle = ({ title, link, linkColorClass, linkHoverClass }) => (
 );
 
 const ContextHeading = ({ children }) => (
-  <h3 className="my2 text-grey-4">{children}</h3>
+  <h3 className="my2 text-medium">{children}</h3>
 );
 
 const ContextContent = ({ empty, children }) => (
   <p
     className={cx("m0 text-paragraph text-measure text-pre-wrap", {
-      "text-grey-3": empty,
+      "text-medium": empty,
     })}
   >
     {children}
diff --git a/frontend/src/metabase/reference/components/GuideDetailEditor.jsx b/frontend/src/metabase/reference/components/GuideDetailEditor.jsx
index f6daefd5c3f17..daf53b92524cb 100644
--- a/frontend/src/metabase/reference/components/GuideDetailEditor.jsx
+++ b/frontend/src/metabase/reference/components/GuideDetailEditor.jsx
@@ -142,7 +142,7 @@ const GuideDetailEditor = ({
             />
           )}
         </div>
-        <div className="ml-auto cursor-pointer text-grey-2">
+        <div className="ml-auto cursor-pointer text-light">
           <Tooltip tooltip={t`Remove item`}>
             <Icon name="close" width={16} height={16} onClick={removeField} />
           </Tooltip>
diff --git a/frontend/src/metabase/reference/components/GuideEditSection.css b/frontend/src/metabase/reference/components/GuideEditSection.css
index 62c0d835be74e..8043cdcbe747c 100644
--- a/frontend/src/metabase/reference/components/GuideEditSection.css
+++ b/frontend/src/metabase/reference/components/GuideEditSection.css
@@ -4,7 +4,7 @@
 }
 
 :local(.guideEditSectionDisabled) {
-  composes: text-grey-3 from "style";
+  composes: text-medium from "style";
 }
 
 :local(.guideEditSectionCollapsedIcon) {
diff --git a/frontend/src/metabase/reference/components/ReferenceHeader.css b/frontend/src/metabase/reference/components/ReferenceHeader.css
index e6ae9651d1ab2..c3173e09efd76 100644
--- a/frontend/src/metabase/reference/components/ReferenceHeader.css
+++ b/frontend/src/metabase/reference/components/ReferenceHeader.css
@@ -39,7 +39,7 @@
 }
 
 :local(.headerSchema) {
-  composes: text-grey-2 absolute from "style";
+  composes: text-light absolute from "style";
   left: var(--icon-width);
   top: -10px;
   font-size: 12px;
diff --git a/frontend/src/metabase/selectors/user.js b/frontend/src/metabase/selectors/user.js
index b515503e99cc1..6fa15c0a161c3 100644
--- a/frontend/src/metabase/selectors/user.js
+++ b/frontend/src/metabase/selectors/user.js
@@ -1,4 +1,19 @@
+import { createSelector } from "reselect";
+
 export const getUser = state => state.currentUser;
 
-export const getUserIsAdmin = state =>
-  (getUser(state) || {}).is_superuser || false;
+export const getUserIsAdmin = createSelector(
+  [getUser],
+  user => (user && user.is_superuser) || false,
+);
+
+export const getUserPersonalCollectionId = createSelector(
+  [getUser],
+  user => (user && user.personal_collection_id) || null,
+);
+
+export const getUserDefaultCollectionId = createSelector(
+  [getUser, getUserIsAdmin, getUserPersonalCollectionId],
+  (user, isAdmin, personalCollectionId) =>
+    isAdmin ? null : personalCollectionId,
+);
diff --git a/frontend/src/metabase/setup/containers/PostSetupApp.jsx b/frontend/src/metabase/setup/containers/PostSetupApp.jsx
index 742d1e694ba5a..e3d78fb91de46 100644
--- a/frontend/src/metabase/setup/containers/PostSetupApp.jsx
+++ b/frontend/src/metabase/setup/containers/PostSetupApp.jsx
@@ -93,7 +93,7 @@ export default class PostSetupApp extends Component {
           <div className="m4 text-centered">
             <Link
               to="/"
-              className="no-decoration text-bold text-grey-3 text-grey-4-hover"
+              className="no-decoration text-bold text-medium text-medium-hover"
             >
               {t`I'm done exploring for now`}
             </Link>
diff --git a/frontend/src/metabase/tutorial/Portal.jsx b/frontend/src/metabase/tutorial/Portal.jsx
index 031bdaf89a3bd..cf3255a2660cf 100644
--- a/frontend/src/metabase/tutorial/Portal.jsx
+++ b/frontend/src/metabase/tutorial/Portal.jsx
@@ -70,7 +70,7 @@ export default class Portal extends Component {
     return {
       position: "absolute",
       boxSizing: "content-box",
-      border: `10000px solid ${colors["accent2"]}`,
+      border: `10000px solid ${colors["text-dark"]}`,
       boxShadow: `inset 0px 0px 8px ${colors["shadow"]}`,
       transform: "translate(-10000px, -10000px)",
       borderRadius: "10010px",
diff --git a/frontend/src/metabase/tutorial/TutorialModal.jsx b/frontend/src/metabase/tutorial/TutorialModal.jsx
index f0f08f8633545..3c0c8496c8aff 100644
--- a/frontend/src/metabase/tutorial/TutorialModal.jsx
+++ b/frontend/src/metabase/tutorial/TutorialModal.jsx
@@ -13,7 +13,7 @@ export default class TutorialModal extends Component {
       <div className="TutorialModalContent p2">
         <div className="flex">
           <a
-            className="text-grey-4 p1 cursor-pointer flex-align-right"
+            className="text-medium p1 cursor-pointer flex-align-right"
             onClick={this.props.onClose}
           >
             <Icon name="close" size={16} />
@@ -23,14 +23,14 @@ export default class TutorialModal extends Component {
         <div className="flex">
           {showBackButton && (
             <a
-              className="text-grey-4 cursor-pointer"
+              className="text-medium cursor-pointer"
               onClick={this.props.onBack}
             >
               back
             </a>
           )}
           {showStepCount && (
-            <span className="text-grey-4 flex-align-right">
+            <span className="text-medium flex-align-right">
               {modalStepIndex + 1} {t`of`} {modalStepCount}
             </span>
           )}
diff --git a/frontend/src/metabase/user/components/UpdateUserDetails.jsx b/frontend/src/metabase/user/components/UpdateUserDetails.jsx
index d398fa9393fc9..0f1e3e0f5872a 100644
--- a/frontend/src/metabase/user/components/UpdateUserDetails.jsx
+++ b/frontend/src/metabase/user/components/UpdateUserDetails.jsx
@@ -144,7 +144,7 @@ export default class UpdateUserDetails extends Component {
               ref="email"
               className={cx("Form-offset full", {
                 "Form-input": !managed,
-                "text-grey-2 h1 borderless mt1": managed,
+                "text-light h1 borderless mt1": managed,
               })}
               name="email"
               defaultValue={user ? user.email : null}
diff --git a/frontend/src/metabase/user/components/UserSettings.jsx b/frontend/src/metabase/user/components/UserSettings.jsx
index 443b02fb749e6..68d49b524e6e8 100644
--- a/frontend/src/metabase/user/components/UserSettings.jsx
+++ b/frontend/src/metabase/user/components/UserSettings.jsx
@@ -51,7 +51,7 @@ export default class UserSettings extends Component {
       <div>
         <div className="py4 border-bottom">
           <div className="wrapper wrapper--trim">
-            <h2 className="text-grey-4">{t`Account settings`}</h2>
+            <h2 className="text-medium">{t`Account settings`}</h2>
           </div>
         </div>
         <div className="mt2 md-mt4 wrapper wrapper--trim">
diff --git a/frontend/src/metabase/visualizations/components/ChartClickActions.jsx b/frontend/src/metabase/visualizations/components/ChartClickActions.jsx
index 70c6475b5e792..af152826f283a 100644
--- a/frontend/src/metabase/visualizations/components/ChartClickActions.jsx
+++ b/frontend/src/metabase/visualizations/components/ChartClickActions.jsx
@@ -164,7 +164,7 @@ export default class ChartClickActions extends Component {
         {popover ? (
           popover
         ) : (
-          <div className="text-bold text-grey-3">
+          <div className="text-bold text-medium">
             {sections.map(([key, actions]) => (
               <div
                 key={key}
diff --git a/frontend/src/metabase/visualizations/components/LegendHeader.jsx b/frontend/src/metabase/visualizations/components/LegendHeader.jsx
index 6d1f0b72064cd..3f5263c7358f5 100644
--- a/frontend/src/metabase/visualizations/components/LegendHeader.jsx
+++ b/frontend/src/metabase/visualizations/components/LegendHeader.jsx
@@ -113,7 +113,7 @@ export default class LegendHeader extends Component {
             index > 0 && (
               <Icon
                 name="close"
-                className="text-grey-2 flex-no-shrink mr1 cursor-pointer"
+                className="text-light flex-no-shrink mr1 cursor-pointer"
                 width={12}
                 height={12}
                 onClick={() => onRemoveSeries(s.card)}
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx
index f503df8cd92fe..d1601c329e584 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingFieldPicker.jsx
@@ -17,7 +17,7 @@ const ChartSettingFieldPicker = ({ value, options, onChange, onRemove }) => (
     />
     <Icon
       name="close"
-      className={cx("ml1 text-grey-4 text-brand-hover cursor-pointer", {
+      className={cx("ml1 text-medium text-brand-hover cursor-pointer", {
         "disabled hidden": !onRemove,
       })}
       width={12}
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedColumns.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedColumns.jsx
index 2e4d4380117eb..014cbb6c6281d 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedColumns.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingOrderedColumns.jsx
@@ -115,7 +115,7 @@ export default class ChartSettingOrderedColumns extends Component {
             helperClass="z5"
           />
         ) : (
-          <div className="my2 p2 flex layout-centered bg-grey-0 text-grey-1 text-bold rounded">
+          <div className="my2 p2 flex layout-centered bg-grey-0 text-light text-bold rounded">
             {t`Add fields from the list below`}
           </div>
         )}
@@ -140,7 +140,7 @@ export default class ChartSettingOrderedColumns extends Component {
             ))}
             {additionalFieldOptions.fks.map(fk => (
               <div>
-                <div className="my2 text-grey-4 text-bold text-uppercase text-small">
+                <div className="my2 text-medium text-bold text-uppercase text-small">
                   {fk.field.target.table.display_name}
                 </div>
                 {fk.dimensions.map((dimension, index) => (
@@ -170,7 +170,7 @@ const ColumnItem = ({ title, onAdd, onRemove }) => (
         {onAdd && (
           <Icon
             name="add"
-            className="cursor-pointer text-grey-1 text-grey-4-hover"
+            className="cursor-pointer text-light text-medium-hover"
             onClick={e => {
               e.stopPropagation();
               onAdd();
@@ -180,7 +180,7 @@ const ColumnItem = ({ title, onAdd, onRemove }) => (
         {onRemove && (
           <Icon
             name="close"
-            className="cursor-pointer text-grey-1 text-grey-4-hover"
+            className="cursor-pointer text-light text-medium-hover"
             onClick={e => {
               e.stopPropagation();
               onRemove();
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
index 5fc6542547384..f1f5829d9b9a2 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
@@ -206,7 +206,7 @@ const RulePreview = ({ rule, cols, onClick, onRemove }) => (
         </span>
         <Icon
           name="close"
-          className="cursor-pointer text-grey-2 text-grey-4-hover"
+          className="cursor-pointer text-light text-medium-hover"
           onClick={e => {
             e.stopPropagation();
             onRemove();
diff --git a/frontend/src/metabase/visualizations/visualizations/ObjectDetail.jsx b/frontend/src/metabase/visualizations/visualizations/ObjectDetail.jsx
index 2daa03af2f7f6..e62b13759d791 100644
--- a/frontend/src/metabase/visualizations/visualizations/ObjectDetail.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/ObjectDetail.jsx
@@ -97,7 +97,7 @@ export class ObjectDetail extends Component {
       isLink = false;
     } else {
       if (value === null || value === undefined || value === "") {
-        cellValue = <span className="text-grey-2">{t`Empty`}</span>;
+        cellValue = <span className="text-light">{t`Empty`}</span>;
       } else if (isa(column.special_type, TYPE.SerializedJSON)) {
         let formattedJson = JSON.stringify(JSON.parse(value), null, 2);
         cellValue = <pre className="ObjectJSON">{formattedJson}</pre>;
@@ -208,7 +208,7 @@ export class ObjectDetail extends Component {
         );
         const via =
           fkCountsByTable[fk.origin.table.id] > 1 ? (
-            <span className="text-grey-3 text-normal">
+            <span className="text-medium text-normal">
               {" "}
               {t`via ${fk.origin.display_name}`}
             </span>
@@ -226,7 +226,7 @@ export class ObjectDetail extends Component {
         let fkReference;
         const referenceClasses = cx("flex align-center my2 pb2 border-bottom", {
           "text-brand-hover cursor-pointer text-dark": fkClickable,
-          "text-grey-3": !fkClickable,
+          "text-medium": !fkClickable,
         });
 
         if (fkClickable) {
@@ -284,7 +284,7 @@ export class ObjectDetail extends Component {
             </div>
           </div>
           <div className="Grid-cell flex align-center Cell--1of3 bg-alt">
-            <div className="p4 flex align-center text-bold text-grey-3">
+            <div className="p4 flex align-center text-bold text-medium">
               <Icon name="connections" size={17} />
               <div className="ml2">
                 {jt`This ${(
diff --git a/frontend/src/metabase/visualizations/visualizations/Progress.jsx b/frontend/src/metabase/visualizations/visualizations/Progress.jsx
index ee0a439cd4144..759ffe27a61fd 100644
--- a/frontend/src/metabase/visualizations/visualizations/Progress.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/Progress.jsx
@@ -152,7 +152,7 @@ export default class Progress extends Component {
         >
           <div
             ref="container"
-            className="relative text-bold text-grey-4"
+            className="relative text-bold text-medium"
             style={{ height: 20 }}
           >
             <div ref="label" style={{ position: "absolute" }}>
diff --git a/frontend/src/metabase/visualizations/visualizations/Text.jsx b/frontend/src/metabase/visualizations/visualizations/Text.jsx
index d465dfbcae98d..f338d848f5033 100644
--- a/frontend/src/metabase/visualizations/visualizations/Text.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/Text.jsx
@@ -212,7 +212,7 @@ const TextActionButtons = ({
         <a
           data-metabase-event={"Dashboard;Text;edit"}
           className={cx(" cursor-pointer h3 flex-no-shrink relative mr1", {
-            "text-grey-2 text-grey-4-hover": isShowingRenderedOutput,
+            "text-light text-medium-hover": isShowingRenderedOutput,
             "text-brand": !isShowingRenderedOutput,
           })}
           onClick={onEdit}
@@ -232,7 +232,7 @@ const TextActionButtons = ({
         <a
           data-metabase-event={"Dashboard;Text;preview"}
           className={cx(" cursor-pointer h3 flex-no-shrink relative mr1", {
-            "text-grey-2 text-grey-4-hover": !isShowingRenderedOutput,
+            "text-light text-medium-hover": !isShowingRenderedOutput,
             "text-brand": isShowingRenderedOutput,
           })}
           onClick={onPreview}
diff --git a/frontend/test/__support__/integrated_tests.js b/frontend/test/__support__/integrated_tests.js
index b242270a8bfaf..1a4b3411629b8 100644
--- a/frontend/test/__support__/integrated_tests.js
+++ b/frontend/test/__support__/integrated_tests.js
@@ -618,6 +618,7 @@ cleanup.fn = action => cleanup.actions.push(action);
 cleanup.metric = metric => cleanup.fn(() => deleteMetric(metric));
 cleanup.segment = segment => cleanup.fn(() => deleteSegment(segment));
 cleanup.question = question => cleanup.fn(() => deleteQuestion(question));
+cleanup.collection = c => cleanup.fn(() => deleteCollection(c));
 
 export const deleteQuestion = question =>
   CardApi.delete({ cardId: getId(question) });
@@ -625,6 +626,8 @@ export const deleteSegment = segment =>
   SegmentApi.delete({ segmentId: getId(segment), revision_message: "Please" });
 export const deleteMetric = metric =>
   MetricApi.delete({ metricId: getId(metric), revision_message: "Please" });
+export const deleteCollection = collection =>
+  CollectionsApi.update({ id: getId(collection), archived: true });
 
 const getId = o =>
   typeof o === "object" && o != null
@@ -668,6 +671,14 @@ api._makeRequest = async (method, url, headers, requestBody, data, options) => {
       ? { status: 0, responseText: "" }
       : await fetch(api.basename + url, fetchOptions);
 
+    if (!window.document) {
+      console.warn(
+        "API request completed after test ended. Ignoring result.",
+        url,
+      );
+      return;
+    }
+
     if (isCancelled) {
       throw { status: 0, data: "", isCancelled: true };
     }
@@ -710,6 +721,16 @@ api._makeRequest = async (method, url, headers, requestBody, data, options) => {
 
       throw error;
     }
+  } catch (e) {
+    if (!window.document) {
+      console.warn(
+        "API request failed after test ended. Ignoring result.",
+        url,
+        e,
+      );
+      return;
+    }
+    throw e;
   } finally {
     pendingRequests--;
     if (pendingRequests === 0 && pendingRequestsDeferred) {
diff --git a/frontend/test/collection/initial_collection.integ.spec.js b/frontend/test/collection/initial_collection.integ.spec.js
new file mode 100644
index 0000000000000..b296b7a459215
--- /dev/null
+++ b/frontend/test/collection/initial_collection.integ.spec.js
@@ -0,0 +1,95 @@
+import {
+  createTestStore,
+  createAllUsersWritableCollection,
+  useSharedAdminLogin,
+  useSharedNormalLogin,
+  eventually,
+  cleanup,
+} from "__support__/integrated_tests";
+
+import { mount } from "enzyme";
+
+const ROOT_COLLECTION_NAME = "Our analytics";
+const NORMAL_USER_COLLECTION_NAME = "Robert Charts's Personal Collection";
+
+describe("initial collection id", () => {
+  let collection;
+  let app, store;
+
+  beforeAll(async () => {
+    useSharedAdminLogin();
+    collection = await createAllUsersWritableCollection();
+    cleanup.collection(collection);
+  });
+  afterAll(cleanup);
+
+  describe("for admins", () => {
+    beforeEach(async () => {
+      useSharedAdminLogin();
+      store = await createTestStore();
+      app = mount(store.getAppContainer());
+    });
+
+    describe("a new collection", () => {
+      it("should be the parent collection", async () => {
+        store.pushPath(`/collection/${collection.id}/new_collection`);
+        await assertInitialCollection(app, collection.name);
+      });
+    });
+    describe("a new pulse", () => {
+      it("should be the root collection", async () => {
+        store.pushPath("/pulse/create");
+        await assertInitialCollection(app, ROOT_COLLECTION_NAME);
+      });
+    });
+    describe("a new dashboard", () => {
+      it("should be the root collection", async () => {
+        store.pushPath("/");
+        await clickNewDashboard(app);
+        await assertInitialCollection(app, ROOT_COLLECTION_NAME);
+      });
+    });
+  });
+
+  describe("for non-admins", () => {
+    beforeEach(async () => {
+      useSharedNormalLogin();
+      store = await createTestStore();
+      app = mount(store.getAppContainer());
+    });
+
+    describe("a new pulse", () => {
+      it("should be the personal collection", async () => {
+        store.pushPath("/pulse/create");
+        await assertInitialCollection(app, NORMAL_USER_COLLECTION_NAME);
+      });
+    });
+    describe("a new dashboard", () => {
+      it("should be the personal collection", async () => {
+        store.pushPath("/");
+        await clickNewDashboard(app);
+        await assertInitialCollection(app, NORMAL_USER_COLLECTION_NAME);
+      });
+    });
+  });
+});
+
+const clickNewDashboard = app =>
+  eventually(() => {
+    app
+      .find("Navbar")
+      .find("EntityMenu")
+      .first()
+      .props()
+      .items[0].action();
+  });
+
+const assertInitialCollection = (app, collectionName) =>
+  eventually(() => {
+    expect(
+      app
+        .find(".AdminSelect")
+        .first()
+        .text(),
+    ).toBe(collectionName);
+  });
diff --git a/frontend/test/dashboards/dashboards.integ.spec.js b/frontend/test/dashboards/dashboards.integ.spec.js
index ca7e2e0685c6a..c50fea4cfae93 100644
--- a/frontend/test/dashboards/dashboards.integ.spec.js
+++ b/frontend/test/dashboards/dashboards.integ.spec.js
@@ -14,7 +14,6 @@ import { DashboardApi } from "metabase/services";
 import SearchHeader from "metabase/components/SearchHeader";
 import EmptyState from "metabase/components/EmptyState";
 import Dashboard from "metabase/dashboard/components/Dashboard";
-import ListFilterWidget from "metabase/components/ListFilterWidget";
 import ArchivedItem from "metabase/components/ArchivedItem";
 
 /*
@@ -121,7 +120,6 @@ xdescribe("dashboards list", () => {
         .find(".Icon-staroutline"),
     );
     await store.waitForActions([Dashboards.actionTypes.UPDATE]);
-    click(app.find(ListFilterWidget));
 
     click(app.find(".TestPopover").find('h4[children="Favorites"]'));
 
diff --git a/frontend/test/lib/utils.unit.spec.js b/frontend/test/lib/utils.unit.spec.js
index 987a2eb7ebef5..a1fe21415eeae 100644
--- a/frontend/test/lib/utils.unit.spec.js
+++ b/frontend/test/lib/utils.unit.spec.js
@@ -3,9 +3,14 @@ import MetabaseSettings from "metabase/lib/settings";
 
 describe("utils", () => {
   describe("generatePassword", () => {
-    it("defaults to complexity requirements from Settings", () => {
+    it("defaults to at least 14 characters even if password_complexity requirements are lower", () => {
       MetabaseSettings.set("password_complexity", { total: 10 });
-      expect(MetabaseUtils.generatePassword().length).toBe(10);
+      expect(MetabaseUtils.generatePassword().length).toBe(14);
+    });
+
+    it("defaults to complexity requirements if greater than 14", () => {
+      MetabaseSettings.set("password_complexity", { total: 20 });
+      expect(MetabaseUtils.generatePassword().length).toBe(20);
     });
 
     it("falls back to length 14 passwords", () => {
diff --git a/package.json b/package.json
index 6c99a31bd21db..d9a454add342f 100644
--- a/package.json
+++ b/package.json
@@ -190,7 +190,11 @@
       "echo $npm_execpath | grep -q yarn || echo '\\033[0;33mSorry, npm is not supported. Please use Yarn (https://yarnpkg.com/).\\033[0m'",
     "prettier": "prettier --write 'frontend/**/*.{js,jsx,css}'",
     "docs":
-      "documentation build -f html -o frontend/docs frontend/src/metabase-lib/lib/**"
+      "documentation build -f html -o frontend/docs frontend/src/metabase-lib/lib/**",
+    "ci": "yarn ci-frontend && yarn ci-backend",
+    "ci-frontend": "yarn lint && yarn flow && yarn test",
+    "ci-backend":
+      "lein docstring-checker && lein bikeshed && lein eastwood && lein test"
   },
   "lint-staged": {
     "frontend/**/*.{js,jsx,css}": ["prettier --write", "git add"]
diff --git a/project.clj b/project.clj
index 55620b3cbf128..36eeef8686113 100644
--- a/project.clj
+++ b/project.clj
@@ -20,13 +20,14 @@
                  [org.clojure/java.jdbc "0.7.6"]                      ; basic JDBC access from Clojure
                  [org.clojure/math.combinatorics "0.1.4"]             ; combinatorics functions
                  [org.clojure/math.numeric-tower "0.0.4"]             ; math functions like `ceil`
-                 [org.clojure/tools.logging "0.3.1"]                  ; logging framework
+                 [org.clojure/tools.logging "0.4.1"]                  ; logging framework
                  [org.clojure/tools.namespace "0.2.10"]
                  [amalloy/ring-buffer "1.2.1"
                   :exclusions [org.clojure/clojure
                                org.clojure/clojurescript]]            ; fixed length queue implementation, used in log buffering
                  [amalloy/ring-gzip-middleware "0.1.3"]               ; Ring middleware to GZIP responses if client can handle it
-                 [aleph "0.4.5-alpha2"]                               ; Async HTTP library; WebSockets
+                 [aleph "0.4.5-alpha2"                                ; Async HTTP library; WebSockets
+                  :exclusions [org.clojure/tools.logging]]
                  [buddy/buddy-core "1.2.0"]                           ; various cryptograhpic functions
                  [buddy/buddy-sign "1.5.0"]                           ; JSON Web Tokens; High-Level message signing library
                  [cheshire "5.7.0"]                                   ; fast JSON encoding (used by Ring JSON middleware)
@@ -83,7 +84,8 @@
                  [net.sf.cssbox/cssbox "4.12"                         ; HTML / CSS rendering
                   :exclusions [org.slf4j/slf4j-api]]
                  [org.clojars.pntblnk/clj-ldap "0.0.12"]              ; LDAP client
-                 [org.liquibase/liquibase-core "3.6.2"]               ; migration management (Java lib)
+                 [org.liquibase/liquibase-core "3.6.2"                ; migration management (Java lib)
+                  :exclusions [ch.qos.logback/logback-classic]]
                  [org.postgresql/postgresql "42.2.2"]                 ; Postgres driver
                  [org.slf4j/slf4j-log4j12 "1.7.25"]                   ; abstraction for logging frameworks -- allows end user to plug in desired logging framework at deployment time
                  [org.tcrawley/dynapath "0.2.5"]                      ; Dynamically add Jars (e.g. Oracle or Vertica) to classpath
@@ -134,7 +136,7 @@
   :docstring-checker {:include [#"^metabase"]
                       :exclude [#"test"
                                 #"^metabase\.http-client$"]}
-  :profiles {:dev {:dependencies [[expectations "2.2.0-beta2"]              ; unit tests
+  :profiles {:dev {:dependencies [[expectations "2.2.0-beta2"]        ; unit tests
                                   [ring/ring-mock "0.3.0"]]           ; Library to create mock Ring requests for unit tests
                    :plugins [[docstring-checker "1.0.2"]              ; Check that all public vars have docstrings. Run with 'lein docstring-checker'
                              [jonase/eastwood "0.2.6"
diff --git a/resources/frontend_client/app/img/collection-empty-state.png b/resources/frontend_client/app/img/collection-empty-state.png
index b712cc40eb54b..41a19963a763e 100644
Binary files a/resources/frontend_client/app/img/collection-empty-state.png and b/resources/frontend_client/app/img/collection-empty-state.png differ
diff --git a/resources/frontend_client/app/img/collection-empty-state.svg b/resources/frontend_client/app/img/collection-empty-state.svg
index 209f77a3efedf..5982fd752703a 100644
--- a/resources/frontend_client/app/img/collection-empty-state.svg
+++ b/resources/frontend_client/app/img/collection-empty-state.svg
@@ -1,13 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="270px" height="267px" viewBox="0 0 270 267" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+<svg width="198px" height="202px" viewBox="0 0 198 202" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
     <title>Artboard</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Group-3" transform="translate(2.000000, 2.000000)">
-            <ellipse id="Oval-2" fill="#F9FBFC" style="mix-blend-mode: multiply;" opacity="0.699999988" cx="143" cy="123" rx="122" ry="123"></ellipse>
-            <g id="Group-5" transform="translate(10.000000, 62.000000)">
+            <g id="Group-5" transform="translate(10.000000, 0.000000)">
                 <path d="M113.382413,151.888668 L140.161554,198.409543" id="Path-6" stroke="#DCE1E4" stroke-width="3.97614314"></path>
                 <rect id="Rectangle-6" stroke="#DCE1E4" stroke-width="1.19284294" fill="#F8F9FA" x="-0.281493046" y="18.0914513" width="174.959714" height="118.88668" rx="1.59045726"></rect>
                 <polygon id="Triangle-Copy-3" fill="#EDF0F1" transform="translate(164.335086, 83.335086) rotate(-135.000000) translate(-164.335086, -83.335086) " points="164.335086 81.2732123 166.989737 85.3969602 161.680436 85.3969602"></polygon>
@@ -27,9 +26,9 @@
                 <rect id="Rectangle-10-Copy" fill="#DCE1E4" x="62.601227" y="13.1332008" width="49.194274" height="18.6878728" rx="2.38568588"></rect>
                 <rect id="Rectangle-10" stroke="#DCE1E4" stroke-width="1.19284294" fill="#F8F9FA" x="62.0048055" y="10.5367793" width="50.387117" height="19.8807157" rx="2.38568588"></rect>
             </g>
-            <rect id="Rectangle-7" stroke="#DCE1E4" stroke-width="1.19284294" fill="#F8F9FA" x="-0.596421471" y="197.785288" width="195.192843" height="19.0854871" rx="0.795228628"></rect>
-            <path d="M78.5,77.5 L93.5332964,77.5" id="Line-2" stroke="#DCE1E4" stroke-width="2" stroke-linecap="square"></path>
-            <path d="M97.125,77.5 L100.883324,77.5" id="Line-2-Copy" stroke="#DCE1E4" stroke-width="2" stroke-linecap="square"></path>
+            <rect id="Rectangle-7" stroke="#DCE1E4" stroke-width="1.19284294" fill="#F8F9FA" x="-0.596421471" y="135.785288" width="195.192843" height="19.0854871" rx="0.795228628"></rect>
+            <path d="M78.5,15.5 L93.5332964,15.5" id="Line-2" stroke="#DCE1E4" stroke-width="2" stroke-linecap="square"></path>
+            <path d="M97.125,15.5 L100.883324,15.5" id="Line-2-Copy" stroke="#DCE1E4" stroke-width="2" stroke-linecap="square"></path>
         </g>
     </g>
 </svg>
\ No newline at end of file
diff --git a/resources/frontend_client/app/img/collection-empty-state@2x.png b/resources/frontend_client/app/img/collection-empty-state@2x.png
index 0e98b3713def0..3ef89ea1cf605 100644
Binary files a/resources/frontend_client/app/img/collection-empty-state@2x.png and b/resources/frontend_client/app/img/collection-empty-state@2x.png differ
diff --git a/resources/frontend_client/app/img/empty.png b/resources/frontend_client/app/img/empty.png
new file mode 100644
index 0000000000000..bf66147252b06
Binary files /dev/null and b/resources/frontend_client/app/img/empty.png differ
diff --git a/resources/frontend_client/app/img/empty@2x.png b/resources/frontend_client/app/img/empty@2x.png
new file mode 100644
index 0000000000000..98d2a85018f77
Binary files /dev/null and b/resources/frontend_client/app/img/empty@2x.png differ
diff --git a/src/metabase/api/collection.clj b/src/metabase/api/collection.clj
index f6b19eb527a4c..494094451c06e 100644
--- a/src/metabase/api/collection.clj
+++ b/src/metabase/api/collection.clj
@@ -20,6 +20,8 @@
              [db :as db]
              [hydrate :refer [hydrate]]]))
 
+(declare root-collection)
+
 (api/defendpoint GET "/"
   "Fetch a list of all Collections that the current user has read permissions for (`:can_write` is returned as an
   additional property of each Collection so you can tell which of these you have write permissions for.)
@@ -28,10 +30,18 @@
   `?archived=true`."
   [archived]
   {archived (s/maybe su/BooleanString)}
-  (as-> (db/select Collection :archived (Boolean/parseBoolean archived)
-                   {:order-by [[:%lower.name :asc]]}) collections
-    (filter mi/can-read? collections)
-    (hydrate collections :can_write)))
+  (let [archived? (Boolean/parseBoolean archived)]
+    (as-> (db/select Collection :archived archived?
+                     {:order-by [[:%lower.name :asc]]}) collections
+      (filter mi/can-read? collections)
+      ;; include Root Collection at beginning or results if archived isn't `true`
+      (if archived?
+        collections
+        (cons (root-collection) collections))
+      (hydrate collections :can_write)
+      ;; remove the :metabase.models.collection/is-root? tag since FE doesn't need it
+      (for [collection collections]
+        (dissoc collection ::collection/is-root?)))))
 
 
 ;;; --------------------------------- Fetching a single Collection & its 'children' ----------------------------------
@@ -121,18 +131,20 @@
     {:model     (keyword model)
      :archived? (Boolean/parseBoolean archived)}))
 
+
 ;;; -------------------------------------------- GET /api/collection/root --------------------------------------------
 
+(defn- root-collection []
+  ;; add in some things for the FE to display since the 'Root' Collection isn't real and wouldn't normally have
+  ;; these things
+  (assoc (collection-detail collection/root-collection)
+    :name (tru "Our analytics")
+    :id   "root"))
+
 (api/defendpoint GET "/root"
   "Return the 'Root' Collection object with standard details added"
   []
-  (-> (collection-detail collection/root-collection)
-      ;; add in some things for the FE to display since the 'Root' Collection isn't real and wouldn't normally have
-      ;; these things
-      (assoc
-          :name (tru "Our analytics")
-          :id   "root")
-      (dissoc ::collection/is-root?)))
+  (dissoc (root-collection) ::collection/is-root?))
 
 (api/defendpoint GET "/root/items"
   "Fetch objects that the current user should see at their root level. As mentioned elsewhere, the 'Root' Collection
diff --git a/src/metabase/query_processor/middleware/parameters/sql.clj b/src/metabase/query_processor/middleware/parameters/sql.clj
index bc61f4c701bfe..bfcc36768c311 100644
--- a/src/metabase/query_processor/middleware/parameters/sql.clj
+++ b/src/metabase/query_processor/middleware/parameters/sql.clj
@@ -7,8 +7,8 @@
             [honeysql.core :as hsql]
             [medley.core :as m]
             [metabase.driver :as driver]
-            [metabase.models.field :as field :refer [Field]]
             [metabase.driver.generic-sql :as sql]
+            [metabase.models.field :as field :refer [Field]]
             [metabase.query-processor.middleware.expand :as ql]
             [metabase.query-processor.middleware.parameters.dates :as date-params]
             [metabase.util
@@ -21,7 +21,7 @@
            honeysql.types.SqlCall
            java.text.NumberFormat
            java.util.regex.Pattern
-           java.util.TimeZone
+           java.util.UUID
            metabase.models.field.FieldInstance))
 
 ;; The Basics:
@@ -68,6 +68,9 @@
 (defn- no-value? [x]
   (instance? NoValue x))
 
+(def ^:private ParamType
+  (s/enum "number" "dimension" "text" "date"))
+
 ;; various schemas are used to check that various functions return things in expected formats
 
 ;; TAGS in this case are simple params like {{x}} that get replaced with a single value ("ABC" or 1) as opposed to a
@@ -80,7 +83,7 @@
   {(s/optional-key :id)          su/NonBlankString ; this is used internally by the frontend
    :name                         su/NonBlankString
    :display_name                 su/NonBlankString
-   :type                         (s/enum "number" "dimension" "text" "date")
+   :type                         ParamType
    (s/optional-key :dimension)   [s/Any]
    (s/optional-key :widget_type) su/NonBlankString ; type of the [default] value if `:type` itself is `dimension`
    (s/optional-key :required)    s/Bool
@@ -171,8 +174,10 @@
   Filter\" in the Native Query Editor."
   [tag :- TagParam, params :- (s/maybe [DimensionValue])]
   (when-let [dimension (:dimension tag)]
-    (map->Dimension {:field (or (db/select-one [Field :name :parent_id :table_id], :id (dimension->field-id dimension))
-                                (throw (Exception. (str "Can't find field with ID: " (dimension->field-id dimension)))))
+    (map->Dimension {:field (or (db/select-one [Field :name :parent_id :table_id :base_type],
+                                  :id (dimension->field-id dimension))
+                                (throw (Exception. (str (tru "Can't find field with ID: {0}"
+                                                             (dimension->field-id dimension))))))
                      :param (or
                              ;; look in the sequence of params we were passed to see if there's anything that matches
                              (param-with-target params ["dimension" ["template-tag" (:name tag)]])
@@ -193,7 +198,7 @@
   [{:keys [default display_name required]} :- TagParam]
   (or default
       (when required
-        (throw (Exception. (format "'%s' is a required param." display_name))))))
+        (throw (Exception. (str (tru "''{0}'' is a required param." display_name)))))))
 
 
 ;;; Parsing Values
@@ -228,18 +233,47 @@
         ;; otherwise just return the single number
         (first parts)))))
 
+(s/defn ^:private parse-value-for-field-base-type :- s/Any
+  "Do special parsing for value for a (presumably textual) FieldFilter 'dimension' param (i.e., attempt to parse it as
+  appropriate based on the base-type of the Field associated with it). These are special cases for handling types that
+  do not have an associated parameter type (such as `date` or `number`), such as UUID fields."
+  [base-type :- su/FieldType, value]
+  (cond
+    (isa? base-type :type/UUID) (UUID/fromString value)
+    :else                       value))
+
 (s/defn ^:private parse-value-for-type :- ParamValue
-  [param-type value]
+  "Parse a `value` based on the type chosen for the param, such as `text` or `number`. (Depending on the type of param
+  created, `value` here might be a raw value or a map including information about the Field it references as well as a
+  value.) For numbers, dates, and the like, this will parse the string appropriately; for `text` parameters, this will
+  additionally attempt handle special cases based on the base type of the Field, for example, parsing params for UUID
+  base type Fields as UUIDs."
+  [param-type :- ParamType, value]
   (cond
-    (no-value? value)                                value
-    (= param-type "number")                          (value->number value)
-    (= param-type "date")                            (map->Date {:s value})
+    (no-value? value)
+    value
+
+    (= param-type "number")
+    (value->number value)
+
+    (= param-type "date")
+    (map->Date {:s value})
+
+    (and (= param-type "dimension")
+         (= (get-in value [:param :type]) "number"))
+    (update-in value [:param :value] value->number)
+
+    (sequential? value)
+    (map->MultipleValues {:values (for [v value]
+                                    (parse-value-for-type param-type v))})
+
     (and (= param-type "dimension")
-         (= (get-in value [:param :type]) "number")) (update-in value [:param :value] value->number)
-    (sequential? value)                              (map->MultipleValues
-                                                      {:values (for [v value]
-                                                                 (parse-value-for-type param-type v))})
-    :else                                            value))
+         (get-in value [:field :base_type])
+         (string? (get-in value [:param :value])))
+    (update-in value [:param :value] (partial parse-value-for-field-base-type (get-in value [:field :base_type])))
+
+    :else
+    value))
 
 (s/defn ^:private value-for-tag :- ParamValue
   "Given a map TAG (a value in the `:template_tags` dictionary) return the corresponding value from the PARAMS
@@ -352,12 +386,12 @@
 
 (defn- create-replacement-snippet [nil-or-obj]
   (let [{:keys [sql-string param-values]} (sql/->prepared-substitution *driver* nil-or-obj)]
-    {:replacement-snippet sql-string
+    {:replacement-snippet     sql-string
      :prepared-statement-args param-values}))
 
 (defn- prepared-ts-subs [operator date-str]
   (let [{:keys [sql-string param-values]} (sql/->prepared-substitution *driver* (du/->Timestamp date-str))]
-    {:replacement-snippet (str operator " " sql-string)
+    {:replacement-snippet     (str operator " " sql-string)
      :prepared-statement-args param-values}))
 
 (extend-protocol ISQLParamSubstituion
@@ -367,6 +401,7 @@
   Boolean (->replacement-snippet-info [this] (create-replacement-snippet this))
   Keyword (->replacement-snippet-info [this] (create-replacement-snippet this))
   SqlCall (->replacement-snippet-info [this] (create-replacement-snippet this))
+  UUID    (->replacement-snippet-info [this] {:replacement-snippet (format "CAST('%s' AS uuid)" (str this))})
   NoValue (->replacement-snippet-info [_]    {:replacement-snippet ""})
 
   CommaSeparatedNumbers
diff --git a/test/metabase/api/collection_test.clj b/test/metabase/api/collection_test.clj
index 8614ce3faef1f..1d37635a8eb62 100644
--- a/test/metabase/api/collection_test.clj
+++ b/test/metabase/api/collection_test.clj
@@ -28,14 +28,16 @@
 ;; check that we can get a basic list of collections
 ;; (for the purposes of test purposes remove the personal collections)
 (tt/expect-with-temp [Collection [collection]]
-  [(assoc (into {} collection) :can_write true)]
+  [{:parent_id nil, :effective_location nil, :effective_ancestors (), :can_write true, :name "Our analytics", :id "root"}
+   (assoc (into {} collection) :can_write true)]
   (for [collection ((user->client :crowberto) :get 200 "collection")
         :when (not (:personal_owner_id collection))]
     collection))
 
 ;; We should only see our own Personal Collections!
 (expect
-  ["Lucky Pigeon's Personal Collection"]
+  ["Our analytics"
+   "Lucky Pigeon's Personal Collection"]
   (do
     (collection-test/force-create-personal-collections!)
     ;; now fetch those Collections as the Lucky bird
@@ -43,7 +45,8 @@
 
 ;; ...unless we are *admins*
 (expect
-  ["Crowberto Corv's Personal Collection"
+  ["Our analytics"
+   "Crowberto Corv's Personal Collection"
    "Lucky Pigeon's Personal Collection"
    "Rasta Toucan's Personal Collection"
    "Trash Bird's Personal Collection"]
@@ -54,7 +57,8 @@
 
 ;; check that we don't see collections if we don't have permissions for them
 (expect
-  ["Collection 1"
+  ["Our analytics"
+   "Collection 1"
    "Rasta Toucan's Personal Collection"]
   (tt/with-temp* [Collection [collection-1 {:name "Collection 1"}]
                   Collection [collection-2 {:name "Collection 2"}]]
@@ -64,7 +68,8 @@
 
 ;; check that we don't see collections if they're archived
 (expect
-  ["Rasta Toucan's Personal Collection"
+  ["Our analytics"
+   "Rasta Toucan's Personal Collection"
    "Regular Collection"]
   (tt/with-temp* [Collection [collection-1 {:name "Archived Collection", :archived true}]
                   Collection [collection-2 {:name "Regular Collection"}]]
diff --git a/test/metabase/driver/postgres_test.clj b/test/metabase/driver/postgres_test.clj
index f4f5c4ba33eb6..d8d472df653e6 100644
--- a/test/metabase/driver/postgres_test.clj
+++ b/test/metabase/driver/postgres_test.clj
@@ -83,7 +83,6 @@
       [#uuid "7a5ce4a2-0958-46e7-9685-1a4eaa3bd08a"]
       [#uuid "84ed434e-80b4-41cf-9c88-e334427104ae"]]]])
 
-
 ;; Check that we can load a Postgres Database with a :type/UUID
 (expect-with-engine :postgres
   [{:name "id",      :base_type :type/Integer}
@@ -109,6 +108,21 @@
           (data/run-query users
             (ql/filter (ql/= $user_id nil))))))
 
+;; Check that we can filter by a UUID for SQL Field filters (#7955)
+(expect-with-engine :postgres
+  [[#uuid "4f01dcfd-13f7-430c-8e6f-e505c0851027" 1]]
+  (data/dataset metabase.driver.postgres-test/with-uuid
+    (rows (qp/process-query {:database   (data/id)
+                             :type       :native
+                             :native     {:query         "SELECT * FROM users WHERE {{user}}"
+                                          :template_tags {:user {:name         "user"
+                                                                 :display_name "User ID"
+                                                                 :type         "dimension"
+                                                                 :dimension    ["field-id" (data/id :users :user_id)]}}}
+                             :parameters [{:type   "text"
+                                           :target ["dimension" ["template-tag" "user"]]
+                                           :value  "4f01dcfd-13f7-430c-8e6f-e505c0851027"}]}))))
+
 
 ;; Make sure that Tables / Fields with dots in their names get escaped properly
 (i/def-database-definition ^:private dots-in-names
diff --git a/test/metabase/query_processor/middleware/parameters/sql_test.clj b/test/metabase/query_processor/middleware/parameters/sql_test.clj
index bb775402c848c..d89aeabe584d1 100644
--- a/test/metabase/query_processor/middleware/parameters/sql_test.clj
+++ b/test/metabase/query_processor/middleware/parameters/sql_test.clj
@@ -298,7 +298,8 @@
 (expect
   {:field {:name      "DATE"
            :parent_id nil
-           :table_id  (data/id :checkins)}
+           :table_id  (data/id :checkins)
+           :base_type :type/Date}
    :param {:type   "date/range"
            :target ["dimension" ["template-tag" "checkin_date"]]
            :value  "2015-04-01~2015-05-01"}}
@@ -309,7 +310,8 @@
 (expect
   {:field {:name      "DATE"
            :parent_id nil
-           :table_id  (data/id :checkins)}
+           :table_id  (data/id :checkins)
+           :base_type :type/Date}
    :param nil}
   (into {} (#'sql/value-for-tag {:name "checkin_date", :display_name "Checkin Date", :type "dimension", :dimension ["field-id" (data/id :checkins :date)]}
                                 nil)))
@@ -318,7 +320,8 @@
 (expect
   {:field {:name      "DATE"
            :parent_id nil
-           :table_id  (data/id :checkins)}
+           :table_id  (data/id :checkins)
+           :base_type :type/Date}
    :param [{:type   "date/range"
             :target ["dimension" ["template-tag" "checkin_date"]]
             :value  "2015-01-01~2016-09-01"}
@@ -701,7 +704,7 @@
 
 ;; Make sure defaults values get picked up for field filter clauses
 (expect
-  {:field {:name "DATE", :parent_id nil, :table_id (data/id :checkins)}
+  {:field {:name "DATE", :parent_id nil, :table_id (data/id :checkins), :base_type :type/Date}
    :param {:type   "date/all-options"
            :target ["dimension" ["template-tag" "checkin_date"]]
            :value  "past5days"}}